fix: update i18n - update registry for tools

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: {