feat: add size presets for tools

web/src/lib/components/fields/schema/DimensionField.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
 	import { t } from "$lib/i18n/t";
-	import type {
-		Dimension,
-		DimensionSpec,
-		FieldSpec,
+	import {
+		SIZE_PRESETS,
+		type Dimension,
+		type DimensionSpec,
+		type FieldSpec,
 	} from "$lib/registry-schema";
+	import ChipButton from "$lib/components/ui/ChipButton.svelte";
 	import Control from "./Control.svelte";
 
 	interface Props {
 		label: string;
 		value: unknown;
 		spec: FieldSpec;
-		onchange?: (value: Dimension, axis?: "width" | "height") => void;
+		onchange?: (value: Dimension, axis?: "width" | "height" | "both") => void;
 	}
 	let { label, value, spec, onchange }: Props = $props();
 
@@ -33,6 +35,11 @@
 	function setAxis(axis: "width" | "height", n: number) {
 		onchange?.({ ...current, [axis]: n }, axis);
 	}
+
+	function applyPreset(n: number) {
+		// Пресет задаёт обе оси явно — lockAspect его не пересчитывает.
+		onchange?.({ width: n, height: n }, "both");
+	}
 </script>
 
 <Control {label} caps>
@@ -60,6 +67,17 @@
 			/>
 		</label>
 	</div>
+	{#if sp.presets}
+		<div class="dimension-presets">
+			{#each SIZE_PRESETS as n (n)}
+				<ChipButton
+					label={`${n}×${n}`}
+					active={current.width === n && current.height === n}
+					onclick={() => applyPreset(n)}
+				/>
+			{/each}
+		</div>
+	{/if}
 </Control>
 
 <style>
@@ -81,4 +99,10 @@
 		color: var(--color-text);
 		font: var(--font-size-s) var(--font-mono);
 	}
+	.dimension-presets {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-s);
+		margin-top: var(--space-m);
+	}
 </style>

web/src/lib/components/fields/schema/RangeControl.svelte

@@ -39,7 +39,7 @@
 		<span class="range-trailing">
 			<IconButton
 				icon={Minus}
-				label={t("ui.decrease")}
+				label={`${t("ui.decrease")} ${label}`}
 				variant="clear"
 				size="s"
 				disabled={atMin}
@@ -57,7 +57,7 @@
 			/>
 			<IconButton
 				icon={Plus}
-				label={t("ui.increase")}
+				label={`${t("ui.increase")} ${label}`}
 				variant="clear"
 				size="s"
 				disabled={atMax}
@@ -65,7 +65,7 @@
 			/>
 			<IconButton
 				icon={RotateCcw}
-				label={t("ui.reset")}
+				label={`${t("ui.reset")} ${label}`}
 				variant="clear"
 				size="s"
 				disabled={atDefault}

web/src/lib/components/schema/SchemaFields.svelte

@@ -30,7 +30,7 @@
 		spec: FieldSpec;
 		toolId: string;
 		fieldId: string;
-		onchange?: (value: unknown, axis?: "width" | "height") => void;
+		onchange?: (value: unknown, axis?: "width" | "height" | "both") => void;
 	}
 
 	const FIELDS: Record<FieldSpecKind, Component<FieldControlProps>> = {
@@ -54,7 +54,11 @@
 		schema: ToolSchema<Record<string, unknown>>;
 		values: Record<string, unknown>;
 		toolId: string;
-		onchange: (id: string, value: unknown, axis?: "width" | "height") => void;
+		onchange: (
+			id: string,
+			value: unknown,
+			axis?: "width" | "height" | "both",
+		) => void;
 		onreset: () => void;
 	}
 	let { schema, values, toolId, onchange, onreset }: Props = $props();

web/src/lib/components/schema/SchemaToolView.svelte

@@ -74,9 +74,13 @@
 		values = defaultSchemaParams(schema);
 	}
 
-	function setValue(id: string, value: unknown, axis?: "width" | "height") {
+	function setValue(
+		id: string,
+		value: unknown,
+		axis?: "width" | "height" | "both",
+	) {
 		touched.add(id);
-		if (axis) lastAxis[id] = axis;
+		if (axis) lastAxis[id] = axis === "both" ? "width" : axis;
 		const next: Record<string, unknown> = { ...values, [id]: value };
 		const spec = schema?.fields[id]?.spec;
 		if (source && schema && spec) {
@@ -84,6 +88,7 @@
 			if (
 				spec.kind === "dimension" &&
 				spec.lockAspectWith &&
+				axis !== "both" &&
 				next[spec.lockAspectWith] === true
 			) {
 				next[id] = withAspectLock(

web/src/lib/registry-schema.ts

@@ -62,6 +62,9 @@ export interface Dimension {
 	height: number;
 }
 
+/** Единый список тайловых пресетов (квадраты) для dimension-полей. */
+export const SIZE_PRESETS = [16, 32, 64, 128, 256, 512] as const;
+
 export interface DimensionSpec extends FieldSpecBase {
 	kind: "dimension";
 	/** Общий диапазон для обоих измерений. */
@@ -75,6 +78,8 @@ export interface DimensionSpec extends FieldSpecBase {
 	 * оси пересчитывает вторую по аспекту текущего исходника.
 	 */
 	lockAspectWith?: string;
+	/** Показывать чипы быстрого выбора из SIZE_PRESETS. */
+	presets?: boolean;
 }
 
 export interface SchemaContext {
@@ -282,6 +287,7 @@ export const field = {
 		height: number;
 		defaultFromSource?: boolean;
 		lockAspectWith?: string;
+		presets?: boolean;
 	}): Field<Dimension> => ({
 		spec: { kind: "dimension", ...s },
 	}),

web/src/lib/registry/tools/generate.ts

@@ -90,6 +90,7 @@ export const createEmptySchema = toolSchema<CreateEmptyParams>(
 			max: 20000,
 			width: 800,
 			height: 600,
+			presets: true,
 		}),
 		transparent: field.checkbox({ label: "fields.transparent", default: true }),
 		color: field.color({ label: "fields.fillColor", default: "#ffffff" }),
@@ -130,6 +131,7 @@ export const singleColorSchema = toolSchema<SingleColorParams>({
 		max: 20000,
 		width: 256,
 		height: 256,
+		presets: true,
 	}),
 	color: field.color({ label: "fields.color", default: "#ff0000" }),
 });
@@ -157,6 +159,7 @@ export const randomNoiseSchema = toolSchema<RandomNoiseParams>({
 		max: 5000,
 		width: 512,
 		height: 512,
+		presets: true,
 	}),
 	seed: field.number({
 		label: "fields.seed",
@@ -191,6 +194,7 @@ export const linearGradientSchema = toolSchema<LinearGradientParams>(
 			max: 20000,
 			width: 800,
 			height: 600,
+			presets: true,
 		}),
 		gradient: field.gradient({
 			label: "fields.gradient",
@@ -241,6 +245,7 @@ export const colorSpectrumSchema = toolSchema<ColorSpectrumParams>(
 			max: 5000,
 			width: 1024,
 			height: 128,
+			presets: true,
 		}),
 		direction: field.select({
 			label: "fields.direction",
@@ -303,6 +308,7 @@ export const randomColorsSchema = toolSchema<RandomColorsParams>(
 			max: 5000,
 			width: 512,
 			height: 512,
+			presets: true,
 		}),
 		blockSize: field.slider({
 			label: "fields.blockSize",
@@ -357,6 +363,7 @@ export const drawGridSchema = toolSchema<DrawGridParams>(
 			max: 5000,
 			width: 512,
 			height: 512,
+			presets: true,
 		}),
 		cols: field.slider({
 			label: "fields.cols",
@@ -433,6 +440,7 @@ export const placeholderSchema = toolSchema<PlaceholderParams>(
 			max: 5000,
 			width: 800,
 			height: 400,
+			presets: true,
 		}),
 		backgroundColor: field.color({
 			label: "fields.backgroundColor",

web/src/lib/registry/tools/geometry.ts

@@ -77,6 +77,7 @@ export const fitOnBackgroundSchema = toolSchema<FitOnBackgroundParams>(
 			max: 20000,
 			width: 800,
 			height: 600,
+			presets: true,
 		}),
 		transparent: field.checkbox({
 			label: "fields.transparent",
@@ -130,6 +131,7 @@ export const changeCanvasSizeSchema = toolSchema<ChangeCanvasSizeParams>(
 			max: 20000,
 			width: 800,
 			height: 600,
+			presets: true,
 		}),
 		anchor: field.select({
 			label: "fields.anchor",
@@ -186,6 +188,7 @@ export const resizeSchema = toolSchema<ResizeParams>(
 			height: 1,
 			defaultFromSource: true,
 			lockAspectWith: "keepAspect",
+			presets: true,
 		}),
 		keepAspect: field.checkbox({ label: "fields.keepAspect", default: true }),
 	},
@@ -254,6 +257,7 @@ export const cropSchema = toolSchema<CropParams>(
 			width: 1,
 			height: 1,
 			defaultFromSource: true,
+			presets: true,
 		}),
 	},
 	{