fix: update i18n - update registry for tools

web/src/lib/i18n/en.ts

@@ -204,24 +204,107 @@ export const en: Dict = {
 		toolUnknown: 'No tool is registered under "{id}".',
 	},
 	fields: {
+		alphaThreshold: "Alpha threshold",
 		amount: "Amount",
+		amplitude: "Amplitude",
+		anchor: "Anchor",
+		angle: "Angle",
+		axis: "Axis",
 		background: "Background",
+		backgroundColor: "Background color",
+		baseColor: "Base color",
 		blockSize: "Block size",
+		borderColor: "Border color",
+		brightness: "Brightness",
+		canvasSize: "Canvas size",
+		channel: "Channel",
+		channelPair: "Channel pair",
 		channelTolerance: "Channel tolerance",
 		color: "Color",
+		colorCount: "Color count",
+		colorList: "Color list",
+		colorPair: "Color pair",
 		colorTolerance: "Color tolerance",
+		cols: "Cols",
+		columns: "Columns",
+		component: "Component",
+		contrast: "Contrast",
+		count: "Count",
+		cropAreaSize: "Crop area size",
+		dateFormat: "Date format",
+		degrees: "Degrees",
+		depth: "Darken depth",
+		direction: "Direction",
+		display: "Display",
+		emoji: "Emoji",
 		fillColor: "Fill color",
+		fitMode: "Fit mode",
+		gamma: "Gamma",
+		gradient: "Gradient",
+		hexList: "Hex list",
 		highlightColor: "Highlight color",
+		imageSize: "Image size",
+		innerRadius: "Inner radius",
+		keepAspect: "Keep aspect",
+		keepSide: "Kept side",
+		layout: "Layout",
+		levels: "Levels",
+		lightness: "Lightness",
+		lineColor: "Line color",
+		lineWidth: "Line width",
 		lumaThreshold: "Luminance threshold",
+		margin: "Margin",
+		maxColors: "Max colors",
 		mode: "Mode",
+		offset: "Offset",
+		offsetX: "Offset X",
+		offsetY: "Offset Y",
 		opacity: "Opacity",
+		order: "Order",
+		orientation: "Orientation",
+		outerOnly: "Outer only",
+		padding: "Padding",
+		pattern: "Pattern",
+		percent: "Percent",
+		phase: "Phase",
+		plate: "Plate",
+		points: "Points",
+		position: "Position",
 		quality: "Quality",
 		radius: "Radius",
+		range: "Lightness range",
 		rarity: "Rarity",
+		ratio: "Aspect ratio",
+		rotation: "Rotation",
+		rows: "Rows",
+		saturation: "Saturation",
+		scalePct: "Zoom, %",
 		seed: "Seed",
+		shapeHeightPct: "Height, %",
+		shapeSize: "Shape size",
+		shapeWidthPct: "Width, %",
+		showText: "Show text",
+		skewX: "Skew X",
+		skewY: "Skew Y",
+		smooth: "Smooth",
+		spread: "Spread",
+		steps: "Steps",
+		stepX: "Step X",
+		stepY: "Step Y",
 		strength: "Strength",
+		strokeColor: "Stroke color",
+		targetColor: "Target color",
+		text: "Text",
+		textColor: "Text color",
+		textStyle: "Text style",
+		thickness: "Thickness",
 		threshold: "Threshold",
+		transparent: "Transparent",
+		transparentBg: "Transparent bg",
+		waves: "Waves",
 		width: "Width",
+		x: "X",
+		y: "Y",
 	},
 	groups: {
 		adjust: "Adjust",
@@ -318,5 +401,182 @@ export const en: Dict = {
 				mode: { mono: "Monochrome grain", color: "Color noise" },
 			},
 		},
+		"dithering-png": {
+			options: {
+				pattern: { "floyd-steinberg": "Floyd–Steinberg", bayer: "Bayer 4x4" },
+			},
+		},
+		"extract-channel-png": {
+			options: {
+				channel: { red: "Red", green: "Green", blue: "Blue" },
+			},
+		},
+		"swap-channels-png": {
+			options: {
+				pair: {
+					"r-g": "Red ↔ Green",
+					"r-b": "Red ↔ Blue",
+					"g-b": "Green ↔ Blue",
+				},
+			},
+		},
+		"decrease-color-count-png": {
+			options: {
+				maxColors: {
+					"2": "2",
+					"4": "4",
+					"8": "8",
+					"16": "16 (extreme)",
+					"32": "32",
+					"44": "44 (strong)",
+					"64": "64",
+					"96": "96 (balanced)",
+					"128": "128",
+					"192": "192 (light)",
+					"256": "256",
+				},
+			},
+		},
+		"png-to-hsl": {
+			options: {
+				display: { gray: "Grayscale", color: "Space as RGB" },
+			},
+		},
+		"png-to-hsv": {
+			options: {
+				display: { gray: "Grayscale", color: "Space as RGB" },
+			},
+		},
+		"png-to-hsi": {
+			options: {
+				display: { gray: "Grayscale", color: "Space as RGB" },
+			},
+		},
+		"png-to-cmyk": {
+			options: {
+				display: { gray: "Grayscale", color: "Space as RGB" },
+			},
+		},
+		"png-to-ycbcr": {
+			options: {
+				display: { gray: "Grayscale", color: "Space as RGB" },
+			},
+		},
+		"png-to-lab": {
+			options: {
+				display: { gray: "Grayscale", color: "Space as RGB" },
+			},
+		},
+		"rotate-png": {
+			options: {
+				angle: {
+					"90": "90° clockwise",
+					"180": "180°",
+					"270": "270° clockwise",
+				},
+			},
+		},
+		"flip-png": {
+			options: {
+				axis: {
+					horizontal: "Horizontal (left to right)",
+					vertical: "Vertical (top to bottom)",
+				},
+			},
+		},
+		"change-canvas-size-png": {
+			options: {
+				anchor: {
+					"top-left": "Top left",
+					"top-center": "Top center",
+					"top-right": "Top right",
+					"middle-left": "Middle left",
+					center: "Center",
+					"middle-right": "Middle right",
+					"bottom-left": "Bottom left",
+					"bottom-center": "Bottom center",
+					"bottom-right": "Bottom right",
+				},
+			},
+		},
+		"change-aspect-ratio-png": {
+			options: {
+				ratio: {
+					"1:1": "1:1",
+					"4:3": "4:3",
+					"3:4": "3:4",
+					"3:2": "3:2",
+					"2:3": "2:3",
+					"16:9": "16:9",
+					"9:16": "9:16",
+				},
+				mode: { crop: "Crop to fill", pad: "Pad to fit" },
+			},
+		},
+		"swap-orientation-png": {
+			options: {
+				target: { portrait: "Portrait", landscape: "Landscape" },
+			},
+		},
+		"symmetric-copy-png": {
+			options: {
+				axis: {
+					vertical: "Vertical (double width)",
+					horizontal: "Horizontal (double height)",
+				},
+				keepSide: {
+					left: "Left",
+					right: "Right",
+					top: "Top",
+					bottom: "Bottom",
+				},
+			},
+		},
+		"color-spectrum-png": {
+			options: {
+				direction: { horizontal: "Horizontal", vertical: "Vertical" },
+			},
+		},
+		"step-colors-png": {
+			options: {
+				layout: { grid: "Grid", strip: "Strip" },
+			},
+		},
+		"complementary-png": {
+			options: {
+				layout: { grid: "Grid", strip: "Strip" },
+			},
+		},
+		"triadic-png": {
+			options: {
+				layout: { grid: "Grid", strip: "Strip" },
+			},
+		},
+		"tetradic-png": {
+			options: {
+				layout: { grid: "Grid", strip: "Strip" },
+			},
+		},
+		"analogous-png": {
+			options: {
+				layout: { grid: "Grid", strip: "Strip" },
+			},
+		},
+		"monochromatic-png": {
+			options: {
+				layout: { grid: "Grid", strip: "Strip" },
+			},
+		},
+		"shades-png": {
+			options: {
+				layout: { grid: "Grid", strip: "Strip" },
+			},
+		},
+		"sort-colors-png": {
+			options: {
+				order: { hue: "Hue", luma: "Brightness", sat: "Saturation" },
+				layout: { grid: "Grid", strip: "Strip" },
+			},
+		},
 	},
 };

web/src/lib/i18n/ru.ts

@@ -205,24 +205,107 @@ export const ru: Dict = {
 		toolUnknown: "Инструмента с id «{id}» нет в реестре.",
 	},
 	fields: {
+		alphaThreshold: "Порог альфы",
 		amount: "Количество",
+		amplitude: "Амплитуда",
+		anchor: "Якорь",
+		angle: "Угол",
+		axis: "Ось",
 		background: "Фон",
+		backgroundColor: "Цвет фона",
+		baseColor: "Базовый цвет",
 		blockSize: "Размер блока",
+		borderColor: "Цвет рамки",
+		brightness: "Яркость",
+		canvasSize: "Размер холста",
+		channel: "Канал",
+		channelPair: "Пара каналов",
 		channelTolerance: "Допуск по каналам",
 		color: "Цвет",
+		colorCount: "Количество цветов",
+		colorList: "Список цветов",
+		colorPair: "Пара цветов",
 		colorTolerance: "Допуск похожести",
+		cols: "Колонки",
+		columns: "Столбцы",
+		component: "Компонент",
+		contrast: "Контраст",
+		count: "Количество",
+		cropAreaSize: "Размер области",
+		dateFormat: "Формат даты",
+		degrees: "Градусы",
+		depth: "Глубина затемнения",
+		direction: "Направление",
+		display: "Отображение",
+		emoji: "Эмодзи",
 		fillColor: "Цвет заливки",
+		fitMode: "Режим вписывания",
+		gamma: "Гамма",
+		gradient: "Градиент",
+		hexList: "Список hex-цветов",
 		highlightColor: "Цвет подсветки",
+		imageSize: "Размер изображения",
+		innerRadius: "Внутренний радиус",
+		keepAspect: "Сохранять пропорции",
+		keepSide: "Остающаяся сторона",
+		layout: "Раскладка",
+		levels: "Уровни",
+		lightness: "Светлота",
+		lineColor: "Цвет линий",
+		lineWidth: "Толщина линий",
 		lumaThreshold: "Порог яркости",
+		margin: "Отступ",
+		maxColors: "Максимум цветов",
 		mode: "Режим",
+		offset: "Смещение",
+		offsetX: "Сдвиг по X",
+		offsetY: "Сдвиг по Y",
 		opacity: "Непрозрачность",
+		order: "Порядок",
+		orientation: "Ориентация",
+		outerOnly: "Только с краёв",
+		padding: "Поля",
+		pattern: "Узор",
+		percent: "Процент",
+		phase: "Фаза",
+		plate: "Плашка",
+		points: "Количество лучей",
+		position: "Позиция",
 		quality: "Качество",
 		radius: "Радиус",
+		range: "Диапазон светлоты",
 		rarity: "Максимум повторов",
+		ratio: "Соотношение сторон",
+		rotation: "Поворот",
+		rows: "Строки",
+		saturation: "Насыщенность",
+		scalePct: "Масштаб, %",
 		seed: "Сид",
+		shapeHeightPct: "Высота, %",
+		shapeSize: "Размер фигуры",
+		shapeWidthPct: "Ширина, %",
+		showText: "Показывать текст",
+		skewX: "Наклон по X",
+		skewY: "Наклон по Y",
+		smooth: "Сглаживание",
+		spread: "Разброс",
+		steps: "Шаги",
+		stepX: "Шаг по X",
+		stepY: "Шаг по Y",
 		strength: "Сила",
+		strokeColor: "Цвет обводки",
+		targetColor: "Целевой цвет",
+		text: "Текст",
+		textColor: "Цвет текста",
+		textStyle: "Стиль текста",
+		thickness: "Толщина",
 		threshold: "Порог",
+		transparent: "Прозрачный",
+		transparentBg: "Прозрачный фон",
+		waves: "Волны",
 		width: "Ширина",
+		x: "X",
+		y: "Y",
 	},
 	groups: {
 		adjust: "Коррекция",
@@ -441,6 +524,36 @@ export const ru: Dict = {
 				},
 			},
 		},
+		"png-to-hsl": {
+			options: {
+				display: { gray: "Оттенки серого", color: "Пространство как RGB" },
+			},
+		},
+		"png-to-hsv": {
+			options: {
+				display: { gray: "Оттенки серого", color: "Пространство как RGB" },
+			},
+		},
+		"png-to-hsi": {
+			options: {
+				display: { gray: "Оттенки серого", color: "Пространство как RGB" },
+			},
+		},
+		"png-to-cmyk": {
+			options: {
+				display: { gray: "Оттенки серого", color: "Пространство как RGB" },
+			},
+		},
+		"png-to-ycbcr": {
+			options: {
+				display: { gray: "Оттенки серого", color: "Пространство как RGB" },
+			},
+		},
+		"png-to-lab": {
+			options: {
+				display: { gray: "Оттенки серого", color: "Пространство как RGB" },
+			},
+		},
 		cmyk: {
 			title: "Конвертировать PNG в цвета CMYK",
 			description:

web/src/lib/registry-schema.ts

@@ -11,8 +11,8 @@
 //     с полями `P`, а `Field<P[K]>` тип-проверялся на соответствие `P[K]`.
 // Ошибки компилятора ловят расхождения между интерфейсом Params и схемой.
 
-import type { Position9 } from "./core/textdraw";
 import type { TextFont } from "./core/domText";
+import type { Position9 } from "./core/textdraw";
 
 /**
  * Общее необязательное поле всех спеков: ключ подписи поля в словаре.
@@ -269,6 +269,7 @@ export const field = {
 		spec: { kind: "checkbox", ...s },
 	}),
 	dimension: (s: {
+		label?: string;
 		min: number;
 		max: number;
 		width: number;
@@ -276,13 +277,18 @@ export const field = {
 	}): Field<Dimension> => ({
 		spec: { kind: "dimension", ...s },
 	}),
-	colorPair: (s: { from: string; to: string }): Field<ColorPair> => ({
+	colorPair: (s: {
+		label?: string;
+		from: string;
+		to: string;
+	}): Field<ColorPair> => ({
 		spec: { kind: "color-pair", ...s },
 	}),
-	colors: (s: { default: string[] }): Field<ColorList> => ({
+	colors: (s: { label?: string; default: string[] }): Field<ColorList> => ({
 		spec: { kind: "colors", ...s },
 	}),
 	offset: (s: {
+		label?: string;
 		min: number;
 		max: number;
 		x: number;
@@ -290,10 +296,11 @@ export const field = {
 	}): Field<Offset> => ({
 		spec: { kind: "offset", ...s },
 	}),
-	position9: (s: { default: Position9 }): Field<Position9> => ({
+	position9: (s: { label?: string; default: Position9 }): Field<Position9> => ({
 		spec: { kind: "position9", ...s },
 	}),
 	fontStyle: (s: {
+		label?: string;
 		min: number;
 		max: number;
 		size: number;
@@ -304,6 +311,7 @@ export const field = {
 		spec: { kind: "font-style", ...s },
 	}),
 	plate: (s: {
+		label?: string;
 		enabled: boolean;
 		color: string;
 		opacity: number;
@@ -311,6 +319,7 @@ export const field = {
 		spec: { kind: "plate", ...s },
 	}),
 	gradient: (s: {
+		label?: string;
 		from: string;
 		to: string;
 		angle: number;

web/src/lib/registry/alpha.ts

@@ -1,6 +1,3 @@
-import { imgTool, type ToolEntry } from "./types";
-import { field, toolSchema } from "../registry-schema";
-import type { Offset } from "../registry-schema";
 import {
 	extractAlphaMask,
 	flattenOntoColor,
@@ -27,6 +24,9 @@ import {
 	starTest,
 	wavyTest,
 } from "../core/shapes";
+import type { Offset } from "../registry-schema";
+import { field, toolSchema } from "../registry-schema";
+import { imgTool, type ToolEntry } from "./types";
 
 interface AddStrokeParams {
 	color: string;
@@ -34,8 +34,14 @@ interface AddStrokeParams {
 }
 
 export const addStrokeSchema = toolSchema<AddStrokeParams>({
-	color: field.color({ default: "#ff0000" }),
-	thickness: field.slider({ min: 1, max: 10, step: 1, default: 3 }),
+	color: field.color({ label: "fields.strokeColor", default: "#ff0000" }),
+	thickness: field.slider({
+		label: "fields.thickness",
+		min: 1,
+		max: 10,
+		step: 1,
+		default: 3,
+	}),
 });
 
 const addStroke: ToolEntry<AddStrokeParams> = {
@@ -55,8 +61,14 @@ interface FindContourParams {
 }
 
 export const findContourSchema = toolSchema<FindContourParams>({
-	color: field.color({ default: "#000000" }),
-	thickness: field.slider({ min: 1, max: 5, step: 1, default: 1 }),
+	color: field.color({ label: "fields.strokeColor", default: "#000000" }),
+	thickness: field.slider({
+		label: "fields.thickness",
+		min: 1,
+		max: 5,
+		step: 1,
+		default: 1,
+	}),
 });
 
 const findContour: ToolEntry<FindContourParams> = {
@@ -76,8 +88,14 @@ interface RemoveColorParams {
 }
 
 export const removeColorSchema = toolSchema<RemoveColorParams>({
-	targetColor: field.color({ default: "#00ff00" }),
-	tolerance: field.slider({ min: 0, max: 100, step: 1, default: 10 }),
+	targetColor: field.color({ label: "fields.targetColor", default: "#00ff00" }),
+	tolerance: field.slider({
+		label: "fields.colorTolerance",
+		min: 0,
+		max: 100,
+		step: 1,
+		default: 10,
+	}),
 });
 
 const removeColor: ToolEntry<RemoveColorParams> = {
@@ -98,8 +116,20 @@ interface CircleMaskParams {
 
 const circleMaskSchema = toolSchema<CircleMaskParams>(
 	{
-		size: field.slider({ min: 20, max: 100, step: 1, default: 100 }),
-		offset: field.offset({ min: -50, max: 50, x: 0, y: 0 }),
+		size: field.slider({
+			label: "fields.shapeSize",
+			min: 20,
+			max: 100,
+			step: 1,
+			default: 100,
+		}),
+		offset: field.offset({
+			label: "fields.offset",
+			min: -50,
+			max: 50,
+			x: 0,
+			y: 0,
+		}),
 	},
 	{
 		layout: {
@@ -137,9 +167,27 @@ interface SquareMaskParams {
 
 const squareMaskSchema = toolSchema<SquareMaskParams>(
 	{
-		widthPct: field.slider({ min: 10, max: 100, step: 1, default: 100 }),
-		heightPct: field.slider({ min: 10, max: 100, step: 1, default: 100 }),
-		offset: field.offset({ min: -50, max: 50, x: 0, y: 0 }),
+		widthPct: field.slider({
+			label: "fields.shapeWidthPct",
+			min: 10,
+			max: 100,
+			step: 1,
+			default: 100,
+		}),
+		heightPct: field.slider({
+			label: "fields.shapeHeightPct",
+			min: 10,
+			max: 100,
+			step: 1,
+			default: 100,
+		}),
+		offset: field.offset({
+			label: "fields.offset",
+			min: -50,
+			max: 50,
+			x: 0,
+			y: 0,
+		}),
 	},
 	{
 		layout: {
@@ -183,11 +231,41 @@ interface StarMaskParams {
 
 const starMaskSchema = toolSchema<StarMaskParams>(
 	{
-		points: field.slider({ min: 3, max: 12, step: 1, default: 5 }),
-		innerRadius: field.slider({ min: 10, max: 90, step: 1, default: 45 }),
-		size: field.slider({ min: 20, max: 100, step: 1, default: 100 }),
-		rotation: field.slider({ min: -180, max: 180, step: 1, default: 0 }),
-		offset: field.offset({ min: -50, max: 50, x: 0, y: 0 }),
+		points: field.slider({
+			label: "fields.points",
+			min: 3,
+			max: 12,
+			step: 1,
+			default: 5,
+		}),
+		innerRadius: field.slider({
+			label: "fields.innerRadius",
+			min: 10,
+			max: 90,
+			step: 1,
+			default: 45,
+		}),
+		size: field.slider({
+			label: "fields.shapeSize",
+			min: 20,
+			max: 100,
+			step: 1,
+			default: 100,
+		}),
+		rotation: field.slider({
+			label: "fields.rotation",
+			min: -180,
+			max: 180,
+			step: 1,
+			default: 0,
+		}),
+		offset: field.offset({
+			label: "fields.offset",
+			min: -50,
+			max: 50,
+			x: 0,
+			y: 0,
+		}),
 	},
 	{
 		layout: {
@@ -231,11 +309,41 @@ interface WavyMaskParams {
 
 const wavyMaskSchema = toolSchema<WavyMaskParams>(
 	{
-		size: field.slider({ min: 20, max: 100, step: 1, default: 90 }),
-		amplitude: field.slider({ min: 2, max: 30, step: 1, default: 8 }),
-		waves: field.slider({ min: 3, max: 24, step: 1, default: 8 }),
-		phase: field.slider({ min: 0, max: 360, step: 1, default: 0 }),
-		offset: field.offset({ min: -50, max: 50, x: 0, y: 0 }),
+		size: field.slider({
+			label: "fields.shapeSize",
+			min: 20,
+			max: 100,
+			step: 1,
+			default: 90,
+		}),
+		amplitude: field.slider({
+			label: "fields.amplitude",
+			min: 2,
+			max: 30,
+			step: 1,
+			default: 8,
+		}),
+		waves: field.slider({
+			label: "fields.waves",
+			min: 3,
+			max: 24,
+			step: 1,
+			default: 8,
+		}),
+		phase: field.slider({
+			label: "fields.phase",
+			min: 0,
+			max: 360,
+			step: 1,
+			default: 0,
+		}),
+		offset: field.offset({
+			label: "fields.offset",
+			min: -50,
+			max: 50,
+			x: 0,
+			y: 0,
+		}),
 	},
 	{
 		layout: {
@@ -289,7 +397,13 @@ interface SetAlphaChannelParams {
 }
 
 export const setAlphaChannelSchema = toolSchema<SetAlphaChannelParams>({
-	percent: field.slider({ min: 0, max: 100, step: 1, default: 100 }),
+	percent: field.slider({
+		label: "fields.percent",
+		min: 0,
+		max: 100,
+		step: 1,
+		default: 100,
+	}),
 });
 
 const setAlphaChannelTool: ToolEntry<SetAlphaChannelParams> = {
@@ -319,7 +433,13 @@ interface RoundCornersParams {
 }
 
 export const roundCornersSchema = toolSchema<RoundCornersParams>({
-	radius: field.slider({ min: 0, max: 50, step: 1, default: 10 }),
+	radius: field.slider({
+		label: "fields.radius",
+		min: 0,
+		max: 50,
+		step: 1,
+		default: 10,
+	}),
 });
 
 const roundCornersTool: ToolEntry<RoundCornersParams> = {
@@ -354,10 +474,22 @@ interface RemoveBackgroundParams {
 
 export const removeBackgroundSchema = toolSchema<RemoveBackgroundParams>(
 	{
-		color: field.color({ default: "#ffffff" }),
-		tolerance: field.slider({ min: 0, max: 100, step: 1, default: 10 }),
-		outerOnly: field.checkbox({ default: true }),
-		smooth: field.slider({ min: 0, max: 8, step: 1, default: 1 }),
+		color: field.color({ label: "fields.backgroundColor", default: "#ffffff" }),
+		tolerance: field.slider({
+			label: "fields.colorTolerance",
+			min: 0,
+			max: 100,
+			step: 1,
+			default: 10,
+		}),
+		outerOnly: field.checkbox({ label: "fields.outerOnly", default: true }),
+		smooth: field.slider({
+			label: "fields.smooth",
+			min: 0,
+			max: 8,
+			step: 1,
+			default: 1,
+		}),
 	},
 	{
 		layout: {
@@ -396,7 +528,13 @@ interface MakeThickerParams {
 }
 
 export const makeThickerSchema = toolSchema<MakeThickerParams>({
-	radius: field.slider({ min: 1, max: 10, step: 1, default: 2 }),
+	radius: field.slider({
+		label: "fields.radius",
+		min: 1,
+		max: 10,
+		step: 1,
+		default: 2,
+	}),
 });
 
 const makeThickerTool: ToolEntry<MakeThickerParams> = {
@@ -414,7 +552,13 @@ interface MakeThinnerParams {
 }
 
 export const makeThinnerSchema = toolSchema<MakeThinnerParams>({
-	radius: field.slider({ min: 1, max: 10, step: 1, default: 1 }),
+	radius: field.slider({
+		label: "fields.radius",
+		min: 1,
+		max: 10,
+		step: 1,
+		default: 1,
+	}),
 });
 
 const makeThinnerTool: ToolEntry<MakeThinnerParams> = {
@@ -432,7 +576,13 @@ interface FeatherEdgesParams {
 }
 
 export const featherEdgesSchema = toolSchema<FeatherEdgesParams>({
-	radius: field.slider({ min: 1, max: 20, step: 1, default: 3 }),
+	radius: field.slider({
+		label: "fields.radius",
+		min: 1,
+		max: 20,
+		step: 1,
+		default: 3,
+	}),
 });
 
 const featherEdgesTool: ToolEntry<FeatherEdgesParams> = {
@@ -451,7 +601,13 @@ interface CleanEdgesParams {
 }
 
 export const cleanEdgesSchema = toolSchema<CleanEdgesParams>({
-	radius: field.slider({ min: 1, max: 10, step: 1, default: 3 }),
+	radius: field.slider({
+		label: "fields.radius",
+		min: 1,
+		max: 10,
+		step: 1,
+		default: 3,
+	}),
 });
 
 const cleanEdgesTool: ToolEntry<CleanEdgesParams> = {
@@ -470,7 +626,13 @@ interface HardenAlphaParams {
 }
 
 export const hardenAlphaSchema = toolSchema<HardenAlphaParams>({
-	threshold: field.slider({ min: 0, max: 100, step: 1, default: 50 }),
+	threshold: field.slider({
+		label: "fields.alphaThreshold",
+		min: 0,
+		max: 100,
+		step: 1,
+		default: 50,
+	}),
 });
 
 const hardenAlphaTool: ToolEntry<HardenAlphaParams> = {
@@ -489,7 +651,13 @@ interface DespeckleAlphaParams {
 }
 
 export const despeckleAlphaSchema = toolSchema<DespeckleAlphaParams>({
-	radius: field.slider({ min: 1, max: 3, step: 1, default: 1 }),
+	radius: field.slider({
+		label: "fields.radius",
+		min: 1,
+		max: 3,
+		step: 1,
+		default: 1,
+	}),
 });
 
 const despeckleAlphaTool: ToolEntry<DespeckleAlphaParams> = {
@@ -508,7 +676,13 @@ interface CloseHolesParams {
 }
 
 export const closeHolesSchema = toolSchema<CloseHolesParams>({
-	radius: field.slider({ min: 1, max: 3, step: 1, default: 1 }),
+	radius: field.slider({
+		label: "fields.radius",
+		min: 1,
+		max: 3,
+		step: 1,
+		default: 1,
+	}),
 });
 
 const closeHolesTool: ToolEntry<CloseHolesParams> = {

web/src/lib/registry/color.ts

@@ -29,8 +29,18 @@ interface TwoColorsParams {
 }
 
 export const twoColorsSchema = toolSchema<TwoColorsParams>({
-	pair: field.colorPair({ from: "#ffffff", to: "#000000" }),
-	threshold: field.slider({ min: 0, max: 100, step: 1, default: 50 }),
+	pair: field.colorPair({
+		label: "fields.colorPair",
+		from: "#ffffff",
+		to: "#000000",
+	}),
+	threshold: field.slider({
+		label: "fields.threshold",
+		min: 0,
+		max: 100,
+		step: 1,
+		default: 50,
+	}),
 });
 
 const twoColorsTool: ToolEntry<TwoColorsParams> = {
@@ -49,7 +59,13 @@ interface GammaParams {
 }
 
 export const gammaSchema = toolSchema<GammaParams>({
-	value: field.slider({ min: 0.1, max: 3, step: 0.05, default: 1 }),
+	value: field.slider({
+		label: "fields.gamma",
+		min: 0.1,
+		max: 3,
+		step: 0.05,
+		default: 1,
+	}),
 });
 
 const gammaTool: ToolEntry<GammaParams> = {
@@ -68,7 +84,13 @@ interface TemperatureParams {
 }
 
 export const temperatureSchema = toolSchema<TemperatureParams>({
-	percent: field.slider({ min: -100, max: 100, step: 1, default: 0 }),
+	percent: field.slider({
+		label: "fields.percent",
+		min: -100,
+		max: 100,
+		step: 1,
+		default: 0,
+	}),
 });
 
 const temperatureTool: ToolEntry<TemperatureParams> = {
@@ -88,8 +110,14 @@ interface TintParams {
 }
 
 export const tintSchema = toolSchema<TintParams>({
-	color: field.color({ default: "#ffb060" }),
-	strength: field.slider({ min: 0, max: 100, step: 1, default: 30 }),
+	color: field.color({ label: "fields.color", default: "#ffb060" }),
+	strength: field.slider({
+		label: "fields.strength",
+		min: 0,
+		max: 100,
+		step: 1,
+		default: 30,
+	}),
 });
 
 const tintTool: ToolEntry<TintParams> = {
@@ -108,7 +136,13 @@ interface QuantizeParams {
 }
 
 export const quantizeSchema = toolSchema<QuantizeParams>({
-	colors: field.slider({ min: 2, max: 64, step: 1, default: 16 }),
+	colors: field.slider({
+		label: "fields.colorCount",
+		min: 2,
+		max: 64,
+		step: 1,
+		default: 16,
+	}),
 });
 
 const quantizeTool: ToolEntry<QuantizeParams> = {
@@ -127,7 +161,7 @@ interface CustomPaletteParams {
 }
 
 export const customPaletteSchema = toolSchema<CustomPaletteParams>({
-	colors: field.text({ default: "#000000,#ffffff" }),
+	colors: field.text({ label: "fields.hexList", default: "#000000,#ffffff" }),
 });
 
 const customPalette: ToolEntry<CustomPaletteParams> = {
@@ -147,8 +181,15 @@ interface DitheringParams {
 }
 
 export const ditheringSchema = toolSchema<DitheringParams>({
-	colors: field.slider({ min: 2, max: 16, step: 1, default: 4 }),
+	colors: field.slider({
+		label: "fields.colorCount",
+		min: 2,
+		max: 16,
+		step: 1,
+		default: 4,
+	}),
 	pattern: field.select({
+		label: "fields.pattern",
 		default: "floyd-steinberg",
 		options: [
 			{ value: "floyd-steinberg", label: "Floyd–Steinberg" },
@@ -202,8 +243,20 @@ interface BrightnessContrastParams {
 
 export const brightnessContrastSchema = toolSchema<BrightnessContrastParams>(
 	{
-		brightness: field.slider({ min: -100, max: 100, step: 1, default: 0 }),
-		contrast: field.slider({ min: -100, max: 100, step: 1, default: 0 }),
+		brightness: field.slider({
+			label: "fields.brightness",
+			min: -100,
+			max: 100,
+			step: 1,
+			default: 0,
+		}),
+		contrast: field.slider({
+			label: "fields.contrast",
+			min: -100,
+			max: 100,
+			step: 1,
+			default: 0,
+		}),
 	},
 	{
 		layout: {
@@ -230,7 +283,13 @@ interface OpacityParams {
 }
 
 export const opacitySchema = toolSchema<OpacityParams>({
-	percent: field.slider({ min: 0, max: 100, step: 1, default: 100 }),
+	percent: field.slider({
+		label: "fields.percent",
+		min: 0,
+		max: 100,
+		step: 1,
+		default: 100,
+	}),
 });
 
 const opacityTool: ToolEntry<OpacityParams> = {
@@ -261,7 +320,13 @@ interface HueShiftParams {
 }
 
 export const hueShiftSchema = toolSchema<HueShiftParams>({
-	degrees: field.slider({ min: -180, max: 180, step: 1, default: 0 }),
+	degrees: field.slider({
+		label: "fields.degrees",
+		min: -180,
+		max: 180,
+		step: 1,
+		default: 0,
+	}),
 });
 
 const hueShiftTool: ToolEntry<HueShiftParams> = {
@@ -281,6 +346,7 @@ interface ExtractChannelParams {
 
 export const extractChannelSchema = toolSchema<ExtractChannelParams>({
 	channel: field.select({
+		label: "fields.channel",
 		default: "red",
 		options: [
 			{ value: "red", label: "Red" },
@@ -307,6 +373,7 @@ interface SwapChannelsParams {
 
 export const swapChannelsSchema = toolSchema<SwapChannelsParams>({
 	pair: field.select({
+		label: "fields.channelPair",
 		default: "r-g",
 		options: [
 			{ value: "r-g", label: "Red ↔ Green" },
@@ -332,7 +399,13 @@ interface BlackAndWhiteParams {
 }
 
 export const blackAndWhiteSchema = toolSchema<BlackAndWhiteParams>({
-	threshold: field.slider({ min: 0, max: 100, step: 1, default: 50 }),
+	threshold: field.slider({
+		label: "fields.threshold",
+		min: 0,
+		max: 100,
+		step: 1,
+		default: 50,
+	}),
 });
 
 const blackAndWhiteTool: ToolEntry<BlackAndWhiteParams> = {
@@ -351,7 +424,13 @@ interface PosterizeParams {
 }
 
 export const posterizeSchema = toolSchema<PosterizeParams>({
-	levels: field.slider({ min: 2, max: 16, step: 1, default: 4 }),
+	levels: field.slider({
+		label: "fields.levels",
+		min: 2,
+		max: 16,
+		step: 1,
+		default: 4,
+	}),
 });
 
 const posterizeTool: ToolEntry<PosterizeParams> = {
@@ -384,6 +463,7 @@ interface DecreaseColorCountParams {
 
 export const decreaseColorCountSchema = toolSchema<DecreaseColorCountParams>({
 	maxColors: field.select({
+		label: "fields.maxColors",
 		default: "16",
 		options: [
 			{ value: "2", label: "2" },
@@ -479,6 +559,7 @@ function channelEntries(): ToolEntry<ChannelParams>[] {
 			category: "color",
 			schema: toolSchema<ChannelParams>({
 				component: field.select({
+					label: "fields.component",
 					default: components[0],
 					options: components.map((c) => ({
 						value: c,
@@ -486,6 +567,7 @@ function channelEntries(): ToolEntry<ChannelParams>[] {
 					})),
 				}),
 				display: field.select({
+					label: "fields.display",
 					default: "gray",
 					options: [
 						{ value: "gray", label: "Grayscale" },

web/src/lib/registry/generate.ts

@@ -80,9 +80,15 @@ interface CreateEmptyParams {
 
 export const createEmptySchema = toolSchema<CreateEmptyParams>(
 	{
-		size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }),
-		transparent: field.checkbox({ default: true }),
-		color: field.color({ default: "#ffffff" }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 1,
+			max: 20000,
+			width: 800,
+			height: 600,
+		}),
+		transparent: field.checkbox({ label: "fields.transparent", default: true }),
+		color: field.color({ label: "fields.fillColor", default: "#ffffff" }),
 	},
 	{
 		layout: {
@@ -118,8 +124,14 @@ interface SingleColorParams {
 }
 
 export const singleColorSchema = toolSchema<SingleColorParams>({
-	size: field.dimension({ min: 1, max: 20000, width: 256, height: 256 }),
-	color: field.color({ default: "#ff0000" }),
+	size: field.dimension({
+		label: "fields.canvasSize",
+		min: 1,
+		max: 20000,
+		width: 256,
+		height: 256,
+	}),
+	color: field.color({ label: "fields.color", default: "#ff0000" }),
 });
 
 const singleColor: ToolEntry<SingleColorParams> = {
@@ -142,8 +154,20 @@ interface RandomNoiseParams {
 }
 
 export const randomNoiseSchema = toolSchema<RandomNoiseParams>({
-	size: field.dimension({ min: 1, max: 5000, width: 512, height: 512 }),
-	seed: field.number({ min: 0, max: 999999999, step: 1, default: 1 }),
+	size: field.dimension({
+		label: "fields.canvasSize",
+		min: 1,
+		max: 5000,
+		width: 512,
+		height: 512,
+	}),
+	seed: field.number({
+		label: "fields.seed",
+		min: 0,
+		max: 999999999,
+		step: 1,
+		default: 1,
+	}),
 });
 
 const randomNoise: ToolEntry<RandomNoiseParams> = {
@@ -168,8 +192,19 @@ interface LinearGradientParams {
 
 export const linearGradientSchema = toolSchema<LinearGradientParams>(
 	{
-		size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }),
-		gradient: field.gradient({ from: "#000000", to: "#ffffff", angle: 0 }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 1,
+			max: 20000,
+			width: 800,
+			height: 600,
+		}),
+		gradient: field.gradient({
+			label: "fields.gradient",
+			from: "#000000",
+			to: "#ffffff",
+			angle: 0,
+		}),
 	},
 	{
 		layout: {
@@ -211,16 +246,35 @@ interface ColorSpectrumParams {
 
 export const colorSpectrumSchema = toolSchema<ColorSpectrumParams>(
 	{
-		size: field.dimension({ min: 1, max: 5000, width: 1024, height: 128 }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 1,
+			max: 5000,
+			width: 1024,
+			height: 128,
+		}),
 		direction: field.select({
+			label: "fields.direction",
 			default: "horizontal",
 			options: [
 				{ value: "horizontal", label: "Horizontal" },
 				{ value: "vertical", label: "Vertical" },
 			],
 		}),
-		saturation: field.slider({ min: 0, max: 100, step: 1, default: 100 }),
-		lightness: field.slider({ min: 0, max: 100, step: 1, default: 50 }),
+		saturation: field.slider({
+			label: "fields.saturation",
+			min: 0,
+			max: 100,
+			step: 1,
+			default: 100,
+		}),
+		lightness: field.slider({
+			label: "fields.lightness",
+			min: 0,
+			max: 100,
+			step: 1,
+			default: 50,
+		}),
 	},
 	{
 		layout: {
@@ -258,9 +312,27 @@ interface RandomColorsParams {
 
 export const randomColorsSchema = toolSchema<RandomColorsParams>(
 	{
-		size: field.dimension({ min: 1, max: 5000, width: 512, height: 512 }),
-		blockSize: field.slider({ min: 4, max: 256, step: 2, default: 64 }),
-		seed: field.number({ min: 0, max: 999999999, step: 1, default: 7 }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 1,
+			max: 5000,
+			width: 512,
+			height: 512,
+		}),
+		blockSize: field.slider({
+			label: "fields.blockSize",
+			min: 4,
+			max: 256,
+			step: 2,
+			default: 64,
+		}),
+		seed: field.number({
+			label: "fields.seed",
+			min: 0,
+			max: 999999999,
+			step: 1,
+			default: 7,
+		}),
 	},
 	{
 		layout: {
@@ -298,12 +370,39 @@ interface DrawGridParams {
 
 export const drawGridSchema = toolSchema<DrawGridParams>(
 	{
-		size: field.dimension({ min: 1, max: 5000, width: 512, height: 512 }),
-		cols: field.slider({ min: 1, max: 64, step: 1, default: 8 }),
-		rows: field.slider({ min: 1, max: 64, step: 1, default: 8 }),
-		lineWidth: field.slider({ min: 1, max: 40, step: 1, default: 2 }),
-		color: field.color({ default: "#111318" }),
-		transparentBg: field.checkbox({ default: true }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 1,
+			max: 5000,
+			width: 512,
+			height: 512,
+		}),
+		cols: field.slider({
+			label: "fields.cols",
+			min: 1,
+			max: 64,
+			step: 1,
+			default: 8,
+		}),
+		rows: field.slider({
+			label: "fields.rows",
+			min: 1,
+			max: 64,
+			step: 1,
+			default: 8,
+		}),
+		lineWidth: field.slider({
+			label: "fields.lineWidth",
+			min: 1,
+			max: 40,
+			step: 1,
+			default: 2,
+		}),
+		color: field.color({ label: "fields.lineColor", default: "#111318" }),
+		transparentBg: field.checkbox({
+			label: "fields.transparentBg",
+			default: true,
+		}),
 	},
 	{
 		layout: {
@@ -351,10 +450,19 @@ interface PlaceholderParams {
 
 export const placeholderSchema = toolSchema<PlaceholderParams>(
 	{
-		size: field.dimension({ min: 1, max: 5000, width: 800, height: 400 }),
-		backgroundColor: field.color({ default: "#dfe2e8" }),
-		color: field.color({ default: "#5c6470" }),
-		showText: field.checkbox({ default: true }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 1,
+			max: 5000,
+			width: 800,
+			height: 400,
+		}),
+		backgroundColor: field.color({
+			label: "fields.backgroundColor",
+			default: "#dfe2e8",
+		}),
+		color: field.color({ label: "fields.textColor", default: "#5c6470" }),
+		showText: field.checkbox({ label: "fields.showText", default: true }),
 	},
 	{
 		layout: {
@@ -406,8 +514,18 @@ interface BlendTwoParams {
 }
 
 export const blendTwoSchema = toolSchema<BlendTwoParams>({
-	pair: field.colorPair({ from: "#000000", to: "#ffffff" }),
-	width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }),
+	pair: field.colorPair({
+		label: "fields.colorPair",
+		from: "#000000",
+		to: "#ffffff",
+	}),
+	width: field.slider({
+		label: "fields.width",
+		min: 128,
+		max: 1024,
+		step: 16,
+		default: 512,
+	}),
 });
 
 const blendTwo: ToolEntry<BlendTwoParams> = {
@@ -429,10 +547,27 @@ interface StepColorsParams {
 
 export const stepColorsSchema = toolSchema<StepColorsParams>(
 	{
-		pair: field.colorPair({ from: "#000000", to: "#ffffff" }),
-		steps: field.slider({ min: 2, max: 12, step: 1, default: 6 }),
-		width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }),
+		pair: field.colorPair({
+			label: "fields.colorPair",
+			from: "#000000",
+			to: "#ffffff",
+		}),
+		steps: field.slider({
+			label: "fields.steps",
+			min: 2,
+			max: 12,
+			step: 1,
+			default: 6,
+		}),
+		width: field.slider({
+			label: "fields.width",
+			min: 128,
+			max: 1024,
+			step: 16,
+			default: 512,
+		}),
 		layout: field.select({
+			label: "fields.layout",
 			default: "grid",
 			options: [
 				{ value: "grid", label: "Grid" },
@@ -476,8 +611,14 @@ interface EmojiToPngParams {
 }
 
 export const emojiToPngSchema = toolSchema<EmojiToPngParams>({
-	emoji: field.text({ default: "😀" }),
-	size: field.slider({ min: 32, max: 1024, step: 16, default: 256 }),
+	emoji: field.text({ label: "fields.emoji", default: "😀" }),
+	size: field.slider({
+		label: "fields.imageSize",
+		min: 32,
+		max: 1024,
+		step: 16,
+		default: 256,
+	}),
 });
 
 const emojiToPng: ToolEntry<EmojiToPngParams> = {
@@ -498,8 +639,20 @@ interface ColorWheelParams {
 }
 
 export const colorWheelSchema = toolSchema<ColorWheelParams>({
-	size: field.slider({ min: 128, max: 1024, step: 16, default: 512 }),
-	lightness: field.slider({ min: 0, max: 100, step: 1, default: 50 }),
+	size: field.slider({
+		label: "fields.imageSize",
+		min: 128,
+		max: 1024,
+		step: 16,
+		default: 512,
+	}),
+	lightness: field.slider({
+		label: "fields.lightness",
+		min: 0,
+		max: 100,
+		step: 1,
+		default: 50,
+	}),
 });
 
 const colorWheelTool: ToolEntry<ColorWheelParams> = {
@@ -520,9 +673,16 @@ interface PaletteBaseParams {
 }
 
 const paletteBaseSchema = {
-	baseColor: field.color({ default: "#2563eb" }),
-	width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }),
+	baseColor: field.color({ label: "fields.baseColor", default: "#2563eb" }),
+	width: field.slider({
+		label: "fields.width",
+		min: 128,
+		max: 1024,
+		step: 16,
+		default: 512,
+	}),
 	layout: field.select({
+		label: "fields.layout",
 		default: "grid",
 		options: [
 			{ value: "grid", label: "Grid" },
@@ -568,7 +728,7 @@ const triadicTool: ToolEntry<PaletteBaseParams> = {
 	schema: toolSchema<PaletteBaseParams>(
 		{
 			...paletteBaseSchema,
-			baseColor: field.color({ default: "#ff0000" }),
+			baseColor: field.color({ label: "fields.baseColor", default: "#ff0000" }),
 		},
 		{ ...paletteLayoutGroup },
 	),
@@ -587,7 +747,7 @@ const tetradicTool: ToolEntry<PaletteBaseParams> = {
 	schema: toolSchema<PaletteBaseParams>(
 		{
 			...paletteBaseSchema,
-			baseColor: field.color({ default: "#8000ff" }),
+			baseColor: field.color({ label: "fields.baseColor", default: "#8000ff" }),
 		},
 		{ ...paletteLayoutGroup },
 	),
@@ -611,9 +771,21 @@ const analogousTool: ToolEntry<AnalogousParams> = {
 	schema: toolSchema<AnalogousParams>(
 		{
 			...paletteBaseSchema,
-			baseColor: field.color({ default: "#22c55e" }),
-			spread: field.slider({ min: 10, max: 90, step: 5, default: 30 }),
-			count: field.slider({ min: 3, max: 9, step: 1, default: 5 }),
+			baseColor: field.color({ label: "fields.baseColor", default: "#22c55e" }),
+			spread: field.slider({
+				label: "fields.spread",
+				min: 10,
+				max: 90,
+				step: 5,
+				default: 30,
+			}),
+			count: field.slider({
+				label: "fields.count",
+				min: 3,
+				max: 9,
+				step: 1,
+				default: 5,
+			}),
 		},
 		{ ...paletteLayoutGroup },
 	),
@@ -641,9 +813,21 @@ const monochromaticTool: ToolEntry<MonochromaticParams> = {
 	schema: toolSchema<MonochromaticParams>(
 		{
 			...paletteBaseSchema,
-			baseColor: field.color({ default: "#0ea5e9" }),
-			count: field.slider({ min: 2, max: 9, step: 1, default: 5 }),
-			range: field.slider({ min: 10, max: 90, step: 5, default: 40 }),
+			baseColor: field.color({ label: "fields.baseColor", default: "#0ea5e9" }),
+			count: field.slider({
+				label: "fields.count",
+				min: 2,
+				max: 9,
+				step: 1,
+				default: 5,
+			}),
+			range: field.slider({
+				label: "fields.range",
+				min: 10,
+				max: 90,
+				step: 5,
+				default: 40,
+			}),
 		},
 		{ ...paletteLayoutGroup },
 	),
@@ -670,9 +854,21 @@ const shadesTool: ToolEntry<ShadesParams> = {
 	schema: toolSchema<ShadesParams>(
 		{
 			...paletteBaseSchema,
-			baseColor: field.color({ default: "#f59e0b" }),
-			count: field.slider({ min: 2, max: 9, step: 1, default: 5 }),
-			depth: field.slider({ min: 10, max: 90, step: 5, default: 50 }),
+			baseColor: field.color({ label: "fields.baseColor", default: "#f59e0b" }),
+			count: field.slider({
+				label: "fields.count",
+				min: 2,
+				max: 9,
+				step: 1,
+				default: 5,
+			}),
+			depth: field.slider({
+				label: "fields.depth",
+				min: 10,
+				max: 90,
+				step: 5,
+				default: 50,
+			}),
 		},
 		{ ...paletteLayoutGroup },
 	),
@@ -689,8 +885,17 @@ interface MixColorsParams {
 
 export const mixColorsSchema = toolSchema<MixColorsParams>(
 	{
-		colors: field.colors({ default: ["#ff0000", "#00ff00", "#0000ff"] }),
-		width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }),
+		colors: field.colors({
+			label: "fields.colorList",
+			default: ["#ff0000", "#00ff00", "#0000ff"],
+		}),
+		width: field.slider({
+			label: "fields.width",
+			min: 128,
+			max: 1024,
+			step: 16,
+			default: 512,
+		}),
 	},
 	{
 		layout: {
@@ -723,6 +928,7 @@ interface SortColorsParams {
 export const sortColorsSchema = toolSchema<SortColorsParams>(
 	{
 		colors: field.colors({
+			label: "fields.colorList",
 			default: [
 				"#ff0000",
 				"#ff8800",
@@ -733,6 +939,7 @@ export const sortColorsSchema = toolSchema<SortColorsParams>(
 			],
 		}),
 		order: field.select({
+			label: "fields.order",
 			default: "hue",
 			options: [
 				{ value: "hue", label: "Hue" },
@@ -740,8 +947,15 @@ export const sortColorsSchema = toolSchema<SortColorsParams>(
 				{ value: "sat", label: "Saturation" },
 			],
 		}),
-		width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }),
+		width: field.slider({
+			label: "fields.width",
+			min: 128,
+			max: 1024,
+			step: 16,
+			default: 512,
+		}),
 		layout: field.select({
+			label: "fields.layout",
 			default: "grid",
 			options: [
 				{ value: "grid", label: "Grid" },
@@ -786,8 +1000,13 @@ interface TextToPngParams {
 
 export const textToPngSchema = toolSchema<TextToPngParams>(
 	{
-		text: field.text({ default: "Hello!", placeholder: "Your text" }),
+		text: field.text({
+			label: "fields.text",
+			default: "Hello!",
+			placeholder: "Your text",
+		}),
 		style: field.fontStyle({
+			label: "fields.textStyle",
 			min: 8,
 			max: 300,
 			size: 96,
@@ -795,9 +1014,21 @@ export const textToPngSchema = toolSchema<TextToPngParams>(
 			bold: true,
 			color: "#111318",
 		}),
-		transparentBg: field.checkbox({ default: false }),
-		backgroundColor: field.color({ default: "#ffffff" }),
-		padding: field.slider({ min: 0, max: 200, step: 2, default: 24 }),
+		transparentBg: field.checkbox({
+			label: "fields.transparentBg",
+			default: false,
+		}),
+		backgroundColor: field.color({
+			label: "fields.backgroundColor",
+			default: "#ffffff",
+		}),
+		padding: field.slider({
+			label: "fields.padding",
+			min: 0,
+			max: 200,
+			step: 2,
+			default: 24,
+		}),
 	},
 	{
 		layout: {

web/src/lib/registry/geometry.ts

@@ -37,8 +37,14 @@ interface AddBorderParams {
 }
 
 export const addBorderSchema = toolSchema<AddBorderParams>({
-	thickness: field.number({ min: 1, max: 500, step: 1, default: 5 }),
-	color: field.color({ default: "#000000" }),
+	thickness: field.number({
+		label: "fields.thickness",
+		min: 1,
+		max: 500,
+		step: 1,
+		default: 5,
+	}),
+	color: field.color({ label: "fields.borderColor", default: "#000000" }),
 });
 
 const addBorder: ToolEntry<AddBorderParams> = {
@@ -69,9 +75,18 @@ interface FitOnBackgroundParams {
 
 export const fitOnBackgroundSchema = toolSchema<FitOnBackgroundParams>(
 	{
-		size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }),
-		transparent: field.checkbox({ default: false }),
-		color: field.color({ default: "#ffffff" }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 1,
+			max: 20000,
+			width: 800,
+			height: 600,
+		}),
+		transparent: field.checkbox({
+			label: "fields.transparent",
+			default: false,
+		}),
+		color: field.color({ label: "fields.background", default: "#ffffff" }),
 	},
 	{
 		layout: {
@@ -117,8 +132,15 @@ interface ChangeCanvasSizeParams {
 
 export const changeCanvasSizeSchema = toolSchema<ChangeCanvasSizeParams>(
 	{
-		size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 1,
+			max: 20000,
+			width: 800,
+			height: 600,
+		}),
 		anchor: field.select({
+			label: "fields.anchor",
 			default: "center",
 			options: [
 				{ value: "top-left", label: "Top left" },
@@ -168,8 +190,14 @@ interface ResizeParams {
 
 export const resizeSchema = toolSchema<ResizeParams>(
 	{
-		size: field.dimension({ min: 0, max: 20000, width: 0, height: 0 }),
-		keepAspect: field.checkbox({ default: true }),
+		size: field.dimension({
+			label: "fields.canvasSize",
+			min: 0,
+			max: 20000,
+			width: 0,
+			height: 0,
+		}),
+		keepAspect: field.checkbox({ label: "fields.keepAspect", default: true }),
 	},
 	{
 		layout: {
@@ -219,9 +247,27 @@ interface CropParams {
 
 export const cropSchema = toolSchema<CropParams>(
 	{
-		x: field.number({ min: -100000, max: 100000, step: 1, default: 0 }),
-		y: field.number({ min: -100000, max: 100000, step: 1, default: 0 }),
-		size: field.dimension({ min: 0, max: 100000, width: 0, height: 0 }),
+		x: field.number({
+			label: "fields.x",
+			min: -100000,
+			max: 100000,
+			step: 1,
+			default: 0,
+		}),
+		y: field.number({
+			label: "fields.y",
+			min: -100000,
+			max: 100000,
+			step: 1,
+			default: 0,
+		}),
+		size: field.dimension({
+			label: "fields.cropAreaSize",
+			min: 0,
+			max: 100000,
+			width: 0,
+			height: 0,
+		}),
 	},
 	{
 		layout: {
@@ -257,6 +303,7 @@ interface RotateParams {
 
 export const rotateSchema = toolSchema<RotateParams>({
 	angle: field.select({
+		label: "fields.angle",
 		default: "90",
 		options: [
 			{ value: "90", label: "90° clockwise" },
@@ -282,6 +329,7 @@ interface FlipParams {
 
 export const flipSchema = toolSchema<FlipParams>({
 	axis: field.select({
+		label: "fields.axis",
 		default: "horizontal",
 		options: [
 			{ value: "horizontal", label: "Horizontal (left to right)" },
@@ -308,9 +356,15 @@ interface AddPaddingParams {
 
 export const addPaddingSchema = toolSchema<AddPaddingParams>(
 	{
-		padding: field.number({ min: 1, max: 2000, step: 1, default: 10 }),
-		transparent: field.checkbox({ default: true }),
-		color: field.color({ default: "#ffffff" }),
+		padding: field.number({
+			label: "fields.padding",
+			min: 1,
+			max: 2000,
+			step: 1,
+			default: 10,
+		}),
+		transparent: field.checkbox({ label: "fields.transparent", default: true }),
+		color: field.color({ label: "fields.fillColor", default: "#ffffff" }),
 	},
 	{
 		layout: {
@@ -348,8 +402,20 @@ interface TileParams {
 }
 
 export const tileSchema = toolSchema<TileParams>({
-	columns: field.number({ min: 1, max: 50, step: 1, default: 2 }),
-	rows: field.number({ min: 1, max: 50, step: 1, default: 2 }),
+	columns: field.number({
+		label: "fields.columns",
+		min: 1,
+		max: 50,
+		step: 1,
+		default: 2,
+	}),
+	rows: field.number({
+		label: "fields.rows",
+		min: 1,
+		max: 50,
+		step: 1,
+		default: 2,
+	}),
 });
 
 const tileTool: ToolEntry<TileParams> = {
@@ -370,8 +436,20 @@ interface SplitPartsParams {
 }
 
 export const splitPartsSchema = toolSchema<SplitPartsParams>({
-	columns: field.number({ min: 1, max: 6, step: 1, default: 2 }),
-	rows: field.number({ min: 1, max: 6, step: 1, default: 2 }),
+	columns: field.number({
+		label: "fields.columns",
+		min: 1,
+		max: 6,
+		step: 1,
+		default: 2,
+	}),
+	rows: field.number({
+		label: "fields.rows",
+		min: 1,
+		max: 6,
+		step: 1,
+		default: 2,
+	}),
 });
 
 const splitPartsTool: ToolEntry<SplitPartsParams> = {
@@ -428,8 +506,20 @@ interface SkewParams {
 }
 
 export const skewSchema = toolSchema<SkewParams>({
-	degX: field.slider({ min: -80, max: 80, step: 1, default: 0 }),
-	degY: field.slider({ min: -80, max: 80, step: 1, default: 0 }),
+	degX: field.slider({
+		label: "fields.skewX",
+		min: -80,
+		max: 80,
+		step: 1,
+		default: 0,
+	}),
+	degY: field.slider({
+		label: "fields.skewY",
+		min: -80,
+		max: 80,
+		step: 1,
+		default: 0,
+	}),
 });
 
 const skewTool: ToolEntry<SkewParams> = {
@@ -448,7 +538,13 @@ interface RotateFreeParams {
 }
 
 export const rotateFreeSchema = toolSchema<RotateFreeParams>({
-	angle: field.slider({ min: -180, max: 180, step: 1, default: 15 }),
+	angle: field.slider({
+		label: "fields.angle",
+		min: -180,
+		max: 180,
+		step: 1,
+		default: 15,
+	}),
 });
 
 const rotateFreeTool: ToolEntry<RotateFreeParams> = {
@@ -467,7 +563,13 @@ interface ZoomParams {
 }
 
 export const zoomSchema = toolSchema<ZoomParams>({
-	scale: field.slider({ min: 100, max: 500, step: 10, default: 200 }),
+	scale: field.slider({
+		label: "fields.scalePct",
+		min: 100,
+		max: 500,
+		step: 10,
+		default: 200,
+	}),
 });
 
 const zoomTool: ToolEntry<ZoomParams> = {
@@ -486,7 +588,13 @@ interface TrimEmptySpaceParams {
 }
 
 export const trimEmptySpaceSchema = toolSchema<TrimEmptySpaceParams>({
-	threshold: field.slider({ min: 0, max: 254, step: 1, default: 0 }),
+	threshold: field.slider({
+		label: "fields.alphaThreshold",
+		min: 0,
+		max: 254,
+		step: 1,
+		default: 0,
+	}),
 });
 
 const trimEmptySpaceTool: ToolEntry<TrimEmptySpaceParams> = {
@@ -509,6 +617,7 @@ interface ChangeAspectRatioParams {
 
 export const changeAspectRatioSchema = toolSchema<ChangeAspectRatioParams>({
 	ratio: field.select({
+		label: "fields.ratio",
 		default: "1:1",
 		options: [
 			{ value: "1:1", label: "1:1" },
@@ -521,6 +630,7 @@ export const changeAspectRatioSchema = toolSchema<ChangeAspectRatioParams>({
 		],
 	}),
 	mode: field.select({
+		label: "fields.fitMode",
 		default: "crop",
 		options: [
 			{ value: "crop", label: "Crop to fill" },
@@ -550,6 +660,7 @@ interface SwapOrientationParams {
 
 export const swapOrientationSchema = toolSchema<SwapOrientationParams>({
 	target: field.select({
+		label: "fields.orientation",
 		default: "portrait",
 		options: [
 			{ value: "portrait", label: "Portrait" },
@@ -579,6 +690,7 @@ interface SymmetricCopyParams {
 
 export const symmetricCopySchema = toolSchema<SymmetricCopyParams>({
 	axis: field.select({
+		label: "fields.axis",
 		default: "vertical",
 		options: [
 			{ value: "vertical", label: "Vertical (double width)" },
@@ -586,6 +698,7 @@ export const symmetricCopySchema = toolSchema<SymmetricCopyParams>({
 		],
 	}),
 	keepSide: field.select({
+		label: "fields.keepSide",
 		default: "left",
 		options: [
 			{ value: "left", label: "Left" },
@@ -614,9 +727,21 @@ interface ShiftParams {
 }
 
 export const shiftSchema = toolSchema<ShiftParams>({
-	offsetX: field.number({ min: -5000, max: 5000, step: 1, default: 0 }),
-	offsetY: field.number({ min: -5000, max: 5000, step: 1, default: 0 }),
-	color: field.color({ default: "#ffffff" }),
+	offsetX: field.number({
+		label: "fields.offsetX",
+		min: -5000,
+		max: 5000,
+		step: 1,
+		default: 0,
+	}),
+	offsetY: field.number({
+		label: "fields.offsetY",
+		min: -5000,
+		max: 5000,
+		step: 1,
+		default: 0,
+	}),
+	color: field.color({ label: "fields.fillColor", default: "#ffffff" }),
 });
 
 const shiftTool: ToolEntry<ShiftParams> = {

web/src/lib/registry/text.ts

@@ -15,8 +15,13 @@ interface AddTextParams {
 
 const addTextSchema = toolSchema<AddTextParams>(
 	{
-		text: field.text({ default: "Hello!", placeholder: "Your text" }),
+		text: field.text({
+			label: "fields.text",
+			default: "Hello!",
+			placeholder: "Your text",
+		}),
 		style: field.fontStyle({
+			label: "fields.textStyle",
 			min: 8,
 			max: 200,
 			size: 48,
@@ -24,9 +29,23 @@ const addTextSchema = toolSchema<AddTextParams>(
 			bold: true,
 			color: "#ffffff",
 		}),
-		position: field.position9({ default: "bottom-right" }),
-		margin: field.slider({ min: 0, max: 200, step: 1, default: 24 }),
-		plate: field.plate({ enabled: false, color: "#000000", opacity: 60 }),
+		position: field.position9({
+			label: "fields.position",
+			default: "bottom-right",
+		}),
+		margin: field.slider({
+			label: "fields.margin",
+			min: 0,
+			max: 200,
+			step: 1,
+			default: 24,
+		}),
+		plate: field.plate({
+			label: "fields.plate",
+			enabled: false,
+			color: "#000000",
+			opacity: 60,
+		}),
 	},
 	{
 		layout: {
@@ -75,10 +94,12 @@ interface DateStampParams {
 const dateStampSchema = toolSchema<DateStampParams>(
 	{
 		format: field.text({
+			label: "fields.dateFormat",
 			default: "YYYY-MM-DD",
 			placeholder: "YYYY-MM-DD hh:mm",
 		}),
 		style: field.fontStyle({
+			label: "fields.textStyle",
 			min: 8,
 			max: 200,
 			size: 32,
@@ -86,9 +107,23 @@ const dateStampSchema = toolSchema<DateStampParams>(
 			bold: false,
 			color: "#ffffff",
 		}),
-		position: field.position9({ default: "bottom-right" }),
-		margin: field.slider({ min: 0, max: 200, step: 1, default: 20 }),
-		plate: field.plate({ enabled: true, color: "#000000", opacity: 55 }),
+		position: field.position9({
+			label: "fields.position",
+			default: "bottom-right",
+		}),
+		margin: field.slider({
+			label: "fields.margin",
+			min: 0,
+			max: 200,
+			step: 1,
+			default: 20,
+		}),
+		plate: field.plate({
+			label: "fields.plate",
+			enabled: true,
+			color: "#000000",
+			opacity: 55,
+		}),
 	},
 	{
 		layout: {
@@ -137,8 +172,13 @@ interface WatermarkTileParams {
 
 const watermarkTileSchema = toolSchema<WatermarkTileParams>(
 	{
-		text: field.text({ default: "DRAFT", placeholder: "Watermark text" }),
+		text: field.text({
+			label: "fields.text",
+			default: "DRAFT",
+			placeholder: "Watermark text",
+		}),
 		style: field.fontStyle({
+			label: "fields.textStyle",
 			min: 12,
 			max: 160,
 			size: 56,
@@ -146,10 +186,34 @@ const watermarkTileSchema = toolSchema<WatermarkTileParams>(
 			bold: true,
 			color: "#ffffff",
 		}),
-		opacity: field.slider({ min: 5, max: 100, step: 5, default: 30 }),
-		angle: field.slider({ min: -90, max: 90, step: 1, default: -30 }),
-		stepX: field.slider({ min: 40, max: 600, step: 10, default: 220 }),
-		stepY: field.slider({ min: 40, max: 600, step: 10, default: 180 }),
+		opacity: field.slider({
+			label: "fields.opacity",
+			min: 5,
+			max: 100,
+			step: 5,
+			default: 30,
+		}),
+		angle: field.slider({
+			label: "fields.angle",
+			min: -90,
+			max: 90,
+			step: 1,
+			default: -30,
+		}),
+		stepX: field.slider({
+			label: "fields.stepX",
+			min: 40,
+			max: 600,
+			step: 10,
+			default: 220,
+		}),
+		stepY: field.slider({
+			label: "fields.stepY",
+			min: 40,
+			max: 600,
+			step: 10,
+			default: 180,
+		}),
 	},
 	{
 		layout: {