feat: fix tools pages, dom audit fix

2026-08-29 09:08:09 +05:00
parent b695f5d58c
commit 9ef6ae03c6
8 changed files with 530 additions and 506 deletions
@@ -0,0 +1,178 @@
+import type { ToolEntry } from "$lib/registry";
+
+export type SegmentedField = {
+	id: string;
+	kind: "segmented";
+	label: string;
+	options: string[];
+	selected: number;
+};
+export type ColorPairField = {
+	id: string;
+	kind: "color-pair";
+	label: string;
+	from: string;
+	to: string;
+};
+export type SliderField = {
+	id: string;
+	kind: "slider" | "direction";
+	label: string;
+	value: number;
+	min: number;
+	max: number;
+	suffix: string;
+	space?: boolean;
+	hints?: [string, string];
+};
+export type ColorField = {
+	id: string;
+	kind: "color";
+	label: string;
+	value: string;
+	native?: boolean;
+	reference?: boolean;
+};
+export type ToggleField = {
+	id: string;
+	kind: "toggle";
+	label: string;
+	checked: boolean;
+	note: string;
+};
+
+export type FieldDef =
+	| SegmentedField
+	| ColorPairField
+	| SliderField
+	| ColorField
+	| ToggleField;
+
+export interface PreviewToolView {
+	title: string;
+	lede: string;
+	panelLabel: string;
+	panelStrong: string;
+	stepType: string;
+	toolbarLabel: string;
+	fileName: string;
+	downloadLabel: string;
+	layoutClass: string;
+	previewClass: string;
+	preview: "gradient" | "comparison";
+	fields: FieldDef[];
+}
+
+export type FieldValue = number | string | boolean | { from: string; to: string };
+
+function initValue(f: FieldDef): FieldValue {
+	switch (f.kind) {
+		case "segmented":
+			return f.selected;
+		case "color-pair":
+			return { from: f.from, to: f.to };
+		case "color":
+			return f.value;
+		case "slider":
+		case "direction":
+			return f.value;
+		case "toggle":
+			return f.checked;
+	}
+}
+
+export function initForm(view: PreviewToolView): Record<string, FieldValue> {
+	const form: Record<string, FieldValue> = {};
+	for (const f of view.fields) form[f.id] = initValue(f);
+	return form;
+}
+
+const gradient: PreviewToolView = {
+	title: "Gradient background.",
+	lede: "Create a clean, export-ready gradient with precise control over color, direction and transparency.",
+	panelLabel: "GRADIENT SETTINGS",
+	panelStrong: "Configure output",
+	stepType: "TOOL 01",
+	toolbarLabel: "OUTPUT PREVIEW",
+	fileName: "gradient.png",
+	downloadLabel: "Download PNG",
+	layoutClass: "gradient-layout",
+	previewClass: "gradient-preview",
+	preview: "gradient",
+	fields: [
+		{
+			id: "type",
+			kind: "segmented",
+			label: "GRADIENT TYPE",
+			options: ["Linear", "Radial"],
+			selected: 0,
+		},
+		{
+			id: "stops",
+			kind: "color-pair",
+			label: "COLOR STOPS",
+			from: "#1769D2",
+			to: "#00A8C7",
+		},
+		{ id: "dir", kind: "direction", label: "DIRECTION", value: 135, min: 0, max: 360, suffix: "°", space: true },
+		{ id: "op", kind: "slider", label: "OPACITY", value: 100, min: 0, max: 100, suffix: "%", space: true },
+	],
+};
+
+const background: PreviewToolView = {
+	title: "Remove background.",
+	lede: "Select a background color and tune the edge detection. Changes are processed automatically in your browser.",
+	panelLabel: "REMOVER SETTINGS",
+	panelStrong: "Configure detection",
+	stepType: "TOOL 02",
+	toolbarLabel: "SOURCE / RESULT",
+	fileName: "comparison.png",
+	downloadLabel: "Download result",
+	layoutClass: "remover-layout",
+	previewClass: "remover-preview",
+	preview: "comparison",
+	fields: [
+		{
+			id: "color",
+			kind: "color",
+			label: "BACKGROUND COLOR",
+			value: "#E8EEF2",
+			native: true,
+			reference: true,
+		},
+		{
+			id: "sim",
+			kind: "slider",
+			label: "COLOR SIMILARITY",
+			value: 72,
+			min: 0,
+			max: 100,
+			suffix: "%",
+			space: true,
+			hints: ["strict edges", "more removal"],
+		},
+		{
+			id: "outer",
+			kind: "toggle",
+			label: "OUTER COLOR ONLY",
+			checked: true,
+			note: "Only remove connected background pixels from the edges.",
+		},
+		{
+			id: "mask",
+			kind: "toggle",
+			label: "SHOW MASK",
+			checked: false,
+			note: "Preview the detected transparency mask.",
+		},
+	],
+};
+
+export const PREVIEW_TOOL_VIEWS: Record<string, PreviewToolView> = {
+	"linear-gradient-png": gradient,
+	"remove-background-png": background,
+};
+
+export function getPreviewView(tool: ToolEntry): PreviewToolView | undefined {
+	return PREVIEW_TOOL_VIEWS[tool.id];
+}