feat: add layout groupt to tools

docs/plan-composite-params.md

@@ -24,8 +24,14 @@
 > раскладка `schema.layout` реализована** (шаг 32): тип `ToolSchemaLayout`
 > {groups: [{title?, cols?, fields}]}, рендер групп в `SchemaFields.svelte`
 > (заголовок группы + сетка колонок, неупомянутые поля — в общей группе),
-> пилот — `add-text` (группы Text/Placement/Plate).
+> пилот — `add-text` (группы Text/Placement/Plate). **UI-макеты расставлены
-> Следующее: шаг 33 — UI-макет каждого переведённого инструмента (ревью по одному).
+> по переведённым инструментам** (шаг 33): geometry (fit-on-background,
+> change-canvas-size, resize, crop), маски alpha (Shape/Position), generate
+> (create-empty, linear-gradient, color-spectrum, random-colors, draw-grid,
+> step-colors, placeholder, text-to-png), text (add-text, date-stamp),
+> filters (randomize-pixels, add-noise) — везде, где канвас отделён от
+> параметров эффекта либо фигура от позиции.
+> Следующее: шаг 34 — поглощение `tool-views.ts` (Фаза 5, зачистка).
 >
 > Ключевые файлы нового registry: `web/src/lib/registry-new/{types,index,*}.ts`
 > (по файлу на категорию: geometry/alpha/convert/analyze/filters/color/generate)
@@ -422,7 +428,21 @@ Typed field builders + `Field<T>` + `toolSchema<P>()` + `ToolSchema<P>` —
     неупомянутые поля — в общей группе в конце, без заголовка). Пилот —
     `add-text-png` (Text: text+style; Placement: position+margin; Plate).
     Тесты: schema-layout в registry-schema.test.ts; полные запуски чисты.
-33. Для каждого переведённого инструмента — UI-макет, принимается отдельно.
+33. Для каждого переведённого инструмента — UI-макет **расставлен** ✔.
+    Layout-группы заданы там, где группировка содержательна (канвас отдельно
+    от параметров эффекта, фигура отдельно от позиции; составные виджеты —
+    внутри групп целиком):
+    - geometry: fit-on-background (Canvas/Background), change-canvas-size
+      (Canvas/Anchor), resize (Canvas/Scaling), crop (Offset/Crop area);
+    - alpha-маски: circle/square/star/wavy (Shape — с 2 колонками где плотно,
+      Position — offset);
+    - generate: create-empty (Canvas/Fill), linear-gradient (Canvas/Colors),
+      color-spectrum (Canvas/Spectrum), random-colors (Canvas/Random),
+      draw-grid (Canvas/Grid), step-colors (Colors/Output), placeholder
+      (Canvas/Colors/Text), text-to-png (Text/Background/Padding);
+    - text: add-text, date-stamp (Text/Placement/Plate);
+    - filters: randomize-pixels (Blocks), add-noise (Noise/Seed).
+    Инструменты с 1–3 простыми полями остались без layout (одна общая группа).
 
 ### Фаза 5 — зачистка
 

web/src/lib/registry-new/alpha.ts

@@ -77,10 +77,20 @@ interface CircleMaskParams {
 	offset: Offset;
 }
 
-const circleMaskSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Shape", fields: ["size"] },
+				{ title: "Position", fields: ["offset"] },
+			],
+		},
+	},
+);
 
 const circleMask: ToolEntry<CircleMaskParams> = {
 	id: "circle-mask-png",
@@ -104,11 +114,25 @@ interface SquareMaskParams {
 	offset: Offset;
 }
 
-const squareMaskSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{
+					title: "Shape",
+					cols: 2,
+					fields: ["widthPct", "heightPct"],
+				},
+				{ title: "Position", fields: ["offset"] },
+			],
+		},
+	},
+);
 
 const squareMask: ToolEntry<SquareMaskParams> = {
 	id: "square-mask-png",
@@ -134,13 +158,27 @@ interface StarMaskParams {
 	offset: Offset;
 }
 
-const starMaskSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{
+					title: "Shape",
+					cols: 2,
+					fields: ["points", "innerRadius", "size", "rotation"],
+				},
+				{ title: "Position", fields: ["offset"] },
+			],
+		},
+	},
+);
 
 const starMask: ToolEntry<StarMaskParams> = {
 	id: "star-mask-png",
@@ -166,13 +204,27 @@ interface WavyMaskParams {
 	offset: Offset;
 }
 
-const wavyMaskSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{
+					title: "Shape",
+					cols: 2,
+					fields: ["size", "amplitude", "waves", "phase"],
+				},
+				{ title: "Position", fields: ["offset"] },
+			],
+		},
+	},
+);
 
 const wavyMask: ToolEntry<WavyMaskParams> = {
 	id: "wavy-mask-png",

web/src/lib/registry-new/filters.ts

@@ -45,10 +45,17 @@ interface RandomizePixelsParams {
 	seed: number;
 }
 
-export const randomizePixelsSchema = toolSchema<RandomizePixelsParams>({
+export const randomizePixelsSchema = toolSchema<RandomizePixelsParams>(
+	{
 		blockSize: field.slider({ min: 1, max: 64, step: 1, default: 8 }),
 		seed: field.number({ min: 0, max: 999999, step: 1, default: 42 }),
-});
+	},
+	{
+		layout: {
+			groups: [{ title: "Blocks", cols: 2, fields: ["blockSize", "seed"] }],
+		},
+	},
+);
 
 const randomizePixels: ToolEntry<RandomizePixelsParams> = {
 	id: "randomize-pixels-png",
@@ -66,7 +73,8 @@ interface AddNoiseParams {
 	seed: number;
 }
 
-export const addNoiseSchema = toolSchema<AddNoiseParams>({
+export const addNoiseSchema = toolSchema<AddNoiseParams>(
+	{
 		amount: field.slider({ min: 0, max: 100, step: 1, default: 25 }),
 		mode: field.select({
 			default: "mono",
@@ -76,7 +84,16 @@ export const addNoiseSchema = toolSchema<AddNoiseParams>({
 			],
 		}),
 		seed: field.number({ min: 0, max: 999999, step: 1, default: 1234 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Noise", cols: 2, fields: ["amount", "mode"] },
+				{ title: "Seed", fields: ["seed"] },
+			],
+		},
+	},
+);
 
 const addNoiseTool: ToolEntry<AddNoiseParams> = {
 	id: "add-noise-png",

web/src/lib/registry-new/generate.ts

@@ -69,11 +69,21 @@ interface CreateEmptyParams {
 	color: string;
 }
 
-export const createEmptySchema = toolSchema<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" }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{ title: "Fill", fields: ["transparent", "color"] },
+			],
+		},
+	},
+);
 
 const createEmpty: ToolEntry<CreateEmptyParams> = {
 	id: "create-empty-png",
@@ -144,10 +154,20 @@ interface LinearGradientParams {
 	gradient: Gradient;
 }
 
-export const linearGradientSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{ title: "Colors", fields: ["gradient"] },
+			],
+		},
+	},
+);
 
 const linearGradient: ToolEntry<LinearGradientParams> = {
 	id: "linear-gradient-png",
@@ -176,7 +196,8 @@ interface ColorSpectrumParams {
 	lightness: number;
 }
 
-export const colorSpectrumSchema = toolSchema<ColorSpectrumParams>({
+export const colorSpectrumSchema = toolSchema<ColorSpectrumParams>(
+	{
 		size: field.dimension({ min: 1, max: 5000, width: 1024, height: 128 }),
 		direction: field.select({
 			default: "horizontal",
@@ -187,7 +208,16 @@ export const colorSpectrumSchema = toolSchema<ColorSpectrumParams>({
 		}),
 		saturation: field.slider({ min: 0, max: 100, step: 1, default: 100 }),
 		lightness: field.slider({ min: 0, max: 100, step: 1, default: 50 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{ title: "Spectrum", fields: ["direction", "saturation", "lightness"] },
+			],
+		},
+	},
+);
 
 const colorSpectrumTool: ToolEntry<ColorSpectrumParams> = {
 	id: "color-spectrum-png",
@@ -209,11 +239,21 @@ interface RandomColorsParams {
 	seed: number;
 }
 
-export const randomColorsSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{ title: "Random", cols: 2, fields: ["blockSize", "seed"] },
+			],
+		},
+	},
+);
 
 const randomColors: ToolEntry<RandomColorsParams> = {
 	id: "random-colors-png",
@@ -238,14 +278,28 @@ interface DrawGridParams {
 	transparentBg: boolean;
 }
 
-export const drawGridSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{
+					title: "Grid",
+					cols: 2,
+					fields: ["cols", "rows", "lineWidth", "color", "transparentBg"],
+				},
+			],
+		},
+	},
+);
 
 const drawGridTool: ToolEntry<DrawGridParams> = {
 	id: "draw-grid-png",
@@ -276,12 +330,23 @@ interface PlaceholderParams {
 	showText: boolean;
 }
 
-export const placeholderSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{ title: "Colors", cols: 2, fields: ["backgroundColor", "color"] },
+				{ title: "Text", fields: ["showText"] },
+			],
+		},
+	},
+);
 
 const placeholder: ToolEntry<PlaceholderParams> = {
 	id: "placeholder-png",
@@ -337,7 +402,8 @@ interface StepColorsParams {
 	layout: "strip" | "grid";
 }
 
-export const stepColorsSchema = toolSchema<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 }),
@@ -348,7 +414,16 @@ export const stepColorsSchema = toolSchema<StepColorsParams>({
 				{ value: "strip", label: "Strip" },
 			],
 		}),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Colors", fields: ["pair"] },
+				{ title: "Output", cols: 2, fields: ["steps", "width", "layout"] },
+			],
+		},
+	},
+);
 
 const stepColorsTool: ToolEntry<StepColorsParams> = {
 	id: "step-colors-png",
@@ -372,7 +447,8 @@ interface TextToPngParams {
 	padding: number;
 }
 
-export const textToPngSchema = toolSchema<TextToPngParams>({
+export const textToPngSchema = toolSchema<TextToPngParams>(
+	{
 		text: field.text({ default: "Hello!", placeholder: "Your text" }),
 		style: field.fontStyle({
 			min: 8,
@@ -385,7 +461,17 @@ export const textToPngSchema = toolSchema<TextToPngParams>({
 		transparentBg: field.checkbox({ default: false }),
 		backgroundColor: field.color({ default: "#ffffff" }),
 		padding: field.slider({ min: 0, max: 200, step: 2, default: 24 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Text", fields: ["text", "style"] },
+				{ title: "Background", fields: ["transparentBg", "backgroundColor"] },
+				{ title: "Padding", fields: ["padding"] },
+			],
+		},
+	},
+);
 
 const textToPng: ToolEntry<TextToPngParams> = {
 	id: "text-to-png",

web/src/lib/registry-new/geometry.ts

@@ -43,11 +43,21 @@ interface FitOnBackgroundParams {
 	color: string;
 }
 
-export const fitOnBackgroundSchema = toolSchema<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" }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{ title: "Background", fields: ["transparent", "color"] },
+			],
+		},
+	},
+);
 
 const fitOnBackground: ToolEntry<FitOnBackgroundParams> = {
 	id: "fit-on-background-png",
@@ -80,7 +90,8 @@ interface ChangeCanvasSizeParams {
 	anchor: Anchor9;
 }
 
-export const changeCanvasSizeSchema = toolSchema<ChangeCanvasSizeParams>({
+export const changeCanvasSizeSchema = toolSchema<ChangeCanvasSizeParams>(
+	{
 		size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }),
 		anchor: field.select({
 			default: "center",
@@ -96,7 +107,16 @@ export const changeCanvasSizeSchema = toolSchema<ChangeCanvasSizeParams>({
 				{ value: "bottom-right", label: "Bottom right" },
 			],
 		}),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{ title: "Anchor", fields: ["anchor"] },
+			],
+		},
+	},
+);
 
 const changeCanvasSizeTool: ToolEntry<ChangeCanvasSizeParams> = {
 	id: "change-canvas-size-png",
@@ -119,10 +139,20 @@ interface ResizeParams {
 	keepAspect: boolean;
 }
 
-export const resizeSchema = toolSchema<ResizeParams>({
+export const resizeSchema = toolSchema<ResizeParams>(
+	{
 		size: field.dimension({ min: 0, max: 20000, width: 0, height: 0 }),
 		keepAspect: field.checkbox({ default: true }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Canvas", fields: ["size"] },
+				{ title: "Scaling", fields: ["keepAspect"] },
+			],
+		},
+	},
+);
 
 const resizeTool: ToolEntry<ResizeParams> = {
 	id: "resize-png",
@@ -159,11 +189,21 @@ interface CropParams {
 	size: Dimension;
 }
 
-export const cropSchema = toolSchema<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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Offset", fields: ["x", "y"] },
+				{ title: "Crop area", fields: ["size"] },
+			],
+		},
+	},
+);
 
 const cropTool: ToolEntry<CropParams> = {
 	id: "crop-png",

web/src/lib/registry-new/text.ts

@@ -70,7 +70,8 @@ interface DateStampParams {
 	plate: Plate;
 }
 
-const dateStampSchema = toolSchema<DateStampParams>({
+const dateStampSchema = toolSchema<DateStampParams>(
+	{
 		format: field.text({
 			default: "YYYY-MM-DD",
 			placeholder: "YYYY-MM-DD hh:mm",
@@ -86,7 +87,17 @@ const dateStampSchema = toolSchema<DateStampParams>({
 		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 }),
-});
+	},
+	{
+		layout: {
+			groups: [
+				{ title: "Text", fields: ["format", "style"] },
+				{ title: "Placement", fields: ["position", "margin"] },
+				{ title: "Plate", fields: ["plate"] },
+			],
+		},
+	},
+);
 
 const dateStamp: ToolEntry<DateStampParams> = {
 	id: "date-stamp-png",