feat: update use dimension tools

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

@@ -1,7 +1,15 @@
-import type { ToolEntry } from "./types";
-import { field, toolSchema, type Dimension } from "../registry-schema";
-import { solidImage } from "../core/generate";
+import { renderTextToImage } from "../core/domText";
+import { colorSpectrum, drawGrid, randomColorBlocks } from "../core/gen-tools";
+import { gradientImage, noiseImage, solidImage } from "../core/generate";
+import { changeCanvasSize } from "../core/geometry";
 import { hexToRgb } from "../core/palette";
+import { field, toolSchema, type Dimension } from "../registry-schema";
+import type { ToolEntry } from "./types";
+
+function rgba(hex: string): [number, number, number, number] {
+	const { r, g, b } = hexToRgb(hex);
+	return [r, g, b, 255];
+}
 
 interface CreateEmptyParams {
 	size: Dimension;
@@ -28,9 +36,240 @@ const createEmpty: ToolEntry<CreateEmptyParams> = {
 		if (p.transparent) {
 			return solidImage(w, h, [0, 0, 0, 0]);
 		}
-		const { r, g, b } = hexToRgb(p.color);
-		return solidImage(w, h, [r, g, b, 255]);
+		return solidImage(w, h, rgba(p.color));
 	},
 };
 
-export const generateEntries = [createEmpty];
+interface SingleColorParams {
+	size: Dimension;
+	color: string;
+}
+
+export const singleColorSchema = toolSchema<SingleColorParams>({
+	size: field.dimension({ min: 1, max: 20000, width: 256, height: 256 }),
+	color: field.color({ default: "#ff0000" }),
+});
+
+const singleColor: ToolEntry<SingleColorParams> = {
+	id: "single-color-png",
+	title: "Create solid color PNG",
+	description: "Generates a rectangle of the given size and color.",
+	category: "generate",
+	schema: singleColorSchema,
+	generate: (p) => {
+		const w = Math.trunc(p.size.width);
+		const h = Math.trunc(p.size.height);
+		return solidImage(w, h, rgba(p.color));
+	},
+};
+
+interface RandomNoiseParams {
+	size: Dimension;
+	seed: number;
+}
+
+export const randomNoiseSchema = toolSchema<RandomNoiseParams>({
+	size: field.dimension({ min: 1, max: 5000, width: 512, height: 512 }),
+	seed: field.number({ min: 0, max: 999999999, step: 1, default: 1 }),
+});
+
+const randomNoise: ToolEntry<RandomNoiseParams> = {
+	id: "random-noise-png",
+	title: "Create random noise PNG",
+	description:
+		"Generates an image with random pixels. The seed fixes the result: one seed — one image.",
+	category: "generate",
+	schema: randomNoiseSchema,
+	generate: (p) => {
+		const w = Math.trunc(p.size.width);
+		const h = Math.trunc(p.size.height);
+		return noiseImage(w, h, p.seed);
+	},
+};
+
+interface LinearGradientParams {
+	size: Dimension;
+	fromColor: string;
+	toColor: string;
+	direction: "horizontal" | "vertical";
+}
+
+export const linearGradientSchema = toolSchema<LinearGradientParams>({
+	size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }),
+	fromColor: field.color({ default: "#000000" }),
+	toColor: field.color({ default: "#ffffff" }),
+	direction: field.select({
+		default: "horizontal",
+		options: [
+			{ value: "horizontal", label: "Horizontal" },
+			{ value: "vertical", label: "Vertical" },
+		],
+	}),
+});
+
+const linearGradient: ToolEntry<LinearGradientParams> = {
+	id: "linear-gradient-png",
+	title: "Create gradient PNG",
+	description:
+		"Generates a smooth transition between two colors, horizontally or vertically.",
+	category: "generate",
+	schema: linearGradientSchema,
+	generate: (p) => {
+		const w = Math.trunc(p.size.width);
+		const h = Math.trunc(p.size.height);
+		return gradientImage(w, h, rgba(p.fromColor), rgba(p.toColor), p.direction);
+	},
+};
+
+interface ColorSpectrumParams {
+	size: Dimension;
+	direction: "horizontal" | "vertical";
+	saturation: number;
+	lightness: number;
+}
+
+export const colorSpectrumSchema = toolSchema<ColorSpectrumParams>({
+	size: field.dimension({ min: 1, max: 5000, width: 1024, height: 128 }),
+	direction: field.select({
+		default: "horizontal",
+		options: [
+			{ value: "horizontal", label: "Horizontal" },
+			{ value: "vertical", label: "Vertical" },
+		],
+	}),
+	saturation: field.slider({ min: 0, max: 100, step: 1, default: 100 }),
+	lightness: field.slider({ min: 0, max: 100, step: 1, default: 50 }),
+});
+
+const colorSpectrumTool: ToolEntry<ColorSpectrumParams> = {
+	id: "color-spectrum-png",
+	title: "Color Spectrum PNG",
+	description:
+		"Full hue rainbow 0–360° along the chosen axis with adjustable saturation and lightness.",
+	category: "generate",
+	schema: colorSpectrumSchema,
+	generate: (p) => {
+		const w = Math.trunc(p.size.width);
+		const h = Math.trunc(p.size.height);
+		return colorSpectrum(w, h, p.direction, p.saturation, p.lightness);
+	},
+};
+
+interface RandomColorsParams {
+	size: Dimension;
+	blockSize: number;
+	seed: number;
+}
+
+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 }),
+});
+
+const randomColors: ToolEntry<RandomColorsParams> = {
+	id: "random-colors-png",
+	title: "Random Color Blocks PNG",
+	description:
+		"Fills the canvas with random vivid color blocks. Deterministic by seed.",
+	category: "generate",
+	schema: randomColorsSchema,
+	generate: (p) => {
+		const w = Math.trunc(p.size.width);
+		const h = Math.trunc(p.size.height);
+		return randomColorBlocks(w, h, p.blockSize, p.seed);
+	},
+};
+
+interface DrawGridParams {
+	size: Dimension;
+	cols: number;
+	rows: number;
+	lineWidth: number;
+	color: string;
+	transparentBg: boolean;
+}
+
+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 }),
+});
+
+const drawGridTool: ToolEntry<DrawGridParams> = {
+	id: "draw-grid-png",
+	title: "Draw Grid PNG",
+	description:
+		"Draws a grid with custom columns, rows and line width on a transparent or white background.",
+	category: "generate",
+	schema: drawGridSchema,
+	generate: (p) => {
+		const w = Math.trunc(p.size.width);
+		const h = Math.trunc(p.size.height);
+		return drawGrid(
+			w,
+			h,
+			p.cols,
+			p.rows,
+			p.lineWidth,
+			p.color,
+			p.transparentBg,
+		);
+	},
+};
+
+interface PlaceholderParams {
+	size: Dimension;
+	backgroundColor: string;
+	color: string;
+	showText: boolean;
+}
+
+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 }),
+});
+
+const placeholder: ToolEntry<PlaceholderParams> = {
+	id: "placeholder-png",
+	title: "Create Placeholder PNG",
+	description:
+		"Generates a placeholder rectangle with its dimensions printed in the center.",
+	category: "generate",
+	schema: placeholderSchema,
+	generate: (p) => {
+		const w = Math.trunc(p.size.width);
+		const h = Math.trunc(p.size.height);
+		let out = solidImage(w, h, rgba(p.backgroundColor));
+		if (p.showText) {
+			const label = renderTextToImage({
+				text: `${w} × ${h}`,
+				fontSize: Math.max(12, Math.round(Math.min(w, h) * 0.14)),
+				font: "sans",
+				bold: true,
+				color: p.color,
+				backgroundColor: p.backgroundColor,
+				transparentBg: false,
+				padding: 0,
+			});
+			out = changeCanvasSize(label, w, h, "center");
+		}
+		return out;
+	},
+};
+
+export const generateEntries = [
+	createEmpty,
+	singleColor,
+	randomNoise,
+	linearGradient,
+	colorSpectrumTool,
+	randomColors,
+	drawGridTool,
+	placeholder,
+];