feat: add plate (under text) field component

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

@@ -16,6 +16,7 @@
 	import OffsetControl from "./fields/schema/OffsetControl.svelte";
 	import PositionControl from "./fields/schema/PositionControl.svelte";
 	import FontStyleControl from "./fields/schema/FontStyleControl.svelte";
+	import PlateControl from "./fields/schema/PlateControl.svelte";
 
 	interface FieldControlProps {
 		label: string;
@@ -36,6 +37,7 @@
 		offset: OffsetControl,
 		position9: PositionControl,
 		"font-style": FontStyleControl,
+		plate: PlateControl,
 	};
 
 	interface Props {

web/src/lib/components/kit/fields/schema/PlateControl.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import type { FieldSpec, Plate, PlateSpec } from "$lib/registry-schema";
+
+	interface Props {
+		label: string;
+		value: unknown;
+		spec: FieldSpec;
+		onchange?: (value: Plate) => void;
+	}
+	let { label, value, spec, onchange }: Props = $props();
+
+	const sp = $derived(spec as PlateSpec);
+	const current = $derived.by(() => {
+		const v = value as Partial<Plate> | undefined;
+		return {
+			enabled: typeof v?.enabled === "boolean" ? v.enabled : sp.enabled,
+			color: typeof v?.color === "string" ? v.color : sp.color,
+			opacity:
+				typeof v?.opacity === "number" && Number.isFinite(v.opacity)
+					? v.opacity
+					: sp.opacity,
+		};
+	});
+
+	function set<K extends keyof Plate>(key: K, val: Plate[K]) {
+		onchange?.({ ...current, [key]: val });
+	}
+</script>
+
+<div class="control plate-control">
+	<span class="plate-label">{label}</span>
+	<div class="plate-row {current.enabled ? '' : 'off'}">
+		<label class="plate-enabled">
+			<span>Backing plate</span>
+			<input
+				type="checkbox"
+				checked={current.enabled}
+				onchange={(e) => set("enabled", (e.target as HTMLInputElement).checked)}
+			/>
+		</label>
+		<label class="plate-color">
+			<span class="swatch" style="background:{current.color}"></span>
+			<input
+				type="color"
+				value={current.color}
+				disabled={!current.enabled}
+				oninput={(e) => set("color", (e.target as HTMLInputElement).value)}
+			/>
+		</label>
+		<label class="plate-opacity">
+			<span>
+				Opacity
+				<output>{current.opacity}%</output>
+			</span>
+			<input
+				type="range"
+				min="0"
+				max="100"
+				step="5"
+				value={current.opacity}
+				disabled={!current.enabled}
+				oninput={(e) =>
+					set("opacity", Number((e.target as HTMLInputElement).value))}
+			/>
+		</label>
+	</div>
+</div>
+
+<style>
+	.control {
+		display: grid;
+		gap: var(--space-m);
+		margin-bottom: var(--space-xl);
+		color: var(--color-text-muted);
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-m);
+	}
+	.plate-label {
+		color: var(--color-text);
+		font-size: var(--font-size-s);
+		letter-spacing: var(--space-text-l);
+		text-transform: uppercase;
+	}
+	.plate-row {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: var(--space-m) var(--space-l);
+	}
+	.plate-row.off {
+		opacity: 0.55;
+	}
+	.plate-enabled {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		grid-column: 1 / -1;
+	}
+	.plate-enabled input[type="checkbox"] {
+		width: var(--space-xl);
+		height: var(--space-xl);
+		accent-color: var(--color-main);
+	}
+	.plate-color {
+		display: grid;
+		grid-template-columns: var(--space-xxl) 1fr;
+		align-items: center;
+		gap: var(--space-m);
+	}
+	.swatch {
+		width: var(--space-xxl);
+		height: var(--space-xxl);
+		border-radius: var(--radius-s);
+		border: var(--size-border) solid var(--color-border);
+	}
+	.plate-color input[type="color"] {
+		width: 100%;
+		height: var(--space-xxl);
+		padding: 0;
+		background: var(--color-background);
+		border: var(--size-border) solid var(--color-border);
+		border-radius: var(--radius-s);
+	}
+	.plate-opacity {
+		display: grid;
+		gap: var(--space-m);
+	}
+	.plate-opacity > span {
+		display: flex;
+		justify-content: space-between;
+	}
+	.plate-opacity output {
+		color: var(--color-text);
+	}
+	.plate-opacity input[type="range"] {
+		width: 100%;
+		accent-color: var(--color-main);
+		color: var(--color-text);
+	}
+</style>

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

@@ -305,12 +305,16 @@ describe("registry-new (переведённые инструменты)", () =>
 		expect(s.offset).toEqual({ x: 50, y: 0 });
 	});
 
-	it("add-text: дефолты position9, font-style и текстовых полей", () => {
+	it("add-text: дефолты position9, font-style, plate и текстовых полей", () => {
 		const tool = TOOLS.find((t) => t.id === "add-text-png")!;
 		const d = defaultSchemaParams(tool.schema);
 		expect(d.position).toBe("bottom-right");
 		expect(d.text).toBe("Hello!");
-		expect(d.plate).toBe(false);
+		expect(d.plate).toEqual({
+			enabled: false,
+			color: "#000000",
+			opacity: 60,
+		});
 		expect(d.style).toEqual({
 			font: "sans",
 			size: 48,
@@ -319,7 +323,7 @@ describe("registry-new (переведённые инструменты)", () =>
 		});
 	});
 
-	it("sanitize чинит мусор в position9, font-style и оставляет валидные значения", () => {
+	it("sanitize чинит мусор в position9, font-style, plate и оставляет валидные значения", () => {
 		const tool = TOOLS.find((t) => t.id === "date-stamp-png")!;
 		const s = sanitizeSchemaParams(tool.schema, {
 			format: "YYYY-MM-DD",
@@ -331,9 +335,11 @@ describe("registry-new (переведённые инструменты)", () =>
 			},
 			position: "somewhere-outside",
 			margin: 20,
-			plate: true,
-			plateColor: "#000000",
-			plateOpacity: 55,
+			plate: {
+				enabled: "yes",
+				color: "teal",
+				opacity: 500,
+			},
 		});
 		expect(s.position).toBe("bottom-right");
 		expect(s.style).toEqual({
@@ -342,6 +348,11 @@ describe("registry-new (переведённые инструменты)", () =>
 			bold: false,
 			color: "#ffffff",
 		});
+		expect(s.plate).toEqual({
+			enabled: true,
+			color: "#000000",
+			opacity: 100,
+		});
 		const valid = sanitizeSchemaParams(tool.schema, {
 			...defaultSchemaParams(tool.schema),
 			position: "top-center",

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

@@ -1,7 +1,7 @@
 import { formatStamp } from "../core/datefmt";
 import { drawTextBlock } from "../core/domText";
 import type { Position9 } from "../core/textdraw";
-import type { FontStyle } from "../registry-schema";
+import type { FontStyle, Plate } from "../registry-schema";
 import { field, toolSchema } from "../registry-schema";
 import type { ToolEntry } from "./types";
 
@@ -10,9 +10,7 @@ interface AddTextParams {
 	style: FontStyle;
 	position: Position9;
 	margin: number;
-	plate: boolean;
-	plateColor: string;
-	plateOpacity: number;
+	plate: Plate;
 }
 
 const addTextSchema = toolSchema<AddTextParams>({
@@ -27,9 +25,7 @@ const addTextSchema = toolSchema<AddTextParams>({
 	}),
 	position: field.position9({ default: "bottom-right" }),
 	margin: field.slider({ min: 0, max: 200, step: 1, default: 24 }),
-	plate: field.checkbox({ default: false }),
-	plateColor: field.color({ default: "#000000" }),
-	plateOpacity: field.slider({ min: 0, max: 100, step: 5, default: 60 }),
+	plate: field.plate({ enabled: false, color: "#000000", opacity: 60 }),
 });
 
 const addText: ToolEntry<AddTextParams> = {
@@ -50,8 +46,8 @@ const addText: ToolEntry<AddTextParams> = {
 			opacityPercent: 100,
 			position: p.position,
 			margin: p.margin,
-			plateColor: p.plate ? p.plateColor : undefined,
-			plateOpacityPercent: p.plateOpacity,
+			plateColor: p.plate.enabled ? p.plate.color : undefined,
+			plateOpacityPercent: p.plate.opacity,
 		}),
 };
 
@@ -60,9 +56,7 @@ interface DateStampParams {
 	style: FontStyle;
 	position: Position9;
 	margin: number;
-	plate: boolean;
-	plateColor: string;
-	plateOpacity: number;
+	plate: Plate;
 }
 
 const dateStampSchema = toolSchema<DateStampParams>({
@@ -80,9 +74,7 @@ const dateStampSchema = toolSchema<DateStampParams>({
 	}),
 	position: field.position9({ default: "bottom-right" }),
 	margin: field.slider({ min: 0, max: 200, step: 1, default: 20 }),
-	plate: field.checkbox({ default: true }),
-	plateColor: field.color({ default: "#000000" }),
-	plateOpacity: field.slider({ min: 0, max: 100, step: 5, default: 55 }),
+	plate: field.plate({ enabled: true, color: "#000000", opacity: 55 }),
 });
 
 const dateStamp: ToolEntry<DateStampParams> = {
@@ -103,8 +95,8 @@ const dateStamp: ToolEntry<DateStampParams> = {
 			opacityPercent: 100,
 			position: p.position,
 			margin: p.margin,
-			plateColor: p.plate ? p.plateColor : undefined,
-			plateOpacityPercent: p.plateOpacity,
+			plateColor: p.plate.enabled ? p.plate.color : undefined,
+			plateOpacityPercent: p.plate.opacity,
 		}),
 };
 

web/src/lib/registry-schema.ts

@@ -137,6 +137,23 @@ export interface FontStyleSpec {
 	color: string;
 }
 
+/**
+ * Подложка-плашка под текстовой надписью: вкл/выкл, цвет и непрозрачность
+ * как один объект (add-text, date-stamp).
+ */
+export interface Plate {
+	enabled: boolean;
+	color: string;
+	opacity: number;
+}
+
+export interface PlateSpec {
+	kind: "plate";
+	enabled: boolean;
+	color: string;
+	opacity: number;
+}
+
 /**
  * «Объект as const» kind → спека поля. Единственный источник правды для
  * перечня kinds: `FieldSpecKind` = ключи map, `FieldSpec` = значение по любому
@@ -155,6 +172,7 @@ export const fieldSpecs = {
 	offset: {} as OffsetSpec,
 	position9: {} as Position9Spec,
 	"font-style": {} as FontStyleSpec,
+	plate: {} as PlateSpec,
 } as const;
 
 export type FieldSpecKind = keyof typeof fieldSpecs;
@@ -232,6 +250,13 @@ export const field = {
 	}): Field<FontStyle> => ({
 		spec: { kind: "font-style", ...s },
 	}),
+	plate: (s: {
+		enabled: boolean;
+		color: string;
+		opacity: number;
+	}): Field<Plate> => ({
+		spec: { kind: "plate", ...s },
+	}),
 };
 
 /**
@@ -271,6 +296,12 @@ export function defaultSchemaParams<P>(
 				bold: spec.bold,
 				color: spec.color,
 			};
+		} else if (spec.kind === "plate") {
+			out[key] = {
+				enabled: spec.enabled,
+				color: spec.color,
+				opacity: spec.opacity,
+			};
 		} else {
 			out[key] = spec.default;
 		}
@@ -388,6 +419,28 @@ export function sanitizeSchemaParams<P>(
 				};
 				break;
 			}
+			case "plate": {
+				const r =
+					typeof raw === "object" &&
+					raw !== null &&
+					"enabled" in raw &&
+					"color" in raw &&
+					"opacity" in raw
+						? (raw as Record<string, unknown>)
+						: undefined;
+				out[key] = {
+					enabled: typeof r?.enabled === "boolean" ? r.enabled : spec.enabled,
+					color:
+						typeof r?.color === "string" && /^#[0-9a-f]{6}$/i.test(r.color)
+							? r.color
+							: spec.color,
+					opacity:
+						typeof r?.opacity === "number" && Number.isFinite(r.opacity)
+							? clamp(r.opacity, 0, 100)
+							: spec.opacity,
+				};
+				break;
+			}
 			case "offset": {
 				const r =
 					typeof raw === "object" && raw !== null && "x" in raw && "y" in raw