feat: add new registry for preview design

docs/plan-composite-params.md

@@ -1,10 +1,14 @@
 # План: составные типы параметров и полная типизация pipeline
 
-> Статус: **в реализации.** Фаза 0 (фундамент) — сделана. Следующее: Фаза 1 —
-> один полноценный рабочий инструмент в preview, затем масштабирование.
+> Статус: **в реализации.** Фаза 0 (фундамент) ✔, Фаза 1 (рабочий инструмент
+> в preview) ✔, Фаза 2 — начата: построен отдельный **новый registry**
+> (`web/src/lib/registry-new/`) с первыми инструментами (`add-border-png`,
+> `add-stroke-png`), preview переключён на него. Следующее: продолжить Фазу 2 —
+> следующий инструмент `find-contour-png` в новый registry.
 >
-> Файлы: `web/src/lib/registry.ts` (3918 строк), `web/src/lib/preview/tool-views.ts` (193 строки),
-> `web/src/lib/registry-schema.ts`.
+> Ключевые файлы нового registry: `web/src/lib/registry-new/{types,geometry,alpha,index}.ts`,
+> `web/src/lib/registry-schema.ts`. Старый `web/src/lib/registry.ts` разбит по
+> категориям в `web/src/lib/registry/` (см. `registry.ts` — тонкий баррель).
 
 ## Ключевая стратегия: параллельная сборка, старый UI не трогаем
 
@@ -30,6 +34,31 @@
   инструментов, старый UI ничего не замечает.
 - Удаление старого UI (после перехода) попутно удаляет и старый `ParamDef[]`
 
+### Разделение registry по UI (новое решение, Фаза 2+)
+
+Помимо двух схем, registry тоже разделён по UI (по факту миграции):
+
+- **Старый registry** (`web/src/lib/registry.ts` + `registry/` +
+  `registry-helpers.ts`) — работает на старом UI, использует `ParamDef[]` и
+  `tool-views.ts`. **Не трогаем**; идёт под удаление вместе со старым UI.
+- **Новый registry** (`web/src/lib/registry-new/`) — строится **с нуля «как надо»**:
+  `ToolEntry<P>` с обязательным `schema`, типизированный `run`, **без** `ParamDef[]`
+  и **без** связи со старым. Импортирует core-функции (`expandCanvas`,
+  `strokeImage`, …) напрямую. Наполняется **по-инструментно** по мере миграции
+  (не разовым переводом всех 130). Preview показывает только переведённые
+  инструменты.
+
+Preview (`catalog.ts`, маршруты `preview/**`, `SchemaToolView`, `SchemaFields`)
+импортируют из `$lib/registry-new`. После удаления старого UI `registry-new/`
+переименуется в `registry`.
+
+**Нюанс по worker:** `executor.worker.ts` резолвит инструменты по `id` в
+**старом** registry. Для инструментов, существующих в обоих (сейчас
+`add-border/add-stroke`), worker работает. Для новых инструментов, которых нет в
+старом registry, worker не найдёт → `executeStep` откатится на `runDirect`
+(fallback в `catch`) — это корректно, но стоит поправить worker на новый registry
+при дальнейшей миграции.
+
 ## Проблема (текущая)
 
 - `ParamDef` — плоский union из 6 примитивов (`number | slider | select |
@@ -227,7 +256,11 @@ Typed field builders + `Field<T>` + `toolSchema<P>()` + `ToolSchema<P>` —
 (лишний/неверный/отсутствующий ключ ловит TS), тесты, svelte-check без новых
 ошибок.
 
-### Фаза 1 — ОДИН полноценный рабочий инструмент в preview (срез)
+### Фаза 1 — ОДИН полноценный рабочий инструмент в preview (срез) ✔ (сделано)
+
+Инструмент переехал в `registry-new` и рендерится через `SchemaToolView`
+(`SchemaFields`/`SchemaPreview`); применение реально работает end-to-end до
+картинки. Паттерн подтверждён. `find-contour-png` — следующий в этой фазе-2.
 
 5. **Инструмент «добавить рамку» (`add-border-png`)** — сделать полностью
    рабочим в preview:
@@ -249,10 +282,13 @@ Typed field builders + `Field<T>` + `toolSchema<P>()` + `ToolSchema<P>` —
 
 Одиночные/небольшие инструменты, где `interface Params` + `schema` не требуют
 составных типов. Каждый — отдельный маленький diff (~15-30 строк), тем самым
-проверенным в Фазе 1 паттерном:
+проверенным в Фазе 1 паттерном. **Переезжают в `registry-new`.**
 
-6. add-stroke-png (color + slider)
-7. find-contour-png (color + slider)
+Переведено: `add-border-png` (Фаза 1), `add-stroke-png`. Следующий —
+`find-contour-png`.
+
+6. ~~add-stroke-png (color + slider)~~ → переведён в `registry-new` ✔
+7. find-contour-png (color + slider) — **следующий**
 8. convert-png-to-jpg (color + slider)
 9. convert-png-to-webp (slider)
 10. remove-color-from-png (color + slider)
@@ -335,9 +371,8 @@ Typed field builders + `Field<T>` + `toolSchema<P>()` + `ToolSchema<P>` —
 
 - **Старый UI** (`ParamForm.svelte`, группа `(old)/`) — **не трогаем.** Работает
   на `ParamDef[]` как раньше.
-- **Новый UI** (kit/`ParamControl.svelte`, новый pipeline) — читает
-  `ToolSchema<P>`; поддержка составных типов и пер-инструмент layout
-  (`schema.layout`).
+- **Новый UI** (kit/`SchemaToolView` + `SchemaFields` + `SchemaPreview`, читает
+  `ToolSchema<P>`) — сейчас рендерит поля по схеме (number/slider/color).
 - `tool-views.ts` — со временем поглощается registry (preview/lede/layout →
   meta инструмента). Отдельный шаг, НЕ блокирует типизацию params.
 

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

@@ -8,7 +8,7 @@
 		type ToolSchema,
 	} from "$lib/registry-schema";
 	import { executeStep } from "$lib/tools/executor";
-	import type { ToolEntry } from "$lib/registry";
+	import type { ToolEntry } from "$lib/registry-new";
 	import SchemaFields from "$lib/components/kit/SchemaFields.svelte";
 	import SchemaPreview from "$lib/components/kit/SchemaPreview.svelte";
 

web/src/lib/preview/catalog.ts

@@ -1,5 +1,5 @@
 import { CATEGORIES } from "../categories";
-import { TOOLS, type ToolEntry } from "../registry";
+import { TOOLS, type ToolEntry } from "../registry-new";
 
 export type PreviewGroup = {
 	id: string;

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

@@ -0,0 +1,25 @@
+import type { ToolEntry } from "./types";
+import { field, toolSchema } from "../registry-schema";
+import { strokeImage } from "../core/morphology";
+
+interface AddStrokeParams {
+	color: string;
+	thickness: number;
+}
+
+export const addStrokeSchema = toolSchema<AddStrokeParams>({
+	color: field.color({ default: "#ff0000" }),
+	thickness: field.slider({ min: 1, max: 10, step: 1, default: 3 }),
+});
+
+const addStroke: ToolEntry<AddStrokeParams> = {
+	id: "add-stroke-png",
+	title: "Outline PNG",
+	description:
+		"Adds a colored ring outline around the opaque content with the chosen thickness.",
+	category: "alpha",
+	schema: addStrokeSchema,
+	run: (img, p) => strokeImage(img, p.thickness, p.color),
+};
+
+export const alphaEntries = [addStroke];

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

@@ -0,0 +1,33 @@
+import type { ToolEntry } from "./types";
+import { field, toolSchema } from "../registry-schema";
+import { expandCanvas } from "../core/geometry";
+
+interface AddBorderParams {
+	thickness: number;
+	color: string;
+}
+
+export const addBorderSchema = toolSchema<AddBorderParams>({
+	thickness: field.number({ min: 1, max: 500, step: 1, default: 5 }),
+	color: field.color({ default: "#000000" }),
+});
+
+const addBorder: ToolEntry<AddBorderParams> = {
+	id: "add-border-png",
+	title: "Add border to PNG",
+	description:
+		"Draws a colored frame of the chosen thickness around the image.",
+	category: "geometry",
+	schema: addBorderSchema,
+	run: (img, p) =>
+		expandCanvas(
+			img,
+			p.thickness,
+			p.thickness,
+			p.thickness,
+			p.thickness,
+			p.color,
+		),
+};
+
+export const geometryEntries = [addBorder];

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

@@ -0,0 +1,14 @@
+import type { ToolEntry } from "./types";
+import { geometryEntries } from "./geometry";
+import { alphaEntries } from "./alpha";
+
+export type { ToolEntry } from "./types";
+
+export const TOOLS: ToolEntry[] = [
+	...geometryEntries,
+	...alphaEntries,
+] as unknown as ToolEntry[];
+
+export function getTool(id: string): ToolEntry | undefined {
+	return TOOLS.find((tool) => tool.id === id);
+}

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

@@ -13,11 +13,11 @@ export type ToolEntry<P = Record<string, unknown>> = {
 	description: string;
 	category: CategoryId;
 	schema: ToolSchema<P>;
-	run: (img: PixelImage, params: P) => Promise<PixelImage> | PixelImage;
-	generate?: (params: P) => Promise<PixelImage> | PixelImage;
-	toText?: (img: PixelImage, params: P) => Promise<string> | string;
-	runFromText?: (text: string, params: P) => Promise<PixelImage> | PixelImage;
-	textToText?: (text: string) => Promise<string> | string;
-	preview?: (img: PixelImage, params: P) => Promise<PixelImage> | PixelImage;
+	run(img: PixelImage, params: P): Promise<PixelImage> | PixelImage;
+	generate?(params: P): Promise<PixelImage> | PixelImage;
+	toText?(img: PixelImage, params: P): Promise<string> | string;
+	runFromText?(text: string, params: P): Promise<PixelImage> | PixelImage;
+	textToText?(text: string): Promise<string> | string;
+	preview?(img: PixelImage, params: P): Promise<PixelImage> | PixelImage;
 	icon?: string;
 };

web/src/routes/preview/+page.svelte

@@ -4,7 +4,7 @@
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
 	import ToolCard from "$lib/components/kit/ToolCard.svelte";
 	import Button from "$lib/components/kit/ui/Button.svelte";
-	import { TOOLS } from "$lib/registry";
+	import { TOOLS } from "$lib/registry-new";
 	import { Search } from "@lucide/svelte";
 
 	let query = $state("");

web/src/routes/preview/tools/[id]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { getTool } from "$lib/registry";
-	import ToolView from "$lib/components/kit/ToolView.svelte";
+	import { getTool } from "$lib/registry-new";
 	import SchemaToolView from "$lib/components/kit/SchemaToolView.svelte";
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
 	import { SlidersHorizontal as ToolIcon } from "@lucide/svelte";
@@ -26,10 +25,8 @@
 			icon={ToolIcon}
 		/>
 	</div>
-{:else if tool.schema}
-	<SchemaToolView {tool} />
 {:else}
-	<ToolView {tool} />
+	<SchemaToolView {tool} />
 {/if}
 
 <style>

web/src/routes/preview/tools/[id]/+page.ts

@@ -1,4 +1,4 @@
-import { TOOLS } from "$lib/registry";
+import { TOOLS } from "$lib/registry-new";
 
 export const prerender = true;