feat: add new registry for preview design

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;