From d1a386f92f2e9e7fa859cef950ca68d5f3729194 Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Thu, 3 Sep 2026 16:29:35 +0500 Subject: [PATCH] fix: update tools list - show all tools --- .../lib/components/kit/CatalogToolbar.svelte | 2 + web/src/lib/preview/catalog.ts | 245 ++---------------- web/src/lib/registry.ts | 13 +- 3 files changed, 35 insertions(+), 225 deletions(-) diff --git a/web/src/lib/components/kit/CatalogToolbar.svelte b/web/src/lib/components/kit/CatalogToolbar.svelte index 892f2ef..c0820e3 100644 --- a/web/src/lib/components/kit/CatalogToolbar.svelte +++ b/web/src/lib/components/kit/CatalogToolbar.svelte @@ -14,7 +14,9 @@ { value: "color", label: "COLOR" }, { value: "geometry", label: "GEOMETRY" }, { value: "filters", label: "FILTERS" }, + { value: "text", label: "TEXT" }, { value: "analyze", label: "ANALYZE" }, + { value: "generate", label: "GENERATE" }, ]; diff --git a/web/src/lib/preview/catalog.ts b/web/src/lib/preview/catalog.ts index 72bbc68..0440a1c 100644 --- a/web/src/lib/preview/catalog.ts +++ b/web/src/lib/preview/catalog.ts @@ -1,3 +1,4 @@ +import { CATEGORIES } from "../categories"; import { TOOLS, type ToolEntry } from "../registry"; export type PreviewGroup = { @@ -6,230 +7,26 @@ export type PreviewGroup = { tools: ToolEntry[]; }; +/** Uppercase labels для всех категорий каталога (стиль нового дизайна). */ +const GROUP_LABELS: Record = { + convert: "CONVERT", + alpha: "TRANSPARENCY", + color: "COLOR", + geometry: "GEOMETRY", + filters: "FILTERS", + text: "TEXT", + analyze: "ANALYZE", + generate: "GENERATE", +}; + /** - * Preview-only catalog: a trimmed view of the registry that mirrors - * refs-html/list-tools.html (28 tools in 6 groups). Used exclusively by - * /preview and /kit so the working site (old) and /ui keep the full registry. - * - * Titles/descriptions are overridden with the ref's exact copy where they - * diverge from the registry. The underlying ToolEntry (params, run, …) is - * reused so navigation and tool pages stay functional. + * Preview-каталог: полный реестр инструментов, сгруппированный по категориям. + * Больше не урезаем до референс-набора — показываем все инструменты из TOOLS. */ -const REF: { - group: string; - label: string; - tools: { id: string; title: string; description: string }[]; -}[] = [ - { - group: "convert", - label: "CONVERT", - tools: [ - { - id: "jpg-to-png", - title: "Convert JPG to PNG", - description: - "Re-encode JPEG files as lossless PNG while preserving transparency.", - }, - { - id: "webp-to-png", - title: "Convert WebP to PNG", - description: - "Turn WebP images into a universal PNG format for any workflow.", - }, - { - id: "png-to-base64", - title: "PNG to Base64", - description: - "Encode an image as a base64 string for embedding in code or styles.", - }, - { - id: "png-to-data-uri", - title: "PNG to Data URI", - description: "Build a complete data URI ready for HTML and CSS.", - }, - { - id: "convert-png-to-jpg", - title: "Convert PNG to JPG", - description: - "Composite transparency over a selected backdrop and export JPEG.", - }, - ], - }, - { - group: "alpha", - label: "TRANSPARENCY", - tools: [ - { - id: "remove-background-png", - title: "Remove background PNG", - description: - "Remove a solid background by color, tolerance, or edge-connected regions.", - }, - { - id: "extract-alpha-mask-png", - title: "Extract alpha mask", - description: - "Turn the alpha channel into a clean black-and-white mask.", - }, - { - id: "round-corners-png", - title: "Round corners PNG", - description: "Clip the image corners by a precise radius percentage.", - }, - { - id: "add-stroke-png", - title: "Outline PNG", - description: - "Add a colored ring around opaque content with adjustable thickness.", - }, - { - id: "change-png-opacity", - title: "Change PNG opacity", - description: - "Multiply the alpha channel while keeping the original colors unchanged.", - }, - ], - }, - { - group: "color", - label: "COLOR", - tools: [ - { - id: "linear-gradient-png", - title: "Create gradient PNG", - description: - "Generate a smooth transition between two colors with direction controls.", - }, - { - id: "grayscale-png", - title: "Grayscale PNG", - description: "Convert the image to luminance-based shades of gray.", - }, - { - id: "invert-colors-png", - title: "Invert colors PNG", - description: - "Invert every color channel while leaving alpha untouched.", - }, - { - id: "adjust-brightness-contrast-png", - title: "Brightness & contrast", - description: - "Adjust brightness and contrast across a controlled range.", - }, - { - id: "temperature-png", - title: "Temperature PNG", - description: - "Make an image warmer or cooler with a single precise control.", - }, - ], - }, - { - group: "geometry", - label: "GEOMETRY", - tools: [ - { - id: "resize-png", - title: "Resize PNG", - description: - "Scale an image with bilinear interpolation and optional aspect lock.", - }, - { - id: "crop-png", - title: "Crop PNG", - description: - "Cut a rectangular area with exact coordinates and dimensions.", - }, - { - id: "rotate-png", - title: "Rotate PNG", - description: "Rotate by 90, 180, or 270 degrees without quality loss.", - }, - { - id: "flip-png", - title: "Flip PNG", - description: "Mirror the image horizontally or vertically.", - }, - { - id: "add-padding-png", - title: "Add padding to PNG", - description: - "Expand the canvas on all sides by a chosen number of pixels.", - }, - ], - }, - { - group: "filters", - label: "FILTERS", - tools: [ - { - id: "blur-png", - title: "Blur PNG", - description: - "Apply a fast Gaussian-style blur with transparent edge handling.", - }, - { - id: "sharpen-png", - title: "Sharpen PNG", - description: "Emphasize edges with an adjustable sharpening kernel.", - }, - { - id: "vignette-png", - title: "Vignette PNG", - description: - "Smoothly darken the image edges while preserving the center.", - }, - { - id: "jpeg-artifacts-png", - title: "JPEG artifacts", - description: "Simulate low-quality JPEG recompression for testing.", - }, - ], - }, - { - group: "analyze", - label: "ANALYZE", - tools: [ - { - id: "png-info", - title: "PNG info", - description: - "Inspect dimensions, alpha presence, and unique color count.", - }, - { - id: "png-is-grayscale", - title: "Check grayscale", - description: "Report whether the image contains only shades of gray.", - }, - { - id: "png-is-transparent", - title: "Check transparency", - description: "Detect transparent and semi-transparent pixels.", - }, - { - id: "png-orientation", - title: "PNG orientation", - description: "Classify the image as portrait, landscape, or square.", - }, - ], - }, -]; +export const PREVIEW_GROUPS: PreviewGroup[] = CATEGORIES.map((category) => ({ + id: category, + label: GROUP_LABELS[category] ?? category.toUpperCase(), + tools: TOOLS.filter((tool) => tool.category === category), +})).filter((group) => group.tools.length > 0); -const TOOL_BY_ID = new Map(TOOLS.map((t) => [t.id, t])); - -export const PREVIEW_GROUPS: PreviewGroup[] = REF.map((g) => ({ - id: g.group, - label: g.label, - tools: g.tools.map((spec) => { - const base = TOOL_BY_ID.get(spec.id); - if (!base) { - throw new Error(`preview catalog: missing tool ${spec.id}`); - } - return { ...base, title: spec.title, description: spec.description }; - }), -})); - -// The ref header statically reads 32 (its own count); the body lists 28 cards. -// Mirroring the ref exactly keeps the audit at 0/0. -export const PREVIEW_TOTAL = 32; +export const PREVIEW_TOTAL = TOOLS.length; diff --git a/web/src/lib/registry.ts b/web/src/lib/registry.ts index a799ceb..69e4501 100644 --- a/web/src/lib/registry.ts +++ b/web/src/lib/registry.ts @@ -1,5 +1,5 @@ import type { CategoryId } from "./categories"; -import type { ToolSchema } from "./registry-schema"; +import { field, toolSchema, type ToolSchema } from "./registry-schema"; import { ToolError } from "./core/errors"; import { colorMask, @@ -564,6 +564,16 @@ function hexToRgba(hex: string, alpha = 255): [number, number, number, number] { ]; } +interface AddBorderParams { + thickness: number; + color: string; +} + +const addBorderSchema = toolSchema({ + thickness: field.number({ min: 1, max: 500, step: 1, default: 5 }), + color: field.color({ default: "#000000" }), +}); + export const TOOLS: ToolEntry[] = [ ...channelEntries(), ...maskEntries(), @@ -933,6 +943,7 @@ export const TOOLS: ToolEntry[] = [ description: "Draws a colored frame of the chosen thickness around the image.", category: "geometry", + schema: addBorderSchema, params: [ { id: "thickness",