From 759e255e9d5e52a8356dfb6d6973330099ed54d6 Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Fri, 5 Jun 2026 23:24:16 -0300
Subject: [PATCH 01/10] feat(image): add rotate and flip image tool

---
 src/features/tools/data/tools.ts              | 102 +++
 .../tools/renderers/toolRenderers.tsx         |   3 +
 src/shared/utils/imageFiles.ts                |  38 ++
 .../image/image-rotator/ImageRotatorTool.tsx  | 606 ++++++++++++++++++
 src/tools/image/image-rotator/README.md       |  17 +
 .../imageRotator.service.test.ts              |  70 ++
 .../image-rotator/imageRotator.service.ts     | 236 +++++++
 .../image/image-rotator/imageRotator.types.ts |  50 ++
 src/tools/image/image-rotator/index.ts        |   1 +
 9 files changed, 1123 insertions(+)
 create mode 100644 src/tools/image/image-rotator/ImageRotatorTool.tsx
 create mode 100644 src/tools/image/image-rotator/README.md
 create mode 100644 src/tools/image/image-rotator/imageRotator.service.test.ts
 create mode 100644 src/tools/image/image-rotator/imageRotator.service.ts
 create mode 100644 src/tools/image/image-rotator/imageRotator.types.ts
 create mode 100644 src/tools/image/image-rotator/index.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index 80b9d14..4787685 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -568,6 +568,108 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "image-rotator",
+    slug: "rotar-imagen",
+    slugEn: "rotate-image",
+    name: { es: "Rotar imagen", en: "Rotate image" },
+    description: {
+      es: "Rota o voltea una imagen directamente en tu navegador.",
+      en: "Rotate or flip an image directly in your browser.",
+    },
+    category: "image",
+    tags: {
+      es: ["imagen", "rotar", "voltear", "png", "jpg", "webp"],
+      en: ["image", "rotate", "flip", "png", "jpg", "webp"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Rotar imagen online gratis",
+        description:
+          "Rota o voltea una imagen PNG, JPG o WebP desde tu navegador. Sin cuenta y sin subir archivos a Modulaq.",
+      },
+      en: {
+        title: "Rotate image online free",
+        description:
+          "Rotate or flip a PNG, JPG or WebP image from your browser. No account and no uploads to Modulaq.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Rotar imagen aplica rotaciones y volteos a una imagen local usando canvas, sin backend y sin subir archivos.",
+        howTo: [
+          "Selecciona una imagen PNG, JPG/JPEG o WebP.",
+          "Revisa el tipo, peso y dimensiones originales.",
+          "Aplica una o varias acciones: rotar 90 grados, rotar 180 grados o voltear.",
+          "Elige PNG, JPG o WebP si el navegador lo permite.",
+          "Prepara la imagen y descarga el resultado.",
+        ],
+        useCases: [
+          "Corregir la orientacion de una foto.",
+          "Reflejar una imagen horizontal o verticalmente.",
+          "Preparar una captura o recurso visual sin subirlo a un servidor.",
+        ],
+        limits: [
+          "JPG no conserva transparencia.",
+          "WebP aparece si tu navegador permite exportarlo correctamente.",
+          "Tamano maximo por imagen: 15 MB.",
+        ],
+        privacy:
+          "El procesamiento de esta imagen ocurre en tu navegador; no la subimos a Modulaq para rotarla.",
+        commonErrors: [
+          "Imagen danada o que el navegador no puede decodificar.",
+          "Archivo que no es PNG, JPG o WebP.",
+          "Formato de salida no disponible en el navegador actual.",
+        ],
+        technicalNotes: [
+          "La transformacion usa canvas en el navegador.",
+          "La rotacion 90/270 intercambia ancho y alto; 0/180 conserva dimensiones.",
+          "Los volteos horizontal y vertical conservan las dimensiones.",
+        ],
+      },
+      en: {
+        summary:
+          "Rotate image applies rotations and flips to a local image with canvas, without backend and without uploads.",
+        howTo: [
+          "Select a PNG, JPG/JPEG or WebP image.",
+          "Review the detected type, size and dimensions.",
+          "Apply one or more actions: rotate 90 degrees, rotate 180 degrees or flip.",
+          "Choose PNG, JPG or WebP if the browser supports it.",
+          "Prepare the image and download the result.",
+        ],
+        useCases: [
+          "Fix a photo orientation.",
+          "Mirror an image horizontally or vertically.",
+          "Prepare a screenshot or visual asset without uploading it to a server.",
+        ],
+        limits: [
+          "JPG does not preserve transparency.",
+          "WebP appears if your browser can export it correctly.",
+          "Maximum image size: 15 MB.",
+        ],
+        privacy:
+          "Processing happens in your browser; we don't upload this image to Modulaq to rotate it.",
+        commonErrors: [
+          "A damaged image or one the browser cannot decode.",
+          "A file that is not PNG, JPG or WebP.",
+          "Output format unavailable in the current browser.",
+        ],
+        technicalNotes: [
+          "The transformation uses browser canvas.",
+          "Rotation by 90/270 swaps width and height; 0/180 keeps dimensions.",
+          "Horizontal and vertical flips keep dimensions.",
+        ],
+      },
+    },
+  },
   {
     id: "image-compressor",
     slug: "comprimir-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index f246d11..ea73043 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -17,6 +17,9 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-converter": lazy(() =>
     import("../../../tools/image/image-converter").then((module) => ({ default: module.ImageConverterTool })),
   ),
+  "image-rotator": lazy(() =>
+    import("../../../tools/image/image-rotator").then((module) => ({ default: module.ImageRotatorTool })),
+  ),
   "image-resizer": lazy(() =>
     import("../../../tools/image/image-resizer").then((module) => ({ default: module.ImageResizerTool })),
   ),
diff --git a/src/shared/utils/imageFiles.ts b/src/shared/utils/imageFiles.ts
index 9396f22..5784e5a 100644
--- a/src/shared/utils/imageFiles.ts
+++ b/src/shared/utils/imageFiles.ts
@@ -13,6 +13,12 @@ export type BrowserImageExportOptions = {
   width?: number;
 };
 
+export type BrowserCanvasExportOptions = {
+  errorMessage?: string;
+  mimeType: BrowserImageMimeType;
+  quality?: number;
+};
+
 export type BrowserImageExportResult = {
   bytes: ArrayBuffer;
   height: number;
@@ -176,6 +182,38 @@ export async function loadBrowserImage(file: File, errorMessage = "No se pudo le
   }
 }
 
+export async function exportBrowserCanvas(
+  canvas: HTMLCanvasElement,
+  { errorMessage = "No se pudo convertir la imagen.", mimeType, quality }: BrowserCanvasExportOptions,
+): Promise<BrowserImageExportResult> {
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (nextBlob) => {
+        if (nextBlob) {
+          resolve(nextBlob);
+          return;
+        }
+
+        reject(new Error(errorMessage));
+      },
+      mimeType,
+      mimeType === "image/png" ? undefined : normalizeImageQuality(quality),
+    );
+  });
+
+  if (blob.type && blob.type !== mimeType) {
+    throw new Error("El navegador no generó el formato de imagen esperado.");
+  }
+
+  return {
+    bytes: await blob.arrayBuffer(),
+    height: canvas.height,
+    mimeType,
+    size: blob.size,
+    width: canvas.width,
+  };
+}
+
 export async function exportBrowserImageFile(
   file: File,
   { backgroundColor, errorMessage, height, mimeType, quality, width }: BrowserImageExportOptions,
diff --git a/src/tools/image/image-rotator/ImageRotatorTool.tsx b/src/tools/image/image-rotator/ImageRotatorTool.tsx
new file mode 100644
index 0000000..eeeccfa
--- /dev/null
+++ b/src/tools/image/image-rotator/ImageRotatorTool.tsx
@@ -0,0 +1,606 @@
+import {
+  Download,
+  FileImage,
+  FlipHorizontal2,
+  FlipVertical2,
+  Loader2,
+  RotateCcw,
+  RotateCw,
+  Upload,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import { getImageFileSizeLimitError } from "../../../shared/utils/fileProcessingLimits";
+import {
+  canExportBrowserImageFormat,
+  jpegQualityDecimalToPercent,
+  jpegQualityPercentToDecimal,
+} from "../../../shared/utils/imageFiles";
+import {
+  applyImageRotatorAction,
+  buildRotatedImageFileName,
+  defaultOutputBaseName,
+  defaultTransform,
+  formatFileSize,
+  getImageFormatLabel,
+  getImageMimeLabel,
+  getRotatedImageOutputBaseName,
+  getTransformedImageDimensions,
+  hasImageTransform,
+  readImageMetadata,
+  rotateImageFile,
+} from "./imageRotator.service";
+import type {
+  ImageRotatorAction,
+  ImageRotatorMetadata,
+  ImageRotatorOutputFormat,
+  ImageRotatorResult,
+  ImageRotatorStatus,
+  ImageRotatorTransform,
+} from "./imageRotator.types";
+
+const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+
+type DownloadableResult = ImageRotatorResult & {
+  url: string;
+};
+
+const baseOutputFormats: ImageRotatorOutputFormat[] = ["png", "jpeg"];
+
+const formatDescKeys: Record<ImageRotatorOutputFormat, TranslationKey> = {
+  png: "imageUi.png.desc",
+  jpeg: "imageUi.jpg.desc",
+  webp: "imageUi.webp.desc",
+};
+
+const actionOrder: ImageRotatorAction[] = [
+  "rotate-right",
+  "rotate-left",
+  "rotate-180",
+  "flip-horizontal",
+  "flip-vertical",
+];
+
+const actionIcons: Record<ImageRotatorAction, typeof RotateCw> = {
+  "flip-horizontal": FlipHorizontal2,
+  "flip-vertical": FlipVertical2,
+  "rotate-180": RotateCw,
+  "rotate-left": RotateCcw,
+  "rotate-right": RotateCw,
+};
+
+const copy = {
+  es: {
+    actionsTitle: "Acciones",
+    applyCta: "Preparar imagen",
+    downloadReady: "Imagen lista",
+    flipHorizontal: "Voltear horizontal",
+    flipVertical: "Voltear vertical",
+    jpgTransparency: "JPG no conserva transparencia.",
+    noImage: "Selecciona una imagen para habilitar las acciones.",
+    outputIntro: "El resultado se genera desde un canvas local.",
+    outputTitle: "Vista previa y salida",
+    previewAlt: "Vista previa de la imagen transformada",
+    processing: "Preparando imagen...",
+    resetActions: "Restablecer acciones",
+    rotate180: "Rotar 180",
+    rotateLeft: "90 izquierda",
+    rotateRight: "90 derecha",
+    sourceIntro: "Rota o voltea una imagen directamente en tu navegador.",
+    sourceTitle: "Archivo y rotacion",
+    transformLabel: "Transformacion",
+    unchanged: "Sin cambios",
+    webpHint: "WebP aparece si tu navegador permite exportarlo correctamente.",
+  },
+  en: {
+    actionsTitle: "Actions",
+    applyCta: "Prepare image",
+    downloadReady: "Image ready",
+    flipHorizontal: "Flip horizontal",
+    flipVertical: "Flip vertical",
+    jpgTransparency: "JPG does not preserve transparency.",
+    noImage: "Select an image to enable actions.",
+    outputIntro: "The result is generated from a local canvas.",
+    outputTitle: "Preview and output",
+    previewAlt: "Preview of the transformed image",
+    processing: "Preparing image...",
+    resetActions: "Reset actions",
+    rotate180: "Rotate 180",
+    rotateLeft: "90 left",
+    rotateRight: "90 right",
+    sourceIntro: "Rotate or flip an image directly in your browser.",
+    sourceTitle: "File and rotation",
+    transformLabel: "Transform",
+    unchanged: "No changes",
+    webpHint: "WebP appears if your browser can export it correctly.",
+  },
+} as const;
+
+function getPreviewTransform(transform: ImageRotatorTransform) {
+  return `rotate(${transform.rotation}deg) scale(${transform.flipHorizontal ? -1 : 1}, ${
+    transform.flipVertical ? -1 : 1
+  })`;
+}
+
+function getTransformSummary(transform: ImageRotatorTransform, labels: (typeof copy)["es" | "en"]) {
+  const parts: string[] = [];
+
+  if (transform.rotation !== 0) {
+    parts.push(`${transform.rotation}deg`);
+  }
+
+  if (transform.flipHorizontal) {
+    parts.push(labels.flipHorizontal);
+  }
+
+  if (transform.flipVertical) {
+    parts.push(labels.flipVertical);
+  }
+
+  return parts.length > 0 ? parts.join(" + ") : labels.unchanged;
+}
+
+export function ImageRotatorTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const resultUrlRef = useRef<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [metadata, setMetadata] = useState<ImageRotatorMetadata | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [transform, setTransform] = useState<ImageRotatorTransform>(defaultTransform);
+  const [outputFormat, setOutputFormat] = useState<ImageRotatorOutputFormat>("png");
+  const [qualityPercent, setQualityPercent] = useState(jpegQualityDecimalToPercent(0.92));
+  const [outputFileName, setOutputFileName] = useState(defaultOutputBaseName);
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [webpSupported, setWebpSupported] = useState(false);
+  const [status, setStatus] = useState<ImageRotatorStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DownloadableResult | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    setWebpSupported(canExportBrowserImageFormat("webp"));
+    return () => {
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
+    };
+  }, []);
+
+  const outputFormats = useMemo(
+    () => (webpSupported ? [...baseOutputFormats, "webp" as const] : baseOutputFormats),
+    [webpSupported],
+  );
+  const outputDimensions = metadata
+    ? getTransformedImageDimensions({ height: metadata.height, width: metadata.width }, transform)
+    : null;
+  const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
+  const finalOutputFileName = buildRotatedImageFileName(
+    outputFileName,
+    outputFormat,
+    metadata ? getRotatedImageOutputBaseName(metadata.fileName) : defaultOutputBaseName,
+  );
+  const transparencyWarning = outputFormat === "jpeg" && metadata?.mimeType !== "image/jpeg" ? labels.jpgTransparency : null;
+  const canRotate = Boolean(file && metadata) && status !== "reading" && status !== "processing";
+
+  const actionLabels: Record<ImageRotatorAction, string> = {
+    "flip-horizontal": labels.flipHorizontal,
+    "flip-vertical": labels.flipVertical,
+    "rotate-180": labels.rotate180,
+    "rotate-left": labels.rotateLeft,
+    "rotate-right": labels.rotateRight,
+  };
+
+  const clearResult = () => {
+    if (resultUrlRef.current) {
+      URL.revokeObjectURL(resultUrlRef.current);
+      resultUrlRef.current = null;
+    }
+    setResult(null);
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    clearResult();
+    if (status === "success" || status === "error") {
+      setStatus(metadata ? "ready" : "idle");
+    }
+  };
+
+  const processFile = async (nextFile: File | undefined) => {
+    if (!nextFile) return;
+    setStatus("reading");
+    setFile(null);
+    setMetadata(null);
+    setError(null);
+    setTransform(defaultTransform);
+    clearResult();
+
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+      setPreviewUrl(null);
+    }
+
+    const fileLimitError = getImageFileSizeLimitError(nextFile);
+    if (fileLimitError) {
+      setStatus("error");
+      setError(fileLimitError);
+      return;
+    }
+
+    try {
+      const nextMetadata = await readImageMetadata(nextFile);
+      const nextPreviewUrl = URL.createObjectURL(nextFile);
+      previewUrlRef.current = nextPreviewUrl;
+      setPreviewUrl(nextPreviewUrl);
+      setFile(nextFile);
+      setMetadata(nextMetadata);
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getRotatedImageOutputBaseName(nextFile.name));
+      }
+      setStatus("ready");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : t("imageUi.couldNotRead"));
+    }
+  };
+
+  const clearSelection = () => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    clearResult();
+    setFile(null);
+    setMetadata(null);
+    setPreviewUrl(null);
+    setTransform(defaultTransform);
+    setOutputFormat("png");
+    setQualityPercent(jpegQualityDecimalToPercent(0.92));
+    setOutputFileName(defaultOutputBaseName);
+    setHasCustomOutputFileName(false);
+    setStatus("idle");
+    setError(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const applyAction = (action: ImageRotatorAction) => {
+    setTransform((current) => applyImageRotatorAction(current, action));
+    resetFeedback();
+  };
+
+  const rotateImage = async () => {
+    if (!file || !canRotate) return;
+    setStatus("processing");
+    setError(null);
+    clearResult();
+    try {
+      const nextResult = await rotateImageFile(file, {
+        outputBaseName: outputFileName,
+        outputFormat,
+        quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
+        transform,
+      });
+      const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
+      resultUrlRef.current = resultUrl;
+      setResult({ ...nextResult, url: resultUrl });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo exportar la imagen.");
+    }
+  };
+
+  const downloadResult = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.url;
+    link.download = result.fileName;
+    link.click();
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.96fr)_minmax(310px,0.52fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-52 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFile(event.dataTransfer.files[0]);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={26} />
+              </span>
+              <span className="mt-4 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
+            </span>
+          </button>
+          <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
+          {metadata ? (
+            <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
+              {previewUrl ? (
+                <img
+                  src={previewUrl}
+                  alt=""
+                  className="h-28 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-32"
+                />
+              ) : (
+                <span className="grid h-28 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal sm:w-32">
+                  <FileImage size={28} />
+                </span>
+              )}
+              <dl className="grid min-w-0 gap-2 text-sm">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                  <dd className="truncate font-semibold text-ink-900">{metadata.fileName}</dd>
+                </div>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                    <dd className="font-semibold text-ink-900">{getImageMimeLabel(metadata.mimeType)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                    <dd className="font-semibold text-ink-900">{formatFileSize(metadata.fileSize)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                    <dd className="font-semibold text-ink-900">
+                      {metadata.width} x {metadata.height}px
+                    </dd>
+                  </div>
+                </div>
+              </dl>
+            </div>
+          ) : null}
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.actionsTitle}</p>
+            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+              {actionOrder.map((action) => {
+                const Icon = actionIcons[action];
+                return (
+                  <button
+                    key={action}
+                    type="button"
+                    className="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm font-semibold text-ink-800 shadow-sm transition hover:border-accent-cyan/35 hover:bg-surface-50 disabled:cursor-not-allowed disabled:opacity-50"
+                    disabled={!metadata || status === "reading" || status === "processing"}
+                    onClick={() => applyAction(action)}
+                  >
+                    <Icon size={16} />
+                    {actionLabels[action]}
+                  </button>
+                );
+              })}
+            </div>
+            <p className="rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600">
+              <span className="font-semibold text-ink-800">{labels.transformLabel}:</span>{" "}
+              {getTransformSummary(transform, labels)}
+            </p>
+            <Button
+              type="button"
+              variant="ghost"
+              className="gap-2 justify-self-start"
+              onClick={() => {
+                setTransform(defaultTransform);
+                resetFeedback();
+              }}
+              disabled={!hasImageTransform(transform) || status === "reading" || status === "processing"}
+            >
+              <RotateCcw size={16} />
+              {labels.resetActions}
+            </Button>
+          </div>
+
+          {status === "reading" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.outputIntro}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+            {previewUrl ? (
+              <img
+                alt={labels.previewAlt}
+                className="max-h-72 max-w-full object-contain transition-transform duration-200"
+                src={previewUrl}
+                style={{ transform: getPreviewTransform(transform) }}
+              />
+            ) : (
+              <div className="text-center text-sm text-ink-500">
+                <FileImage className="mx-auto text-accent-teal" size={32} />
+                <p className="mt-2 font-semibold text-ink-700">{labels.noImage}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 text-sm shadow-sm">
+            <p className="text-ink-500">{t("imageUi.finalDimensions")}</p>
+            <p className="mt-1 font-semibold text-ink-900">
+              {outputDimensions ? `${outputDimensions.width} x ${outputDimensions.height}px` : "-"}
+            </p>
+          </div>
+
+          <div className="grid gap-2">
+            {outputFormats.map((format) => (
+              <button
+                key={format}
+                type="button"
+                className={cn(
+                  "rounded-md border p-3 text-left transition",
+                  outputFormat === format
+                    ? "border-accent-cyan/45 bg-accent-cyan/10"
+                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                )}
+                onClick={() => {
+                  setOutputFormat(format);
+                  resetFeedback();
+                }}
+              >
+                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
+                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
+              </button>
+            ))}
+          </div>
+
+          <p className="text-xs leading-5 text-ink-500">{labels.webpHint}</p>
+
+          {shouldShowQuality ? (
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+              <input
+                className="w-full accent-accent-cyan"
+                min={10}
+                max={100}
+                step={1}
+                type="range"
+                value={qualityPercent}
+                onChange={(event) => {
+                  setQualityPercent(Number(event.target.value));
+                  resetFeedback();
+                }}
+              />
+              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
+            </label>
+          ) : null}
+
+          {transparencyWarning ? (
+            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {transparencyWarning}
+            </p>
+          ) : null}
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {t("imageUi.outputName")}
+            <input
+              className={cn(inputClassName, "w-full")}
+              value={outputFileName}
+              placeholder={defaultOutputBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+            <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
+          </label>
+
+          {status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {labels.processing}
+            </p>
+          ) : null}
+
+          {result ? (
+            <div className="grid gap-3 rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{labels.downloadReady}</p>
+              <dl className="grid gap-2 sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalDimensions")}</dt>
+                  <dd className="font-semibold text-ink-900">
+                    {result.width} x {result.height}px
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalFormat")}</dt>
+                  <dd className="font-semibold text-ink-900">{getImageFormatLabel(result.format)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(result.size)}</dd>
+                </div>
+              </dl>
+              <Button type="button" variant="secondary" className="gap-2" onClick={downloadResult}>
+                <Download size={16} />
+                {t("imageUi.downloadImage")}
+              </Button>
+            </div>
+          ) : null}
+
+          <div className="grid gap-2 pt-1">
+            <Button type="button" className="gap-2" onClick={() => void rotateImage()} disabled={!canRotate}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <RotateCw size={16} />}
+              {labels.applyCta}
+            </Button>
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => fileInputRef.current?.click()}>
+              <Upload size={16} />
+              {t("imageUi.selectImage")}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              className="gap-2"
+              onClick={clearSelection}
+              disabled={!file && status === "idle" && !hasCustomOutputFileName}
+            >
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-rotator/README.md b/src/tools/image/image-rotator/README.md
new file mode 100644
index 0000000..af188bc
--- /dev/null
+++ b/src/tools/image/image-rotator/README.md
@@ -0,0 +1,17 @@
+# Rotar imagen
+
+Herramienta frontend-only para rotar o voltear una imagen localmente en el navegador.
+
+## Soporte
+
+- Entrada: PNG, JPG/JPEG y WebP.
+- Salida: PNG, JPG y WebP cuando el navegador puede exportarlo correctamente.
+- Acciones combinables: rotar 90 grados a derecha o izquierda, rotar 180 grados, voltear horizontal y voltear vertical.
+
+## Privacidad
+
+El archivo se procesa en el navegador. No usa backend ni sube archivos.
+
+## Notas tecnicas
+
+Reutiliza `src/shared/utils/imageFiles.ts` para validacion de imagen, deteccion de WebP, nombres de salida, calidad, carga browser y exportacion de canvas.
diff --git a/src/tools/image/image-rotator/imageRotator.service.test.ts b/src/tools/image/image-rotator/imageRotator.service.test.ts
new file mode 100644
index 0000000..fbc4598
--- /dev/null
+++ b/src/tools/image/image-rotator/imageRotator.service.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyImageRotatorAction,
+  buildRotatedImageFileName,
+  defaultTransform,
+  getRotatedImageOutputBaseName,
+  getTransformedImageDimensions,
+  isImageRotatorAction,
+} from "./imageRotator.service";
+
+describe("imageRotator.service", () => {
+  it("swaps width and height after a 90 degree rotation", () => {
+    const transform = applyImageRotatorAction(defaultTransform, "rotate-right");
+
+    expect(getTransformedImageDimensions({ width: 1200, height: 800 }, transform)).toEqual({
+      height: 1200,
+      width: 800,
+    });
+  });
+
+  it("keeps dimensions after a 180 degree rotation", () => {
+    const transform = applyImageRotatorAction(defaultTransform, "rotate-180");
+
+    expect(getTransformedImageDimensions({ width: 1200, height: 800 }, transform)).toEqual({
+      height: 800,
+      width: 1200,
+    });
+  });
+
+  it("keeps dimensions after horizontal and vertical flips", () => {
+    const horizontal = applyImageRotatorAction(defaultTransform, "flip-horizontal");
+    const vertical = applyImageRotatorAction(defaultTransform, "flip-vertical");
+
+    expect(getTransformedImageDimensions({ width: 640, height: 480 }, horizontal)).toEqual({
+      height: 480,
+      width: 640,
+    });
+    expect(getTransformedImageDimensions({ width: 640, height: 480 }, vertical)).toEqual({
+      height: 480,
+      width: 640,
+    });
+  });
+
+  it("validates known actions", () => {
+    expect(isImageRotatorAction("rotate-left")).toBe(true);
+    expect(isImageRotatorAction("flip-vertical")).toBe(true);
+    expect(isImageRotatorAction("crop")).toBe(false);
+  });
+
+  it("builds output names with the selected format", () => {
+    expect(getRotatedImageOutputBaseName("foto original.png")).toBe("foto original-rotada");
+    expect(buildRotatedImageFileName("foto original-rotada", "jpeg")).toBe("foto original-rotada.jpg");
+    expect(buildRotatedImageFileName("foto original-rotada", "webp")).toBe("foto original-rotada.webp");
+  });
+
+  it("combines rotation and flips cleanly", () => {
+    const rotated = applyImageRotatorAction(defaultTransform, "rotate-right");
+    const transformed = applyImageRotatorAction(rotated, "flip-horizontal");
+
+    expect(transformed).toEqual({
+      flipHorizontal: true,
+      flipVertical: false,
+      rotation: 90,
+    });
+    expect(getTransformedImageDimensions({ width: 300, height: 500 }, transformed)).toEqual({
+      height: 300,
+      width: 500,
+    });
+  });
+});
diff --git a/src/tools/image/image-rotator/imageRotator.service.ts b/src/tools/image/image-rotator/imageRotator.service.ts
new file mode 100644
index 0000000..0671c93
--- /dev/null
+++ b/src/tools/image/image-rotator/imageRotator.service.ts
@@ -0,0 +1,236 @@
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  buildBrowserImageDownloadFileName,
+  canExportBrowserImageFormat,
+  exportBrowserCanvas,
+  getBrowserImageMimeType,
+  getBrowserImageOutputMimeType,
+  getImageDownloadBaseName,
+  isBrowserImageFile,
+  loadBrowserImage,
+} from "../../../shared/utils/imageFiles";
+import type {
+  ImageDimensions,
+  ImageRotatorAction,
+  ImageRotatorMetadata,
+  ImageRotatorOutputFormat,
+  ImageRotatorResult,
+  ImageRotatorTransform,
+  RotateImageOptions,
+} from "./imageRotator.types";
+
+export const defaultOutputBaseName = "imagen-rotada";
+export const defaultTransform: ImageRotatorTransform = {
+  flipHorizontal: false,
+  flipVertical: false,
+  rotation: 0,
+};
+
+const validActions: readonly ImageRotatorAction[] = [
+  "rotate-right",
+  "rotate-left",
+  "rotate-180",
+  "flip-horizontal",
+  "flip-vertical",
+];
+
+export { formatFileSize };
+
+export function isRotatableImageFile(file: File) {
+  return isBrowserImageFile(file);
+}
+
+export function getImageFormatLabel(format: ImageRotatorOutputFormat) {
+  if (format === "jpeg") {
+    return "JPG";
+  }
+
+  if (format === "webp") {
+    return "WebP";
+  }
+
+  return "PNG";
+}
+
+export function getImageMimeLabel(mimeType: string) {
+  if (mimeType === "image/jpeg") {
+    return "JPG";
+  }
+
+  if (mimeType === "image/webp") {
+    return "WebP";
+  }
+
+  if (mimeType === "image/png") {
+    return "PNG";
+  }
+
+  return mimeType || "Desconocido";
+}
+
+export function isImageRotatorAction(action: string): action is ImageRotatorAction {
+  return validActions.includes(action as ImageRotatorAction);
+}
+
+function normalizeRotation(rotation: number): ImageRotatorTransform["rotation"] {
+  const normalized = ((rotation % 360) + 360) % 360;
+
+  if (normalized === 90 || normalized === 180 || normalized === 270) {
+    return normalized;
+  }
+
+  return 0;
+}
+
+export function applyImageRotatorAction(
+  transform: ImageRotatorTransform,
+  action: ImageRotatorAction,
+): ImageRotatorTransform {
+  if (action === "rotate-right") {
+    return { ...transform, rotation: normalizeRotation(transform.rotation + 90) };
+  }
+
+  if (action === "rotate-left") {
+    return { ...transform, rotation: normalizeRotation(transform.rotation - 90) };
+  }
+
+  if (action === "rotate-180") {
+    return { ...transform, rotation: normalizeRotation(transform.rotation + 180) };
+  }
+
+  if (action === "flip-horizontal") {
+    return { ...transform, flipHorizontal: !transform.flipHorizontal };
+  }
+
+  return { ...transform, flipVertical: !transform.flipVertical };
+}
+
+export function getTransformedImageDimensions(
+  dimensions: ImageDimensions,
+  transform: ImageRotatorTransform,
+): ImageDimensions {
+  if (transform.rotation === 90 || transform.rotation === 270) {
+    return {
+      height: dimensions.width,
+      width: dimensions.height,
+    };
+  }
+
+  return dimensions;
+}
+
+export function hasImageTransform(transform: ImageRotatorTransform) {
+  return transform.rotation !== 0 || transform.flipHorizontal || transform.flipVertical;
+}
+
+export function getRotatedImageOutputBaseName(fileName: string) {
+  const baseName = getImageDownloadBaseName(fileName, defaultOutputBaseName);
+  return `${baseName}-rotada`;
+}
+
+export function buildRotatedImageFileName(
+  baseName: string,
+  outputFormat: ImageRotatorOutputFormat,
+  fallbackBaseName = defaultOutputBaseName,
+) {
+  return buildBrowserImageDownloadFileName(baseName, outputFormat, fallbackBaseName);
+}
+
+export async function readImageMetadata(file: File): Promise<ImageRotatorMetadata> {
+  const mimeType = getBrowserImageMimeType(file);
+
+  if (!mimeType) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  try {
+    const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+
+    if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+      throw new Error("La imagen no tiene dimensiones validas.");
+    }
+
+    return {
+      fileName: file.name,
+      fileSize: file.size,
+      height: image.naturalHeight,
+      mimeType,
+      width: image.naturalWidth,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error("No se pudo leer la imagen.");
+  }
+}
+
+function ensureOutputFormatSupported(outputFormat: ImageRotatorOutputFormat) {
+  if (!canExportBrowserImageFormat(outputFormat)) {
+    throw new Error(`Este navegador no permite exportar imagenes como ${getImageFormatLabel(outputFormat)}.`);
+  }
+}
+
+function drawTransformedImage(
+  canvas: HTMLCanvasElement,
+  image: HTMLImageElement,
+  transform: ImageRotatorTransform,
+  outputFormat: ImageRotatorOutputFormat,
+) {
+  const context = canvas.getContext("2d");
+
+  if (!context) {
+    throw new Error("No se pudo preparar la imagen de salida.");
+  }
+
+  if (outputFormat === "jpeg") {
+    context.fillStyle = "#ffffff";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  context.save();
+  context.translate(canvas.width / 2, canvas.height / 2);
+  context.rotate((transform.rotation * Math.PI) / 180);
+  context.scale(transform.flipHorizontal ? -1 : 1, transform.flipVertical ? -1 : 1);
+  context.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
+  context.restore();
+}
+
+export async function rotateImageFile(
+  file: File,
+  { outputBaseName, outputFormat, quality, transform }: RotateImageOptions,
+): Promise<ImageRotatorResult> {
+  if (!isRotatableImageFile(file)) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  ensureOutputFormatSupported(outputFormat);
+
+  const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+  const outputDimensions = getTransformedImageDimensions(
+    { height: image.naturalHeight, width: image.naturalWidth },
+    transform,
+  );
+  const canvas = document.createElement("canvas");
+  canvas.width = outputDimensions.width;
+  canvas.height = outputDimensions.height;
+  drawTransformedImage(canvas, image, transform, outputFormat);
+
+  const mimeType = getBrowserImageOutputMimeType(outputFormat);
+  const result = await exportBrowserCanvas(canvas, {
+    errorMessage: "No se pudo exportar la imagen.",
+    mimeType,
+    quality,
+  });
+
+  return {
+    bytes: result.bytes,
+    fileName: buildRotatedImageFileName(outputBaseName, outputFormat, getRotatedImageOutputBaseName(file.name)),
+    format: outputFormat,
+    height: result.height,
+    mimeType,
+    size: result.size,
+    width: result.width,
+  };
+}
diff --git a/src/tools/image/image-rotator/imageRotator.types.ts b/src/tools/image/image-rotator/imageRotator.types.ts
new file mode 100644
index 0000000..91d4107
--- /dev/null
+++ b/src/tools/image/image-rotator/imageRotator.types.ts
@@ -0,0 +1,50 @@
+import type { BrowserImageOutputFormat } from "../../../shared/utils/imageFiles";
+
+export type ImageRotationDegrees = 0 | 90 | 180 | 270;
+
+export type ImageRotatorAction =
+  | "rotate-right"
+  | "rotate-left"
+  | "rotate-180"
+  | "flip-horizontal"
+  | "flip-vertical";
+
+export type ImageRotatorTransform = {
+  flipHorizontal: boolean;
+  flipVertical: boolean;
+  rotation: ImageRotationDegrees;
+};
+
+export type ImageDimensions = {
+  height: number;
+  width: number;
+};
+
+export type ImageRotatorMetadata = {
+  fileName: string;
+  fileSize: number;
+  height: number;
+  mimeType: string;
+  width: number;
+};
+
+export type ImageRotatorOutputFormat = BrowserImageOutputFormat;
+
+export type RotateImageOptions = {
+  outputBaseName: string;
+  outputFormat: ImageRotatorOutputFormat;
+  quality?: number;
+  transform: ImageRotatorTransform;
+};
+
+export type ImageRotatorResult = {
+  bytes: ArrayBuffer;
+  fileName: string;
+  format: ImageRotatorOutputFormat;
+  height: number;
+  mimeType: string;
+  size: number;
+  width: number;
+};
+
+export type ImageRotatorStatus = "idle" | "reading" | "ready" | "processing" | "success" | "error";
diff --git a/src/tools/image/image-rotator/index.ts b/src/tools/image/image-rotator/index.ts
new file mode 100644
index 0000000..44011a7
--- /dev/null
+++ b/src/tools/image/image-rotator/index.ts
@@ -0,0 +1 @@
+export { ImageRotatorTool } from "./ImageRotatorTool";

From 667a4de0f7bbece668879770d3f3089ee37cc187 Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Fri, 5 Jun 2026 23:44:42 -0300
Subject: [PATCH 02/10] feat(image): add crop image tool

---
 src/features/tools/data/tools.ts              | 104 +++
 .../tools/renderers/toolRenderers.tsx         |   3 +
 .../image/image-cropper/ImageCropperTool.tsx  | 602 ++++++++++++++++++
 src/tools/image/image-cropper/README.md       |  18 +
 .../imageCropper.service.test.ts              |  55 ++
 .../image-cropper/imageCropper.service.ts     | 250 ++++++++
 .../image/image-cropper/imageCropper.types.ts |  42 ++
 src/tools/image/image-cropper/index.ts        |   1 +
 8 files changed, 1075 insertions(+)
 create mode 100644 src/tools/image/image-cropper/ImageCropperTool.tsx
 create mode 100644 src/tools/image/image-cropper/README.md
 create mode 100644 src/tools/image/image-cropper/imageCropper.service.test.ts
 create mode 100644 src/tools/image/image-cropper/imageCropper.service.ts
 create mode 100644 src/tools/image/image-cropper/imageCropper.types.ts
 create mode 100644 src/tools/image/image-cropper/index.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index 4787685..7c478d0 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -670,6 +670,110 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "image-cropper",
+    slug: "recortar-imagen",
+    slugEn: "crop-image",
+    name: { es: "Recortar imagen", en: "Crop image" },
+    description: {
+      es: "Recorta una imagen definiendo el area exacta.",
+      en: "Crop an image by defining the exact area.",
+    },
+    category: "image",
+    tags: {
+      es: ["imagen", "recortar", "crop", "png", "jpg", "webp"],
+      en: ["image", "crop", "trim", "png", "jpg", "webp"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Recortar imagen online gratis",
+        description:
+          "Recorta una imagen PNG, JPG o WebP definiendo X, Y, ancho y alto en tu navegador. Sin cuenta y sin subir archivos a Modulaq.",
+      },
+      en: {
+        title: "Crop image online free",
+        description:
+          "Crop a PNG, JPG or WebP image by setting X, Y, width and height in your browser. No account and no uploads to Modulaq.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Recortar imagen permite definir un area exacta por valores numericos y exportar el recorte localmente desde el navegador.",
+        howTo: [
+          "Selecciona una imagen PNG, JPG/JPEG o WebP.",
+          "Revisa el tipo, peso y dimensiones originales.",
+          "Define X, Y, ancho y alto. X/Y empiezan desde la esquina superior izquierda.",
+          "Usa los accesos rapidos si quieres imagen completa, recorte centrado o cuadrado centrado.",
+          "Elige PNG, JPG o WebP si el navegador lo permite y descarga el resultado.",
+        ],
+        useCases: [
+          "Recortar una zona exacta de una captura.",
+          "Preparar una miniatura cuadrada.",
+          "Extraer una parte de una foto sin subirla a un servidor.",
+        ],
+        limits: [
+          "JPG no conserva transparencia.",
+          "WebP aparece si tu navegador permite exportarlo correctamente.",
+          "Tamano maximo por imagen: 15 MB.",
+          "El area de recorte no puede salirse de la imagen.",
+        ],
+        privacy:
+          "El procesamiento de esta imagen ocurre en tu navegador; no la subimos a Modulaq para recortarla.",
+        commonErrors: [
+          "Valores no numericos o negativos.",
+          "Ancho o alto igual a cero.",
+          "Area de recorte fuera de los limites de la imagen.",
+        ],
+        technicalNotes: [
+          "La exportacion usa canvas en el navegador.",
+          "El recorte final tiene las dimensiones indicadas por ancho y alto.",
+          "La salida WebP depende del soporte real del navegador.",
+        ],
+      },
+      en: {
+        summary:
+          "Crop image lets you define an exact area with numeric values and export the crop locally from the browser.",
+        howTo: [
+          "Select a PNG, JPG/JPEG or WebP image.",
+          "Review the detected type, size and dimensions.",
+          "Set X, Y, width and height. X/Y start from the top-left corner.",
+          "Use quick actions for full image, centered crop or centered square.",
+          "Choose PNG, JPG or WebP if the browser supports it and download the result.",
+        ],
+        useCases: [
+          "Crop an exact area from a screenshot.",
+          "Prepare a square thumbnail.",
+          "Extract part of a photo without uploading it to a server.",
+        ],
+        limits: [
+          "JPG does not preserve transparency.",
+          "WebP appears if your browser can export it correctly.",
+          "Maximum image size: 15 MB.",
+          "The crop area cannot go outside the image.",
+        ],
+        privacy:
+          "Processing happens in your browser; we don't upload this image to Modulaq to crop it.",
+        commonErrors: [
+          "Non-numeric or negative values.",
+          "Width or height equal to zero.",
+          "Crop area outside the image bounds.",
+        ],
+        technicalNotes: [
+          "Export uses browser canvas.",
+          "The final crop has the width and height you set.",
+          "WebP output depends on actual browser support.",
+        ],
+      },
+    },
+  },
   {
     id: "image-compressor",
     slug: "comprimir-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index ea73043..40ceeb6 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -17,6 +17,9 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-converter": lazy(() =>
     import("../../../tools/image/image-converter").then((module) => ({ default: module.ImageConverterTool })),
   ),
+  "image-cropper": lazy(() =>
+    import("../../../tools/image/image-cropper").then((module) => ({ default: module.ImageCropperTool })),
+  ),
   "image-rotator": lazy(() =>
     import("../../../tools/image/image-rotator").then((module) => ({ default: module.ImageRotatorTool })),
   ),
diff --git a/src/tools/image/image-cropper/ImageCropperTool.tsx b/src/tools/image/image-cropper/ImageCropperTool.tsx
new file mode 100644
index 0000000..3d7e382
--- /dev/null
+++ b/src/tools/image/image-cropper/ImageCropperTool.tsx
@@ -0,0 +1,602 @@
+import { Crop, Download, FileImage, Loader2, Maximize2, RotateCcw, Scan, Upload } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import { getImageFileSizeLimitError } from "../../../shared/utils/fileProcessingLimits";
+import {
+  canExportBrowserImageFormat,
+  jpegQualityDecimalToPercent,
+  jpegQualityPercentToDecimal,
+} from "../../../shared/utils/imageFiles";
+import {
+  buildCroppedImageFileName,
+  createCenteredCropRect,
+  createCenteredSquareCropRect,
+  createFullImageCropRect,
+  cropImageFile,
+  defaultOutputBaseName,
+  formatFileSize,
+  getCroppedImageOutputBaseName,
+  getCropOutputDimensions,
+  getImageFormatLabel,
+  getImageMimeLabel,
+  readImageMetadata,
+  validateCropRect,
+} from "./imageCropper.service";
+import type {
+  ImageCropperMetadata,
+  ImageCropperOutputFormat,
+  ImageCropperResult,
+  ImageCropperStatus,
+  ImageCropRect,
+} from "./imageCropper.types";
+
+const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+
+type DownloadableResult = ImageCropperResult & {
+  url: string;
+};
+
+const baseOutputFormats: ImageCropperOutputFormat[] = ["png", "jpeg"];
+
+const formatDescKeys: Record<ImageCropperOutputFormat, TranslationKey> = {
+  png: "imageUi.png.desc",
+  jpeg: "imageUi.jpg.desc",
+  webp: "imageUi.webp.desc",
+};
+
+const copy = {
+  es: {
+    centerCrop: "Centrar recorte",
+    cropHelp: "Los valores X/Y empiezan desde la esquina superior izquierda.",
+    cropTitle: "Area de recorte",
+    downloadReady: "Imagen recortada lista",
+    fullImage: "Imagen completa",
+    invalidPreview: "Ajusta el recorte para ver la vista previa.",
+    jpgTransparency: "JPG no conserva transparencia.",
+    outputIntro: "El resultado se genera desde un canvas local.",
+    outputTitle: "Vista previa y salida",
+    previewAlt: "Vista previa del recorte",
+    processing: "Recortando imagen...",
+    sourceIntro: "Recorta una imagen definiendo el area exacta.",
+    sourceTitle: "Archivo y recorte",
+    squareCrop: "Cuadrado centrado",
+    webpHint: "WebP aparece si tu navegador permite exportarlo correctamente.",
+  },
+  en: {
+    centerCrop: "Center crop",
+    cropHelp: "X/Y values start from the top-left corner.",
+    cropTitle: "Crop area",
+    downloadReady: "Cropped image ready",
+    fullImage: "Full image",
+    invalidPreview: "Adjust the crop to see the preview.",
+    jpgTransparency: "JPG does not preserve transparency.",
+    outputIntro: "The result is generated from a local canvas.",
+    outputTitle: "Preview and output",
+    previewAlt: "Crop preview",
+    processing: "Cropping image...",
+    sourceIntro: "Crop an image by defining the exact area.",
+    sourceTitle: "File and crop",
+    squareCrop: "Centered square",
+    webpHint: "WebP appears if your browser can export it correctly.",
+  },
+} as const;
+
+function parseNumberInput(value: string) {
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : Number.NaN;
+}
+
+function stringifyCropValue(value: number) {
+  return String(Math.max(0, Math.round(value)));
+}
+
+function getCropPreviewImageStyle(metadata: ImageCropperMetadata, cropRect: ImageCropRect) {
+  return {
+    maxWidth: "none",
+    transform: `translate(-${(cropRect.x / metadata.width) * 100}%, -${(cropRect.y / metadata.height) * 100}%)`,
+    width: `${(metadata.width / cropRect.width) * 100}%`,
+  };
+}
+
+export function ImageCropperTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const resultUrlRef = useRef<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [metadata, setMetadata] = useState<ImageCropperMetadata | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [xInput, setXInput] = useState("0");
+  const [yInput, setYInput] = useState("0");
+  const [widthInput, setWidthInput] = useState("");
+  const [heightInput, setHeightInput] = useState("");
+  const [outputFormat, setOutputFormat] = useState<ImageCropperOutputFormat>("png");
+  const [qualityPercent, setQualityPercent] = useState(jpegQualityDecimalToPercent(0.92));
+  const [outputFileName, setOutputFileName] = useState(defaultOutputBaseName);
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [webpSupported, setWebpSupported] = useState(false);
+  const [status, setStatus] = useState<ImageCropperStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DownloadableResult | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    setWebpSupported(canExportBrowserImageFormat("webp"));
+    return () => {
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
+    };
+  }, []);
+
+  const outputFormats = useMemo(
+    () => (webpSupported ? [...baseOutputFormats, "webp" as const] : baseOutputFormats),
+    [webpSupported],
+  );
+  const cropRect = useMemo<ImageCropRect>(
+    () => ({
+      height: parseNumberInput(heightInput),
+      width: parseNumberInput(widthInput),
+      x: parseNumberInput(xInput),
+      y: parseNumberInput(yInput),
+    }),
+    [heightInput, widthInput, xInput, yInput],
+  );
+  const cropError = metadata ? validateCropRect(cropRect, metadata) : null;
+  const outputDimensions = metadata && !cropError ? getCropOutputDimensions(cropRect) : null;
+  const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
+  const finalOutputFileName = buildCroppedImageFileName(
+    outputFileName,
+    outputFormat,
+    metadata ? getCroppedImageOutputBaseName(metadata.fileName) : defaultOutputBaseName,
+  );
+  const transparencyWarning = outputFormat === "jpeg" && metadata?.mimeType !== "image/jpeg" ? labels.jpgTransparency : null;
+  const canCrop = Boolean(file && metadata) && !cropError && status !== "reading" && status !== "processing";
+
+  const clearResult = () => {
+    if (resultUrlRef.current) {
+      URL.revokeObjectURL(resultUrlRef.current);
+      resultUrlRef.current = null;
+    }
+    setResult(null);
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    clearResult();
+    if (status === "success" || status === "error") {
+      setStatus(metadata ? "ready" : "idle");
+    }
+  };
+
+  const applyCropRect = (nextCropRect: ImageCropRect) => {
+    setXInput(stringifyCropValue(nextCropRect.x));
+    setYInput(stringifyCropValue(nextCropRect.y));
+    setWidthInput(stringifyCropValue(nextCropRect.width));
+    setHeightInput(stringifyCropValue(nextCropRect.height));
+    resetFeedback();
+  };
+
+  const processFile = async (nextFile: File | undefined) => {
+    if (!nextFile) return;
+    setStatus("reading");
+    setFile(null);
+    setMetadata(null);
+    setError(null);
+    clearResult();
+
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+      setPreviewUrl(null);
+    }
+
+    const fileLimitError = getImageFileSizeLimitError(nextFile);
+    if (fileLimitError) {
+      setStatus("error");
+      setError(fileLimitError);
+      return;
+    }
+
+    try {
+      const nextMetadata = await readImageMetadata(nextFile);
+      const nextPreviewUrl = URL.createObjectURL(nextFile);
+      previewUrlRef.current = nextPreviewUrl;
+      setPreviewUrl(nextPreviewUrl);
+      setFile(nextFile);
+      setMetadata(nextMetadata);
+      setXInput("0");
+      setYInput("0");
+      setWidthInput(String(nextMetadata.width));
+      setHeightInput(String(nextMetadata.height));
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getCroppedImageOutputBaseName(nextFile.name));
+      }
+      setStatus("ready");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : t("imageUi.couldNotRead"));
+    }
+  };
+
+  const clearSelection = () => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    clearResult();
+    setFile(null);
+    setMetadata(null);
+    setPreviewUrl(null);
+    setXInput("0");
+    setYInput("0");
+    setWidthInput("");
+    setHeightInput("");
+    setOutputFormat("png");
+    setQualityPercent(jpegQualityDecimalToPercent(0.92));
+    setOutputFileName(defaultOutputBaseName);
+    setHasCustomOutputFileName(false);
+    setStatus("idle");
+    setError(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const cropImage = async () => {
+    if (!file || !canCrop) return;
+    setStatus("processing");
+    setError(null);
+    clearResult();
+    try {
+      const nextResult = await cropImageFile(file, {
+        cropRect,
+        outputBaseName: outputFileName,
+        outputFormat,
+        quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
+      });
+      const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
+      resultUrlRef.current = resultUrl;
+      setResult({ ...nextResult, url: resultUrl });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo exportar la imagen.");
+    }
+  };
+
+  const downloadResult = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.url;
+    link.download = result.fileName;
+    link.click();
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.96fr)_minmax(310px,0.52fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-52 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFile(event.dataTransfer.files[0]);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={26} />
+              </span>
+              <span className="mt-4 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
+            </span>
+          </button>
+          <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
+          {metadata ? (
+            <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
+              {previewUrl ? (
+                <img
+                  src={previewUrl}
+                  alt=""
+                  className="h-28 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-32"
+                />
+              ) : (
+                <span className="grid h-28 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal sm:w-32">
+                  <FileImage size={28} />
+                </span>
+              )}
+              <dl className="grid min-w-0 gap-2 text-sm">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                  <dd className="truncate font-semibold text-ink-900">{metadata.fileName}</dd>
+                </div>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                    <dd className="font-semibold text-ink-900">{getImageMimeLabel(metadata.mimeType)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                    <dd className="font-semibold text-ink-900">{formatFileSize(metadata.fileSize)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                    <dd className="font-semibold text-ink-900">
+                      {metadata.width} x {metadata.height}px
+                    </dd>
+                  </div>
+                </div>
+              </dl>
+            </div>
+          ) : null}
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.cropTitle}</p>
+              <p className="mt-1 text-xs leading-5 text-ink-500">{labels.cropHelp}</p>
+            </div>
+            <div className="grid gap-3 sm:grid-cols-4">
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                X
+                <input className={inputClassName} inputMode="numeric" value={xInput} onChange={(event) => { setXInput(event.target.value); resetFeedback(); }} />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                Y
+                <input className={inputClassName} inputMode="numeric" value={yInput} onChange={(event) => { setYInput(event.target.value); resetFeedback(); }} />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {language === "en" ? "Width" : "Ancho"}
+                <input className={inputClassName} inputMode="numeric" value={widthInput} onChange={(event) => { setWidthInput(event.target.value); resetFeedback(); }} />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {language === "en" ? "Height" : "Alto"}
+                <input className={inputClassName} inputMode="numeric" value={heightInput} onChange={(event) => { setHeightInput(event.target.value); resetFeedback(); }} />
+              </label>
+            </div>
+            <div className="grid gap-2 sm:grid-cols-3">
+              <Button
+                type="button"
+                variant="secondary"
+                className="gap-2"
+                disabled={!metadata}
+                onClick={() => metadata && applyCropRect(createFullImageCropRect(metadata))}
+              >
+                <Maximize2 size={16} />
+                {labels.fullImage}
+              </Button>
+              <Button
+                type="button"
+                variant="secondary"
+                className="gap-2"
+                disabled={!metadata || Boolean(cropError)}
+                onClick={() => metadata && applyCropRect(createCenteredCropRect(metadata, cropRect))}
+              >
+                <Scan size={16} />
+                {labels.centerCrop}
+              </Button>
+              <Button
+                type="button"
+                variant="secondary"
+                className="gap-2"
+                disabled={!metadata}
+                onClick={() => metadata && applyCropRect(createCenteredSquareCropRect(metadata))}
+              >
+                <Crop size={16} />
+                {labels.squareCrop}
+              </Button>
+            </div>
+            {cropError ? (
+              <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+                {cropError}
+              </p>
+            ) : null}
+          </div>
+
+          {status === "reading" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.outputIntro}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+            {previewUrl && metadata && !cropError ? (
+              <div className="w-full max-w-md overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50 shadow-sm" style={{ aspectRatio: `${cropRect.width} / ${cropRect.height}` }}>
+                <img
+                  alt={labels.previewAlt}
+                  className="origin-top-left"
+                  src={previewUrl}
+                  style={getCropPreviewImageStyle(metadata, cropRect)}
+                />
+              </div>
+            ) : (
+              <div className="text-center text-sm text-ink-500">
+                <FileImage className="mx-auto text-accent-teal" size={32} />
+                <p className="mt-2 font-semibold text-ink-700">{metadata ? labels.invalidPreview : t("imageUi.selectImage")}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 text-sm shadow-sm">
+            <p className="text-ink-500">{t("imageUi.finalDimensions")}</p>
+            <p className="mt-1 font-semibold text-ink-900">
+              {outputDimensions ? `${outputDimensions.width} x ${outputDimensions.height}px` : "-"}
+            </p>
+          </div>
+
+          <div className="grid gap-2">
+            {outputFormats.map((format) => (
+              <button
+                key={format}
+                type="button"
+                className={cn(
+                  "rounded-md border p-3 text-left transition",
+                  outputFormat === format
+                    ? "border-accent-cyan/45 bg-accent-cyan/10"
+                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                )}
+                onClick={() => {
+                  setOutputFormat(format);
+                  resetFeedback();
+                }}
+              >
+                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
+                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
+              </button>
+            ))}
+          </div>
+
+          <p className="text-xs leading-5 text-ink-500">{labels.webpHint}</p>
+
+          {shouldShowQuality ? (
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+              <input
+                className="w-full accent-accent-cyan"
+                min={10}
+                max={100}
+                step={1}
+                type="range"
+                value={qualityPercent}
+                onChange={(event) => {
+                  setQualityPercent(Number(event.target.value));
+                  resetFeedback();
+                }}
+              />
+              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
+            </label>
+          ) : null}
+
+          {transparencyWarning ? (
+            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {transparencyWarning}
+            </p>
+          ) : null}
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {t("imageUi.outputName")}
+            <input
+              className={cn(inputClassName, "w-full")}
+              value={outputFileName}
+              placeholder={defaultOutputBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+            <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
+          </label>
+
+          {status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {labels.processing}
+            </p>
+          ) : null}
+
+          {result ? (
+            <div className="grid gap-3 rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{labels.downloadReady}</p>
+              <dl className="grid gap-2 sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalDimensions")}</dt>
+                  <dd className="font-semibold text-ink-900">
+                    {result.width} x {result.height}px
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalFormat")}</dt>
+                  <dd className="font-semibold text-ink-900">{getImageFormatLabel(result.format)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(result.size)}</dd>
+                </div>
+              </dl>
+              <Button type="button" variant="secondary" className="gap-2" onClick={downloadResult}>
+                <Download size={16} />
+                {t("imageUi.downloadImage")}
+              </Button>
+            </div>
+          ) : null}
+
+          <div className="grid gap-2 pt-1">
+            <Button type="button" className="gap-2" onClick={() => void cropImage()} disabled={!canCrop}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <Crop size={16} />}
+              {language === "en" ? "Crop image" : "Recortar imagen"}
+            </Button>
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => fileInputRef.current?.click()}>
+              <Upload size={16} />
+              {t("imageUi.selectImage")}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              className="gap-2"
+              onClick={clearSelection}
+              disabled={!file && status === "idle" && !hasCustomOutputFileName}
+            >
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-cropper/README.md b/src/tools/image/image-cropper/README.md
new file mode 100644
index 0000000..a8e3863
--- /dev/null
+++ b/src/tools/image/image-cropper/README.md
@@ -0,0 +1,18 @@
+# Recortar imagen
+
+Herramienta frontend-only para recortar una imagen con valores numericos.
+
+## Soporte
+
+- Entrada: PNG, JPG/JPEG y WebP.
+- Recorte por X, Y, ancho y alto.
+- Accesos rapidos: imagen completa, centrar recorte actual y cuadrado centrado.
+- Salida: PNG, JPG y WebP cuando el navegador puede exportarlo correctamente.
+
+## Privacidad
+
+El archivo se procesa en el navegador. No usa backend ni sube archivos.
+
+## Notas tecnicas
+
+Reutiliza `src/shared/utils/imageFiles.ts` para validacion de imagen, deteccion de WebP, nombres de salida, calidad, carga browser y exportacion de canvas.
diff --git a/src/tools/image/image-cropper/imageCropper.service.test.ts b/src/tools/image/image-cropper/imageCropper.service.test.ts
new file mode 100644
index 0000000..3358454
--- /dev/null
+++ b/src/tools/image/image-cropper/imageCropper.service.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import {
+  createCenteredCropRect,
+  createCenteredSquareCropRect,
+  getCropOutputDimensions,
+  validateCropRect,
+} from "./imageCropper.service";
+
+const imageDimensions = { width: 1200, height: 800 };
+
+describe("imageCropper.service", () => {
+  it("accepts a valid crop rectangle", () => {
+    expect(validateCropRect({ x: 100, y: 50, width: 400, height: 300 }, imageDimensions)).toBeNull();
+  });
+
+  it("rejects negative X or Y", () => {
+    expect(validateCropRect({ x: -1, y: 0, width: 400, height: 300 }, imageDimensions)).toMatch(/negativos/);
+    expect(validateCropRect({ x: 0, y: -1, width: 400, height: 300 }, imageDimensions)).toMatch(/negativos/);
+  });
+
+  it("rejects zero width or height", () => {
+    expect(validateCropRect({ x: 0, y: 0, width: 0, height: 300 }, imageDimensions)).toMatch(/mayores que cero/);
+    expect(validateCropRect({ x: 0, y: 0, width: 400, height: 0 }, imageDimensions)).toMatch(/mayores que cero/);
+  });
+
+  it("rejects crop rectangles outside image bounds", () => {
+    expect(validateCropRect({ x: 900, y: 0, width: 400, height: 300 }, imageDimensions)).toMatch(/salirse/);
+    expect(validateCropRect({ x: 0, y: 700, width: 400, height: 300 }, imageDimensions)).toMatch(/salirse/);
+  });
+
+  it("creates a centered square crop", () => {
+    expect(createCenteredSquareCropRect(imageDimensions)).toEqual({
+      height: 800,
+      width: 800,
+      x: 200,
+      y: 0,
+    });
+  });
+
+  it("creates a centered crop with custom dimensions", () => {
+    expect(createCenteredCropRect(imageDimensions, { width: 600, height: 400 })).toEqual({
+      height: 400,
+      width: 600,
+      x: 300,
+      y: 200,
+    });
+  });
+
+  it("returns final dimensions from the crop rectangle", () => {
+    expect(getCropOutputDimensions({ x: 10, y: 20, width: 320, height: 240 })).toEqual({
+      height: 240,
+      width: 320,
+    });
+  });
+});
diff --git a/src/tools/image/image-cropper/imageCropper.service.ts b/src/tools/image/image-cropper/imageCropper.service.ts
new file mode 100644
index 0000000..360330a
--- /dev/null
+++ b/src/tools/image/image-cropper/imageCropper.service.ts
@@ -0,0 +1,250 @@
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  buildBrowserImageDownloadFileName,
+  canExportBrowserImageFormat,
+  exportBrowserCanvas,
+  getBrowserImageMimeType,
+  getBrowserImageOutputMimeType,
+  getImageDownloadBaseName,
+  isBrowserImageFile,
+  loadBrowserImage,
+} from "../../../shared/utils/imageFiles";
+import type {
+  CropImageOptions,
+  ImageCropperMetadata,
+  ImageCropperOutputFormat,
+  ImageCropperResult,
+  ImageCropRect,
+  ImageDimensions,
+} from "./imageCropper.types";
+
+export const defaultOutputBaseName = "imagen-recortada";
+export const maxCropPixels = 64_000_000;
+
+export { formatFileSize };
+
+export function isCroppableImageFile(file: File) {
+  return isBrowserImageFile(file);
+}
+
+export function getImageFormatLabel(format: ImageCropperOutputFormat) {
+  if (format === "jpeg") {
+    return "JPG";
+  }
+
+  if (format === "webp") {
+    return "WebP";
+  }
+
+  return "PNG";
+}
+
+export function getImageMimeLabel(mimeType: string) {
+  if (mimeType === "image/jpeg") {
+    return "JPG";
+  }
+
+  if (mimeType === "image/webp") {
+    return "WebP";
+  }
+
+  if (mimeType === "image/png") {
+    return "PNG";
+  }
+
+  return mimeType || "Desconocido";
+}
+
+export function getCroppedImageOutputBaseName(fileName: string) {
+  const baseName = getImageDownloadBaseName(fileName, defaultOutputBaseName);
+  return `${baseName}-recortada`;
+}
+
+export function buildCroppedImageFileName(
+  baseName: string,
+  outputFormat: ImageCropperOutputFormat,
+  fallbackBaseName = defaultOutputBaseName,
+) {
+  return buildBrowserImageDownloadFileName(baseName, outputFormat, fallbackBaseName);
+}
+
+export function getCropOutputDimensions(cropRect: ImageCropRect): ImageDimensions {
+  return {
+    height: cropRect.height,
+    width: cropRect.width,
+  };
+}
+
+function hasOnlyFiniteNumbers(cropRect: ImageCropRect) {
+  return [cropRect.x, cropRect.y, cropRect.width, cropRect.height].every(Number.isFinite);
+}
+
+function hasOnlyIntegers(cropRect: ImageCropRect) {
+  return [cropRect.x, cropRect.y, cropRect.width, cropRect.height].every(Number.isInteger);
+}
+
+export function validateCropRect(cropRect: ImageCropRect, imageDimensions: ImageDimensions) {
+  if (!hasOnlyFiniteNumbers(cropRect)) {
+    return "Usa valores numericos validos.";
+  }
+
+  if (!hasOnlyIntegers(cropRect)) {
+    return "Usa valores enteros en pixeles.";
+  }
+
+  if (cropRect.x < 0 || cropRect.y < 0) {
+    return "X e Y no pueden ser negativos.";
+  }
+
+  if (cropRect.width <= 0 || cropRect.height <= 0) {
+    return "El ancho y el alto deben ser mayores que cero.";
+  }
+
+  if (cropRect.x + cropRect.width > imageDimensions.width || cropRect.y + cropRect.height > imageDimensions.height) {
+    return "El area de recorte no puede salirse de la imagen.";
+  }
+
+  if (cropRect.width * cropRect.height > maxCropPixels) {
+    return "El recorte supera el limite de 64 megapixeles.";
+  }
+
+  return null;
+}
+
+export function createFullImageCropRect(imageDimensions: ImageDimensions): ImageCropRect {
+  return {
+    height: imageDimensions.height,
+    width: imageDimensions.width,
+    x: 0,
+    y: 0,
+  };
+}
+
+export function createCenteredCropRect(
+  imageDimensions: ImageDimensions,
+  cropDimensions: ImageDimensions,
+): ImageCropRect {
+  const width = Math.min(Math.max(1, Math.round(cropDimensions.width)), imageDimensions.width);
+  const height = Math.min(Math.max(1, Math.round(cropDimensions.height)), imageDimensions.height);
+
+  return {
+    height,
+    width,
+    x: Math.floor((imageDimensions.width - width) / 2),
+    y: Math.floor((imageDimensions.height - height) / 2),
+  };
+}
+
+export function createCenteredSquareCropRect(imageDimensions: ImageDimensions): ImageCropRect {
+  const side = Math.min(imageDimensions.width, imageDimensions.height);
+  return createCenteredCropRect(imageDimensions, { height: side, width: side });
+}
+
+export async function readImageMetadata(file: File): Promise<ImageCropperMetadata> {
+  const mimeType = getBrowserImageMimeType(file);
+
+  if (!mimeType) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  try {
+    const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+
+    if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+      throw new Error("La imagen no tiene dimensiones validas.");
+    }
+
+    return {
+      fileName: file.name,
+      fileSize: file.size,
+      height: image.naturalHeight,
+      mimeType,
+      width: image.naturalWidth,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error("No se pudo leer la imagen.");
+  }
+}
+
+function ensureOutputFormatSupported(outputFormat: ImageCropperOutputFormat) {
+  if (!canExportBrowserImageFormat(outputFormat)) {
+    throw new Error(`Este navegador no permite exportar imagenes como ${getImageFormatLabel(outputFormat)}.`);
+  }
+}
+
+function drawCroppedImage(
+  canvas: HTMLCanvasElement,
+  image: HTMLImageElement,
+  cropRect: ImageCropRect,
+  outputFormat: ImageCropperOutputFormat,
+) {
+  const context = canvas.getContext("2d");
+
+  if (!context) {
+    throw new Error("No se pudo preparar la imagen de salida.");
+  }
+
+  if (outputFormat === "jpeg") {
+    context.fillStyle = "#ffffff";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  context.drawImage(
+    image,
+    cropRect.x,
+    cropRect.y,
+    cropRect.width,
+    cropRect.height,
+    0,
+    0,
+    cropRect.width,
+    cropRect.height,
+  );
+}
+
+export async function cropImageFile(
+  file: File,
+  { cropRect, outputBaseName, outputFormat, quality }: CropImageOptions,
+): Promise<ImageCropperResult> {
+  if (!isCroppableImageFile(file)) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  ensureOutputFormatSupported(outputFormat);
+
+  const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+  const validationError = validateCropRect(cropRect, {
+    height: image.naturalHeight,
+    width: image.naturalWidth,
+  });
+
+  if (validationError) {
+    throw new Error(validationError);
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = cropRect.width;
+  canvas.height = cropRect.height;
+  drawCroppedImage(canvas, image, cropRect, outputFormat);
+
+  const mimeType = getBrowserImageOutputMimeType(outputFormat);
+  const result = await exportBrowserCanvas(canvas, {
+    errorMessage: "No se pudo exportar la imagen.",
+    mimeType,
+    quality,
+  });
+
+  return {
+    bytes: result.bytes,
+    fileName: buildCroppedImageFileName(outputBaseName, outputFormat, getCroppedImageOutputBaseName(file.name)),
+    format: outputFormat,
+    height: result.height,
+    mimeType,
+    size: result.size,
+    width: result.width,
+  };
+}
diff --git a/src/tools/image/image-cropper/imageCropper.types.ts b/src/tools/image/image-cropper/imageCropper.types.ts
new file mode 100644
index 0000000..d47c41c
--- /dev/null
+++ b/src/tools/image/image-cropper/imageCropper.types.ts
@@ -0,0 +1,42 @@
+import type { BrowserImageOutputFormat } from "../../../shared/utils/imageFiles";
+
+export type ImageCropRect = {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+};
+
+export type ImageDimensions = {
+  height: number;
+  width: number;
+};
+
+export type ImageCropperMetadata = {
+  fileName: string;
+  fileSize: number;
+  height: number;
+  mimeType: string;
+  width: number;
+};
+
+export type ImageCropperOutputFormat = BrowserImageOutputFormat;
+
+export type CropImageOptions = {
+  cropRect: ImageCropRect;
+  outputBaseName: string;
+  outputFormat: ImageCropperOutputFormat;
+  quality?: number;
+};
+
+export type ImageCropperResult = {
+  bytes: ArrayBuffer;
+  fileName: string;
+  format: ImageCropperOutputFormat;
+  height: number;
+  mimeType: string;
+  size: number;
+  width: number;
+};
+
+export type ImageCropperStatus = "idle" | "reading" | "ready" | "processing" | "success" | "error";
diff --git a/src/tools/image/image-cropper/index.ts b/src/tools/image/image-cropper/index.ts
new file mode 100644
index 0000000..fbd33ce
--- /dev/null
+++ b/src/tools/image/image-cropper/index.ts
@@ -0,0 +1 @@
+export { ImageCropperTool } from "./ImageCropperTool";

From e172df7decbcd98ba27e0ba14dd650df6f248bd9 Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Sat, 6 Jun 2026 00:02:16 -0300
Subject: [PATCH 03/10] feat(image): add favicon pack generator

---
 src/features/tools/data/tools.ts              | 102 +++++
 .../tools/renderers/toolRenderers.tsx         |   3 +
 .../image-to-favicon/ImageToFaviconTool.tsx   | 419 ++++++++++++++++++
 src/tools/image/image-to-favicon/README.md    |  22 +
 .../imageToFavicon.service.test.ts            |  51 +++
 .../imageToFavicon.service.ts                 | 218 +++++++++
 .../image-to-favicon/imageToFavicon.types.ts  |  37 ++
 src/tools/image/image-to-favicon/index.ts     |   1 +
 8 files changed, 853 insertions(+)
 create mode 100644 src/tools/image/image-to-favicon/ImageToFaviconTool.tsx
 create mode 100644 src/tools/image/image-to-favicon/README.md
 create mode 100644 src/tools/image/image-to-favicon/imageToFavicon.service.test.ts
 create mode 100644 src/tools/image/image-to-favicon/imageToFavicon.service.ts
 create mode 100644 src/tools/image/image-to-favicon/imageToFavicon.types.ts
 create mode 100644 src/tools/image/image-to-favicon/index.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index 7c478d0..fd2c9bb 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -774,6 +774,108 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "image-to-favicon",
+    slug: "imagen-a-favicon",
+    slugEn: "image-to-favicon",
+    name: { es: "Imagen a favicon", en: "Image to favicon" },
+    description: {
+      es: "Genera un pack de iconos PNG para favicon, Apple touch icon y PWA.",
+      en: "Generate a PNG icon pack for favicon, Apple touch icon and PWA.",
+    },
+    category: "image",
+    tags: {
+      es: ["imagen", "favicon", "iconos", "png", "pwa"],
+      en: ["image", "favicon", "icons", "png", "pwa"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Imagen a favicon online gratis",
+        description:
+          "Genera un ZIP con iconos PNG para favicon, Apple touch icon y PWA desde tu navegador. Sin cuenta y sin subir archivos a Modulaq.",
+      },
+      en: {
+        title: "Image to favicon online free",
+        description:
+          "Generate a ZIP with PNG icons for favicon, Apple touch icon and PWA from your browser. No account and no uploads to Modulaq.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Imagen a favicon crea un pack ZIP con iconos PNG en tamanos comunes para web y PWA. No genera un archivo .ico clasico.",
+        howTo: [
+          "Selecciona una imagen PNG, JPG/JPEG o WebP.",
+          "Revisa el tipo, peso y dimensiones originales.",
+          "La herramienta prepara iconos PNG cuadrados en 16, 32, 48, 180, 192 y 512 px.",
+          "Opcional: ajusta el nombre del ZIP.",
+          "Genera el pack y descarga el ZIP.",
+        ],
+        useCases: [
+          "Preparar favicons PNG para un sitio web.",
+          "Crear apple-touch-icon.png desde una imagen de marca.",
+          "Generar iconos base para el manifest de una PWA.",
+        ],
+        limits: [
+          "No genera archivo .ico clasico.",
+          "Usa ajuste cover centrado: una imagen rectangular puede recortarse para llenar el cuadrado.",
+          "Tamano maximo por imagen: 15 MB.",
+        ],
+        privacy:
+          "El procesamiento de esta imagen ocurre en tu navegador; no la subimos a Modulaq para crear favicons.",
+        commonErrors: [
+          "Archivo que no es una imagen PNG, JPG o WebP.",
+          "Imagen danada o que el navegador no puede decodificar.",
+          "Imagen con dimensiones invalidas o demasiado grande.",
+        ],
+        technicalNotes: [
+          "La exportacion usa canvas en el navegador.",
+          "Los iconos se exportan como PNG y se empaquetan con jszip.",
+          "El ZIP incluye un README.txt con ejemplos HTML.",
+        ],
+      },
+      en: {
+        summary:
+          "Image to favicon creates a ZIP pack with PNG icons in common web and PWA sizes. It does not generate a classic .ico file.",
+        howTo: [
+          "Select a PNG, JPG/JPEG or WebP image.",
+          "Review the detected type, size and dimensions.",
+          "The tool prepares square PNG icons at 16, 32, 48, 180, 192 and 512 px.",
+          "Optionally adjust the ZIP name.",
+          "Generate the pack and download the ZIP.",
+        ],
+        useCases: [
+          "Prepare PNG favicons for a website.",
+          "Create apple-touch-icon.png from a brand image.",
+          "Generate base icons for a PWA manifest.",
+        ],
+        limits: [
+          "It does not generate a classic .ico file.",
+          "It uses centered cover fit: a rectangular image may be cropped to fill the square.",
+          "Maximum image size: 15 MB.",
+        ],
+        privacy:
+          "Processing happens in your browser; we don't upload this image to Modulaq to create favicons.",
+        commonErrors: [
+          "A file that is not PNG, JPG or WebP.",
+          "A damaged image or one the browser cannot decode.",
+          "An image with invalid dimensions or too many pixels.",
+        ],
+        technicalNotes: [
+          "Export uses browser canvas.",
+          "Icons are exported as PNG and bundled with jszip.",
+          "The ZIP includes a README.txt with HTML examples.",
+        ],
+      },
+    },
+  },
   {
     id: "image-compressor",
     slug: "comprimir-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index 40ceeb6..e47d31f 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -20,6 +20,9 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-cropper": lazy(() =>
     import("../../../tools/image/image-cropper").then((module) => ({ default: module.ImageCropperTool })),
   ),
+  "image-to-favicon": lazy(() =>
+    import("../../../tools/image/image-to-favicon").then((module) => ({ default: module.ImageToFaviconTool })),
+  ),
   "image-rotator": lazy(() =>
     import("../../../tools/image/image-rotator").then((module) => ({ default: module.ImageRotatorTool })),
   ),
diff --git a/src/tools/image/image-to-favicon/ImageToFaviconTool.tsx b/src/tools/image/image-to-favicon/ImageToFaviconTool.tsx
new file mode 100644
index 0000000..8af088c
--- /dev/null
+++ b/src/tools/image/image-to-favicon/ImageToFaviconTool.tsx
@@ -0,0 +1,419 @@
+import { Download, FileArchive, FileImage, Loader2, Package, RotateCcw, Upload } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import { getImageFileSizeLimitError } from "../../../shared/utils/fileProcessingLimits";
+import {
+  buildFaviconZipFileName,
+  defaultOutputBaseName,
+  formatFileSize,
+  generateFaviconPack,
+  getFaviconIconSpecs,
+  getFaviconOutputBaseName,
+  getImageMimeLabel,
+  readImageMetadata,
+} from "./imageToFavicon.service";
+import type { ImageToFaviconMetadata, ImageToFaviconResult, ImageToFaviconStatus } from "./imageToFavicon.types";
+
+const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+const iconSpecs = getFaviconIconSpecs();
+
+type DownloadableResult = ImageToFaviconResult & {
+  url: string;
+};
+
+const copy = {
+  es: {
+    downloadPack: "Descargar ZIP",
+    downloadReady: "Pack de favicon listo",
+    outputIntro: "No genera archivo .ico clasico; descarga iconos PNG listos para usar.",
+    outputName: "Nombre del ZIP",
+    outputTitle: "Pack generado",
+    previewAlt: "Vista previa del icono",
+    processing: "Generando pack...",
+    readmeIncluded: "Incluye README.txt con ejemplos HTML.",
+    sourceIntro: "Genera un pack de iconos PNG para favicon, Apple touch icon y PWA.",
+    sourceTitle: "Imagen de origen",
+    transparencyHint: "Los PNG conservan transparencia cuando la imagen de origen la tiene.",
+    webLocal: "Todo se procesa localmente en tu navegador.",
+    willPrepareAs: "Se preparara como {{name}}",
+    zipContents: "Archivos dentro del ZIP",
+  },
+  en: {
+    downloadPack: "Download ZIP",
+    downloadReady: "Favicon pack ready",
+    outputIntro: "It does not create a classic .ico file; it downloads ready-to-use PNG icons.",
+    outputName: "ZIP name",
+    outputTitle: "Generated pack",
+    previewAlt: "Icon preview",
+    processing: "Generating pack...",
+    readmeIncluded: "Includes README.txt with HTML examples.",
+    sourceIntro: "Generate a PNG icon pack for favicon, Apple touch icon and PWA.",
+    sourceTitle: "Source image",
+    transparencyHint: "PNG output preserves transparency when the source image has it.",
+    webLocal: "Everything is processed locally in your browser.",
+    willPrepareAs: "Will prepare as {{name}}",
+    zipContents: "Files inside the ZIP",
+  },
+} as const;
+
+function formatTemplate(template: string, values: Record<string, string>) {
+  return Object.entries(values).reduce((result, [key, value]) => result.replace(`{{${key}}}`, value), template);
+}
+
+export function ImageToFaviconTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const resultUrlRef = useRef<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [metadata, setMetadata] = useState<ImageToFaviconMetadata | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [outputFileName, setOutputFileName] = useState(defaultOutputBaseName);
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [status, setStatus] = useState<ImageToFaviconStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DownloadableResult | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
+    };
+  }, []);
+
+  const finalOutputFileName = buildFaviconZipFileName(
+    outputFileName,
+    metadata ? getFaviconOutputBaseName(metadata.fileName) : defaultOutputBaseName,
+  );
+  const canGenerate = Boolean(file && metadata) && status !== "reading" && status !== "processing";
+
+  const clearResult = () => {
+    if (resultUrlRef.current) {
+      URL.revokeObjectURL(resultUrlRef.current);
+      resultUrlRef.current = null;
+    }
+    setResult(null);
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    clearResult();
+    if (status === "success" || status === "error") {
+      setStatus(metadata ? "ready" : "idle");
+    }
+  };
+
+  const processFile = async (nextFile: File | undefined) => {
+    if (!nextFile) return;
+    setStatus("reading");
+    setFile(null);
+    setMetadata(null);
+    setError(null);
+    clearResult();
+
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+      setPreviewUrl(null);
+    }
+
+    const fileLimitError = getImageFileSizeLimitError(nextFile);
+    if (fileLimitError) {
+      setStatus("error");
+      setError(fileLimitError);
+      return;
+    }
+
+    try {
+      const nextMetadata = await readImageMetadata(nextFile);
+      const nextPreviewUrl = URL.createObjectURL(nextFile);
+      previewUrlRef.current = nextPreviewUrl;
+      setPreviewUrl(nextPreviewUrl);
+      setFile(nextFile);
+      setMetadata(nextMetadata);
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getFaviconOutputBaseName(nextFile.name));
+      }
+      setStatus("ready");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : t("imageUi.couldNotRead"));
+    }
+  };
+
+  const clearSelection = () => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    clearResult();
+    setFile(null);
+    setMetadata(null);
+    setPreviewUrl(null);
+    setOutputFileName(defaultOutputBaseName);
+    setHasCustomOutputFileName(false);
+    setStatus("idle");
+    setError(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const generatePack = async () => {
+    if (!file || !canGenerate) return;
+    setStatus("processing");
+    setError(null);
+    clearResult();
+
+    try {
+      const nextResult = await generateFaviconPack(file, { outputBaseName: outputFileName });
+      const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
+      resultUrlRef.current = resultUrl;
+      setResult({ ...nextResult, url: resultUrl });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo generar el pack.");
+    }
+  };
+
+  const downloadResult = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.url;
+    link.download = result.fileName;
+    link.click();
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.96fr)_minmax(310px,0.52fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-52 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFile(event.dataTransfer.files[0]);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={26} />
+              </span>
+              <span className="mt-4 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
+            </span>
+          </button>
+          <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
+          {metadata ? (
+            <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
+              {previewUrl ? (
+                <img
+                  src={previewUrl}
+                  alt=""
+                  className="h-28 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-32"
+                />
+              ) : (
+                <span className="grid h-28 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal sm:w-32">
+                  <FileImage size={28} />
+                </span>
+              )}
+              <dl className="grid min-w-0 gap-2 text-sm">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                  <dd className="truncate font-semibold text-ink-900">{metadata.fileName}</dd>
+                </div>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                    <dd className="font-semibold text-ink-900">{getImageMimeLabel(metadata.mimeType)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                    <dd className="font-semibold text-ink-900">{formatFileSize(metadata.fileSize)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                    <dd className="font-semibold text-ink-900">
+                      {metadata.width} x {metadata.height}px
+                    </dd>
+                  </div>
+                </div>
+              </dl>
+            </div>
+          ) : null}
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 text-sm shadow-sm">
+            <p className="leading-6 text-ink-600">{labels.outputIntro}</p>
+            <p className="leading-6 text-ink-600">{labels.webLocal}</p>
+            <p className="leading-6 text-ink-600">{labels.transparencyHint}</p>
+          </div>
+
+          {status === "reading" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.readmeIncluded}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-4">
+            {previewUrl ? (
+              <div className="grid gap-3 text-center">
+                <div className="mx-auto grid h-32 w-32 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-[linear-gradient(45deg,#eef2f7_25%,transparent_25%),linear-gradient(-45deg,#eef2f7_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#eef2f7_75%),linear-gradient(-45deg,transparent_75%,#eef2f7_75%)] bg-[length:16px_16px] bg-[position:0_0,0_8px,8px_-8px,-8px_0] shadow-sm">
+                  <img alt={labels.previewAlt} className="h-full w-full object-cover" src={previewUrl} />
+                </div>
+                <p className="text-xs leading-5 text-ink-500">Cover centrado</p>
+              </div>
+            ) : (
+              <div className="text-center text-sm text-ink-500">
+                <Package className="mx-auto text-accent-teal" size={32} />
+                <p className="mt-2 font-semibold text-ink-700">{t("imageUi.selectImage")}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 shadow-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.zipContents}</p>
+            <ul className="mt-3 grid gap-2 text-sm text-ink-700">
+              {iconSpecs.map((icon) => (
+                <li key={icon.fileName} className="flex items-center justify-between gap-3 rounded-md border border-surface-200/70 bg-surface-50 px-3 py-2">
+                  <span className="min-w-0 truncate">{icon.fileName}</span>
+                  <span className="shrink-0 font-semibold text-ink-900">
+                    {icon.size} x {icon.size}
+                  </span>
+                </li>
+              ))}
+              <li className="flex items-center justify-between gap-3 rounded-md border border-surface-200/70 bg-surface-50 px-3 py-2">
+                <span className="min-w-0 truncate">README.txt</span>
+                <span className="shrink-0 font-semibold text-ink-900">HTML</span>
+              </li>
+            </ul>
+          </div>
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {labels.outputName}
+            <input
+              className={cn(inputClassName, "w-full")}
+              value={outputFileName}
+              placeholder={defaultOutputBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+            <span className="text-xs font-normal leading-5 text-ink-500">
+              {formatTemplate(labels.willPrepareAs, { name: finalOutputFileName })}
+            </span>
+          </label>
+
+          {status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {labels.processing}
+            </p>
+          ) : null}
+
+          {result ? (
+            <div className="grid gap-3 rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{labels.downloadReady}</p>
+              <dl className="grid gap-2 sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">ZIP</dt>
+                  <dd className="font-semibold text-ink-900">{result.fileName}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{language === "en" ? "Icons" : "Iconos"}</dt>
+                  <dd className="font-semibold text-ink-900">{result.iconCount}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(result.size)}</dd>
+                </div>
+              </dl>
+              <Button type="button" variant="secondary" className="gap-2" onClick={downloadResult}>
+                <Download size={16} />
+                {labels.downloadPack}
+              </Button>
+            </div>
+          ) : null}
+
+          <div className="grid gap-2 pt-1">
+            <Button type="button" className="gap-2" onClick={() => void generatePack()} disabled={!canGenerate}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <FileArchive size={16} />}
+              {language === "en" ? "Generate favicon pack" : "Generar pack favicon"}
+            </Button>
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => fileInputRef.current?.click()}>
+              <Upload size={16} />
+              {t("imageUi.selectImage")}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              className="gap-2"
+              onClick={clearSelection}
+              disabled={!file && status === "idle" && !hasCustomOutputFileName}
+            >
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-to-favicon/README.md b/src/tools/image/image-to-favicon/README.md
new file mode 100644
index 0000000..706d5b8
--- /dev/null
+++ b/src/tools/image/image-to-favicon/README.md
@@ -0,0 +1,22 @@
+# Imagen a favicon
+
+Herramienta local para generar un pack ZIP de iconos PNG para favicon, Apple touch icon y PWA.
+
+## Comportamiento
+
+- Acepta imagenes PNG, JPG/JPEG o WebP que el navegador pueda decodificar.
+- Genera PNG cuadrados en 16x16, 32x32, 48x48, 180x180, 192x192 y 512x512.
+- Usa ajuste `cover` centrado para que el icono llene el cuadrado.
+- Descarga un ZIP con nombres fijos y un `README.txt` con ejemplos HTML.
+- No genera archivo `.ico` clasico.
+- Todo el procesamiento ocurre en el navegador.
+
+## Archivos del ZIP
+
+- `favicon-16x16.png`
+- `favicon-32x32.png`
+- `favicon-48x48.png`
+- `apple-touch-icon.png`
+- `icon-192.png`
+- `icon-512.png`
+- `README.txt`
diff --git a/src/tools/image/image-to-favicon/imageToFavicon.service.test.ts b/src/tools/image/image-to-favicon/imageToFavicon.service.test.ts
new file mode 100644
index 0000000..b14a655
--- /dev/null
+++ b/src/tools/image/image-to-favicon/imageToFavicon.service.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildFaviconZipFileName,
+  createFaviconPackReadme,
+  getFaviconIconSpecs,
+  getFaviconOutputBaseName,
+  validateFaviconSourceDimensions,
+} from "./imageToFavicon.service";
+
+describe("imageToFavicon.service", () => {
+  it("returns the generated icon sizes", () => {
+    expect(getFaviconIconSpecs().map((icon) => icon.size)).toEqual([16, 32, 48, 180, 192, 512]);
+  });
+
+  it("returns the expected file names", () => {
+    expect(getFaviconIconSpecs().map((icon) => icon.fileName)).toEqual([
+      "favicon-16x16.png",
+      "favicon-32x32.png",
+      "favicon-48x48.png",
+      "apple-touch-icon.png",
+      "icon-192.png",
+      "icon-512.png",
+    ]);
+  });
+
+  it("accepts a valid source size", () => {
+    expect(validateFaviconSourceDimensions({ width: 1200, height: 800 })).toBeNull();
+  });
+
+  it("rejects invalid source dimensions", () => {
+    expect(validateFaviconSourceDimensions({ width: 0, height: 800 })).toMatch(/mayores que cero/);
+    expect(validateFaviconSourceDimensions({ width: 1200, height: -1 })).toMatch(/mayores que cero/);
+    expect(validateFaviconSourceDimensions({ width: Number.NaN, height: 800 })).toMatch(/validas/);
+  });
+
+  it("rejects unreasonably large source dimensions", () => {
+    expect(validateFaviconSourceDimensions({ width: 10000, height: 10000 })).toMatch(/64 megapixeles/);
+  });
+
+  it("builds output names derived from the original file", () => {
+    expect(getFaviconOutputBaseName("marca.png")).toBe("marca-favicon");
+    expect(buildFaviconZipFileName("marca-favicon")).toBe("marca-favicon.zip");
+  });
+
+  it("generates README metadata for the pack", () => {
+    const readme = createFaviconPackReadme();
+    expect(readme).toContain("favicon-32x32.png");
+    expect(readme).toContain("<link rel=\"icon\"");
+    expect(readme).toContain("No incluye un archivo .ico clasico.");
+  });
+});
diff --git a/src/tools/image/image-to-favicon/imageToFavicon.service.ts b/src/tools/image/image-to-favicon/imageToFavicon.service.ts
new file mode 100644
index 0000000..e7934e6
--- /dev/null
+++ b/src/tools/image/image-to-favicon/imageToFavicon.service.ts
@@ -0,0 +1,218 @@
+import JSZip from "jszip";
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  buildImageZipDownloadFileName,
+  exportBrowserCanvas,
+  getBrowserImageMimeType,
+  getImageDownloadBaseName,
+  isBrowserImageFile,
+  loadBrowserImage,
+} from "../../../shared/utils/imageFiles";
+import type {
+  FaviconIconSpec,
+  ImageDimensions,
+  ImageToFaviconMetadata,
+  ImageToFaviconOptions,
+  ImageToFaviconResult,
+  ImageToFaviconResultIcon,
+} from "./imageToFavicon.types";
+
+export const defaultOutputBaseName = "pack-favicon";
+export const maxFaviconSourcePixels = 64_000_000;
+
+export const faviconIconSpecs = [
+  { fileName: "favicon-16x16.png", label: "Favicon 16x16", size: 16 },
+  { fileName: "favicon-32x32.png", label: "Favicon 32x32", size: 32 },
+  { fileName: "favicon-48x48.png", label: "Favicon 48x48", size: 48 },
+  { fileName: "apple-touch-icon.png", label: "Apple touch icon", size: 180 },
+  { fileName: "icon-192.png", label: "PWA icon 192", size: 192 },
+  { fileName: "icon-512.png", label: "PWA icon 512", size: 512 },
+] as const satisfies readonly FaviconIconSpec[];
+
+export { formatFileSize };
+
+export function isFaviconSourceImageFile(file: File) {
+  return isBrowserImageFile(file);
+}
+
+export function getImageMimeLabel(mimeType: string) {
+  if (mimeType === "image/jpeg") {
+    return "JPG";
+  }
+
+  if (mimeType === "image/webp") {
+    return "WebP";
+  }
+
+  if (mimeType === "image/png") {
+    return "PNG";
+  }
+
+  return mimeType || "Desconocido";
+}
+
+export function getFaviconOutputBaseName(fileName: string) {
+  const baseName = getImageDownloadBaseName(fileName, defaultOutputBaseName);
+  return `${baseName}-favicon`;
+}
+
+export function buildFaviconZipFileName(baseName: string, fallbackBaseName = defaultOutputBaseName) {
+  return buildImageZipDownloadFileName(baseName, fallbackBaseName);
+}
+
+export function getFaviconIconSpecs() {
+  return faviconIconSpecs.map((icon) => ({ ...icon }));
+}
+
+export function validateFaviconSourceDimensions(imageDimensions: ImageDimensions) {
+  if (!Number.isFinite(imageDimensions.width) || !Number.isFinite(imageDimensions.height)) {
+    return "La imagen debe tener dimensiones validas.";
+  }
+
+  if (!Number.isInteger(imageDimensions.width) || !Number.isInteger(imageDimensions.height)) {
+    return "La imagen debe tener dimensiones enteras en pixeles.";
+  }
+
+  if (imageDimensions.width <= 0 || imageDimensions.height <= 0) {
+    return "La imagen debe tener ancho y alto mayores que cero.";
+  }
+
+  if (imageDimensions.width * imageDimensions.height > maxFaviconSourcePixels) {
+    return "La imagen supera el limite de 64 megapixeles.";
+  }
+
+  return null;
+}
+
+export function createFaviconPackReadme(iconSpecs: readonly FaviconIconSpec[] = faviconIconSpecs) {
+  const iconList = iconSpecs.map((icon) => `- ${icon.fileName}: ${icon.size}x${icon.size}px`).join("\n");
+
+  return [
+    "Imagen a favicon - Modulaq",
+    "",
+    "Este ZIP contiene iconos PNG. No incluye un archivo .ico clasico.",
+    "",
+    "Archivos:",
+    iconList,
+    "",
+    "Ejemplos HTML:",
+    '<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
+    '<link rel="apple-touch-icon" href="/apple-touch-icon.png">',
+    "",
+    "Manifest/PWA:",
+    '{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }',
+    '{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }',
+  ].join("\n");
+}
+
+export async function readImageMetadata(file: File): Promise<ImageToFaviconMetadata> {
+  const mimeType = getBrowserImageMimeType(file);
+
+  if (!mimeType) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  try {
+    const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+    const validationError = validateFaviconSourceDimensions({
+      height: image.naturalHeight,
+      width: image.naturalWidth,
+    });
+
+    if (validationError) {
+      throw new Error(validationError);
+    }
+
+    return {
+      fileName: file.name,
+      fileSize: file.size,
+      height: image.naturalHeight,
+      mimeType,
+      width: image.naturalWidth,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error("No se pudo leer la imagen.");
+  }
+}
+
+function drawCoveredSquareImage(canvas: HTMLCanvasElement, image: HTMLImageElement, size: number) {
+  const context = canvas.getContext("2d");
+
+  if (!context) {
+    throw new Error("No se pudo preparar el icono.");
+  }
+
+  canvas.width = size;
+  canvas.height = size;
+  context.clearRect(0, 0, size, size);
+
+  const scale = Math.max(size / image.naturalWidth, size / image.naturalHeight);
+  const drawWidth = image.naturalWidth * scale;
+  const drawHeight = image.naturalHeight * scale;
+  const drawX = (size - drawWidth) / 2;
+  const drawY = (size - drawHeight) / 2;
+
+  context.drawImage(image, drawX, drawY, drawWidth, drawHeight);
+}
+
+async function createFaviconIcon(image: HTMLImageElement, iconSpec: FaviconIconSpec): Promise<ImageToFaviconResultIcon & { bytes: ArrayBuffer }> {
+  const canvas = document.createElement("canvas");
+  drawCoveredSquareImage(canvas, image, iconSpec.size);
+
+  const result = await exportBrowserCanvas(canvas, {
+    errorMessage: "No se pudo exportar un icono PNG.",
+    mimeType: "image/png",
+  });
+
+  return {
+    ...iconSpec,
+    byteSize: result.size,
+    bytes: result.bytes,
+  };
+}
+
+export async function generateFaviconPack(
+  file: File,
+  { outputBaseName }: ImageToFaviconOptions,
+): Promise<ImageToFaviconResult> {
+  if (!isFaviconSourceImageFile(file)) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+  const validationError = validateFaviconSourceDimensions({
+    height: image.naturalHeight,
+    width: image.naturalWidth,
+  });
+
+  if (validationError) {
+    throw new Error(validationError);
+  }
+
+  const zip = new JSZip();
+  const iconResults = await Promise.all(faviconIconSpecs.map((iconSpec) => createFaviconIcon(image, iconSpec)));
+
+  for (const icon of iconResults) {
+    zip.file(icon.fileName, icon.bytes);
+  }
+
+  zip.file("README.txt", createFaviconPackReadme());
+
+  try {
+    const bytes = await zip.generateAsync({ type: "arraybuffer" });
+    return {
+      bytes,
+      fileName: buildFaviconZipFileName(outputBaseName, getFaviconOutputBaseName(file.name)),
+      iconCount: faviconIconSpecs.length,
+      icons: iconResults.map(({ bytes: _bytes, ...icon }) => icon),
+      mimeType: "application/zip",
+      size: bytes.byteLength,
+    };
+  } catch {
+    throw new Error("No se pudo preparar la descarga ZIP.");
+  }
+}
diff --git a/src/tools/image/image-to-favicon/imageToFavicon.types.ts b/src/tools/image/image-to-favicon/imageToFavicon.types.ts
new file mode 100644
index 0000000..ea7effb
--- /dev/null
+++ b/src/tools/image/image-to-favicon/imageToFavicon.types.ts
@@ -0,0 +1,37 @@
+export type FaviconIconSpec = {
+  fileName: string;
+  label: string;
+  size: number;
+};
+
+export type ImageToFaviconMetadata = {
+  fileName: string;
+  fileSize: number;
+  height: number;
+  mimeType: string;
+  width: number;
+};
+
+export type ImageToFaviconResultIcon = FaviconIconSpec & {
+  byteSize: number;
+};
+
+export type ImageToFaviconResult = {
+  bytes: ArrayBuffer;
+  fileName: string;
+  iconCount: number;
+  icons: ImageToFaviconResultIcon[];
+  mimeType: "application/zip";
+  size: number;
+};
+
+export type ImageToFaviconOptions = {
+  outputBaseName: string;
+};
+
+export type ImageToFaviconStatus = "idle" | "reading" | "ready" | "processing" | "success" | "error";
+
+export type ImageDimensions = {
+  height: number;
+  width: number;
+};
diff --git a/src/tools/image/image-to-favicon/index.ts b/src/tools/image/image-to-favicon/index.ts
new file mode 100644
index 0000000..b569dc1
--- /dev/null
+++ b/src/tools/image/image-to-favicon/index.ts
@@ -0,0 +1 @@
+export { ImageToFaviconTool } from "./ImageToFaviconTool";

From 53b77c5fe5dafa994d3c9c94163eb65a6cc5f16e Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Sat, 6 Jun 2026 00:31:40 -0300
Subject: [PATCH 04/10] feat(image): add join images tool

---
 src/features/tools/data/tools.ts              | 106 +++
 .../tools/renderers/toolRenderers.tsx         |   3 +
 .../image/image-joiner/ImageJoinerTool.tsx    | 764 ++++++++++++++++++
 src/tools/image/image-joiner/README.md        |  18 +
 .../image-joiner/imageJoiner.service.test.ts  |  74 ++
 .../image/image-joiner/imageJoiner.service.ts | 358 ++++++++
 .../image/image-joiner/imageJoiner.types.ts   |  63 ++
 src/tools/image/image-joiner/index.ts         |   1 +
 8 files changed, 1387 insertions(+)
 create mode 100644 src/tools/image/image-joiner/ImageJoinerTool.tsx
 create mode 100644 src/tools/image/image-joiner/README.md
 create mode 100644 src/tools/image/image-joiner/imageJoiner.service.test.ts
 create mode 100644 src/tools/image/image-joiner/imageJoiner.service.ts
 create mode 100644 src/tools/image/image-joiner/imageJoiner.types.ts
 create mode 100644 src/tools/image/image-joiner/index.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index fd2c9bb..1a7d7aa 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -876,6 +876,112 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "image-joiner",
+    slug: "unir-imagenes",
+    slugEn: "join-images",
+    name: { es: "Unir imágenes", en: "Join images" },
+    description: {
+      es: "Une varias imágenes en una sola imagen vertical, horizontal o en cuadrícula.",
+      en: "Join multiple images into one vertical, horizontal or grid image.",
+    },
+    category: "image",
+    tags: {
+      es: ["imagen", "unir", "combinar", "cuadricula", "png", "jpg", "webp"],
+      en: ["image", "join", "combine", "grid", "png", "jpg", "webp"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Unir imágenes online gratis",
+        description:
+          "Une imágenes PNG, JPG o WebP en una sola imagen vertical, horizontal o en cuadrícula desde tu navegador. Sin subir archivos a Modulaq.",
+      },
+      en: {
+        title: "Join images online free",
+        description:
+          "Join PNG, JPG or WebP images into one vertical, horizontal or grid image from your browser. No uploads to Modulaq.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Unir imágenes combina varias imágenes locales en un solo canvas con modo vertical, horizontal o cuadrícula.",
+        howTo: [
+          "Agrega dos o más imágenes PNG, JPG/JPEG o WebP.",
+          "Revisa nombre, tipo, peso y dimensiones de cada imagen.",
+          "Ordena la lista con subir, bajar o eliminar.",
+          "Elige modo vertical, horizontal o cuadrícula. En cuadrícula, define columnas.",
+          "Ajusta separación, padding, color de fondo y formato de salida.",
+          "Une las imágenes y descarga el resultado.",
+        ],
+        useCases: [
+          "Crear una tira vertical de capturas.",
+          "Poner imágenes lado a lado.",
+          "Armar una cuadrícula simple sin subir archivos.",
+        ],
+        limits: [
+          "JPG no conserva transparencia.",
+          "WebP aparece si tu navegador permite exportarlo correctamente.",
+          "Hasta 30 imágenes, 15 MB por imagen y 100 MB en total.",
+          "Las imágenes se dibujan en sus dimensiones originales.",
+        ],
+        privacy:
+          "El procesamiento de estas imágenes ocurre en tu navegador; no las subimos a Modulaq para unirlas.",
+        commonErrors: [
+          "Archivo que no es una imagen PNG, JPG o WebP.",
+          "Imagen dañada o que el navegador no puede decodificar.",
+          "Canvas final demasiado grande para procesarlo localmente.",
+        ],
+        technicalNotes: [
+          "La exportación usa canvas en el navegador.",
+          "Vertical y horizontal centran cada imagen en el eje secundario.",
+          "La cuadrícula usa celdas uniformes y calcula filas automáticamente.",
+        ],
+      },
+      en: {
+        summary:
+          "Join images combines multiple local images into one canvas with vertical, horizontal or grid mode.",
+        howTo: [
+          "Add two or more PNG, JPG/JPEG or WebP images.",
+          "Review each image name, type, size and dimensions.",
+          "Order the list with move up, move down or remove.",
+          "Choose vertical, horizontal or grid mode. In grid mode, set columns.",
+          "Adjust spacing, padding, background color and output format.",
+          "Join the images and download the result.",
+        ],
+        useCases: [
+          "Create a vertical strip of screenshots.",
+          "Place images side by side.",
+          "Build a simple grid without uploading files.",
+        ],
+        limits: [
+          "JPG does not preserve transparency.",
+          "WebP appears if your browser can export it correctly.",
+          "Up to 30 images, 15 MB each and 100 MB total.",
+          "Images are drawn at their original dimensions.",
+        ],
+        privacy:
+          "Processing happens in your browser; we don't upload these images to Modulaq to join them.",
+        commonErrors: [
+          "A file that is not PNG, JPG or WebP.",
+          "A damaged image or one the browser cannot decode.",
+          "Final canvas too large to process locally.",
+        ],
+        technicalNotes: [
+          "Export uses browser canvas.",
+          "Vertical and horizontal modes center each image on the secondary axis.",
+          "Grid mode uses uniform cells and calculates rows automatically.",
+        ],
+      },
+    },
+  },
   {
     id: "image-compressor",
     slug: "comprimir-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index e47d31f..237ee1a 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -23,6 +23,9 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-to-favicon": lazy(() =>
     import("../../../tools/image/image-to-favicon").then((module) => ({ default: module.ImageToFaviconTool })),
   ),
+  "image-joiner": lazy(() =>
+    import("../../../tools/image/image-joiner").then((module) => ({ default: module.ImageJoinerTool })),
+  ),
   "image-rotator": lazy(() =>
     import("../../../tools/image/image-rotator").then((module) => ({ default: module.ImageRotatorTool })),
   ),
diff --git a/src/tools/image/image-joiner/ImageJoinerTool.tsx b/src/tools/image/image-joiner/ImageJoinerTool.tsx
new file mode 100644
index 0000000..14fa3ca
--- /dev/null
+++ b/src/tools/image/image-joiner/ImageJoinerTool.tsx
@@ -0,0 +1,764 @@
+import {
+  ArrowDown,
+  ArrowUp,
+  Columns3,
+  Download,
+  FileImage,
+  Grid3X3,
+  Images,
+  Loader2,
+  RotateCcw,
+  Rows3,
+  Trash2,
+  Upload,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import {
+  fileProcessingLimits,
+  getImageFileSizeLimitError,
+  getTotalImageSizeLimitError,
+} from "../../../shared/utils/fileProcessingLimits";
+import {
+  canExportBrowserImageFormat,
+  jpegQualityDecimalToPercent,
+  jpegQualityPercentToDecimal,
+} from "../../../shared/utils/imageFiles";
+import {
+  buildJoinedImageFileName,
+  calculateImageJoinerLayout,
+  defaultOutputBaseName,
+  formatFileSize,
+  getImageFormatLabel,
+  getImageMimeLabel,
+  getJoinedImageOutputBaseName,
+  isJoinableImageFile,
+  joinImageFiles,
+  readImageMetadata,
+  validateImageJoinerOptions,
+} from "./imageJoiner.service";
+import type {
+  ImageJoinerLayoutOptions,
+  ImageJoinerMetadata,
+  ImageJoinerMode,
+  ImageJoinerOutputFormat,
+  ImageJoinerResult,
+  ImageJoinerSource,
+  ImageJoinerStatus,
+} from "./imageJoiner.types";
+
+const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+
+type ImageJoinerItem = {
+  file: File;
+  metadata: ImageJoinerMetadata;
+  previewUrl: string;
+};
+
+type DownloadableResult = ImageJoinerResult & {
+  url: string;
+};
+
+const baseOutputFormats: ImageJoinerOutputFormat[] = ["png", "jpeg"];
+
+const formatDescKeys: Record<ImageJoinerOutputFormat, TranslationKey> = {
+  png: "imageUi.png.desc",
+  jpeg: "imageUi.jpg.desc",
+  webp: "imageUi.webp.desc",
+};
+
+const copy = {
+  es: {
+    addImages: "Agregar imagenes",
+    background: "Color de fondo",
+    columns: "Columnas",
+    downloadReady: "Imagen unida lista",
+    emptyList: "Agrega al menos dos imagenes para preparar la union.",
+    grid: "Cuadricula",
+    horizontal: "Horizontal",
+    jpgTransparency: "JPG no conserva transparencia.",
+    layoutTitle: "Orden y composicion",
+    mode: "Modo de union",
+    outputIntro: "Todo se procesa localmente en tu navegador.",
+    outputTitle: "Vista previa y salida",
+    padding: "Padding exterior",
+    previewAlt: "Vista previa de imagenes unidas",
+    processing: "Uniendo imagenes...",
+    remove: "Eliminar",
+    sourceIntro: "Une varias imagenes en una sola imagen vertical, horizontal o en cuadricula.",
+    sourceTitle: "Imagenes",
+    spacing: "Separacion",
+    vertical: "Vertical",
+    webpHint: "WebP aparece si tu navegador permite exportarlo correctamente.",
+  },
+  en: {
+    addImages: "Add images",
+    background: "Background color",
+    columns: "Columns",
+    downloadReady: "Joined image ready",
+    emptyList: "Add at least two images to prepare the join.",
+    grid: "Grid",
+    horizontal: "Horizontal",
+    jpgTransparency: "JPG does not preserve transparency.",
+    layoutTitle: "Order and composition",
+    mode: "Join mode",
+    outputIntro: "Everything is processed locally in your browser.",
+    outputTitle: "Preview and output",
+    padding: "Outer padding",
+    previewAlt: "Joined images preview",
+    processing: "Joining images...",
+    remove: "Remove",
+    sourceIntro: "Join multiple images into one vertical, horizontal or grid image.",
+    sourceTitle: "Images",
+    spacing: "Spacing",
+    vertical: "Vertical",
+    webpHint: "WebP appears if your browser can export it correctly.",
+  },
+} as const;
+
+const modeConfig = {
+  vertical: { icon: Rows3, key: "vertical" },
+  horizontal: { icon: Columns3, key: "horizontal" },
+  grid: { icon: Grid3X3, key: "grid" },
+} as const satisfies Record<ImageJoinerMode, { icon: typeof Rows3; key: keyof typeof copy.es }>;
+
+function parseNumberInput(value: string) {
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : Number.NaN;
+}
+
+function stringifyNumber(value: number) {
+  return String(Math.max(0, Math.round(value)));
+}
+
+function createEntryId(file: File, index: number) {
+  return `${Date.now()}-${index}-${file.name}`;
+}
+
+function getPreviewImageStyle(position: { height: number; width: number; x: number; y: number }, layoutWidth: number, layoutHeight: number) {
+  return {
+    height: `${(position.height / layoutHeight) * 100}%`,
+    left: `${(position.x / layoutWidth) * 100}%`,
+    top: `${(position.y / layoutHeight) * 100}%`,
+    width: `${(position.width / layoutWidth) * 100}%`,
+  };
+}
+
+export function ImageJoinerTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const resultUrlRef = useRef<string | null>(null);
+  const itemsRef = useRef<ImageJoinerItem[]>([]);
+  const [items, setItems] = useState<ImageJoinerItem[]>([]);
+  const [mode, setMode] = useState<ImageJoinerMode>("vertical");
+  const [columnsInput, setColumnsInput] = useState("2");
+  const [spacingInput, setSpacingInput] = useState("0");
+  const [paddingInput, setPaddingInput] = useState("0");
+  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
+  const [outputFormat, setOutputFormat] = useState<ImageJoinerOutputFormat>("png");
+  const [qualityPercent, setQualityPercent] = useState(jpegQualityDecimalToPercent(0.92));
+  const [outputFileName, setOutputFileName] = useState(defaultOutputBaseName);
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [webpSupported, setWebpSupported] = useState(false);
+  const [status, setStatus] = useState<ImageJoinerStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DownloadableResult | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+
+  useEffect(() => {
+    setWebpSupported(canExportBrowserImageFormat("webp"));
+    return () => {
+      for (const item of itemsRef.current) {
+        URL.revokeObjectURL(item.previewUrl);
+      }
+      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
+    };
+  }, []);
+
+  const outputFormats = useMemo(
+    () => (webpSupported ? [...baseOutputFormats, "webp" as const] : baseOutputFormats),
+    [webpSupported],
+  );
+  const sources = useMemo<ImageJoinerSource[]>(
+    () =>
+      items.map((item) => ({
+        height: item.metadata.height,
+        id: item.metadata.id,
+        width: item.metadata.width,
+      })),
+    [items],
+  );
+  const layoutOptions = useMemo<ImageJoinerLayoutOptions>(
+    () => ({
+      backgroundColor,
+      columns: parseNumberInput(columnsInput),
+      mode,
+      padding: parseNumberInput(paddingInput),
+      spacing: parseNumberInput(spacingInput),
+    }),
+    [backgroundColor, columnsInput, mode, paddingInput, spacingInput],
+  );
+  const layoutError = validateImageJoinerOptions(sources, layoutOptions);
+  const layout = !layoutError ? calculateImageJoinerLayout(sources, layoutOptions) : null;
+  const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
+  const fallbackBaseName = items[0] ? getJoinedImageOutputBaseName(items[0].metadata.fileName) : defaultOutputBaseName;
+  const finalOutputFileName = buildJoinedImageFileName(outputFileName, outputFormat, fallbackBaseName);
+  const transparencyWarning = outputFormat === "jpeg" ? labels.jpgTransparency : null;
+  const canJoin = items.length >= 2 && !layoutError && status !== "reading" && status !== "processing";
+
+  const clearResult = () => {
+    if (resultUrlRef.current) {
+      URL.revokeObjectURL(resultUrlRef.current);
+      resultUrlRef.current = null;
+    }
+    setResult(null);
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    clearResult();
+    if (status === "success" || status === "error") {
+      setStatus(items.length > 0 ? "ready" : "idle");
+    }
+  };
+
+  const processFiles = async (fileList: FileList | File[]) => {
+    const nextFiles = Array.from(fileList);
+    if (nextFiles.length === 0) return;
+
+    setStatus("reading");
+    setError(null);
+    clearResult();
+
+    const totalCount = items.length + nextFiles.length;
+    if (totalCount > fileProcessingLimits.maxImageFileCount) {
+      setStatus(items.length > 0 ? "ready" : "error");
+      setError("Puedes cargar hasta 30 imagenes.");
+      return;
+    }
+
+    const nextTotalSize = items.reduce((total, item) => total + item.file.size, 0) + nextFiles.reduce((total, file) => total + file.size, 0);
+    const totalSizeError = getTotalImageSizeLimitError(nextTotalSize);
+    if (totalSizeError) {
+      setStatus(items.length > 0 ? "ready" : "error");
+      setError(totalSizeError);
+      return;
+    }
+
+    const preparedItems: ImageJoinerItem[] = [];
+    try {
+      for (const [index, file] of nextFiles.entries()) {
+        const fileLimitError = getImageFileSizeLimitError(file);
+        if (fileLimitError) {
+          throw new Error(fileLimitError);
+        }
+
+        if (!isJoinableImageFile(file)) {
+          throw new Error("Selecciona imagenes PNG, JPG o WebP validas.");
+        }
+
+        const id = createEntryId(file, items.length + index);
+        const metadata = await readImageMetadata(file, id);
+        preparedItems.push({
+          file,
+          metadata,
+          previewUrl: URL.createObjectURL(file),
+        });
+      }
+
+      setItems((currentItems) => {
+        const nextItems = [...currentItems, ...preparedItems];
+        if (!hasCustomOutputFileName && nextItems[0]) {
+          setOutputFileName(getJoinedImageOutputBaseName(nextItems[0].metadata.fileName));
+        }
+        return nextItems;
+      });
+      setStatus("ready");
+    } catch (nextError) {
+      for (const item of preparedItems) {
+        URL.revokeObjectURL(item.previewUrl);
+      }
+      setStatus(items.length > 0 ? "ready" : "error");
+      setError(nextError instanceof Error ? nextError.message : t("imageUi.couldNotRead"));
+    }
+  };
+
+  const moveItem = (index: number, direction: -1 | 1) => {
+    setItems((currentItems) => {
+      const nextIndex = index + direction;
+      if (nextIndex < 0 || nextIndex >= currentItems.length) return currentItems;
+      const nextItems = [...currentItems];
+      const [item] = nextItems.splice(index, 1);
+      nextItems.splice(nextIndex, 0, item);
+      return nextItems;
+    });
+    resetFeedback();
+  };
+
+  const removeItem = (index: number) => {
+    setItems((currentItems) => {
+      const nextItems = [...currentItems];
+      const [removedItem] = nextItems.splice(index, 1);
+      if (removedItem) {
+        URL.revokeObjectURL(removedItem.previewUrl);
+      }
+      return nextItems;
+    });
+    resetFeedback();
+  };
+
+  const clearSelection = () => {
+    for (const item of items) {
+      URL.revokeObjectURL(item.previewUrl);
+    }
+    clearResult();
+    setItems([]);
+    setMode("vertical");
+    setColumnsInput("2");
+    setSpacingInput("0");
+    setPaddingInput("0");
+    setBackgroundColor("#ffffff");
+    setOutputFormat("png");
+    setQualityPercent(jpegQualityDecimalToPercent(0.92));
+    setOutputFileName(defaultOutputBaseName);
+    setHasCustomOutputFileName(false);
+    setStatus("idle");
+    setError(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const joinImages = async () => {
+    if (!canJoin) return;
+    setStatus("processing");
+    setError(null);
+    clearResult();
+
+    try {
+      const nextResult = await joinImageFiles(
+        items.map((item) => item.file),
+        {
+          ...layoutOptions,
+          outputBaseName: outputFileName,
+          outputFormat,
+          quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
+        },
+      );
+      const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
+      resultUrlRef.current = resultUrl;
+      setResult({ ...nextResult, url: resultUrl });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo unir las imagenes.");
+    }
+  };
+
+  const downloadResult = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.url;
+    link.download = result.fileName;
+    link.click();
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.96fr)_minmax(310px,0.52fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-44 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFiles(event.dataTransfer.files);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={26} />
+              </span>
+              <span className="mt-4 block text-base font-semibold text-ink-900">{labels.addImages}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
+            </span>
+          </button>
+          <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            multiple
+            type="file"
+            onChange={(event) => {
+              if (event.target.files) void processFiles(event.target.files);
+              event.target.value = "";
+            }}
+          />
+
+          <div className="grid gap-3">
+            {items.length === 0 ? (
+              <div className="rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 text-center text-sm text-ink-500 shadow-sm">
+                <Images className="mx-auto text-accent-teal" size={30} />
+                <p className="mt-2 font-semibold text-ink-700">{labels.emptyList}</p>
+              </div>
+            ) : (
+              items.map((item, index) => (
+                <div
+                  key={item.metadata.id}
+                  className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[88px_minmax(0,1fr)_auto]"
+                >
+                  <img
+                    src={item.previewUrl}
+                    alt=""
+                    className="h-20 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-20"
+                  />
+                  <dl className="grid min-w-0 gap-2 text-sm">
+                    <div>
+                      <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                      <dd className="truncate font-semibold text-ink-900">{item.metadata.fileName}</dd>
+                    </div>
+                    <div className="grid gap-2 sm:grid-cols-3">
+                      <div>
+                        <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                        <dd className="font-semibold text-ink-900">{getImageMimeLabel(item.metadata.mimeType)}</dd>
+                      </div>
+                      <div>
+                        <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                        <dd className="font-semibold text-ink-900">{formatFileSize(item.metadata.fileSize)}</dd>
+                      </div>
+                      <div>
+                        <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                        <dd className="font-semibold text-ink-900">
+                          {item.metadata.width} x {item.metadata.height}px
+                        </dd>
+                      </div>
+                    </div>
+                  </dl>
+                  <div className="grid grid-cols-3 gap-2 sm:grid-cols-1">
+                    <Button type="button" variant="secondary" className="h-9 px-2" disabled={index === 0} onClick={() => moveItem(index, -1)}>
+                      <ArrowUp size={15} />
+                    </Button>
+                    <Button type="button" variant="secondary" className="h-9 px-2" disabled={index === items.length - 1} onClick={() => moveItem(index, 1)}>
+                      <ArrowDown size={15} />
+                    </Button>
+                    <Button type="button" variant="ghost" className="h-9 px-2" onClick={() => removeItem(index)}>
+                      <Trash2 size={15} />
+                    </Button>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.layoutTitle}</p>
+            <div className="grid gap-2 sm:grid-cols-3">
+              {(Object.keys(modeConfig) as ImageJoinerMode[]).map((nextMode) => {
+                const Icon = modeConfig[nextMode].icon;
+                return (
+                  <button
+                    key={nextMode}
+                    type="button"
+                    className={cn(
+                      "rounded-md border p-3 text-left transition",
+                      mode === nextMode
+                        ? "border-accent-cyan/45 bg-accent-cyan/10"
+                        : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                    )}
+                    onClick={() => {
+                      setMode(nextMode);
+                      resetFeedback();
+                    }}
+                  >
+                    <span className="flex items-center gap-2 text-sm font-semibold text-ink-900">
+                      <Icon size={16} />
+                      {labels[modeConfig[nextMode].key]}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-4">
+              {mode === "grid" ? (
+                <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                  {labels.columns}
+                  <input
+                    className={inputClassName}
+                    inputMode="numeric"
+                    min={1}
+                    type="number"
+                    value={columnsInput}
+                    onChange={(event) => {
+                      setColumnsInput(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                </label>
+              ) : null}
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.spacing}
+                <input
+                  className={inputClassName}
+                  inputMode="numeric"
+                  min={0}
+                  type="number"
+                  value={spacingInput}
+                  onChange={(event) => {
+                    setSpacingInput(event.target.value);
+                    resetFeedback();
+                  }}
+                />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.padding}
+                <input
+                  className={inputClassName}
+                  inputMode="numeric"
+                  min={0}
+                  type="number"
+                  value={paddingInput}
+                  onChange={(event) => {
+                    setPaddingInput(event.target.value);
+                    resetFeedback();
+                  }}
+                />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.background}
+                <span className="flex min-h-11 items-center gap-2 rounded-lg border border-surface-200/90 bg-surface-50/95 px-2 shadow-sm">
+                  <input
+                    className="h-8 w-10 rounded border border-surface-200 bg-transparent"
+                    type="color"
+                    value={backgroundColor}
+                    onChange={(event) => {
+                      setBackgroundColor(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                  <input
+                    className="min-w-0 flex-1 bg-transparent text-sm font-normal text-ink-900 outline-none"
+                    value={backgroundColor}
+                    onChange={(event) => {
+                      setBackgroundColor(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                </span>
+              </label>
+            </div>
+
+            {layoutError ? (
+              <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+                {layoutError}
+              </p>
+            ) : null}
+          </div>
+
+          {status === "reading" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.outputIntro}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+            {layout ? (
+              <div
+                className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-200/80 shadow-sm"
+                style={{
+                  aspectRatio: `${layout.width} / ${layout.height}`,
+                  backgroundColor,
+                }}
+              >
+                {layout.positions.map((position) => {
+                  const item = items.find((nextItem) => nextItem.metadata.id === position.id);
+                  if (!item) return null;
+
+                  return (
+                    <img
+                      key={position.id}
+                      alt=""
+                      className="absolute object-fill"
+                      src={item.previewUrl}
+                      style={getPreviewImageStyle(position, layout.width, layout.height)}
+                    />
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="text-center text-sm text-ink-500">
+                <FileImage className="mx-auto text-accent-teal" size={32} />
+                <p className="mt-2 font-semibold text-ink-700">{items.length > 0 ? labels.emptyList : labels.addImages}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 text-sm shadow-sm">
+            <p className="text-ink-500">{t("imageUi.finalDimensions")}</p>
+            <p className="mt-1 font-semibold text-ink-900">{layout ? `${layout.width} x ${layout.height}px` : "-"}</p>
+          </div>
+
+          <div className="grid gap-2">
+            {outputFormats.map((format) => (
+              <button
+                key={format}
+                type="button"
+                className={cn(
+                  "rounded-md border p-3 text-left transition",
+                  outputFormat === format
+                    ? "border-accent-cyan/45 bg-accent-cyan/10"
+                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                )}
+                onClick={() => {
+                  setOutputFormat(format);
+                  resetFeedback();
+                }}
+              >
+                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
+                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
+              </button>
+            ))}
+          </div>
+
+          <p className="text-xs leading-5 text-ink-500">{labels.webpHint}</p>
+
+          {shouldShowQuality ? (
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+              <input
+                className="w-full accent-accent-cyan"
+                min={10}
+                max={100}
+                step={1}
+                type="range"
+                value={qualityPercent}
+                onChange={(event) => {
+                  setQualityPercent(Number(event.target.value));
+                  resetFeedback();
+                }}
+              />
+              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
+            </label>
+          ) : null}
+
+          {transparencyWarning ? (
+            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {transparencyWarning}
+            </p>
+          ) : null}
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {t("imageUi.outputName")}
+            <input
+              className={cn(inputClassName, "w-full")}
+              value={outputFileName}
+              placeholder={defaultOutputBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+            <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
+          </label>
+
+          {status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {labels.processing}
+            </p>
+          ) : null}
+
+          {result ? (
+            <div className="grid gap-3 rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{labels.downloadReady}</p>
+              <dl className="grid gap-2 sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalDimensions")}</dt>
+                  <dd className="font-semibold text-ink-900">
+                    {result.width} x {result.height}px
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalFormat")}</dt>
+                  <dd className="font-semibold text-ink-900">{getImageFormatLabel(result.format)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(result.size)}</dd>
+                </div>
+              </dl>
+              <Button type="button" variant="secondary" className="gap-2" onClick={downloadResult}>
+                <Download size={16} />
+                {t("imageUi.downloadImage")}
+              </Button>
+            </div>
+          ) : null}
+
+          <div className="grid gap-2 pt-1">
+            <Button type="button" className="gap-2" onClick={() => void joinImages()} disabled={!canJoin}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <Images size={16} />}
+              {language === "en" ? "Join images" : "Unir imagenes"}
+            </Button>
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => fileInputRef.current?.click()}>
+              <Upload size={16} />
+              {labels.addImages}
+            </Button>
+            <Button type="button" variant="ghost" className="gap-2" onClick={clearSelection} disabled={items.length === 0 && status === "idle"}>
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-joiner/README.md b/src/tools/image/image-joiner/README.md
new file mode 100644
index 0000000..d13785e
--- /dev/null
+++ b/src/tools/image/image-joiner/README.md
@@ -0,0 +1,18 @@
+# Unir imagenes
+
+Herramienta local para unir varias imagenes en una sola imagen final.
+
+## Comportamiento
+
+- Acepta imagenes PNG, JPG/JPEG o WebP que el navegador pueda decodificar.
+- Permite reordenar, subir, bajar y eliminar imagenes.
+- Modos de union: vertical, horizontal y cuadrícula.
+- La cuadrícula usa un numero configurable de columnas y calcula las filas automaticamente.
+- Permite ajustar separacion, padding exterior y color de fondo.
+- Exporta PNG, JPG o WebP si el navegador lo soporta.
+- JPG no conserva transparencia.
+- Todo el procesamiento ocurre en el navegador.
+
+## Layout
+
+Las imagenes se dibujan en sus dimensiones originales. Vertical y horizontal centran cada imagen en el eje secundario. La cuadrícula usa celdas uniformes basadas en la imagen mas grande para mantener una composicion simple y predecible.
diff --git a/src/tools/image/image-joiner/imageJoiner.service.test.ts b/src/tools/image/image-joiner/imageJoiner.service.test.ts
new file mode 100644
index 0000000..5bfac52
--- /dev/null
+++ b/src/tools/image/image-joiner/imageJoiner.service.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildJoinedImageFileName,
+  calculateImageJoinerLayout,
+  getJoinedImageOutputBaseName,
+  validateImageJoinerOptions,
+} from "./imageJoiner.service";
+import type { ImageJoinerLayoutOptions, ImageJoinerSource } from "./imageJoiner.types";
+
+const images: ImageJoinerSource[] = [
+  { id: "a", width: 100, height: 80 },
+  { id: "b", width: 60, height: 120 },
+  { id: "c", width: 140, height: 50 },
+];
+
+const baseOptions: ImageJoinerLayoutOptions = {
+  backgroundColor: "#ffffff",
+  columns: 2,
+  mode: "vertical",
+  padding: 10,
+  spacing: 5,
+};
+
+describe("imageJoiner.service", () => {
+  it("calculates a vertical canvas", () => {
+    expect(calculateImageJoinerLayout(images, baseOptions)).toMatchObject({
+      width: 160,
+      height: 280,
+    });
+  });
+
+  it("calculates a horizontal canvas", () => {
+    expect(calculateImageJoinerLayout(images, { ...baseOptions, mode: "horizontal" })).toMatchObject({
+      width: 330,
+      height: 140,
+    });
+  });
+
+  it("calculates a grid canvas", () => {
+    expect(calculateImageJoinerLayout(images, { ...baseOptions, mode: "grid", columns: 2 })).toMatchObject({
+      width: 305,
+      height: 265,
+    });
+  });
+
+  it("returns image positions", () => {
+    expect(calculateImageJoinerLayout(images, baseOptions).positions).toEqual([
+      { id: "a", x: 30, y: 10, width: 100, height: 80 },
+      { id: "b", x: 50, y: 95, width: 60, height: 120 },
+      { id: "c", x: 10, y: 220, width: 140, height: 50 },
+    ]);
+  });
+
+  it("validates grid columns", () => {
+    expect(validateImageJoinerOptions(images, { ...baseOptions, mode: "grid", columns: 0 })).toMatch(/columna/);
+    expect(validateImageJoinerOptions(images, { ...baseOptions, mode: "grid", columns: 4 })).toMatch(/cantidad/);
+    expect(validateImageJoinerOptions(images, { ...baseOptions, mode: "grid", columns: 2 })).toBeNull();
+  });
+
+  it("validates padding and spacing", () => {
+    expect(validateImageJoinerOptions(images, { ...baseOptions, spacing: -1 })).toMatch(/separacion/);
+    expect(validateImageJoinerOptions(images, { ...baseOptions, padding: -1 })).toMatch(/padding/);
+    expect(validateImageJoinerOptions(images, { ...baseOptions, spacing: 1.5 })).toMatch(/entero/);
+  });
+
+  it("validates the background color", () => {
+    expect(validateImageJoinerOptions(images, { ...baseOptions, backgroundColor: "white" })).toMatch(/hexadecimal/);
+  });
+
+  it("builds the output name with the correct extension", () => {
+    expect(getJoinedImageOutputBaseName("foto.png")).toBe("foto-unidas");
+    expect(buildJoinedImageFileName("foto-unidas", "jpeg")).toBe("foto-unidas.jpg");
+  });
+});
diff --git a/src/tools/image/image-joiner/imageJoiner.service.ts b/src/tools/image/image-joiner/imageJoiner.service.ts
new file mode 100644
index 0000000..5b00f4c
--- /dev/null
+++ b/src/tools/image/image-joiner/imageJoiner.service.ts
@@ -0,0 +1,358 @@
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  buildBrowserImageDownloadFileName,
+  canExportBrowserImageFormat,
+  exportBrowserCanvas,
+  getBrowserImageMimeType,
+  getBrowserImageOutputMimeType,
+  getImageDownloadBaseName,
+  isBrowserImageFile,
+  loadBrowserImage,
+} from "../../../shared/utils/imageFiles";
+import type {
+  ImageDimensions,
+  ImageJoinerLayout,
+  ImageJoinerLayoutOptions,
+  ImageJoinerMetadata,
+  ImageJoinerMode,
+  ImageJoinerOutputFormat,
+  ImageJoinerSource,
+  JoinImagesOptions,
+  ImageJoinerResult,
+} from "./imageJoiner.types";
+
+export const defaultOutputBaseName = "imagenes-unidas";
+export const maxJoinedCanvasPixels = 100_000_000;
+export const maxCanvasSide = 32_000;
+export const maxSpacing = 10_000;
+export const maxPadding = 10_000;
+
+export { formatFileSize };
+
+export function isJoinableImageFile(file: File) {
+  return isBrowserImageFile(file);
+}
+
+export function getImageFormatLabel(format: ImageJoinerOutputFormat) {
+  if (format === "jpeg") {
+    return "JPG";
+  }
+
+  if (format === "webp") {
+    return "WebP";
+  }
+
+  return "PNG";
+}
+
+export function getImageMimeLabel(mimeType: string) {
+  if (mimeType === "image/jpeg") {
+    return "JPG";
+  }
+
+  if (mimeType === "image/webp") {
+    return "WebP";
+  }
+
+  if (mimeType === "image/png") {
+    return "PNG";
+  }
+
+  return mimeType || "Desconocido";
+}
+
+export function getJoinedImageOutputBaseName(fileName: string) {
+  const baseName = getImageDownloadBaseName(fileName, defaultOutputBaseName);
+  return `${baseName}-unidas`;
+}
+
+export function buildJoinedImageFileName(
+  baseName: string,
+  outputFormat: ImageJoinerOutputFormat,
+  fallbackBaseName = defaultOutputBaseName,
+) {
+  return buildBrowserImageDownloadFileName(baseName, outputFormat, fallbackBaseName);
+}
+
+function hasValidImageDimensions(image: ImageDimensions) {
+  return (
+    Number.isInteger(image.width) &&
+    Number.isInteger(image.height) &&
+    image.width > 0 &&
+    image.height > 0
+  );
+}
+
+function validateNonNegativeInteger(value: number, label: string, maxValue: number) {
+  if (!Number.isFinite(value)) {
+    return `${label} debe ser un numero valido.`;
+  }
+
+  if (!Number.isInteger(value)) {
+    return `${label} debe ser un numero entero.`;
+  }
+
+  if (value < 0) {
+    return `${label} no puede ser negativo.`;
+  }
+
+  if (value > maxValue) {
+    return `${label} supera el limite permitido.`;
+  }
+
+  return null;
+}
+
+export function validateImageJoinerOptions(
+  images: readonly ImageJoinerSource[],
+  { backgroundColor, columns, mode, padding, spacing }: ImageJoinerLayoutOptions,
+) {
+  if (images.length < 2) {
+    return "Agrega al menos dos imagenes para unir.";
+  }
+
+  if (!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(backgroundColor)) {
+    return "El color de fondo debe ser hexadecimal.";
+  }
+
+  if (images.some((image) => !hasValidImageDimensions(image))) {
+    return "Todas las imagenes deben tener dimensiones validas.";
+  }
+
+  const spacingError = validateNonNegativeInteger(spacing, "La separacion", maxSpacing);
+  if (spacingError) return spacingError;
+
+  const paddingError = validateNonNegativeInteger(padding, "El padding", maxPadding);
+  if (paddingError) return paddingError;
+
+  if (mode === "grid") {
+    if (!Number.isFinite(columns) || !Number.isInteger(columns)) {
+      return "Las columnas deben ser un numero entero.";
+    }
+
+    if (columns < 1) {
+      return "La cuadricula necesita al menos una columna.";
+    }
+
+    if (columns > images.length) {
+      return "Las columnas no pueden superar la cantidad de imagenes.";
+    }
+  }
+
+  const layout = calculateImageJoinerLayout(images, { columns, mode, padding, spacing, backgroundColor: "#ffffff" });
+
+  if (layout.width > maxCanvasSide || layout.height > maxCanvasSide) {
+    return "La imagen final supera el tamano maximo de canvas.";
+  }
+
+  if (layout.width * layout.height > maxJoinedCanvasPixels) {
+    return "La imagen final supera el limite de 100 megapixeles.";
+  }
+
+  return null;
+}
+
+function getVerticalLayout(images: readonly ImageJoinerSource[], padding: number, spacing: number): ImageJoinerLayout {
+  const contentWidth = Math.max(...images.map((image) => image.width));
+  let y = padding;
+  const positions = images.map((image) => {
+    const position = {
+      height: image.height,
+      id: image.id,
+      width: image.width,
+      x: padding + Math.floor((contentWidth - image.width) / 2),
+      y,
+    };
+    y += image.height + spacing;
+    return position;
+  });
+
+  return {
+    height: images.reduce((total, image) => total + image.height, padding * 2 + spacing * (images.length - 1)),
+    positions,
+    width: contentWidth + padding * 2,
+  };
+}
+
+function getHorizontalLayout(images: readonly ImageJoinerSource[], padding: number, spacing: number): ImageJoinerLayout {
+  const contentHeight = Math.max(...images.map((image) => image.height));
+  let x = padding;
+  const positions = images.map((image) => {
+    const position = {
+      height: image.height,
+      id: image.id,
+      width: image.width,
+      x,
+      y: padding + Math.floor((contentHeight - image.height) / 2),
+    };
+    x += image.width + spacing;
+    return position;
+  });
+
+  return {
+    height: contentHeight + padding * 2,
+    positions,
+    width: images.reduce((total, image) => total + image.width, padding * 2 + spacing * (images.length - 1)),
+  };
+}
+
+function getGridLayout(
+  images: readonly ImageJoinerSource[],
+  columns: number,
+  padding: number,
+  spacing: number,
+): ImageJoinerLayout {
+  const rows = Math.ceil(images.length / columns);
+  const cellWidth = Math.max(...images.map((image) => image.width));
+  const cellHeight = Math.max(...images.map((image) => image.height));
+  const positions = images.map((image, index) => {
+    const column = index % columns;
+    const row = Math.floor(index / columns);
+    const cellX = padding + column * (cellWidth + spacing);
+    const cellY = padding + row * (cellHeight + spacing);
+
+    return {
+      height: image.height,
+      id: image.id,
+      width: image.width,
+      x: cellX + Math.floor((cellWidth - image.width) / 2),
+      y: cellY + Math.floor((cellHeight - image.height) / 2),
+    };
+  });
+
+  return {
+    height: rows * cellHeight + Math.max(0, rows - 1) * spacing + padding * 2,
+    positions,
+    width: columns * cellWidth + Math.max(0, columns - 1) * spacing + padding * 2,
+  };
+}
+
+export function calculateImageJoinerLayout(
+  images: readonly ImageJoinerSource[],
+  { columns, mode, padding, spacing }: ImageJoinerLayoutOptions,
+): ImageJoinerLayout {
+  if (images.length === 0) {
+    return { height: padding * 2, positions: [], width: padding * 2 };
+  }
+
+  if (mode === "horizontal") {
+    return getHorizontalLayout(images, padding, spacing);
+  }
+
+  if (mode === "grid") {
+    return getGridLayout(images, columns, padding, spacing);
+  }
+
+  return getVerticalLayout(images, padding, spacing);
+}
+
+export async function readImageMetadata(file: File, id: string): Promise<ImageJoinerMetadata> {
+  const mimeType = getBrowserImageMimeType(file);
+
+  if (!mimeType) {
+    throw new Error("Selecciona imagenes PNG, JPG o WebP validas.");
+  }
+
+  try {
+    const image = await loadBrowserImage(file, "No se pudo decodificar una imagen en este navegador.");
+
+    if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+      throw new Error("La imagen no tiene dimensiones validas.");
+    }
+
+    return {
+      fileName: file.name,
+      fileSize: file.size,
+      height: image.naturalHeight,
+      id,
+      mimeType,
+      width: image.naturalWidth,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error("No se pudo leer una imagen.");
+  }
+}
+
+function ensureOutputFormatSupported(outputFormat: ImageJoinerOutputFormat) {
+  if (!canExportBrowserImageFormat(outputFormat)) {
+    throw new Error(`Este navegador no permite exportar imagenes como ${getImageFormatLabel(outputFormat)}.`);
+  }
+}
+
+function fillCanvasBackground(canvas: HTMLCanvasElement, backgroundColor: string) {
+  const context = canvas.getContext("2d");
+
+  if (!context) {
+    throw new Error("No se pudo preparar la imagen final.");
+  }
+
+  context.fillStyle = backgroundColor;
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  return context;
+}
+
+export async function joinImageFiles(files: readonly File[], options: JoinImagesOptions): Promise<ImageJoinerResult> {
+  if (files.length < 2) {
+    throw new Error("Agrega al menos dos imagenes para unir.");
+  }
+
+  for (const file of files) {
+    if (!isJoinableImageFile(file)) {
+      throw new Error("Selecciona imagenes PNG, JPG o WebP validas.");
+    }
+  }
+
+  ensureOutputFormatSupported(options.outputFormat);
+
+  const loadedImages = await Promise.all(
+    files.map(async (file, index) => {
+      const image = await loadBrowserImage(file, "No se pudo decodificar una imagen en este navegador.");
+      return {
+        file,
+        id: String(index),
+        image,
+        height: image.naturalHeight,
+        width: image.naturalWidth,
+      };
+    }),
+  );
+  const sources = loadedImages.map(({ height, id, width }) => ({ height, id, width }));
+  const validationError = validateImageJoinerOptions(sources, options);
+
+  if (validationError) {
+    throw new Error(validationError);
+  }
+
+  const layout = calculateImageJoinerLayout(sources, options);
+  const canvas = document.createElement("canvas");
+  canvas.width = layout.width;
+  canvas.height = layout.height;
+  const context = fillCanvasBackground(canvas, options.backgroundColor);
+
+  for (const position of layout.positions) {
+    const loadedImage = loadedImages.find((image) => image.id === position.id);
+    if (!loadedImage) continue;
+    context.drawImage(loadedImage.image, position.x, position.y, position.width, position.height);
+  }
+
+  const mimeType = getBrowserImageOutputMimeType(options.outputFormat);
+  const result = await exportBrowserCanvas(canvas, {
+    errorMessage: "No se pudo exportar la imagen unida.",
+    mimeType,
+    quality: options.quality,
+  });
+
+  return {
+    bytes: result.bytes,
+    fileName: buildJoinedImageFileName(options.outputBaseName, options.outputFormat, getJoinedImageOutputBaseName(files[0].name)),
+    format: options.outputFormat,
+    height: result.height,
+    mimeType,
+    size: result.size,
+    width: result.width,
+  };
+}
diff --git a/src/tools/image/image-joiner/imageJoiner.types.ts b/src/tools/image/image-joiner/imageJoiner.types.ts
new file mode 100644
index 0000000..e072477
--- /dev/null
+++ b/src/tools/image/image-joiner/imageJoiner.types.ts
@@ -0,0 +1,63 @@
+import type { BrowserImageOutputFormat } from "../../../shared/utils/imageFiles";
+
+export type ImageJoinerMode = "vertical" | "horizontal" | "grid";
+
+export type ImageDimensions = {
+  height: number;
+  width: number;
+};
+
+export type ImageJoinerSource = ImageDimensions & {
+  id: string;
+};
+
+export type ImageJoinerLayoutOptions = {
+  backgroundColor: string;
+  columns: number;
+  mode: ImageJoinerMode;
+  padding: number;
+  spacing: number;
+};
+
+export type ImageJoinerPosition = {
+  height: number;
+  id: string;
+  width: number;
+  x: number;
+  y: number;
+};
+
+export type ImageJoinerLayout = {
+  height: number;
+  positions: ImageJoinerPosition[];
+  width: number;
+};
+
+export type ImageJoinerMetadata = {
+  fileName: string;
+  fileSize: number;
+  height: number;
+  id: string;
+  mimeType: string;
+  width: number;
+};
+
+export type ImageJoinerOutputFormat = BrowserImageOutputFormat;
+
+export type JoinImagesOptions = ImageJoinerLayoutOptions & {
+  outputBaseName: string;
+  outputFormat: ImageJoinerOutputFormat;
+  quality?: number;
+};
+
+export type ImageJoinerResult = {
+  bytes: ArrayBuffer;
+  fileName: string;
+  format: ImageJoinerOutputFormat;
+  height: number;
+  mimeType: string;
+  size: number;
+  width: number;
+};
+
+export type ImageJoinerStatus = "idle" | "reading" | "ready" | "processing" | "success" | "error";
diff --git a/src/tools/image/image-joiner/index.ts b/src/tools/image/image-joiner/index.ts
new file mode 100644
index 0000000..5787026
--- /dev/null
+++ b/src/tools/image/image-joiner/index.ts
@@ -0,0 +1 @@
+export { ImageJoinerTool } from "./ImageJoinerTool";

From abfb71c91bd626ab5ae04c2b2ba0c0c056eddcad Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Sat, 6 Jun 2026 00:53:45 -0300
Subject: [PATCH 05/10] feat(image): add split image tool

---
 src/features/tools/data/tools.ts              | 106 ++++
 .../tools/renderers/toolRenderers.tsx         |   3 +
 .../image-splitter/ImageSplitterTool.tsx      | 599 ++++++++++++++++++
 src/tools/image/image-splitter/README.md      |  14 +
 .../imageSplitter.service.test.ts             |  63 ++
 .../image-splitter/imageSplitter.service.ts   | 294 +++++++++
 .../image-splitter/imageSplitter.types.ts     |  60 ++
 src/tools/image/image-splitter/index.ts       |   1 +
 8 files changed, 1140 insertions(+)
 create mode 100644 src/tools/image/image-splitter/ImageSplitterTool.tsx
 create mode 100644 src/tools/image/image-splitter/README.md
 create mode 100644 src/tools/image/image-splitter/imageSplitter.service.test.ts
 create mode 100644 src/tools/image/image-splitter/imageSplitter.service.ts
 create mode 100644 src/tools/image/image-splitter/imageSplitter.types.ts
 create mode 100644 src/tools/image/image-splitter/index.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index 1a7d7aa..94044b6 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -982,6 +982,112 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "image-splitter",
+    slug: "dividir-imagen",
+    slugEn: "split-image",
+    name: { es: "Dividir imagen", en: "Split image" },
+    description: {
+      es: "Divide una imagen en varias partes por filas y columnas o por tamano fijo.",
+      en: "Split one image into multiple parts by rows and columns or by fixed size.",
+    },
+    category: "image",
+    tags: {
+      es: ["imagen", "dividir", "partes", "cuadricula", "zip", "png", "jpg", "webp"],
+      en: ["image", "split", "parts", "grid", "zip", "png", "jpg", "webp"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Dividir imagen online gratis",
+        description:
+          "Divide una imagen PNG, JPG o WebP en partes por filas y columnas o por tamano fijo. Descarga el resultado como ZIP sin subir archivos.",
+      },
+      en: {
+        title: "Split image online free",
+        description:
+          "Split a PNG, JPG or WebP image into parts by rows and columns or fixed size. Download the result as a ZIP with no uploads.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Dividir imagen separa una imagen local en varias partes y descarga los resultados en un ZIP.",
+        howTo: [
+          "Selecciona una imagen PNG, JPG/JPEG o WebP.",
+          "Revisa el tipo, peso y dimensiones originales.",
+          "Elige filas y columnas, o define ancho y alto fijo para cada parte.",
+          "Revisa la cantidad de partes y la vista previa.",
+          "Elige PNG, JPG o WebP si el navegador lo permite.",
+          "Divide la imagen y descarga el ZIP.",
+        ],
+        useCases: [
+          "Cortar una imagen grande en una cuadricula.",
+          "Preparar tiles de tamano fijo.",
+          "Separar una captura larga en partes manejables.",
+        ],
+        limits: [
+          "Maximo 100 partes por operacion.",
+          "JPG no conserva transparencia.",
+          "WebP aparece si tu navegador permite exportarlo correctamente.",
+          "Tamano maximo por imagen: 15 MB.",
+        ],
+        privacy:
+          "El procesamiento de esta imagen ocurre en tu navegador; no la subimos a Modulaq para dividirla.",
+        commonErrors: [
+          "Filas, columnas, ancho o alto con valores no validos.",
+          "La division supera el limite de 100 partes.",
+          "Imagen danada o que el navegador no puede decodificar.",
+        ],
+        technicalNotes: [
+          "La exportacion usa canvas en el navegador.",
+          "Las partes se empaquetan en ZIP con jszip.",
+          "Si el tamano fijo no calza exacto, el borde derecho o inferior genera partes mas pequenas.",
+        ],
+      },
+      en: {
+        summary:
+          "Split image separates a local image into multiple parts and downloads the results in a ZIP.",
+        howTo: [
+          "Select a PNG, JPG/JPEG or WebP image.",
+          "Review the detected type, size and dimensions.",
+          "Choose rows and columns, or set a fixed width and height for each part.",
+          "Review the part count and preview.",
+          "Choose PNG, JPG or WebP if the browser supports it.",
+          "Split the image and download the ZIP.",
+        ],
+        useCases: [
+          "Cut a large image into a grid.",
+          "Prepare fixed-size tiles.",
+          "Separate a long screenshot into manageable parts.",
+        ],
+        limits: [
+          "Maximum 100 parts per operation.",
+          "JPG does not preserve transparency.",
+          "WebP appears if your browser can export it correctly.",
+          "Maximum image size: 15 MB.",
+        ],
+        privacy:
+          "Processing happens in your browser; we don't upload this image to Modulaq to split it.",
+        commonErrors: [
+          "Rows, columns, width or height with invalid values.",
+          "The split exceeds the 100-part limit.",
+          "A damaged image or one the browser cannot decode.",
+        ],
+        technicalNotes: [
+          "Export uses browser canvas.",
+          "Parts are bundled into a ZIP with jszip.",
+          "If fixed size does not fit exactly, the right or bottom edge creates smaller parts.",
+        ],
+      },
+    },
+  },
   {
     id: "image-compressor",
     slug: "comprimir-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index 237ee1a..df88c80 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -26,6 +26,9 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-joiner": lazy(() =>
     import("../../../tools/image/image-joiner").then((module) => ({ default: module.ImageJoinerTool })),
   ),
+  "image-splitter": lazy(() =>
+    import("../../../tools/image/image-splitter").then((module) => ({ default: module.ImageSplitterTool })),
+  ),
   "image-rotator": lazy(() =>
     import("../../../tools/image/image-rotator").then((module) => ({ default: module.ImageRotatorTool })),
   ),
diff --git a/src/tools/image/image-splitter/ImageSplitterTool.tsx b/src/tools/image/image-splitter/ImageSplitterTool.tsx
new file mode 100644
index 0000000..1876c47
--- /dev/null
+++ b/src/tools/image/image-splitter/ImageSplitterTool.tsx
@@ -0,0 +1,599 @@
+import { Download, FileArchive, FileImage, Grid3X3, Loader2, Ruler, RotateCcw, Upload } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import { getImageFileSizeLimitError } from "../../../shared/utils/fileProcessingLimits";
+import {
+  canExportBrowserImageFormat,
+  jpegQualityDecimalToPercent,
+  jpegQualityPercentToDecimal,
+} from "../../../shared/utils/imageFiles";
+import {
+  buildSplitImageZipFileName,
+  calculateImageSplitParts,
+  defaultOutputBaseName,
+  formatFileSize,
+  getImageFormatLabel,
+  getImageMimeLabel,
+  getSplitImageOutputBaseName,
+  readImageMetadata,
+  splitImageFile,
+  validateImageSplitterOptions,
+} from "./imageSplitter.service";
+import type {
+  ImageSplitPart,
+  ImageSplitterMetadata,
+  ImageSplitterMode,
+  ImageSplitterOptions,
+  ImageSplitterOutputFormat,
+  ImageSplitterResult,
+  ImageSplitterStatus,
+} from "./imageSplitter.types";
+
+const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+
+type DownloadableResult = ImageSplitterResult & {
+  url: string;
+};
+
+const baseOutputFormats: ImageSplitterOutputFormat[] = ["png", "jpeg"];
+
+const formatDescKeys: Record<ImageSplitterOutputFormat, TranslationKey> = {
+  png: "imageUi.png.desc",
+  jpeg: "imageUi.jpg.desc",
+  webp: "imageUi.webp.desc",
+};
+
+const copy = {
+  es: {
+    columns: "Columnas",
+    downloadReady: "Partes listas",
+    fixedHeight: "Alto de cada parte",
+    fixedMode: "Tamano fijo",
+    fixedWidth: "Ancho de cada parte",
+    gridMode: "Filas y columnas",
+    jpgTransparency: "JPG no conserva transparencia.",
+    modeTitle: "Modo de division",
+    outputIntro: "El resultado se descarga como ZIP.",
+    outputTitle: "Vista previa y salida",
+    partCount: "Partes",
+    previewAlt: "Vista previa de la division",
+    processing: "Dividiendo imagen...",
+    rows: "Filas",
+    sourceIntro: "Divide una imagen en varias partes por filas y columnas o por tamano fijo.",
+    sourceTitle: "Imagen de origen",
+    webpHint: "WebP aparece si tu navegador permite exportarlo correctamente.",
+    zipName: "Nombre del ZIP",
+  },
+  en: {
+    columns: "Columns",
+    downloadReady: "Parts ready",
+    fixedHeight: "Part height",
+    fixedMode: "Fixed size",
+    fixedWidth: "Part width",
+    gridMode: "Rows and columns",
+    jpgTransparency: "JPG does not preserve transparency.",
+    modeTitle: "Split mode",
+    outputIntro: "The result downloads as a ZIP.",
+    outputTitle: "Preview and output",
+    partCount: "Parts",
+    previewAlt: "Split preview",
+    processing: "Splitting image...",
+    rows: "Rows",
+    sourceIntro: "Split one image into multiple parts by rows and columns or by fixed size.",
+    sourceTitle: "Source image",
+    webpHint: "WebP appears if your browser can export it correctly.",
+    zipName: "ZIP name",
+  },
+} as const;
+
+function parseNumberInput(value: string) {
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : Number.NaN;
+}
+
+function getPartPreviewStyle(part: ImageSplitPart, metadata: ImageSplitterMetadata) {
+  return {
+    height: `${(part.height / metadata.height) * 100}%`,
+    left: `${(part.x / metadata.width) * 100}%`,
+    top: `${(part.y / metadata.height) * 100}%`,
+    width: `${(part.width / metadata.width) * 100}%`,
+  };
+}
+
+export function ImageSplitterTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const resultUrlRef = useRef<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [metadata, setMetadata] = useState<ImageSplitterMetadata | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [mode, setMode] = useState<ImageSplitterMode>("grid");
+  const [rowsInput, setRowsInput] = useState("2");
+  const [columnsInput, setColumnsInput] = useState("2");
+  const [partWidthInput, setPartWidthInput] = useState("512");
+  const [partHeightInput, setPartHeightInput] = useState("512");
+  const [outputFormat, setOutputFormat] = useState<ImageSplitterOutputFormat>("png");
+  const [qualityPercent, setQualityPercent] = useState(jpegQualityDecimalToPercent(0.92));
+  const [outputFileName, setOutputFileName] = useState(defaultOutputBaseName);
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [webpSupported, setWebpSupported] = useState(false);
+  const [status, setStatus] = useState<ImageSplitterStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DownloadableResult | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    setWebpSupported(canExportBrowserImageFormat("webp"));
+    return () => {
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
+    };
+  }, []);
+
+  const outputFormats = useMemo(
+    () => (webpSupported ? [...baseOutputFormats, "webp" as const] : baseOutputFormats),
+    [webpSupported],
+  );
+  const splitOptions = useMemo<ImageSplitterOptions>(
+    () =>
+      mode === "fixed-size"
+        ? {
+            mode: "fixed-size",
+            partHeight: parseNumberInput(partHeightInput),
+            partWidth: parseNumberInput(partWidthInput),
+          }
+        : {
+            columns: parseNumberInput(columnsInput),
+            mode: "grid",
+            rows: parseNumberInput(rowsInput),
+          },
+    [columnsInput, mode, partHeightInput, partWidthInput, rowsInput],
+  );
+  const splitError = metadata ? validateImageSplitterOptions(metadata, splitOptions) : null;
+  const parts = metadata && !splitError ? calculateImageSplitParts(metadata, splitOptions, outputFormat) : [];
+  const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
+  const fallbackBaseName = metadata ? getSplitImageOutputBaseName(metadata.fileName) : defaultOutputBaseName;
+  const finalOutputFileName = buildSplitImageZipFileName(outputFileName, fallbackBaseName);
+  const canSplit = Boolean(file && metadata) && !splitError && status !== "reading" && status !== "processing";
+
+  const clearResult = () => {
+    if (resultUrlRef.current) {
+      URL.revokeObjectURL(resultUrlRef.current);
+      resultUrlRef.current = null;
+    }
+    setResult(null);
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    clearResult();
+    if (status === "success" || status === "error") {
+      setStatus(metadata ? "ready" : "idle");
+    }
+  };
+
+  const processFile = async (nextFile: File | undefined) => {
+    if (!nextFile) return;
+    setStatus("reading");
+    setFile(null);
+    setMetadata(null);
+    setError(null);
+    clearResult();
+
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+      setPreviewUrl(null);
+    }
+
+    const fileLimitError = getImageFileSizeLimitError(nextFile);
+    if (fileLimitError) {
+      setStatus("error");
+      setError(fileLimitError);
+      return;
+    }
+
+    try {
+      const nextMetadata = await readImageMetadata(nextFile);
+      const nextPreviewUrl = URL.createObjectURL(nextFile);
+      previewUrlRef.current = nextPreviewUrl;
+      setPreviewUrl(nextPreviewUrl);
+      setFile(nextFile);
+      setMetadata(nextMetadata);
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getSplitImageOutputBaseName(nextFile.name));
+      }
+      setStatus("ready");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : t("imageUi.couldNotRead"));
+    }
+  };
+
+  const clearSelection = () => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    clearResult();
+    setFile(null);
+    setMetadata(null);
+    setPreviewUrl(null);
+    setMode("grid");
+    setRowsInput("2");
+    setColumnsInput("2");
+    setPartWidthInput("512");
+    setPartHeightInput("512");
+    setOutputFormat("png");
+    setQualityPercent(jpegQualityDecimalToPercent(0.92));
+    setOutputFileName(defaultOutputBaseName);
+    setHasCustomOutputFileName(false);
+    setStatus("idle");
+    setError(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const splitImage = async () => {
+    if (!file || !canSplit) return;
+    setStatus("processing");
+    setError(null);
+    clearResult();
+
+    try {
+      const nextResult = await splitImageFile(file, {
+        ...splitOptions,
+        outputBaseName: outputFileName,
+        outputFormat,
+        quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
+      });
+      const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
+      resultUrlRef.current = resultUrl;
+      setResult({ ...nextResult, url: resultUrl });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo dividir la imagen.");
+    }
+  };
+
+  const downloadResult = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.url;
+    link.download = result.fileName;
+    link.click();
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.96fr)_minmax(310px,0.52fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-52 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFile(event.dataTransfer.files[0]);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={26} />
+              </span>
+              <span className="mt-4 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
+            </span>
+          </button>
+          <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
+          {metadata ? (
+            <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
+              {previewUrl ? (
+                <img
+                  src={previewUrl}
+                  alt=""
+                  className="h-28 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-32"
+                />
+              ) : (
+                <span className="grid h-28 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal sm:w-32">
+                  <FileImage size={28} />
+                </span>
+              )}
+              <dl className="grid min-w-0 gap-2 text-sm">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                  <dd className="truncate font-semibold text-ink-900">{metadata.fileName}</dd>
+                </div>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                    <dd className="font-semibold text-ink-900">{getImageMimeLabel(metadata.mimeType)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                    <dd className="font-semibold text-ink-900">{formatFileSize(metadata.fileSize)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                    <dd className="font-semibold text-ink-900">
+                      {metadata.width} x {metadata.height}px
+                    </dd>
+                  </div>
+                </div>
+              </dl>
+            </div>
+          ) : null}
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.modeTitle}</p>
+            <div className="grid gap-2 sm:grid-cols-2">
+              <button
+                type="button"
+                className={cn(
+                  "rounded-md border p-3 text-left transition",
+                  mode === "grid" ? "border-accent-cyan/45 bg-accent-cyan/10" : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                )}
+                onClick={() => {
+                  setMode("grid");
+                  resetFeedback();
+                }}
+              >
+                <span className="flex items-center gap-2 text-sm font-semibold text-ink-900">
+                  <Grid3X3 size={16} />
+                  {labels.gridMode}
+                </span>
+              </button>
+              <button
+                type="button"
+                className={cn(
+                  "rounded-md border p-3 text-left transition",
+                  mode === "fixed-size" ? "border-accent-cyan/45 bg-accent-cyan/10" : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                )}
+                onClick={() => {
+                  setMode("fixed-size");
+                  resetFeedback();
+                }}
+              >
+                <span className="flex items-center gap-2 text-sm font-semibold text-ink-900">
+                  <Ruler size={16} />
+                  {labels.fixedMode}
+                </span>
+              </button>
+            </div>
+
+            {mode === "grid" ? (
+              <div className="grid gap-3 sm:grid-cols-2">
+                <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                  {labels.rows}
+                  <input className={inputClassName} inputMode="numeric" min={1} type="number" value={rowsInput} onChange={(event) => { setRowsInput(event.target.value); resetFeedback(); }} />
+                </label>
+                <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                  {labels.columns}
+                  <input className={inputClassName} inputMode="numeric" min={1} type="number" value={columnsInput} onChange={(event) => { setColumnsInput(event.target.value); resetFeedback(); }} />
+                </label>
+              </div>
+            ) : (
+              <div className="grid gap-3 sm:grid-cols-2">
+                <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                  {labels.fixedWidth}
+                  <input className={inputClassName} inputMode="numeric" min={1} type="number" value={partWidthInput} onChange={(event) => { setPartWidthInput(event.target.value); resetFeedback(); }} />
+                </label>
+                <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                  {labels.fixedHeight}
+                  <input className={inputClassName} inputMode="numeric" min={1} type="number" value={partHeightInput} onChange={(event) => { setPartHeightInput(event.target.value); resetFeedback(); }} />
+                </label>
+              </div>
+            )}
+
+            {splitError ? (
+              <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+                {splitError}
+              </p>
+            ) : null}
+          </div>
+
+          {status === "reading" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.outputIntro}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+            {previewUrl && metadata && parts.length > 0 ? (
+              <div
+                className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50 shadow-sm"
+                style={{ aspectRatio: `${metadata.width} / ${metadata.height}` }}
+              >
+                <img alt={labels.previewAlt} className="h-full w-full object-fill" src={previewUrl} />
+                {parts.map((part) => (
+                  <span
+                    key={`${part.row}-${part.column}`}
+                    className="pointer-events-none absolute border border-accent-cyan/80 bg-accent-cyan/5"
+                    style={getPartPreviewStyle(part, metadata)}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center text-sm text-ink-500">
+                <FileArchive className="mx-auto text-accent-teal" size={32} />
+                <p className="mt-2 font-semibold text-ink-700">{metadata ? "-" : t("imageUi.selectImage")}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="grid gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 text-sm shadow-sm sm:grid-cols-2">
+            <div>
+              <p className="text-ink-500">{labels.partCount}</p>
+              <p className="mt-1 font-semibold text-ink-900">{parts.length || "-"}</p>
+            </div>
+            <div>
+              <p className="text-ink-500">ZIP</p>
+              <p className="mt-1 font-semibold text-ink-900">{finalOutputFileName}</p>
+            </div>
+          </div>
+
+          <div className="grid gap-2">
+            {outputFormats.map((format) => (
+              <button
+                key={format}
+                type="button"
+                className={cn(
+                  "rounded-md border p-3 text-left transition",
+                  outputFormat === format
+                    ? "border-accent-cyan/45 bg-accent-cyan/10"
+                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                )}
+                onClick={() => {
+                  setOutputFormat(format);
+                  resetFeedback();
+                }}
+              >
+                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
+                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
+              </button>
+            ))}
+          </div>
+
+          <p className="text-xs leading-5 text-ink-500">{labels.webpHint}</p>
+
+          {shouldShowQuality ? (
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+              <input
+                className="w-full accent-accent-cyan"
+                min={10}
+                max={100}
+                step={1}
+                type="range"
+                value={qualityPercent}
+                onChange={(event) => {
+                  setQualityPercent(Number(event.target.value));
+                  resetFeedback();
+                }}
+              />
+              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
+            </label>
+          ) : null}
+
+          {outputFormat === "jpeg" ? (
+            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {labels.jpgTransparency}
+            </p>
+          ) : null}
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {labels.zipName}
+            <input
+              className={cn(inputClassName, "w-full")}
+              value={outputFileName}
+              placeholder={defaultOutputBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+          </label>
+
+          {status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {labels.processing}
+            </p>
+          ) : null}
+
+          {result ? (
+            <div className="grid gap-3 rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{labels.downloadReady}</p>
+              <dl className="grid gap-2 sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">{labels.partCount}</dt>
+                  <dd className="font-semibold text-ink-900">{result.partCount}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(result.size)}</dd>
+                </div>
+              </dl>
+              <Button type="button" variant="secondary" className="gap-2" onClick={downloadResult}>
+                <Download size={16} />
+                {language === "en" ? "Download ZIP" : "Descargar ZIP"}
+              </Button>
+            </div>
+          ) : null}
+
+          <div className="grid gap-2 pt-1">
+            <Button type="button" className="gap-2" onClick={() => void splitImage()} disabled={!canSplit}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <FileArchive size={16} />}
+              {language === "en" ? "Split image" : "Dividir imagen"}
+            </Button>
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => fileInputRef.current?.click()}>
+              <Upload size={16} />
+              {t("imageUi.selectImage")}
+            </Button>
+            <Button type="button" variant="ghost" className="gap-2" onClick={clearSelection} disabled={!file && status === "idle"}>
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-splitter/README.md b/src/tools/image/image-splitter/README.md
new file mode 100644
index 0000000..9e11085
--- /dev/null
+++ b/src/tools/image/image-splitter/README.md
@@ -0,0 +1,14 @@
+# Dividir imagen
+
+Herramienta local para dividir una imagen en varias partes y descargarlas como ZIP.
+
+## Comportamiento
+
+- Acepta imagenes PNG, JPG/JPEG o WebP que el navegador pueda decodificar.
+- Divide por filas/columnas o por tamano fijo de cada parte.
+- En modo tamano fijo, calcula automaticamente filas y columnas.
+- Si el borde derecho o inferior no calza exacto, genera una parte mas pequena.
+- Exporta partes como PNG, JPG o WebP si el navegador lo soporta.
+- Empaqueta las partes en un ZIP con nombres `parte-f1-c1.png`.
+- Limite inicial: 100 partes.
+- Todo el procesamiento ocurre en el navegador.
diff --git a/src/tools/image/image-splitter/imageSplitter.service.test.ts b/src/tools/image/image-splitter/imageSplitter.service.test.ts
new file mode 100644
index 0000000..849876c
--- /dev/null
+++ b/src/tools/image/image-splitter/imageSplitter.service.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildSplitImageZipFileName,
+  calculateImageSplitParts,
+  getSplitImageOutputBaseName,
+  getSplitPartFileName,
+  validateImageSplitterOptions,
+} from "./imageSplitter.service";
+
+const imageDimensions = { width: 1000, height: 600 };
+
+describe("imageSplitter.service", () => {
+  it("calculates parts by rows and columns", () => {
+    const parts = calculateImageSplitParts(imageDimensions, { mode: "grid", rows: 2, columns: 2 });
+
+    expect(parts).toHaveLength(4);
+    expect(parts[0]).toMatchObject({ x: 0, y: 0, width: 500, height: 300, row: 1, column: 1 });
+    expect(parts[3]).toMatchObject({ x: 500, y: 300, width: 500, height: 300, row: 2, column: 2 });
+  });
+
+  it("calculates parts by fixed size", () => {
+    const parts = calculateImageSplitParts({ width: 1000, height: 650 }, { mode: "fixed-size", partWidth: 400, partHeight: 300 });
+
+    expect(parts).toHaveLength(9);
+    expect(parts.at(-1)).toMatchObject({ x: 800, y: 600, width: 200, height: 50, row: 3, column: 3 });
+  });
+
+  it("validates rows and columns", () => {
+    expect(validateImageSplitterOptions(imageDimensions, { mode: "grid", rows: 0, columns: 2 })).toMatch(/filas/i);
+    expect(validateImageSplitterOptions(imageDimensions, { mode: "grid", rows: 2, columns: 0 })).toMatch(/columnas/i);
+    expect(validateImageSplitterOptions(imageDimensions, { mode: "grid", rows: 2, columns: 2 })).toBeNull();
+  });
+
+  it("validates fixed width and height", () => {
+    expect(validateImageSplitterOptions(imageDimensions, { mode: "fixed-size", partWidth: 0, partHeight: 300 })).toMatch(/ancho/i);
+    expect(validateImageSplitterOptions(imageDimensions, { mode: "fixed-size", partWidth: 300, partHeight: 0 })).toMatch(/alto/i);
+    expect(validateImageSplitterOptions(imageDimensions, { mode: "fixed-size", partWidth: 300, partHeight: 300 })).toBeNull();
+  });
+
+  it("limits the maximum number of parts", () => {
+    expect(validateImageSplitterOptions(imageDimensions, { mode: "grid", rows: 10, columns: 11 })).toMatch(/100 partes/);
+    expect(validateImageSplitterOptions(imageDimensions, { mode: "fixed-size", partWidth: 10, partHeight: 10 })).toMatch(/100 partes/);
+  });
+
+  it("generates part names with the correct extension", () => {
+    expect(getSplitPartFileName(1, 2, "png")).toBe("parte-f1-c2.png");
+    expect(getSplitPartFileName(3, 4, "jpeg")).toBe("parte-f3-c4.jpg");
+    expect(getSplitPartFileName(3, 4, "webp")).toBe("parte-f3-c4.webp");
+  });
+
+  it("keeps edge dimensions for non-divisible grid splits", () => {
+    const parts = calculateImageSplitParts({ width: 1001, height: 601 }, { mode: "grid", rows: 2, columns: 3 });
+
+    expect(parts[0]).toMatchObject({ width: 333, height: 300 });
+    expect(parts[2]).toMatchObject({ x: 667, width: 334 });
+    expect(parts[5]).toMatchObject({ y: 300, height: 301 });
+  });
+
+  it("builds the output ZIP name", () => {
+    expect(getSplitImageOutputBaseName("foto.png")).toBe("foto-partes");
+    expect(buildSplitImageZipFileName("foto-partes")).toBe("foto-partes.zip");
+  });
+});
diff --git a/src/tools/image/image-splitter/imageSplitter.service.ts b/src/tools/image/image-splitter/imageSplitter.service.ts
new file mode 100644
index 0000000..964bb90
--- /dev/null
+++ b/src/tools/image/image-splitter/imageSplitter.service.ts
@@ -0,0 +1,294 @@
+import JSZip from "jszip";
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  buildImageZipDownloadFileName,
+  canExportBrowserImageFormat,
+  exportBrowserCanvas,
+  getBrowserImageMimeType,
+  getBrowserImageOutputExtension,
+  getBrowserImageOutputMimeType,
+  getImageDownloadBaseName,
+  isBrowserImageFile,
+  loadBrowserImage,
+} from "../../../shared/utils/imageFiles";
+import type {
+  ImageDimensions,
+  ImageSplitPart,
+  ImageSplitterMetadata,
+  ImageSplitterOptions,
+  ImageSplitterOutputFormat,
+  SplitImageOptions,
+  ImageSplitterResult,
+} from "./imageSplitter.types";
+
+export const defaultOutputBaseName = "imagen-dividida";
+export const maxSplitParts = 100;
+
+export { formatFileSize };
+
+export function isSplittableImageFile(file: File) {
+  return isBrowserImageFile(file);
+}
+
+export function getImageFormatLabel(format: ImageSplitterOutputFormat) {
+  if (format === "jpeg") {
+    return "JPG";
+  }
+
+  if (format === "webp") {
+    return "WebP";
+  }
+
+  return "PNG";
+}
+
+export function getImageMimeLabel(mimeType: string) {
+  if (mimeType === "image/jpeg") {
+    return "JPG";
+  }
+
+  if (mimeType === "image/webp") {
+    return "WebP";
+  }
+
+  if (mimeType === "image/png") {
+    return "PNG";
+  }
+
+  return mimeType || "Desconocido";
+}
+
+export function getSplitImageOutputBaseName(fileName: string) {
+  const baseName = getImageDownloadBaseName(fileName, defaultOutputBaseName);
+  return `${baseName}-partes`;
+}
+
+export function buildSplitImageZipFileName(baseName: string, fallbackBaseName = defaultOutputBaseName) {
+  return buildImageZipDownloadFileName(baseName, fallbackBaseName);
+}
+
+function hasValidImageDimensions(imageDimensions: ImageDimensions) {
+  return (
+    Number.isInteger(imageDimensions.width) &&
+    Number.isInteger(imageDimensions.height) &&
+    imageDimensions.width > 0 &&
+    imageDimensions.height > 0
+  );
+}
+
+function validatePositiveInteger(value: number, label: string) {
+  if (!Number.isFinite(value)) {
+    return `${label} debe ser un numero valido.`;
+  }
+
+  if (!Number.isInteger(value)) {
+    return `${label} debe ser un numero entero.`;
+  }
+
+  if (value <= 0) {
+    return `${label} debe ser mayor que cero.`;
+  }
+
+  return null;
+}
+
+export function getSplitPartFileName(row: number, column: number, outputFormat: ImageSplitterOutputFormat) {
+  return `parte-f${row}-c${column}.${getBrowserImageOutputExtension(outputFormat)}`;
+}
+
+function calculateGridParts(
+  imageDimensions: ImageDimensions,
+  rows: number,
+  columns: number,
+  outputFormat: ImageSplitterOutputFormat,
+) {
+  const parts: ImageSplitPart[] = [];
+
+  for (let row = 0; row < rows; row += 1) {
+    const y = Math.floor((row * imageDimensions.height) / rows);
+    const nextY = Math.floor(((row + 1) * imageDimensions.height) / rows);
+
+    for (let column = 0; column < columns; column += 1) {
+      const x = Math.floor((column * imageDimensions.width) / columns);
+      const nextX = Math.floor(((column + 1) * imageDimensions.width) / columns);
+
+      parts.push({
+        column: column + 1,
+        fileName: getSplitPartFileName(row + 1, column + 1, outputFormat),
+        height: nextY - y,
+        index: parts.length + 1,
+        row: row + 1,
+        width: nextX - x,
+        x,
+        y,
+      });
+    }
+  }
+
+  return parts;
+}
+
+function calculateFixedSizeParts(
+  imageDimensions: ImageDimensions,
+  partWidth: number,
+  partHeight: number,
+  outputFormat: ImageSplitterOutputFormat,
+) {
+  const rows = Math.ceil(imageDimensions.height / partHeight);
+  const columns = Math.ceil(imageDimensions.width / partWidth);
+  const parts: ImageSplitPart[] = [];
+
+  for (let row = 0; row < rows; row += 1) {
+    for (let column = 0; column < columns; column += 1) {
+      const x = column * partWidth;
+      const y = row * partHeight;
+
+      parts.push({
+        column: column + 1,
+        fileName: getSplitPartFileName(row + 1, column + 1, outputFormat),
+        height: Math.min(partHeight, imageDimensions.height - y),
+        index: parts.length + 1,
+        row: row + 1,
+        width: Math.min(partWidth, imageDimensions.width - x),
+        x,
+        y,
+      });
+    }
+  }
+
+  return parts;
+}
+
+export function calculateImageSplitParts(
+  imageDimensions: ImageDimensions,
+  options: ImageSplitterOptions,
+  outputFormat: ImageSplitterOutputFormat = "png",
+) {
+  if (options.mode === "fixed-size") {
+    return calculateFixedSizeParts(imageDimensions, options.partWidth, options.partHeight, outputFormat);
+  }
+
+  return calculateGridParts(imageDimensions, options.rows, options.columns, outputFormat);
+}
+
+export function validateImageSplitterOptions(imageDimensions: ImageDimensions, options: ImageSplitterOptions) {
+  if (!hasValidImageDimensions(imageDimensions)) {
+    return "La imagen debe tener dimensiones validas.";
+  }
+
+  if (options.mode === "grid") {
+    const rowsError = validatePositiveInteger(options.rows, "Las filas");
+    if (rowsError) return rowsError;
+
+    const columnsError = validatePositiveInteger(options.columns, "Las columnas");
+    if (columnsError) return columnsError;
+  } else {
+    const widthError = validatePositiveInteger(options.partWidth, "El ancho de cada parte");
+    if (widthError) return widthError;
+
+    const heightError = validatePositiveInteger(options.partHeight, "El alto de cada parte");
+    if (heightError) return heightError;
+  }
+
+  const parts = calculateImageSplitParts(imageDimensions, options);
+  if (parts.some((part) => part.width <= 0 || part.height <= 0)) {
+    return "Cada parte debe tener ancho y alto mayores que cero.";
+  }
+
+  if (parts.length > maxSplitParts) {
+    return `La division supera el limite de ${maxSplitParts} partes.`;
+  }
+
+  return null;
+}
+
+export async function readImageMetadata(file: File): Promise<ImageSplitterMetadata> {
+  const mimeType = getBrowserImageMimeType(file);
+
+  if (!mimeType) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  try {
+    const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+
+    if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+      throw new Error("La imagen no tiene dimensiones validas.");
+    }
+
+    return {
+      fileName: file.name,
+      fileSize: file.size,
+      height: image.naturalHeight,
+      mimeType,
+      width: image.naturalWidth,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error("No se pudo leer la imagen.");
+  }
+}
+
+export async function splitImageFile(file: File, options: SplitImageOptions): Promise<ImageSplitterResult> {
+  if (!isSplittableImageFile(file)) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  if (!canExportBrowserImageFormat(options.outputFormat)) {
+    throw new Error(`Este navegador no permite exportar imagenes como ${getImageFormatLabel(options.outputFormat)}.`);
+  }
+
+  const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+  const imageDimensions = { height: image.naturalHeight, width: image.naturalWidth };
+  const validationError = validateImageSplitterOptions(imageDimensions, options);
+
+  if (validationError) {
+    throw new Error(validationError);
+  }
+
+  const parts = calculateImageSplitParts(imageDimensions, options, options.outputFormat);
+  const mimeType = getBrowserImageOutputMimeType(options.outputFormat);
+  const zip = new JSZip();
+
+  for (const part of parts) {
+    const canvas = document.createElement("canvas");
+    canvas.width = part.width;
+    canvas.height = part.height;
+    const context = canvas.getContext("2d");
+
+    if (!context) {
+      throw new Error("No se pudo preparar una parte de la imagen.");
+    }
+
+    if (options.outputFormat === "jpeg") {
+      context.fillStyle = "#ffffff";
+      context.fillRect(0, 0, canvas.width, canvas.height);
+    }
+
+    context.drawImage(image, part.x, part.y, part.width, part.height, 0, 0, part.width, part.height);
+
+    const result = await exportBrowserCanvas(canvas, {
+      errorMessage: "No se pudo exportar una parte de la imagen.",
+      mimeType,
+      quality: options.quality,
+    });
+    zip.file(part.fileName, result.bytes);
+  }
+
+  try {
+    const bytes = await zip.generateAsync({ type: "arraybuffer" });
+    return {
+      bytes,
+      fileName: buildSplitImageZipFileName(options.outputBaseName, getSplitImageOutputBaseName(file.name)),
+      mimeType: "application/zip",
+      partCount: parts.length,
+      parts,
+      size: bytes.byteLength,
+    };
+  } catch {
+    throw new Error("No se pudo preparar la descarga ZIP.");
+  }
+}
diff --git a/src/tools/image/image-splitter/imageSplitter.types.ts b/src/tools/image/image-splitter/imageSplitter.types.ts
new file mode 100644
index 0000000..520d015
--- /dev/null
+++ b/src/tools/image/image-splitter/imageSplitter.types.ts
@@ -0,0 +1,60 @@
+import type { BrowserImageOutputFormat } from "../../../shared/utils/imageFiles";
+
+export type ImageSplitterMode = "grid" | "fixed-size";
+
+export type ImageDimensions = {
+  height: number;
+  width: number;
+};
+
+export type ImageSplitterGridOptions = {
+  columns: number;
+  mode: "grid";
+  rows: number;
+};
+
+export type ImageSplitterFixedSizeOptions = {
+  mode: "fixed-size";
+  partHeight: number;
+  partWidth: number;
+};
+
+export type ImageSplitterOptions = ImageSplitterGridOptions | ImageSplitterFixedSizeOptions;
+
+export type ImageSplitPart = {
+  column: number;
+  fileName: string;
+  height: number;
+  index: number;
+  row: number;
+  width: number;
+  x: number;
+  y: number;
+};
+
+export type ImageSplitterMetadata = {
+  fileName: string;
+  fileSize: number;
+  height: number;
+  mimeType: string;
+  width: number;
+};
+
+export type ImageSplitterOutputFormat = BrowserImageOutputFormat;
+
+export type SplitImageOptions = ImageSplitterOptions & {
+  outputBaseName: string;
+  outputFormat: ImageSplitterOutputFormat;
+  quality?: number;
+};
+
+export type ImageSplitterResult = {
+  bytes: ArrayBuffer;
+  fileName: string;
+  mimeType: "application/zip";
+  partCount: number;
+  parts: ImageSplitPart[];
+  size: number;
+};
+
+export type ImageSplitterStatus = "idle" | "reading" | "ready" | "processing" | "success" | "error";
diff --git a/src/tools/image/image-splitter/index.ts b/src/tools/image/image-splitter/index.ts
new file mode 100644
index 0000000..dcbbf50
--- /dev/null
+++ b/src/tools/image/image-splitter/index.ts
@@ -0,0 +1 @@
+export { ImageSplitterTool } from "./ImageSplitterTool";

From 67bb79b6c68a38bb81e26a5cbfc63cceb43b6c92 Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Sat, 6 Jun 2026 04:01:32 -0300
Subject: [PATCH 06/10] feat(image): add image color extractor tool

---
 src/features/tools/data/tools.ts              | 104 ++++
 .../tools/renderers/toolRenderers.tsx         |   5 +
 .../ImageColorExtractorTool.tsx               | 444 ++++++++++++++++++
 .../image/image-color-extractor/README.md     |  17 +
 .../imageColorExtractor.service.test.ts       |  86 ++++
 .../imageColorExtractor.service.ts            | 239 ++++++++++
 .../imageColorExtractor.types.ts              |  31 ++
 .../image/image-color-extractor/index.ts      |   1 +
 8 files changed, 927 insertions(+)
 create mode 100644 src/tools/image/image-color-extractor/ImageColorExtractorTool.tsx
 create mode 100644 src/tools/image/image-color-extractor/README.md
 create mode 100644 src/tools/image/image-color-extractor/imageColorExtractor.service.test.ts
 create mode 100644 src/tools/image/image-color-extractor/imageColorExtractor.service.ts
 create mode 100644 src/tools/image/image-color-extractor/imageColorExtractor.types.ts
 create mode 100644 src/tools/image/image-color-extractor/index.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index 94044b6..0e53482 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -1088,6 +1088,110 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "image-color-extractor",
+    slug: "extraer-colores-imagen",
+    slugEn: "extract-image-colors",
+    name: { es: "Extraer colores de imagen", en: "Extract image colors" },
+    description: {
+      es: "Extrae una paleta aproximada de colores dominantes desde una imagen.",
+      en: "Extract an approximate palette of dominant colors from an image.",
+    },
+    category: "image",
+    tags: {
+      es: ["imagen", "colores", "paleta", "hex", "rgb"],
+      en: ["image", "colors", "palette", "hex", "rgb"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Extraer colores de imagen online gratis",
+        description:
+          "Extrae una paleta aproximada de colores dominantes desde una imagen PNG, JPG o WebP. Copia HEX/RGB y descarga TXT o JSON sin subir archivos.",
+      },
+      en: {
+        title: "Extract image colors online free",
+        description:
+          "Extract an approximate dominant color palette from a PNG, JPG or WebP image. Copy HEX/RGB and download TXT or JSON with no uploads.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Extraer colores de imagen analiza una imagen local y devuelve una paleta aproximada de colores dominantes.",
+        howTo: [
+          "Selecciona una imagen PNG, JPG/JPEG o WebP.",
+          "Revisa el tipo, peso y dimensiones originales.",
+          "Elige la cantidad de colores: 4, 6, 8 o 12.",
+          "Extrae la paleta y revisa HEX, RGB y porcentaje aproximado.",
+          "Copia valores individuales o descarga la paleta como TXT o JSON.",
+        ],
+        useCases: [
+          "Obtener colores base para una interfaz.",
+          "Tomar referencias HEX/RGB desde una imagen de marca.",
+          "Crear una paleta rapida desde una foto o captura.",
+        ],
+        limits: [
+          "Los colores son una estimacion basada en muestreo local.",
+          "No promete precision perfecta ni una paleta exacta.",
+          "Ignora pixeles totalmente transparentes.",
+          "Tamano maximo por imagen: 15 MB.",
+        ],
+        privacy:
+          "El procesamiento de esta imagen ocurre en tu navegador; no la subimos a Modulaq para extraer colores.",
+        commonErrors: [
+          "Archivo que no es una imagen PNG, JPG o WebP.",
+          "Imagen danada o que el navegador no puede decodificar.",
+          "Imagen sin pixeles visibles luego de ignorar transparencia total.",
+        ],
+        technicalNotes: [
+          "El analisis usa canvas en el navegador.",
+          "Se muestrean hasta 50.000 pixeles.",
+          "La paleta se obtiene con cuantizacion RGB simple y orden por frecuencia.",
+        ],
+      },
+      en: {
+        summary:
+          "Extract image colors analyzes a local image and returns an approximate dominant color palette.",
+        howTo: [
+          "Select a PNG, JPG/JPEG or WebP image.",
+          "Review the detected type, size and dimensions.",
+          "Choose the color count: 4, 6, 8 or 12.",
+          "Extract the palette and review HEX, RGB and approximate percentage.",
+          "Copy individual values or download the palette as TXT or JSON.",
+        ],
+        useCases: [
+          "Get base colors for an interface.",
+          "Pull HEX/RGB references from a brand image.",
+          "Create a quick palette from a photo or screenshot.",
+        ],
+        limits: [
+          "Colors are an estimate based on local sampling.",
+          "It does not promise perfect precision or an exact palette.",
+          "Fully transparent pixels are ignored.",
+          "Maximum image size: 15 MB.",
+        ],
+        privacy:
+          "Processing happens in your browser; we don't upload this image to Modulaq to extract colors.",
+        commonErrors: [
+          "A file that is not PNG, JPG or WebP.",
+          "A damaged image or one the browser cannot decode.",
+          "An image with no visible pixels after fully transparent pixels are ignored.",
+        ],
+        technicalNotes: [
+          "Analysis uses browser canvas.",
+          "Up to 50,000 pixels are sampled.",
+          "The palette uses simple RGB quantization and frequency ordering.",
+        ],
+      },
+    },
+  },
   {
     id: "image-compressor",
     slug: "comprimir-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index df88c80..af28faf 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -14,6 +14,11 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-compressor": lazy(() =>
     import("../../../tools/image/image-compressor").then((module) => ({ default: module.ImageCompressorTool })),
   ),
+  "image-color-extractor": lazy(() =>
+    import("../../../tools/image/image-color-extractor").then((module) => ({
+      default: module.ImageColorExtractorTool,
+    })),
+  ),
   "image-converter": lazy(() =>
     import("../../../tools/image/image-converter").then((module) => ({ default: module.ImageConverterTool })),
   ),
diff --git a/src/tools/image/image-color-extractor/ImageColorExtractorTool.tsx b/src/tools/image/image-color-extractor/ImageColorExtractorTool.tsx
new file mode 100644
index 0000000..5e5fb0e
--- /dev/null
+++ b/src/tools/image/image-color-extractor/ImageColorExtractorTool.tsx
@@ -0,0 +1,444 @@
+import { Copy, Download, FileImage, Loader2, Palette, RotateCcw, Upload } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import { getImageFileSizeLimitError } from "../../../shared/utils/fileProcessingLimits";
+import {
+  buildPaletteFileName,
+  colorCountOptions,
+  defaultColorCount,
+  defaultOutputBaseName,
+  exportPaletteAsJson,
+  exportPaletteAsTxt,
+  extractImageColors,
+  formatFileSize,
+  formatRgb,
+  getImageMimeLabel,
+  getPaletteOutputBaseName,
+  readImageMetadata,
+} from "./imageColorExtractor.service";
+import type {
+  ExtractedImageColor,
+  ImageColorExtractorMetadata,
+  ImageColorExtractorResult,
+  ImageColorExtractorStatus,
+} from "./imageColorExtractor.types";
+
+const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+
+type PaletteExportFormat = "json" | "txt";
+
+const copy = {
+  es: {
+    analyze: "Extraer colores",
+    copied: "Copiado",
+    copyHex: "Copiar HEX",
+    copyRgb: "Copiar RGB",
+    downloadJson: "Descargar JSON",
+    downloadTxt: "Descargar TXT",
+    emptyPalette: "Extrae colores para ver la paleta.",
+    estimation: "Los colores son una estimacion basada en muestreo local.",
+    outputName: "Nombre de la paleta",
+    outputTitle: "Paleta",
+    paletteReady: "Paleta lista",
+    processing: "Analizando imagen...",
+    samplePixels: "Pixeles muestreados",
+    sourceIntro: "Extrae una paleta aproximada de colores dominantes desde una imagen.",
+    sourceTitle: "Imagen de origen",
+    swatch: "Muestra de color",
+    totalLocal: "Todo se procesa en tu navegador.",
+  },
+  en: {
+    analyze: "Extract colors",
+    copied: "Copied",
+    copyHex: "Copy HEX",
+    copyRgb: "Copy RGB",
+    downloadJson: "Download JSON",
+    downloadTxt: "Download TXT",
+    emptyPalette: "Extract colors to see the palette.",
+    estimation: "Colors are an estimate based on local sampling.",
+    outputName: "Palette name",
+    outputTitle: "Palette",
+    paletteReady: "Palette ready",
+    processing: "Analyzing image...",
+    samplePixels: "Sampled pixels",
+    sourceIntro: "Extract an approximate palette of dominant colors from an image.",
+    sourceTitle: "Source image",
+    swatch: "Color swatch",
+    totalLocal: "Everything is processed in your browser.",
+  },
+} as const;
+
+function downloadTextFile(fileName: string, text: string, type: string) {
+  const url = URL.createObjectURL(new Blob([text], { type }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+export function ImageColorExtractorTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [metadata, setMetadata] = useState<ImageColorExtractorMetadata | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [colorCount, setColorCount] = useState(defaultColorCount);
+  const [outputFileName, setOutputFileName] = useState(defaultOutputBaseName);
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [status, setStatus] = useState<ImageColorExtractorStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<ImageColorExtractorResult | null>(null);
+  const [copiedValue, setCopiedValue] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+    };
+  }, []);
+
+  const fallbackBaseName = metadata ? getPaletteOutputBaseName(metadata.fileName) : defaultOutputBaseName;
+  const txtFileName = buildPaletteFileName(outputFileName, "txt", fallbackBaseName);
+  const jsonFileName = buildPaletteFileName(outputFileName, "json", fallbackBaseName);
+  const canAnalyze = Boolean(file && metadata) && status !== "reading" && status !== "processing";
+  const colors = result?.colors ?? [];
+
+  const resetFeedback = () => {
+    setError(null);
+    setCopiedValue(null);
+    if (status === "success" || status === "error") {
+      setStatus(metadata ? "ready" : "idle");
+    }
+  };
+
+  const processFile = async (nextFile: File | undefined) => {
+    if (!nextFile) return;
+    setStatus("reading");
+    setFile(null);
+    setMetadata(null);
+    setResult(null);
+    setError(null);
+    setCopiedValue(null);
+
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+      setPreviewUrl(null);
+    }
+
+    const fileLimitError = getImageFileSizeLimitError(nextFile);
+    if (fileLimitError) {
+      setStatus("error");
+      setError(fileLimitError);
+      return;
+    }
+
+    try {
+      const nextMetadata = await readImageMetadata(nextFile);
+      const nextPreviewUrl = URL.createObjectURL(nextFile);
+      previewUrlRef.current = nextPreviewUrl;
+      setPreviewUrl(nextPreviewUrl);
+      setFile(nextFile);
+      setMetadata(nextMetadata);
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getPaletteOutputBaseName(nextFile.name));
+      }
+      setStatus("ready");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : t("imageUi.couldNotRead"));
+    }
+  };
+
+  const clearSelection = () => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    setFile(null);
+    setMetadata(null);
+    setPreviewUrl(null);
+    setColorCount(defaultColorCount);
+    setOutputFileName(defaultOutputBaseName);
+    setHasCustomOutputFileName(false);
+    setResult(null);
+    setStatus("idle");
+    setError(null);
+    setCopiedValue(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const analyzeImage = async () => {
+    if (!file || !canAnalyze) return;
+    setStatus("processing");
+    setError(null);
+    setCopiedValue(null);
+
+    try {
+      const nextResult = await extractImageColors(file, { colorCount });
+      setResult(nextResult);
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo extraer la paleta.");
+    }
+  };
+
+  const copyValue = async (value: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopiedValue(value);
+    } catch {
+      setError(language === "en" ? "Could not copy to clipboard." : "No se pudo copiar al portapapeles.");
+    }
+  };
+
+  const downloadPalette = (format: PaletteExportFormat) => {
+    if (colors.length === 0) return;
+
+    if (format === "json") {
+      downloadTextFile(jsonFileName, exportPaletteAsJson(colors), "application/json");
+      return;
+    }
+
+    downloadTextFile(txtFileName, exportPaletteAsTxt(colors), "text/plain");
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.9fr)_minmax(320px,0.58fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-52 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFile(event.dataTransfer.files[0]);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={26} />
+              </span>
+              <span className="mt-4 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
+            </span>
+          </button>
+          <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
+          {metadata ? (
+            <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
+              {previewUrl ? (
+                <img
+                  src={previewUrl}
+                  alt=""
+                  className="h-28 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-32"
+                />
+              ) : (
+                <span className="grid h-28 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal sm:w-32">
+                  <FileImage size={28} />
+                </span>
+              )}
+              <dl className="grid min-w-0 gap-2 text-sm">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                  <dd className="truncate font-semibold text-ink-900">{metadata.fileName}</dd>
+                </div>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                    <dd className="font-semibold text-ink-900">{getImageMimeLabel(metadata.mimeType)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                    <dd className="font-semibold text-ink-900">{formatFileSize(metadata.fileSize)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                    <dd className="font-semibold text-ink-900">
+                      {metadata.width} x {metadata.height}px
+                    </dd>
+                  </div>
+                </div>
+              </dl>
+            </div>
+          ) : null}
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <div className="grid gap-2 sm:grid-cols-4">
+              {colorCountOptions.map((nextCount) => (
+                <button
+                  key={nextCount}
+                  type="button"
+                  className={cn(
+                    "rounded-md border px-3 py-2 text-sm font-semibold transition",
+                    colorCount === nextCount
+                      ? "border-accent-cyan/45 bg-accent-cyan/10 text-ink-900"
+                      : "border-surface-200/80 bg-surface-50/90 text-ink-700 hover:border-accent-cyan/35",
+                  )}
+                  onClick={() => {
+                    setColorCount(nextCount);
+                    setResult(null);
+                    resetFeedback();
+                  }}
+                >
+                  {nextCount}
+                </button>
+              ))}
+            </div>
+            <p className="text-xs leading-5 text-ink-500">{labels.estimation}</p>
+            <p className="text-xs leading-5 text-ink-500">{labels.totalLocal}</p>
+          </div>
+
+          {status === "reading" || status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {status === "processing" ? labels.processing : t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+
+          <div className="grid gap-2">
+            <Button type="button" className="gap-2" onClick={() => void analyzeImage()} disabled={!canAnalyze}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <Palette size={16} />}
+              {labels.analyze}
+            </Button>
+            <Button type="button" variant="ghost" className="gap-2" onClick={clearSelection} disabled={!file && status === "idle"}>
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.estimation}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          {colors.length > 0 ? (
+            <div className="grid gap-3">
+              <div className="rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+                <p className="font-semibold text-ink-900">{labels.paletteReady}</p>
+                <p className="mt-1 text-xs text-ink-600">
+                  {labels.samplePixels}: {result?.sampledPixels ?? 0}
+                </p>
+              </div>
+
+              {colors.map((color: ExtractedImageColor) => {
+                const rgb = formatRgb(color.rgb);
+                return (
+                  <div key={color.hex} className="grid gap-3 rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 shadow-sm sm:grid-cols-[72px_minmax(0,1fr)]">
+                    <div
+                      aria-label={labels.swatch}
+                      className="h-16 rounded-lg border border-surface-200/80 shadow-sm"
+                      style={{ backgroundColor: color.hex }}
+                    />
+                    <div className="grid min-w-0 gap-2 text-sm">
+                      <div className="flex flex-wrap items-center justify-between gap-2">
+                        <div>
+                          <p className="font-semibold text-ink-900">{color.hex}</p>
+                          <p className="text-xs text-ink-500">{rgb}</p>
+                        </div>
+                        <p className="rounded-md bg-surface-100 px-2 py-1 text-xs font-semibold text-ink-700">
+                          {color.percentage.toFixed(1)}%
+                        </p>
+                      </div>
+                      <div className="grid gap-2 sm:grid-cols-2">
+                        <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyValue(color.hex)}>
+                          <Copy size={15} />
+                          {copiedValue === color.hex ? labels.copied : labels.copyHex}
+                        </Button>
+                        <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyValue(rgb)}>
+                          <Copy size={15} />
+                          {copiedValue === rgb ? labels.copied : labels.copyRgb}
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="grid min-h-56 place-items-center rounded-lg border border-surface-200/80 bg-surface-50/90 p-4 text-center text-sm text-ink-500">
+              <span>
+                <Palette className="mx-auto text-accent-teal" size={34} />
+                <span className="mt-2 block font-semibold text-ink-700">{labels.emptyPalette}</span>
+              </span>
+            </div>
+          )}
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {labels.outputName}
+            <input
+              className="min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25"
+              value={outputFileName}
+              placeholder={defaultOutputBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+          </label>
+
+          <div className="grid gap-2 sm:grid-cols-2">
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => downloadPalette("txt")} disabled={colors.length === 0}>
+              <Download size={16} />
+              {labels.downloadTxt}
+            </Button>
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => downloadPalette("json")} disabled={colors.length === 0}>
+              <Download size={16} />
+              {labels.downloadJson}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-color-extractor/README.md b/src/tools/image/image-color-extractor/README.md
new file mode 100644
index 0000000..fd5ee76
--- /dev/null
+++ b/src/tools/image/image-color-extractor/README.md
@@ -0,0 +1,17 @@
+# Extraer colores de imagen
+
+Herramienta local para extraer una paleta aproximada de colores dominantes desde una imagen.
+
+## Comportamiento
+
+- Acepta imagenes PNG, JPG/JPEG o WebP que el navegador pueda decodificar.
+- Analiza la imagen con canvas en el navegador.
+- Usa muestreo de hasta 50.000 pixeles.
+- Agrupa colores por cuantizacion RGB simple.
+- Ignora pixeles totalmente transparentes.
+- Permite exportar la paleta como TXT o JSON.
+- Todo el procesamiento ocurre en el navegador.
+
+## Limites
+
+La paleta es una estimacion basada en muestreo y buckets de color. No promete una paleta exacta ni usa IA/backend.
diff --git a/src/tools/image/image-color-extractor/imageColorExtractor.service.test.ts b/src/tools/image/image-color-extractor/imageColorExtractor.service.test.ts
new file mode 100644
index 0000000..f1d5451
--- /dev/null
+++ b/src/tools/image/image-color-extractor/imageColorExtractor.service.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildPaletteFileName,
+  calculateSampleDimensions,
+  exportPaletteAsJson,
+  exportPaletteAsTxt,
+  extractDominantColorsFromImageData,
+  formatRgb,
+  getPaletteOutputBaseName,
+  quantizeRgb,
+  rgbToHex,
+} from "./imageColorExtractor.service";
+
+function pixel(r: number, g: number, b: number, a = 255) {
+  return [r, g, b, a];
+}
+
+describe("imageColorExtractor.service", () => {
+  it("converts RGB to HEX", () => {
+    expect(rgbToHex({ r: 255, g: 128, b: 0 })).toBe("#FF8000");
+    expect(rgbToHex({ r: 0, g: 1, b: 15 })).toBe("#00010F");
+  });
+
+  it("formats RGB", () => {
+    expect(formatRgb({ r: 12, g: 34, b: 56 })).toBe("rgb(12, 34, 56)");
+  });
+
+  it("bucketizes RGB values", () => {
+    expect(quantizeRgb({ r: 31, g: 32, b: 255 })).toEqual({ r: 0, g: 1, b: 7 });
+  });
+
+  it("orders colors by frequency", () => {
+    const data = new Uint8ClampedArray([
+      ...pixel(255, 0, 0),
+      ...pixel(255, 5, 5),
+      ...pixel(0, 0, 255),
+    ]);
+
+    const result = extractDominantColorsFromImageData(data, { colorCount: 2 });
+    expect(result.colors).toHaveLength(2);
+    expect(result.colors[0].hex).toBe("#FF0303");
+    expect(result.colors[0].count).toBe(2);
+  });
+
+  it("ignores fully transparent pixels", () => {
+    const data = new Uint8ClampedArray([
+      ...pixel(255, 0, 0, 0),
+      ...pixel(0, 0, 255, 255),
+    ]);
+
+    const result = extractDominantColorsFromImageData(data, { colorCount: 4 });
+    expect(result.sampledPixels).toBe(1);
+    expect(result.colors[0].hex).toBe("#0000FF");
+  });
+
+  it("limits the requested color count", () => {
+    const data = new Uint8ClampedArray([
+      ...pixel(255, 0, 0),
+      ...pixel(0, 255, 0),
+      ...pixel(0, 0, 255),
+      ...pixel(255, 255, 0),
+      ...pixel(0, 255, 255),
+    ]);
+
+    expect(extractDominantColorsFromImageData(data, { colorCount: 4 }).colors).toHaveLength(4);
+  });
+
+  it("exports TXT and JSON palettes", () => {
+    const colors = [
+      { count: 2, hex: "#FF0000", percentage: 66.666, rgb: { r: 255, g: 0, b: 0 } },
+    ];
+
+    expect(exportPaletteAsTxt(colors)).toContain("#FF0000 | rgb(255, 0, 0) | 66.7%");
+    expect(exportPaletteAsJson(colors)).toContain('"percentage": 66.67');
+  });
+
+  it("calculates sample dimensions under the pixel limit", () => {
+    expect(calculateSampleDimensions(1000, 1000, 10_000)).toEqual({ width: 100, height: 100 });
+    expect(calculateSampleDimensions(80, 60, 10_000)).toEqual({ width: 80, height: 60 });
+  });
+
+  it("builds palette output names", () => {
+    expect(getPaletteOutputBaseName("marca.png")).toBe("marca-colores");
+    expect(buildPaletteFileName("marca-colores", "json")).toBe("marca-colores.json");
+  });
+});
diff --git a/src/tools/image/image-color-extractor/imageColorExtractor.service.ts b/src/tools/image/image-color-extractor/imageColorExtractor.service.ts
new file mode 100644
index 0000000..b11bb01
--- /dev/null
+++ b/src/tools/image/image-color-extractor/imageColorExtractor.service.ts
@@ -0,0 +1,239 @@
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  getBrowserImageMimeType,
+  getImageDownloadBaseName,
+  isBrowserImageFile,
+  loadBrowserImage,
+} from "../../../shared/utils/imageFiles";
+import type {
+  ExtractedImageColor,
+  ExtractImageColorsOptions,
+  ImageColorExtractorMetadata,
+  ImageColorExtractorResult,
+  RgbColor,
+} from "./imageColorExtractor.types";
+
+export const defaultOutputBaseName = "paleta-imagen";
+export const defaultColorCount = 6;
+export const colorCountOptions = [4, 6, 8, 12] as const;
+export const maxSamplePixels = 50_000;
+const bucketSize = 32;
+
+type ColorBucket = {
+  b: number;
+  count: number;
+  g: number;
+  r: number;
+};
+
+export { formatFileSize };
+
+export function isColorExtractableImageFile(file: File) {
+  return isBrowserImageFile(file);
+}
+
+export function getImageMimeLabel(mimeType: string) {
+  if (mimeType === "image/jpeg") {
+    return "JPG";
+  }
+
+  if (mimeType === "image/webp") {
+    return "WebP";
+  }
+
+  if (mimeType === "image/png") {
+    return "PNG";
+  }
+
+  return mimeType || "Desconocido";
+}
+
+export function getPaletteOutputBaseName(fileName: string) {
+  const baseName = getImageDownloadBaseName(fileName, defaultOutputBaseName);
+  return `${baseName}-colores`;
+}
+
+export function buildPaletteFileName(baseName: string, extension: "json" | "txt", fallbackBaseName = defaultOutputBaseName) {
+  return `${getImageDownloadBaseName(baseName, fallbackBaseName)}.${extension}`;
+}
+
+function clampByte(value: number) {
+  return Math.min(255, Math.max(0, Math.round(value)));
+}
+
+function byteToHex(value: number) {
+  return clampByte(value).toString(16).padStart(2, "0").toUpperCase();
+}
+
+export function rgbToHex({ b, g, r }: RgbColor) {
+  return `#${byteToHex(r)}${byteToHex(g)}${byteToHex(b)}`;
+}
+
+export function formatRgb({ b, g, r }: RgbColor) {
+  return `rgb(${clampByte(r)}, ${clampByte(g)}, ${clampByte(b)})`;
+}
+
+export function quantizeRgb({ b, g, r }: RgbColor) {
+  return {
+    b: Math.floor(clampByte(b) / bucketSize),
+    g: Math.floor(clampByte(g) / bucketSize),
+    r: Math.floor(clampByte(r) / bucketSize),
+  };
+}
+
+function getBucketKey(color: RgbColor) {
+  const quantized = quantizeRgb(color);
+  return `${quantized.r}:${quantized.g}:${quantized.b}`;
+}
+
+function normalizeColorCount(colorCount: number) {
+  return colorCountOptions.includes(colorCount as (typeof colorCountOptions)[number])
+    ? colorCount
+    : defaultColorCount;
+}
+
+function toExtractedColor(bucket: ColorBucket, visiblePixelCount: number): ExtractedImageColor {
+  const rgb = {
+    b: Math.round(bucket.b / bucket.count),
+    g: Math.round(bucket.g / bucket.count),
+    r: Math.round(bucket.r / bucket.count),
+  };
+
+  return {
+    count: bucket.count,
+    hex: rgbToHex(rgb),
+    percentage: visiblePixelCount > 0 ? (bucket.count / visiblePixelCount) * 100 : 0,
+    rgb,
+  };
+}
+
+export function extractDominantColorsFromImageData(
+  data: Uint8ClampedArray,
+  { colorCount }: ExtractImageColorsOptions,
+): ImageColorExtractorResult {
+  const buckets = new Map<string, ColorBucket>();
+  let visiblePixelCount = 0;
+
+  for (let index = 0; index < data.length; index += 4) {
+    const alpha = data[index + 3] ?? 255;
+    if (alpha === 0) continue;
+
+    const color = {
+      b: data[index + 2] ?? 0,
+      g: data[index + 1] ?? 0,
+      r: data[index] ?? 0,
+    };
+    const key = getBucketKey(color);
+    const bucket = buckets.get(key) ?? { b: 0, count: 0, g: 0, r: 0 };
+
+    bucket.b += color.b;
+    bucket.count += 1;
+    bucket.g += color.g;
+    bucket.r += color.r;
+    buckets.set(key, bucket);
+    visiblePixelCount += 1;
+  }
+
+  const colors = Array.from(buckets.values())
+    .sort((first, second) => second.count - first.count)
+    .slice(0, normalizeColorCount(colorCount))
+    .map((bucket) => toExtractedColor(bucket, visiblePixelCount));
+
+  return {
+    colors,
+    sampledPixels: visiblePixelCount,
+  };
+}
+
+export function calculateSampleDimensions(width: number, height: number, maxPixels = maxSamplePixels) {
+  if (width <= 0 || height <= 0) {
+    return { height: 0, width: 0 };
+  }
+
+  const pixelCount = width * height;
+  if (pixelCount <= maxPixels) {
+    return { height, width };
+  }
+
+  const scale = Math.sqrt(maxPixels / pixelCount);
+  return {
+    height: Math.max(1, Math.round(height * scale)),
+    width: Math.max(1, Math.round(width * scale)),
+  };
+}
+
+export function exportPaletteAsTxt(colors: readonly ExtractedImageColor[]) {
+  return colors
+    .map((color, index) => {
+      const percentage = `${color.percentage.toFixed(1)}%`;
+      return `${index + 1}. ${color.hex} | ${formatRgb(color.rgb)} | ${percentage}`;
+    })
+    .join("\n");
+}
+
+export function exportPaletteAsJson(colors: readonly ExtractedImageColor[]) {
+  return JSON.stringify(
+    colors.map((color) => ({
+      count: color.count,
+      hex: color.hex,
+      percentage: Number(color.percentage.toFixed(2)),
+      rgb: color.rgb,
+    })),
+    null,
+    2,
+  );
+}
+
+export async function readImageMetadata(file: File): Promise<ImageColorExtractorMetadata> {
+  const mimeType = getBrowserImageMimeType(file);
+
+  if (!mimeType) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  try {
+    const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+
+    if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+      throw new Error("La imagen no tiene dimensiones validas.");
+    }
+
+    return {
+      fileName: file.name,
+      fileSize: file.size,
+      height: image.naturalHeight,
+      mimeType,
+      width: image.naturalWidth,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error("No se pudo leer la imagen.");
+  }
+}
+
+export async function extractImageColors(
+  file: File,
+  { colorCount }: ExtractImageColorsOptions,
+): Promise<ImageColorExtractorResult> {
+  if (!isColorExtractableImageFile(file)) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+  const sampleDimensions = calculateSampleDimensions(image.naturalWidth, image.naturalHeight);
+  const canvas = document.createElement("canvas");
+  canvas.width = sampleDimensions.width;
+  canvas.height = sampleDimensions.height;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+
+  if (!context) {
+    throw new Error("No se pudo analizar la imagen.");
+  }
+
+  context.drawImage(image, 0, 0, sampleDimensions.width, sampleDimensions.height);
+  const imageData = context.getImageData(0, 0, sampleDimensions.width, sampleDimensions.height);
+  return extractDominantColorsFromImageData(imageData.data, { colorCount });
+}
diff --git a/src/tools/image/image-color-extractor/imageColorExtractor.types.ts b/src/tools/image/image-color-extractor/imageColorExtractor.types.ts
new file mode 100644
index 0000000..7d71427
--- /dev/null
+++ b/src/tools/image/image-color-extractor/imageColorExtractor.types.ts
@@ -0,0 +1,31 @@
+export type ImageColorExtractorMetadata = {
+  fileName: string;
+  fileSize: number;
+  height: number;
+  mimeType: string;
+  width: number;
+};
+
+export type RgbColor = {
+  b: number;
+  g: number;
+  r: number;
+};
+
+export type ExtractedImageColor = {
+  count: number;
+  hex: string;
+  percentage: number;
+  rgb: RgbColor;
+};
+
+export type ExtractImageColorsOptions = {
+  colorCount: number;
+};
+
+export type ImageColorExtractorResult = {
+  colors: ExtractedImageColor[];
+  sampledPixels: number;
+};
+
+export type ImageColorExtractorStatus = "idle" | "reading" | "ready" | "processing" | "success" | "error";
diff --git a/src/tools/image/image-color-extractor/index.ts b/src/tools/image/image-color-extractor/index.ts
new file mode 100644
index 0000000..b66f3ad
--- /dev/null
+++ b/src/tools/image/image-color-extractor/index.ts
@@ -0,0 +1 @@
+export { ImageColorExtractorTool } from "./ImageColorExtractorTool";

From 1252bcf6c6ed468dfe118152e738c9964f3431cc Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Sat, 6 Jun 2026 04:12:37 -0300
Subject: [PATCH 07/10] feat(image): add placeholder image generator

---
 src/features/tools/data/tools.ts              | 104 ++++
 .../tools/renderers/toolRenderers.tsx         |   3 +
 .../ImagePlaceholderTool.tsx                  | 468 ++++++++++++++++++
 src/tools/image/image-placeholder/README.md   |  17 +
 .../imagePlaceholder.service.test.ts          |  40 ++
 .../imagePlaceholder.service.ts               | 188 +++++++
 .../imagePlaceholder.types.ts                 |  26 +
 src/tools/image/image-placeholder/index.ts    |   1 +
 8 files changed, 847 insertions(+)
 create mode 100644 src/tools/image/image-placeholder/ImagePlaceholderTool.tsx
 create mode 100644 src/tools/image/image-placeholder/README.md
 create mode 100644 src/tools/image/image-placeholder/imagePlaceholder.service.test.ts
 create mode 100644 src/tools/image/image-placeholder/imagePlaceholder.service.ts
 create mode 100644 src/tools/image/image-placeholder/imagePlaceholder.types.ts
 create mode 100644 src/tools/image/image-placeholder/index.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index 0e53482..8188a16 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -1192,6 +1192,110 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "image-placeholder",
+    slug: "generar-placeholder-imagen",
+    slugEn: "generate-placeholder-image",
+    name: { es: "Generar imagen placeholder", en: "Generate placeholder image" },
+    description: {
+      es: "Genera una imagen placeholder para disenos, pruebas o desarrollo web.",
+      en: "Generate a placeholder image for layouts, tests or web development.",
+    },
+    category: "image",
+    tags: {
+      es: ["imagen", "placeholder", "diseno", "desarrollo", "png", "jpg", "webp"],
+      en: ["image", "placeholder", "design", "development", "png", "jpg", "webp"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Generar imagen placeholder online gratis",
+        description:
+          "Genera una imagen placeholder configurando tamano, texto y colores. Exporta PNG, JPG o WebP desde tu navegador, sin backend.",
+      },
+      en: {
+        title: "Generate placeholder image online free",
+        description:
+          "Generate a placeholder image by setting size, text and colors. Export PNG, JPG or WebP from your browser, with no backend.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Generar imagen placeholder crea una imagen simple con tamano, texto y colores configurables desde el navegador.",
+        howTo: [
+          "Define ancho y alto.",
+          "Edita el texto o deja el texto automatico basado en las dimensiones.",
+          "Elige color de fondo y color de texto.",
+          "Selecciona PNG, JPG o WebP si el navegador lo permite.",
+          "Genera la imagen y descargala.",
+        ],
+        useCases: [
+          "Crear imagenes temporales para maquetas.",
+          "Probar layouts web con dimensiones reales.",
+          "Generar placeholders simples para desarrollo.",
+        ],
+        limits: [
+          "Maximo 8000 px por lado.",
+          "Maximo 64 megapixeles.",
+          "No es un editor avanzado: genera texto centrado sobre fondo plano.",
+          "WebP aparece si tu navegador permite exportarlo correctamente.",
+        ],
+        privacy:
+          "La imagen se genera localmente en tu navegador; no se sube nada a Modulaq.",
+        commonErrors: [
+          "Ancho o alto con valores no validos.",
+          "Dimensiones demasiado grandes para canvas.",
+          "Formato de salida no disponible en el navegador actual.",
+        ],
+        technicalNotes: [
+          "La exportacion usa canvas en el navegador.",
+          "La calidad aplica a JPG y WebP, no a PNG.",
+          "El nombre de salida se deriva de las dimensiones.",
+        ],
+      },
+      en: {
+        summary:
+          "Generate placeholder image creates a simple image with configurable size, text and colors from the browser.",
+        howTo: [
+          "Set width and height.",
+          "Edit the text or keep the automatic text based on dimensions.",
+          "Choose background color and text color.",
+          "Select PNG, JPG or WebP if the browser supports it.",
+          "Generate the image and download it.",
+        ],
+        useCases: [
+          "Create temporary images for mockups.",
+          "Test web layouts with real dimensions.",
+          "Generate simple placeholders for development.",
+        ],
+        limits: [
+          "Maximum 8000 px per side.",
+          "Maximum 64 megapixels.",
+          "It is not an advanced editor: it creates centered text over a flat background.",
+          "WebP appears if your browser can export it correctly.",
+        ],
+        privacy:
+          "The image is generated locally in your browser; nothing is uploaded to Modulaq.",
+        commonErrors: [
+          "Width or height with invalid values.",
+          "Dimensions too large for canvas.",
+          "Output format unavailable in the current browser.",
+        ],
+        technicalNotes: [
+          "Export uses browser canvas.",
+          "Quality applies to JPG and WebP, not PNG.",
+          "The output name is derived from dimensions.",
+        ],
+      },
+    },
+  },
   {
     id: "image-compressor",
     slug: "comprimir-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index af28faf..a14cbad 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -31,6 +31,9 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-joiner": lazy(() =>
     import("../../../tools/image/image-joiner").then((module) => ({ default: module.ImageJoinerTool })),
   ),
+  "image-placeholder": lazy(() =>
+    import("../../../tools/image/image-placeholder").then((module) => ({ default: module.ImagePlaceholderTool })),
+  ),
   "image-splitter": lazy(() =>
     import("../../../tools/image/image-splitter").then((module) => ({ default: module.ImageSplitterTool })),
   ),
diff --git a/src/tools/image/image-placeholder/ImagePlaceholderTool.tsx b/src/tools/image/image-placeholder/ImagePlaceholderTool.tsx
new file mode 100644
index 0000000..ad1b94e
--- /dev/null
+++ b/src/tools/image/image-placeholder/ImagePlaceholderTool.tsx
@@ -0,0 +1,468 @@
+import { Download, Image as ImageIcon, Loader2, RotateCcw, Type } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import {
+  canExportBrowserImageFormat,
+  jpegQualityDecimalToPercent,
+  jpegQualityPercentToDecimal,
+} from "../../../shared/utils/imageFiles";
+import {
+  buildPlaceholderFileName,
+  defaultBackgroundColor,
+  defaultPlaceholderHeight,
+  defaultPlaceholderWidth,
+  defaultTextColor,
+  formatFileSize,
+  generatePlaceholderImage,
+  getDefaultPlaceholderText,
+  getImageFormatLabel,
+  getPlaceholderOutputBaseName,
+  normalizeHexColor,
+  validatePlaceholderDimensions,
+} from "./imagePlaceholder.service";
+import type {
+  ImagePlaceholderOutputFormat,
+  ImagePlaceholderResult,
+  ImagePlaceholderStatus,
+} from "./imagePlaceholder.types";
+
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+
+type DownloadableResult = ImagePlaceholderResult & {
+  url: string;
+};
+
+const baseOutputFormats: ImagePlaceholderOutputFormat[] = ["png", "jpeg"];
+
+const formatDescKeys: Record<ImagePlaceholderOutputFormat, TranslationKey> = {
+  png: "imageUi.png.desc",
+  jpeg: "imageUi.jpg.desc",
+  webp: "imageUi.webp.desc",
+};
+
+const copy = {
+  es: {
+    background: "Color de fondo",
+    dimensions: "Tamano",
+    downloadReady: "Placeholder listo",
+    height: "Alto",
+    outputIntro: "Todo se genera localmente en tu navegador.",
+    outputTitle: "Vista previa y salida",
+    placeholderAlt: "Vista previa del placeholder",
+    processing: "Generando placeholder...",
+    sourceIntro: "Genera una imagen placeholder para disenos, pruebas o desarrollo web.",
+    sourceTitle: "Configuracion",
+    text: "Texto",
+    textColor: "Color de texto",
+    textHelp: "Configura tamano, texto y colores.",
+    width: "Ancho",
+  },
+  en: {
+    background: "Background color",
+    dimensions: "Size",
+    downloadReady: "Placeholder ready",
+    height: "Height",
+    outputIntro: "Everything is generated locally in your browser.",
+    outputTitle: "Preview and output",
+    placeholderAlt: "Placeholder preview",
+    processing: "Generating placeholder...",
+    sourceIntro: "Generate a placeholder image for layouts, tests or web development.",
+    sourceTitle: "Settings",
+    text: "Text",
+    textColor: "Text color",
+    textHelp: "Configure size, text and colors.",
+    width: "Width",
+  },
+} as const;
+
+function parseNumberInput(value: string) {
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : Number.NaN;
+}
+
+export function ImagePlaceholderTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const resultUrlRef = useRef<string | null>(null);
+  const [widthInput, setWidthInput] = useState(String(defaultPlaceholderWidth));
+  const [heightInput, setHeightInput] = useState(String(defaultPlaceholderHeight));
+  const [textInput, setTextInput] = useState(getDefaultPlaceholderText(defaultPlaceholderWidth, defaultPlaceholderHeight));
+  const [hasCustomText, setHasCustomText] = useState(false);
+  const [backgroundColor, setBackgroundColor] = useState(defaultBackgroundColor);
+  const [textColor, setTextColor] = useState(defaultTextColor);
+  const [outputFormat, setOutputFormat] = useState<ImagePlaceholderOutputFormat>("png");
+  const [qualityPercent, setQualityPercent] = useState(jpegQualityDecimalToPercent(0.92));
+  const [outputFileName, setOutputFileName] = useState(getPlaceholderOutputBaseName(defaultPlaceholderWidth, defaultPlaceholderHeight));
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [webpSupported, setWebpSupported] = useState(false);
+  const [status, setStatus] = useState<ImagePlaceholderStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DownloadableResult | null>(null);
+
+  useEffect(() => {
+    setWebpSupported(canExportBrowserImageFormat("webp"));
+    return () => {
+      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
+    };
+  }, []);
+
+  const width = parseNumberInput(widthInput);
+  const height = parseNumberInput(heightInput);
+  const normalizedBackgroundColor = normalizeHexColor(backgroundColor, defaultBackgroundColor);
+  const normalizedTextColor = normalizeHexColor(textColor, defaultTextColor);
+  const dimensionError = validatePlaceholderDimensions(width, height);
+  const outputFormats = useMemo(
+    () => (webpSupported ? [...baseOutputFormats, "webp" as const] : baseOutputFormats),
+    [webpSupported],
+  );
+  const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
+  const fallbackBaseName = !dimensionError
+    ? getPlaceholderOutputBaseName(width, height)
+    : getPlaceholderOutputBaseName(defaultPlaceholderWidth, defaultPlaceholderHeight);
+  const finalOutputFileName = buildPlaceholderFileName(outputFileName, outputFormat, fallbackBaseName);
+  const canGenerate = !dimensionError && status !== "processing";
+
+  const clearResult = () => {
+    if (resultUrlRef.current) {
+      URL.revokeObjectURL(resultUrlRef.current);
+      resultUrlRef.current = null;
+    }
+    setResult(null);
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    clearResult();
+    if (status === "success" || status === "error") {
+      setStatus("idle");
+    }
+  };
+
+  const updateDimensions = (nextWidthInput: string, nextHeightInput: string) => {
+    const nextWidth = parseNumberInput(nextWidthInput);
+    const nextHeight = parseNumberInput(nextHeightInput);
+    if (Number.isInteger(nextWidth) && Number.isInteger(nextHeight) && nextWidth > 0 && nextHeight > 0) {
+      if (!hasCustomText) {
+        setTextInput(getDefaultPlaceholderText(nextWidth, nextHeight));
+      }
+
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getPlaceholderOutputBaseName(nextWidth, nextHeight));
+      }
+    }
+  };
+
+  const clearSettings = () => {
+    clearResult();
+    setWidthInput(String(defaultPlaceholderWidth));
+    setHeightInput(String(defaultPlaceholderHeight));
+    setTextInput(getDefaultPlaceholderText(defaultPlaceholderWidth, defaultPlaceholderHeight));
+    setHasCustomText(false);
+    setBackgroundColor(defaultBackgroundColor);
+    setTextColor(defaultTextColor);
+    setOutputFormat("png");
+    setQualityPercent(jpegQualityDecimalToPercent(0.92));
+    setOutputFileName(getPlaceholderOutputBaseName(defaultPlaceholderWidth, defaultPlaceholderHeight));
+    setHasCustomOutputFileName(false);
+    setStatus("idle");
+    setError(null);
+  };
+
+  const generateImage = async () => {
+    if (!canGenerate) return;
+    setStatus("processing");
+    setError(null);
+    clearResult();
+
+    try {
+      const nextResult = await generatePlaceholderImage({
+        backgroundColor: normalizedBackgroundColor,
+        height,
+        outputBaseName: outputFileName,
+        outputFormat,
+        quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
+        text: textInput,
+        textColor: normalizedTextColor,
+        width,
+      });
+      const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
+      resultUrlRef.current = resultUrl;
+      setResult({ ...nextResult, url: resultUrl });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo generar la imagen placeholder.");
+    }
+  };
+
+  const downloadResult = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.url;
+    link.download = result.fileName;
+    link.click();
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.86fr)_minmax(320px,0.62fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+          </div>
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.dimensions}</p>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.width}
+                <input
+                  className={inputClassName}
+                  inputMode="numeric"
+                  min={1}
+                  type="number"
+                  value={widthInput}
+                  onChange={(event) => {
+                    const nextValue = event.target.value;
+                    setWidthInput(nextValue);
+                    updateDimensions(nextValue, heightInput);
+                    resetFeedback();
+                  }}
+                />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.height}
+                <input
+                  className={inputClassName}
+                  inputMode="numeric"
+                  min={1}
+                  type="number"
+                  value={heightInput}
+                  onChange={(event) => {
+                    const nextValue = event.target.value;
+                    setHeightInput(nextValue);
+                    updateDimensions(widthInput, nextValue);
+                    resetFeedback();
+                  }}
+                />
+              </label>
+            </div>
+            {dimensionError ? (
+              <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+                {dimensionError}
+              </p>
+            ) : null}
+          </div>
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.textHelp}</p>
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {labels.text}
+              <input
+                className={inputClassName}
+                value={textInput}
+                onChange={(event) => {
+                  setTextInput(event.target.value);
+                  setHasCustomText(true);
+                  resetFeedback();
+                }}
+              />
+            </label>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.background}
+                <span className="flex min-h-11 items-center gap-2 rounded-lg border border-surface-200/90 bg-surface-50/95 px-2 shadow-sm">
+                  <input
+                    className="h-8 w-10 rounded border border-surface-200 bg-transparent"
+                    type="color"
+                    value={normalizedBackgroundColor}
+                    onChange={(event) => {
+                      setBackgroundColor(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                  <input
+                    className="min-w-0 flex-1 bg-transparent text-sm font-normal text-ink-900 outline-none"
+                    value={backgroundColor}
+                    onChange={(event) => {
+                      setBackgroundColor(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                </span>
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.textColor}
+                <span className="flex min-h-11 items-center gap-2 rounded-lg border border-surface-200/90 bg-surface-50/95 px-2 shadow-sm">
+                  <input
+                    className="h-8 w-10 rounded border border-surface-200 bg-transparent"
+                    type="color"
+                    value={normalizedTextColor}
+                    onChange={(event) => {
+                      setTextColor(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                  <input
+                    className="min-w-0 flex-1 bg-transparent text-sm font-normal text-ink-900 outline-none"
+                    value={textColor}
+                    onChange={(event) => {
+                      setTextColor(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                </span>
+              </label>
+            </div>
+          </div>
+
+          {status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {labels.processing}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.outputIntro}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+            {!dimensionError ? (
+              <div
+                aria-label={labels.placeholderAlt}
+                className="grid w-full max-w-md place-items-center overflow-hidden rounded-lg border border-surface-200/80 px-5 py-4 text-center shadow-sm"
+                style={{
+                  aspectRatio: `${width} / ${height}`,
+                  backgroundColor: normalizedBackgroundColor,
+                  color: normalizedTextColor,
+                }}
+              >
+                <span className="max-w-full break-words text-lg font-bold sm:text-2xl">{textInput}</span>
+              </div>
+            ) : (
+              <div className="text-center text-sm text-ink-500">
+                <ImageIcon className="mx-auto text-accent-teal" size={32} />
+                <p className="mt-2 font-semibold text-ink-700">-</p>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 text-sm shadow-sm">
+            <p className="text-ink-500">{t("imageUi.finalDimensions")}</p>
+            <p className="mt-1 font-semibold text-ink-900">{dimensionError ? "-" : `${width} x ${height}px`}</p>
+          </div>
+
+          <div className="grid gap-2">
+            {outputFormats.map((format) => (
+              <button
+                key={format}
+                type="button"
+                className={cn(
+                  "rounded-md border p-3 text-left transition",
+                  outputFormat === format
+                    ? "border-accent-cyan/45 bg-accent-cyan/10"
+                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                )}
+                onClick={() => {
+                  setOutputFormat(format);
+                  resetFeedback();
+                }}
+              >
+                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
+                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
+              </button>
+            ))}
+          </div>
+
+          {shouldShowQuality ? (
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+              <input
+                className="w-full accent-accent-cyan"
+                min={10}
+                max={100}
+                step={1}
+                type="range"
+                value={qualityPercent}
+                onChange={(event) => {
+                  setQualityPercent(Number(event.target.value));
+                  resetFeedback();
+                }}
+              />
+              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
+            </label>
+          ) : null}
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {t("imageUi.outputName")}
+            <input
+              className={cn(inputClassName, "w-full")}
+              value={outputFileName}
+              placeholder={fallbackBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+            <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
+          </label>
+
+          {result ? (
+            <div className="grid gap-3 rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{labels.downloadReady}</p>
+              <dl className="grid gap-2 sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalDimensions")}</dt>
+                  <dd className="font-semibold text-ink-900">
+                    {result.width} x {result.height}px
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalFormat")}</dt>
+                  <dd className="font-semibold text-ink-900">{getImageFormatLabel(result.format)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(result.size)}</dd>
+                </div>
+              </dl>
+              <Button type="button" variant="secondary" className="gap-2" onClick={downloadResult}>
+                <Download size={16} />
+                {t("imageUi.downloadImage")}
+              </Button>
+            </div>
+          ) : null}
+
+          <div className="grid gap-2 pt-1">
+            <Button type="button" className="gap-2" onClick={() => void generateImage()} disabled={!canGenerate}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <Type size={16} />}
+              {language === "en" ? "Generate image" : "Generar imagen"}
+            </Button>
+            <Button type="button" variant="ghost" className="gap-2" onClick={clearSettings}>
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-placeholder/README.md b/src/tools/image/image-placeholder/README.md
new file mode 100644
index 0000000..e41ad9e
--- /dev/null
+++ b/src/tools/image/image-placeholder/README.md
@@ -0,0 +1,17 @@
+# Generar imagen placeholder
+
+Herramienta local para generar una imagen placeholder simple para disenos, pruebas o desarrollo web.
+
+## Comportamiento
+
+- Configura ancho, alto, texto opcional, color de fondo y color de texto.
+- Actualiza el texto por defecto cuando cambian las dimensiones, salvo que el usuario haya escrito texto personalizado.
+- Exporta PNG, JPG o WebP si el navegador lo soporta.
+- Usa canvas y descarga la imagen generada localmente.
+- No usa backend ni dependencias nuevas.
+
+## Limites
+
+- Maximo 8000 px por lado.
+- Maximo 64 megapixeles.
+- No es un editor avanzado: genera una composicion simple con texto centrado.
diff --git a/src/tools/image/image-placeholder/imagePlaceholder.service.test.ts b/src/tools/image/image-placeholder/imagePlaceholder.service.test.ts
new file mode 100644
index 0000000..b3455a8
--- /dev/null
+++ b/src/tools/image/image-placeholder/imagePlaceholder.service.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildPlaceholderFileName,
+  getDefaultPlaceholderText,
+  getPlaceholderOutputBaseName,
+  normalizeHexColor,
+  validatePlaceholderDimensions,
+} from "./imagePlaceholder.service";
+
+describe("imagePlaceholder.service", () => {
+  it("validates dimensions", () => {
+    expect(validatePlaceholderDimensions(800, 400)).toBeNull();
+    expect(validatePlaceholderDimensions(0, 400)).toMatch(/mayores que cero/);
+    expect(validatePlaceholderDimensions(800, -1)).toMatch(/mayores que cero/);
+    expect(validatePlaceholderDimensions(Number.NaN, 400)).toMatch(/validos/);
+  });
+
+  it("generates default text from dimensions", () => {
+    expect(getDefaultPlaceholderText(800, 400)).toBe("800 x 400");
+    expect(getDefaultPlaceholderText(1200, 630)).toBe("1200 x 630");
+  });
+
+  it("builds output file names", () => {
+    expect(getPlaceholderOutputBaseName(800, 400)).toBe("placeholder-800x400");
+    expect(buildPlaceholderFileName("placeholder-800x400", "png")).toBe("placeholder-800x400.png");
+    expect(buildPlaceholderFileName("placeholder-800x400", "jpeg")).toBe("placeholder-800x400.jpg");
+    expect(buildPlaceholderFileName("placeholder-800x400", "webp")).toBe("placeholder-800x400.webp");
+  });
+
+  it("normalizes hex colors", () => {
+    expect(normalizeHexColor("#abc", "#000000")).toBe("#AABBCC");
+    expect(normalizeHexColor("1a2b3c", "#000000")).toBe("#1A2B3C");
+    expect(normalizeHexColor("not-a-color", "#000000")).toBe("#000000");
+  });
+
+  it("enforces side and pixel limits", () => {
+    expect(validatePlaceholderDimensions(8001, 400)).toMatch(/8000px/);
+    expect(validatePlaceholderDimensions(8000, 8000)).toBeNull();
+  });
+});
diff --git a/src/tools/image/image-placeholder/imagePlaceholder.service.ts b/src/tools/image/image-placeholder/imagePlaceholder.service.ts
new file mode 100644
index 0000000..4c97596
--- /dev/null
+++ b/src/tools/image/image-placeholder/imagePlaceholder.service.ts
@@ -0,0 +1,188 @@
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  buildBrowserImageDownloadFileName,
+  canExportBrowserImageFormat,
+  exportBrowserCanvas,
+  getBrowserImageOutputMimeType,
+} from "../../../shared/utils/imageFiles";
+import type {
+  ImagePlaceholderOptions,
+  ImagePlaceholderOutputFormat,
+  ImagePlaceholderResult,
+} from "./imagePlaceholder.types";
+
+export const defaultPlaceholderWidth = 800;
+export const defaultPlaceholderHeight = 400;
+export const defaultBackgroundColor = "#E5E7EB";
+export const defaultTextColor = "#374151";
+export const maxPlaceholderSide = 8000;
+export const maxPlaceholderPixels = 64_000_000;
+
+export { formatFileSize };
+
+export function getDefaultPlaceholderText(width: number, height: number) {
+  return `${width} x ${height}`;
+}
+
+export function getPlaceholderOutputBaseName(width: number, height: number) {
+  return `placeholder-${width}x${height}`;
+}
+
+export function buildPlaceholderFileName(
+  baseName: string,
+  outputFormat: ImagePlaceholderOutputFormat,
+  fallbackBaseName = getPlaceholderOutputBaseName(defaultPlaceholderWidth, defaultPlaceholderHeight),
+) {
+  return buildBrowserImageDownloadFileName(baseName, outputFormat, fallbackBaseName);
+}
+
+export function getImageFormatLabel(format: ImagePlaceholderOutputFormat) {
+  if (format === "jpeg") {
+    return "JPG";
+  }
+
+  if (format === "webp") {
+    return "WebP";
+  }
+
+  return "PNG";
+}
+
+export function normalizeHexColor(value: string, fallback: string) {
+  const trimmedValue = value.trim();
+  const shortMatch = trimmedValue.match(/^#?([0-9a-f]{3})$/i);
+
+  if (shortMatch) {
+    return `#${shortMatch[1]
+      .split("")
+      .map((character) => `${character}${character}`)
+      .join("")
+      .toUpperCase()}`;
+  }
+
+  const fullMatch = trimmedValue.match(/^#?([0-9a-f]{6})$/i);
+  if (fullMatch) {
+    return `#${fullMatch[1].toUpperCase()}`;
+  }
+
+  return fallback;
+}
+
+export function validatePlaceholderDimensions(width: number, height: number) {
+  if (!Number.isFinite(width) || !Number.isFinite(height)) {
+    return "El ancho y el alto deben ser numeros validos.";
+  }
+
+  if (!Number.isInteger(width) || !Number.isInteger(height)) {
+    return "El ancho y el alto deben ser numeros enteros.";
+  }
+
+  if (width <= 0 || height <= 0) {
+    return "El ancho y el alto deben ser mayores que cero.";
+  }
+
+  if (width > maxPlaceholderSide || height > maxPlaceholderSide) {
+    return `El ancho y el alto no pueden superar ${maxPlaceholderSide}px.`;
+  }
+
+  if (width * height > maxPlaceholderPixels) {
+    return "La imagen supera el limite de 64 megapixeles.";
+  }
+
+  return null;
+}
+
+export function validatePlaceholderOptions({ backgroundColor, height, textColor, width }: ImagePlaceholderOptions) {
+  const dimensionError = validatePlaceholderDimensions(width, height);
+  if (dimensionError) return dimensionError;
+
+  if (normalizeHexColor(backgroundColor, "") === "") {
+    return "El color de fondo debe ser hexadecimal.";
+  }
+
+  if (normalizeHexColor(textColor, "") === "") {
+    return "El color de texto debe ser hexadecimal.";
+  }
+
+  return null;
+}
+
+function fitFontSize(context: CanvasRenderingContext2D, text: string, width: number, height: number) {
+  if (!text.trim()) {
+    return 0;
+  }
+
+  const maxFontSize = Math.max(12, Math.floor(Math.min(width, height) / 5));
+  const minFontSize = 10;
+  const maxTextWidth = Math.max(1, width * 0.82);
+
+  for (let fontSize = maxFontSize; fontSize >= minFontSize; fontSize -= 1) {
+    context.font = `700 ${fontSize}px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+    if (context.measureText(text).width <= maxTextWidth) {
+      return fontSize;
+    }
+  }
+
+  return minFontSize;
+}
+
+function drawPlaceholder(canvas: HTMLCanvasElement, options: ImagePlaceholderOptions) {
+  const context = canvas.getContext("2d");
+
+  if (!context) {
+    throw new Error("No se pudo preparar la imagen placeholder.");
+  }
+
+  const backgroundColor = normalizeHexColor(options.backgroundColor, defaultBackgroundColor);
+  const textColor = normalizeHexColor(options.textColor, defaultTextColor);
+  canvas.width = options.width;
+  canvas.height = options.height;
+
+  context.fillStyle = backgroundColor;
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  const text = options.text.trim();
+  if (!text) return;
+
+  const fontSize = fitFontSize(context, text, canvas.width, canvas.height);
+  context.font = `700 ${fontSize}px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+  context.fillStyle = textColor;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillText(text, canvas.width / 2, canvas.height / 2);
+}
+
+export async function generatePlaceholderImage(options: ImagePlaceholderOptions): Promise<ImagePlaceholderResult> {
+  const validationError = validatePlaceholderOptions(options);
+  if (validationError) {
+    throw new Error(validationError);
+  }
+
+  if (!canExportBrowserImageFormat(options.outputFormat)) {
+    throw new Error(`Este navegador no permite exportar imagenes como ${getImageFormatLabel(options.outputFormat)}.`);
+  }
+
+  const canvas = document.createElement("canvas");
+  drawPlaceholder(canvas, options);
+
+  const mimeType = getBrowserImageOutputMimeType(options.outputFormat);
+  const result = await exportBrowserCanvas(canvas, {
+    errorMessage: "No se pudo exportar la imagen placeholder.",
+    mimeType,
+    quality: options.quality,
+  });
+
+  return {
+    bytes: result.bytes,
+    fileName: buildPlaceholderFileName(
+      options.outputBaseName,
+      options.outputFormat,
+      getPlaceholderOutputBaseName(options.width, options.height),
+    ),
+    format: options.outputFormat,
+    height: result.height,
+    mimeType,
+    size: result.size,
+    width: result.width,
+  };
+}
diff --git a/src/tools/image/image-placeholder/imagePlaceholder.types.ts b/src/tools/image/image-placeholder/imagePlaceholder.types.ts
new file mode 100644
index 0000000..2e24cca
--- /dev/null
+++ b/src/tools/image/image-placeholder/imagePlaceholder.types.ts
@@ -0,0 +1,26 @@
+import type { BrowserImageOutputFormat } from "../../../shared/utils/imageFiles";
+
+export type ImagePlaceholderOutputFormat = BrowserImageOutputFormat;
+
+export type ImagePlaceholderOptions = {
+  backgroundColor: string;
+  height: number;
+  outputBaseName: string;
+  outputFormat: ImagePlaceholderOutputFormat;
+  quality?: number;
+  text: string;
+  textColor: string;
+  width: number;
+};
+
+export type ImagePlaceholderResult = {
+  bytes: ArrayBuffer;
+  fileName: string;
+  format: ImagePlaceholderOutputFormat;
+  height: number;
+  mimeType: string;
+  size: number;
+  width: number;
+};
+
+export type ImagePlaceholderStatus = "idle" | "processing" | "success" | "error";
diff --git a/src/tools/image/image-placeholder/index.ts b/src/tools/image/image-placeholder/index.ts
new file mode 100644
index 0000000..8bd4325
--- /dev/null
+++ b/src/tools/image/image-placeholder/index.ts
@@ -0,0 +1 @@
+export { ImagePlaceholderTool } from "./ImagePlaceholderTool";

From fb37b3b9d558bb66c7419f4a0955fc2311ad130d Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Sat, 6 Jun 2026 04:22:53 -0300
Subject: [PATCH 08/10] feat(image): add image watermark tool

---
 src/features/tools/data/tools.ts              | 106 +++
 .../tools/renderers/toolRenderers.tsx         |   3 +
 .../image-watermark/ImageWatermarkTool.tsx    | 676 ++++++++++++++++++
 src/tools/image/image-watermark/README.md     |  16 +
 .../imageWatermark.service.test.ts            |  65 ++
 .../image-watermark/imageWatermark.service.ts | 305 ++++++++
 .../image-watermark/imageWatermark.types.ts   |  54 ++
 src/tools/image/image-watermark/index.ts      |   1 +
 8 files changed, 1226 insertions(+)
 create mode 100644 src/tools/image/image-watermark/ImageWatermarkTool.tsx
 create mode 100644 src/tools/image/image-watermark/README.md
 create mode 100644 src/tools/image/image-watermark/imageWatermark.service.test.ts
 create mode 100644 src/tools/image/image-watermark/imageWatermark.service.ts
 create mode 100644 src/tools/image/image-watermark/imageWatermark.types.ts
 create mode 100644 src/tools/image/image-watermark/index.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index 8188a16..cb7f748 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -1296,6 +1296,112 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "image-watermark",
+    slug: "agregar-marca-agua-imagen",
+    slugEn: "add-image-watermark",
+    name: { es: "Agregar marca de agua", en: "Add image watermark" },
+    description: {
+      es: "Agrega una marca de agua de texto sobre una imagen.",
+      en: "Add a text watermark over an image.",
+    },
+    category: "image",
+    tags: {
+      es: ["imagen", "marca de agua", "texto", "png", "jpg", "webp"],
+      en: ["image", "watermark", "text", "png", "jpg", "webp"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Agregar marca de agua a imagen online gratis",
+        description:
+          "Agrega una marca de agua de texto a una imagen PNG, JPG o WebP. Configura texto, posicion, color y opacidad desde tu navegador.",
+      },
+      en: {
+        title: "Add image watermark online free",
+        description:
+          "Add a text watermark to a PNG, JPG or WebP image. Configure text, position, color and opacity from your browser.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Agregar marca de agua permite superponer texto sobre una imagen local y exportar el resultado desde el navegador.",
+        howTo: [
+          "Selecciona una imagen PNG, JPG/JPEG o WebP.",
+          "Revisa nombre, tipo, peso y dimensiones originales.",
+          "Escribe el texto de la marca de agua.",
+          "Configura tamano de fuente, color, opacidad, posicion y margen.",
+          "Elige PNG, JPG o WebP si el navegador lo permite.",
+          "Agrega la marca y descarga la imagen.",
+        ],
+        useCases: [
+          "Agregar una firma o nombre a una imagen.",
+          "Marcar capturas o recursos visuales de trabajo.",
+          "Preparar una imagen con texto sobrepuesto sin subirla a un servidor.",
+        ],
+        limits: [
+          "JPG no conserva transparencia.",
+          "WebP aparece si tu navegador permite exportarlo correctamente.",
+          "No promete proteccion real contra copia o uso no autorizado.",
+          "No incluye marca de agua con otra imagen ni drag visual.",
+        ],
+        privacy:
+          "El procesamiento de esta imagen ocurre en tu navegador; no la subimos a Modulaq para agregar la marca.",
+        commonErrors: [
+          "Archivo que no es una imagen PNG, JPG o WebP.",
+          "Texto vacio para la marca de agua.",
+          "Valores invalidos de opacidad, tamano de fuente o margen.",
+        ],
+        technicalNotes: [
+          "La exportacion usa canvas en el navegador.",
+          "La marca se dibuja con texto, globalAlpha y posicion calculada.",
+          "La calidad aplica a JPG y WebP, no a PNG.",
+        ],
+      },
+      en: {
+        summary:
+          "Add image watermark overlays text on a local image and exports the result from the browser.",
+        howTo: [
+          "Select a PNG, JPG/JPEG or WebP image.",
+          "Review the original name, type, size and dimensions.",
+          "Enter the watermark text.",
+          "Configure font size, color, opacity, position and margin.",
+          "Choose PNG, JPG or WebP if the browser supports it.",
+          "Add the watermark and download the image.",
+        ],
+        useCases: [
+          "Add a signature or name to an image.",
+          "Mark screenshots or work visuals.",
+          "Prepare an image with overlaid text without uploading it to a server.",
+        ],
+        limits: [
+          "JPG does not preserve transparency.",
+          "WebP appears if your browser can export it correctly.",
+          "It does not promise real protection against copying or unauthorized use.",
+          "It does not include image watermarks or visual drag editing.",
+        ],
+        privacy:
+          "Processing happens in your browser; we don't upload this image to Modulaq to add the watermark.",
+        commonErrors: [
+          "A file that is not PNG, JPG or WebP.",
+          "Empty watermark text.",
+          "Invalid opacity, font size or margin values.",
+        ],
+        technicalNotes: [
+          "Export uses browser canvas.",
+          "The watermark is drawn with text, globalAlpha and calculated position.",
+          "Quality applies to JPG and WebP, not PNG.",
+        ],
+      },
+    },
+  },
   {
     id: "image-compressor",
     slug: "comprimir-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index a14cbad..a5615c1 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -37,6 +37,9 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-splitter": lazy(() =>
     import("../../../tools/image/image-splitter").then((module) => ({ default: module.ImageSplitterTool })),
   ),
+  "image-watermark": lazy(() =>
+    import("../../../tools/image/image-watermark").then((module) => ({ default: module.ImageWatermarkTool })),
+  ),
   "image-rotator": lazy(() =>
     import("../../../tools/image/image-rotator").then((module) => ({ default: module.ImageRotatorTool })),
   ),
diff --git a/src/tools/image/image-watermark/ImageWatermarkTool.tsx b/src/tools/image/image-watermark/ImageWatermarkTool.tsx
new file mode 100644
index 0000000..9244e4b
--- /dev/null
+++ b/src/tools/image/image-watermark/ImageWatermarkTool.tsx
@@ -0,0 +1,676 @@
+import { Download, FileImage, Loader2, RotateCcw, Stamp, Upload } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import { getImageFileSizeLimitError } from "../../../shared/utils/fileProcessingLimits";
+import {
+  canExportBrowserImageFormat,
+  jpegQualityDecimalToPercent,
+  jpegQualityPercentToDecimal,
+} from "../../../shared/utils/imageFiles";
+import {
+  addImageWatermark,
+  buildWatermarkedImageFileName,
+  calculateWatermarkPosition,
+  defaultOutputBaseName,
+  defaultWatermarkColor,
+  defaultWatermarkFontSize,
+  defaultWatermarkMargin,
+  defaultWatermarkOpacity,
+  defaultWatermarkText,
+  formatFileSize,
+  getImageFormatLabel,
+  getImageMimeLabel,
+  getWatermarkedImageOutputBaseName,
+  normalizeHexColor,
+  readImageMetadata,
+  validateWatermarkFontSize,
+  validateWatermarkMargin,
+  validateWatermarkOpacity,
+} from "./imageWatermark.service";
+import type {
+  ImageWatermarkMetadata,
+  ImageWatermarkOutputFormat,
+  ImageWatermarkPosition,
+  ImageWatermarkResult,
+  ImageWatermarkStatus,
+} from "./imageWatermark.types";
+
+const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+
+type DownloadableResult = ImageWatermarkResult & {
+  url: string;
+};
+
+const baseOutputFormats: ImageWatermarkOutputFormat[] = ["png", "jpeg"];
+
+const formatDescKeys: Record<ImageWatermarkOutputFormat, TranslationKey> = {
+  png: "imageUi.png.desc",
+  jpeg: "imageUi.jpg.desc",
+  webp: "imageUi.webp.desc",
+};
+
+const positionOptions: ImageWatermarkPosition[] = [
+  "top-left",
+  "top-right",
+  "center",
+  "bottom-left",
+  "bottom-right",
+];
+
+const copy = {
+  es: {
+    bottomLeft: "Abajo izquierda",
+    bottomRight: "Abajo derecha",
+    center: "Centro",
+    color: "Color",
+    downloadReady: "Imagen con marca lista",
+    fontSize: "Tamano de fuente",
+    jpgTransparency: "JPG no conserva transparencia.",
+    margin: "Margen",
+    opacity: "Opacidad",
+    outputIntro: "Todo se procesa localmente en tu navegador.",
+    outputTitle: "Vista previa y salida",
+    position: "Posicion",
+    previewAlt: "Vista previa de marca de agua",
+    processing: "Agregando marca de agua...",
+    sourceIntro: "Agrega una marca de agua de texto sobre una imagen.",
+    sourceTitle: "Imagen y marca",
+    text: "Texto",
+    textHelp: "Configura texto, posicion, color y opacidad.",
+    topLeft: "Arriba izquierda",
+    topRight: "Arriba derecha",
+  },
+  en: {
+    bottomLeft: "Bottom left",
+    bottomRight: "Bottom right",
+    center: "Center",
+    color: "Color",
+    downloadReady: "Watermarked image ready",
+    fontSize: "Font size",
+    jpgTransparency: "JPG does not preserve transparency.",
+    margin: "Margin",
+    opacity: "Opacity",
+    outputIntro: "Everything is processed locally in your browser.",
+    outputTitle: "Preview and output",
+    position: "Position",
+    previewAlt: "Watermark preview",
+    processing: "Adding watermark...",
+    sourceIntro: "Add a text watermark over an image.",
+    sourceTitle: "Image and watermark",
+    text: "Text",
+    textHelp: "Configure text, position, color and opacity.",
+    topLeft: "Top left",
+    topRight: "Top right",
+  },
+} as const;
+
+const positionLabelKeys: Record<ImageWatermarkPosition, keyof typeof copy.es> = {
+  "top-left": "topLeft",
+  "top-right": "topRight",
+  center: "center",
+  "bottom-left": "bottomLeft",
+  "bottom-right": "bottomRight",
+};
+
+function parseNumberInput(value: string) {
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : Number.NaN;
+}
+
+function getPreviewTextDimensions(text: string, fontSize: number) {
+  return {
+    height: fontSize,
+    width: Math.max(fontSize, Math.round(text.length * fontSize * 0.58)),
+  };
+}
+
+function getPreviewWatermarkStyle(
+  metadata: ImageWatermarkMetadata,
+  text: string,
+  fontSize: number,
+  position: ImageWatermarkPosition,
+  margin: number,
+) {
+  const textDimensions = getPreviewTextDimensions(text, fontSize);
+  const coordinates = calculateWatermarkPosition(metadata, textDimensions, position, margin);
+
+  return {
+    fontSize: `${(fontSize / metadata.height) * 100}%`,
+    left: `${(coordinates.x / metadata.width) * 100}%`,
+    lineHeight: 1,
+    top: `${(coordinates.y / metadata.height) * 100}%`,
+  };
+}
+
+export function ImageWatermarkTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const resultUrlRef = useRef<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [metadata, setMetadata] = useState<ImageWatermarkMetadata | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [text, setText] = useState(defaultWatermarkText);
+  const [fontSizeInput, setFontSizeInput] = useState(String(defaultWatermarkFontSize));
+  const [color, setColor] = useState(defaultWatermarkColor);
+  const [opacityPercent, setOpacityPercent] = useState(Math.round(defaultWatermarkOpacity * 100));
+  const [position, setPosition] = useState<ImageWatermarkPosition>("bottom-right");
+  const [marginInput, setMarginInput] = useState(String(defaultWatermarkMargin));
+  const [outputFormat, setOutputFormat] = useState<ImageWatermarkOutputFormat>("png");
+  const [qualityPercent, setQualityPercent] = useState(jpegQualityDecimalToPercent(0.92));
+  const [outputFileName, setOutputFileName] = useState(defaultOutputBaseName);
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [webpSupported, setWebpSupported] = useState(false);
+  const [status, setStatus] = useState<ImageWatermarkStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DownloadableResult | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    setWebpSupported(canExportBrowserImageFormat("webp"));
+    return () => {
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
+    };
+  }, []);
+
+  const outputFormats = useMemo(
+    () => (webpSupported ? [...baseOutputFormats, "webp" as const] : baseOutputFormats),
+    [webpSupported],
+  );
+  const fontSize = parseNumberInput(fontSizeInput);
+  const margin = parseNumberInput(marginInput);
+  const opacity = opacityPercent / 100;
+  const normalizedColor = normalizeHexColor(color);
+  const fontSizeError = validateWatermarkFontSize(fontSize);
+  const marginError = validateWatermarkMargin(margin);
+  const opacityError = validateWatermarkOpacity(opacity);
+  const textError = text.trim() ? null : language === "en" ? "Enter watermark text." : "Ingresa un texto para la marca de agua.";
+  const watermarkError = textError ?? fontSizeError ?? marginError ?? opacityError;
+  const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
+  const fallbackBaseName = metadata ? getWatermarkedImageOutputBaseName(metadata.fileName) : defaultOutputBaseName;
+  const finalOutputFileName = buildWatermarkedImageFileName(outputFileName, outputFormat, fallbackBaseName);
+  const canApply = Boolean(file && metadata) && !watermarkError && status !== "reading" && status !== "processing";
+
+  const clearResult = () => {
+    if (resultUrlRef.current) {
+      URL.revokeObjectURL(resultUrlRef.current);
+      resultUrlRef.current = null;
+    }
+    setResult(null);
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    clearResult();
+    if (status === "success" || status === "error") {
+      setStatus(metadata ? "ready" : "idle");
+    }
+  };
+
+  const processFile = async (nextFile: File | undefined) => {
+    if (!nextFile) return;
+    setStatus("reading");
+    setFile(null);
+    setMetadata(null);
+    setError(null);
+    clearResult();
+
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+      setPreviewUrl(null);
+    }
+
+    const fileLimitError = getImageFileSizeLimitError(nextFile);
+    if (fileLimitError) {
+      setStatus("error");
+      setError(fileLimitError);
+      return;
+    }
+
+    try {
+      const nextMetadata = await readImageMetadata(nextFile);
+      const nextPreviewUrl = URL.createObjectURL(nextFile);
+      previewUrlRef.current = nextPreviewUrl;
+      setPreviewUrl(nextPreviewUrl);
+      setFile(nextFile);
+      setMetadata(nextMetadata);
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getWatermarkedImageOutputBaseName(nextFile.name));
+      }
+      setStatus("ready");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : t("imageUi.couldNotRead"));
+    }
+  };
+
+  const clearSelection = () => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    clearResult();
+    setFile(null);
+    setMetadata(null);
+    setPreviewUrl(null);
+    setText(defaultWatermarkText);
+    setFontSizeInput(String(defaultWatermarkFontSize));
+    setColor(defaultWatermarkColor);
+    setOpacityPercent(Math.round(defaultWatermarkOpacity * 100));
+    setPosition("bottom-right");
+    setMarginInput(String(defaultWatermarkMargin));
+    setOutputFormat("png");
+    setQualityPercent(jpegQualityDecimalToPercent(0.92));
+    setOutputFileName(defaultOutputBaseName);
+    setHasCustomOutputFileName(false);
+    setStatus("idle");
+    setError(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const applyWatermark = async () => {
+    if (!file || !canApply) return;
+    setStatus("processing");
+    setError(null);
+    clearResult();
+
+    try {
+      const nextResult = await addImageWatermark(file, {
+        color: normalizedColor,
+        fontSize,
+        margin,
+        opacity,
+        outputBaseName: outputFileName,
+        outputFormat,
+        position,
+        quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
+        text,
+      });
+      const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
+      resultUrlRef.current = resultUrl;
+      setResult({ ...nextResult, url: resultUrl });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo agregar la marca de agua.");
+    }
+  };
+
+  const downloadResult = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.url;
+    link.download = result.fileName;
+    link.click();
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.96fr)_minmax(310px,0.52fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-52 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFile(event.dataTransfer.files[0]);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={26} />
+              </span>
+              <span className="mt-4 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
+            </span>
+          </button>
+          <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
+          {metadata ? (
+            <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
+              {previewUrl ? (
+                <img
+                  src={previewUrl}
+                  alt=""
+                  className="h-28 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-32"
+                />
+              ) : (
+                <span className="grid h-28 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal sm:w-32">
+                  <FileImage size={28} />
+                </span>
+              )}
+              <dl className="grid min-w-0 gap-2 text-sm">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                  <dd className="truncate font-semibold text-ink-900">{metadata.fileName}</dd>
+                </div>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                    <dd className="font-semibold text-ink-900">{getImageMimeLabel(metadata.mimeType)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                    <dd className="font-semibold text-ink-900">{formatFileSize(metadata.fileSize)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                    <dd className="font-semibold text-ink-900">
+                      {metadata.width} x {metadata.height}px
+                    </dd>
+                  </div>
+                </div>
+              </dl>
+            </div>
+          ) : null}
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.textHelp}</p>
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {labels.text}
+              <input
+                className={inputClassName}
+                value={text}
+                onChange={(event) => {
+                  setText(event.target.value);
+                  resetFeedback();
+                }}
+              />
+            </label>
+            <div className="grid gap-3 sm:grid-cols-3">
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.fontSize}
+                <input
+                  className={inputClassName}
+                  inputMode="numeric"
+                  min={8}
+                  type="number"
+                  value={fontSizeInput}
+                  onChange={(event) => {
+                    setFontSizeInput(event.target.value);
+                    resetFeedback();
+                  }}
+                />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.margin}
+                <input
+                  className={inputClassName}
+                  inputMode="numeric"
+                  min={0}
+                  type="number"
+                  value={marginInput}
+                  onChange={(event) => {
+                    setMarginInput(event.target.value);
+                    resetFeedback();
+                  }}
+                />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.opacity}: {opacityPercent}%
+                <input
+                  className="h-11 w-full accent-accent-cyan"
+                  min={10}
+                  max={100}
+                  step={1}
+                  type="range"
+                  value={opacityPercent}
+                  onChange={(event) => {
+                    setOpacityPercent(Number(event.target.value));
+                    resetFeedback();
+                  }}
+                />
+              </label>
+            </div>
+
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {labels.color}
+              <span className="flex min-h-11 items-center gap-2 rounded-lg border border-surface-200/90 bg-surface-50/95 px-2 shadow-sm">
+                <input
+                  className="h-8 w-10 rounded border border-surface-200 bg-transparent"
+                  type="color"
+                  value={normalizedColor}
+                  onChange={(event) => {
+                    setColor(event.target.value);
+                    resetFeedback();
+                  }}
+                />
+                <input
+                  className="min-w-0 flex-1 bg-transparent text-sm font-normal text-ink-900 outline-none"
+                  value={color}
+                  onChange={(event) => {
+                    setColor(event.target.value);
+                    resetFeedback();
+                  }}
+                />
+              </span>
+            </label>
+
+            <div className="grid gap-2 sm:grid-cols-2">
+              {positionOptions.map((nextPosition) => (
+                <button
+                  key={nextPosition}
+                  type="button"
+                  className={cn(
+                    "rounded-md border px-3 py-2 text-sm font-semibold transition",
+                    position === nextPosition
+                      ? "border-accent-cyan/45 bg-accent-cyan/10 text-ink-900"
+                      : "border-surface-200/80 bg-surface-50/90 text-ink-700 hover:border-accent-cyan/35",
+                  )}
+                  onClick={() => {
+                    setPosition(nextPosition);
+                    resetFeedback();
+                  }}
+                >
+                  {labels[positionLabelKeys[nextPosition]]}
+                </button>
+              ))}
+            </div>
+
+            {watermarkError ? (
+              <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+                {watermarkError}
+              </p>
+            ) : null}
+          </div>
+
+          {status === "reading" || status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {status === "processing" ? labels.processing : t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.outputIntro}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+            {previewUrl && metadata ? (
+              <div
+                className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50 shadow-sm"
+                style={{ aspectRatio: `${metadata.width} / ${metadata.height}` }}
+              >
+                <img alt={labels.previewAlt} className="h-full w-full object-fill" src={previewUrl} />
+                {text.trim() && !watermarkError ? (
+                  <span
+                    className="pointer-events-none absolute whitespace-nowrap font-bold leading-none"
+                    style={{
+                      ...getPreviewWatermarkStyle(metadata, text, fontSize, position, margin),
+                      color: normalizedColor,
+                      opacity,
+                    }}
+                  >
+                    {text}
+                  </span>
+                ) : null}
+              </div>
+            ) : (
+              <div className="text-center text-sm text-ink-500">
+                <Stamp className="mx-auto text-accent-teal" size={32} />
+                <p className="mt-2 font-semibold text-ink-700">{t("imageUi.selectImage")}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="grid gap-2">
+            {outputFormats.map((format) => (
+              <button
+                key={format}
+                type="button"
+                className={cn(
+                  "rounded-md border p-3 text-left transition",
+                  outputFormat === format
+                    ? "border-accent-cyan/45 bg-accent-cyan/10"
+                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                )}
+                onClick={() => {
+                  setOutputFormat(format);
+                  resetFeedback();
+                }}
+              >
+                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
+                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
+              </button>
+            ))}
+          </div>
+
+          <p className="text-xs leading-5 text-ink-500">{language === "en" ? "WebP appears if your browser can export it correctly." : "WebP aparece si tu navegador permite exportarlo correctamente."}</p>
+
+          {shouldShowQuality ? (
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+              <input
+                className="w-full accent-accent-cyan"
+                min={10}
+                max={100}
+                step={1}
+                type="range"
+                value={qualityPercent}
+                onChange={(event) => {
+                  setQualityPercent(Number(event.target.value));
+                  resetFeedback();
+                }}
+              />
+              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
+            </label>
+          ) : null}
+
+          {outputFormat === "jpeg" ? (
+            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {labels.jpgTransparency}
+            </p>
+          ) : null}
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {t("imageUi.outputName")}
+            <input
+              className={cn(inputClassName, "w-full")}
+              value={outputFileName}
+              placeholder={fallbackBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+            <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
+          </label>
+
+          {result ? (
+            <div className="grid gap-3 rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{labels.downloadReady}</p>
+              <dl className="grid gap-2 sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalDimensions")}</dt>
+                  <dd className="font-semibold text-ink-900">
+                    {result.width} x {result.height}px
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalFormat")}</dt>
+                  <dd className="font-semibold text-ink-900">{getImageFormatLabel(result.format)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(result.size)}</dd>
+                </div>
+              </dl>
+              <Button type="button" variant="secondary" className="gap-2" onClick={downloadResult}>
+                <Download size={16} />
+                {t("imageUi.downloadImage")}
+              </Button>
+            </div>
+          ) : null}
+
+          <div className="grid gap-2 pt-1">
+            <Button type="button" className="gap-2" onClick={() => void applyWatermark()} disabled={!canApply}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <Stamp size={16} />}
+              {language === "en" ? "Add watermark" : "Agregar marca de agua"}
+            </Button>
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => fileInputRef.current?.click()}>
+              <Upload size={16} />
+              {t("imageUi.selectImage")}
+            </Button>
+            <Button type="button" variant="ghost" className="gap-2" onClick={clearSelection} disabled={!file && status === "idle"}>
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-watermark/README.md b/src/tools/image/image-watermark/README.md
new file mode 100644
index 0000000..ca9544e
--- /dev/null
+++ b/src/tools/image/image-watermark/README.md
@@ -0,0 +1,16 @@
+# Agregar marca de agua a imagen
+
+Herramienta local para agregar una marca de agua de texto sobre una imagen.
+
+## Comportamiento
+
+- Acepta imagenes PNG, JPG/JPEG o WebP que el navegador pueda decodificar.
+- Permite configurar texto, tamano de fuente, color, opacidad, posicion y margen.
+- Posiciones: arriba izquierda, arriba derecha, centro, abajo izquierda y abajo derecha.
+- Exporta PNG, JPG o WebP si el navegador lo soporta.
+- JPG no conserva transparencia.
+- Todo el procesamiento ocurre en el navegador.
+
+## Limites
+
+Esta primera version no soporta marca de agua con imagen, drag visual ni edicion avanzada de fuentes.
diff --git a/src/tools/image/image-watermark/imageWatermark.service.test.ts b/src/tools/image/image-watermark/imageWatermark.service.test.ts
new file mode 100644
index 0000000..489eef1
--- /dev/null
+++ b/src/tools/image/image-watermark/imageWatermark.service.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildWatermarkedImageFileName,
+  calculateWatermarkPosition,
+  getWatermarkedImageOutputBaseName,
+  normalizeHexColor,
+  validateWatermarkFontSize,
+  validateWatermarkMargin,
+  validateWatermarkOpacity,
+} from "./imageWatermark.service";
+
+const imageDimensions = { width: 1000, height: 600 };
+const textDimensions = { width: 200, height: 50 };
+
+describe("imageWatermark.service", () => {
+  it("calculates top-left watermark position", () => {
+    expect(calculateWatermarkPosition(imageDimensions, textDimensions, "top-left", 20)).toEqual({ x: 20, y: 20 });
+  });
+
+  it("calculates top-right watermark position", () => {
+    expect(calculateWatermarkPosition(imageDimensions, textDimensions, "top-right", 20)).toEqual({ x: 780, y: 20 });
+  });
+
+  it("calculates centered watermark position", () => {
+    expect(calculateWatermarkPosition(imageDimensions, textDimensions, "center", 20)).toEqual({ x: 400, y: 275 });
+  });
+
+  it("calculates bottom positions with margin", () => {
+    expect(calculateWatermarkPosition(imageDimensions, textDimensions, "bottom-left", 20)).toEqual({ x: 20, y: 530 });
+    expect(calculateWatermarkPosition(imageDimensions, textDimensions, "bottom-right", 20)).toEqual({ x: 780, y: 530 });
+  });
+
+  it("validates opacity", () => {
+    expect(validateWatermarkOpacity(0.1)).toBeNull();
+    expect(validateWatermarkOpacity(1)).toBeNull();
+    expect(validateWatermarkOpacity(0)).toMatch(/10%/);
+    expect(validateWatermarkOpacity(1.1)).toMatch(/100%/);
+  });
+
+  it("validates font size", () => {
+    expect(validateWatermarkFontSize(48)).toBeNull();
+    expect(validateWatermarkFontSize(7)).toMatch(/8/);
+    expect(validateWatermarkFontSize(513)).toMatch(/512/);
+    expect(validateWatermarkFontSize(12.5)).toMatch(/entero/);
+  });
+
+  it("validates margin", () => {
+    expect(validateWatermarkMargin(0)).toBeNull();
+    expect(validateWatermarkMargin(24)).toBeNull();
+    expect(validateWatermarkMargin(-1)).toMatch(/margen/);
+    expect(validateWatermarkMargin(1.5)).toMatch(/entero/);
+  });
+
+  it("builds output names", () => {
+    expect(getWatermarkedImageOutputBaseName("foto.png")).toBe("foto-marca-agua");
+    expect(buildWatermarkedImageFileName("foto-marca-agua", "png")).toBe("foto-marca-agua.png");
+    expect(buildWatermarkedImageFileName("foto-marca-agua", "jpeg")).toBe("foto-marca-agua.jpg");
+    expect(buildWatermarkedImageFileName("foto-marca-agua", "webp")).toBe("foto-marca-agua.webp");
+  });
+
+  it("normalizes hex colors", () => {
+    expect(normalizeHexColor("#abc")).toBe("#AABBCC");
+    expect(normalizeHexColor("123456")).toBe("#123456");
+  });
+});
diff --git a/src/tools/image/image-watermark/imageWatermark.service.ts b/src/tools/image/image-watermark/imageWatermark.service.ts
new file mode 100644
index 0000000..1d439a3
--- /dev/null
+++ b/src/tools/image/image-watermark/imageWatermark.service.ts
@@ -0,0 +1,305 @@
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  buildBrowserImageDownloadFileName,
+  canExportBrowserImageFormat,
+  exportBrowserCanvas,
+  getBrowserImageMimeType,
+  getBrowserImageOutputMimeType,
+  getImageDownloadBaseName,
+  isBrowserImageFile,
+  loadBrowserImage,
+} from "../../../shared/utils/imageFiles";
+import type {
+  ImageDimensions,
+  ImageWatermarkMetadata,
+  ImageWatermarkOptions,
+  ImageWatermarkOutputFormat,
+  ImageWatermarkPosition,
+  ImageWatermarkResult,
+  TextBoxDimensions,
+} from "./imageWatermark.types";
+
+export const defaultOutputBaseName = "imagen-marca-agua";
+export const defaultWatermarkText = "Modulaq";
+export const defaultWatermarkColor = "#FFFFFF";
+export const defaultWatermarkOpacity = 0.65;
+export const defaultWatermarkFontSize = 48;
+export const defaultWatermarkMargin = 32;
+export const minWatermarkFontSize = 8;
+export const maxWatermarkFontSize = 512;
+export const maxWatermarkMargin = 10_000;
+
+export { formatFileSize };
+
+export function isWatermarkableImageFile(file: File) {
+  return isBrowserImageFile(file);
+}
+
+export function getImageFormatLabel(format: ImageWatermarkOutputFormat) {
+  if (format === "jpeg") {
+    return "JPG";
+  }
+
+  if (format === "webp") {
+    return "WebP";
+  }
+
+  return "PNG";
+}
+
+export function getImageMimeLabel(mimeType: string) {
+  if (mimeType === "image/jpeg") {
+    return "JPG";
+  }
+
+  if (mimeType === "image/webp") {
+    return "WebP";
+  }
+
+  if (mimeType === "image/png") {
+    return "PNG";
+  }
+
+  return mimeType || "Desconocido";
+}
+
+export function getWatermarkedImageOutputBaseName(fileName: string) {
+  const baseName = getImageDownloadBaseName(fileName, defaultOutputBaseName);
+  return `${baseName}-marca-agua`;
+}
+
+export function buildWatermarkedImageFileName(
+  baseName: string,
+  outputFormat: ImageWatermarkOutputFormat,
+  fallbackBaseName = defaultOutputBaseName,
+) {
+  return buildBrowserImageDownloadFileName(baseName, outputFormat, fallbackBaseName);
+}
+
+export function normalizeHexColor(value: string, fallback = defaultWatermarkColor) {
+  const trimmedValue = value.trim();
+  const shortMatch = trimmedValue.match(/^#?([0-9a-f]{3})$/i);
+
+  if (shortMatch) {
+    return `#${shortMatch[1]
+      .split("")
+      .map((character) => `${character}${character}`)
+      .join("")
+      .toUpperCase()}`;
+  }
+
+  const fullMatch = trimmedValue.match(/^#?([0-9a-f]{6})$/i);
+  if (fullMatch) {
+    return `#${fullMatch[1].toUpperCase()}`;
+  }
+
+  return fallback;
+}
+
+export function validateWatermarkOpacity(opacity: number) {
+  if (!Number.isFinite(opacity)) {
+    return "La opacidad debe ser un numero valido.";
+  }
+
+  if (opacity < 0.1 || opacity > 1) {
+    return "La opacidad debe estar entre 10% y 100%.";
+  }
+
+  return null;
+}
+
+export function validateWatermarkFontSize(fontSize: number) {
+  if (!Number.isFinite(fontSize)) {
+    return "El tamano de fuente debe ser un numero valido.";
+  }
+
+  if (!Number.isInteger(fontSize)) {
+    return "El tamano de fuente debe ser un numero entero.";
+  }
+
+  if (fontSize < minWatermarkFontSize || fontSize > maxWatermarkFontSize) {
+    return `El tamano de fuente debe estar entre ${minWatermarkFontSize} y ${maxWatermarkFontSize}px.`;
+  }
+
+  return null;
+}
+
+export function validateWatermarkMargin(margin: number) {
+  if (!Number.isFinite(margin)) {
+    return "El margen debe ser un numero valido.";
+  }
+
+  if (!Number.isInteger(margin)) {
+    return "El margen debe ser un numero entero.";
+  }
+
+  if (margin < 0 || margin > maxWatermarkMargin) {
+    return "El margen debe ser cero o mayor y no superar el limite permitido.";
+  }
+
+  return null;
+}
+
+export function validateWatermarkOptions({ color, fontSize, margin, opacity, text }: ImageWatermarkOptions) {
+  if (!text.trim()) {
+    return "Ingresa un texto para la marca de agua.";
+  }
+
+  const fontSizeError = validateWatermarkFontSize(fontSize);
+  if (fontSizeError) return fontSizeError;
+
+  const opacityError = validateWatermarkOpacity(opacity);
+  if (opacityError) return opacityError;
+
+  const marginError = validateWatermarkMargin(margin);
+  if (marginError) return marginError;
+
+  if (normalizeHexColor(color, "") === "") {
+    return "El color debe ser hexadecimal.";
+  }
+
+  return null;
+}
+
+export function calculateWatermarkPosition(
+  imageDimensions: ImageDimensions,
+  textDimensions: TextBoxDimensions,
+  position: ImageWatermarkPosition,
+  margin: number,
+) {
+  const centerX = Math.round((imageDimensions.width - textDimensions.width) / 2);
+  const centerY = Math.round((imageDimensions.height - textDimensions.height) / 2);
+
+  if (position === "top-left") {
+    return { x: margin, y: margin };
+  }
+
+  if (position === "top-right") {
+    return { x: imageDimensions.width - textDimensions.width - margin, y: margin };
+  }
+
+  if (position === "bottom-left") {
+    return { x: margin, y: imageDimensions.height - textDimensions.height - margin };
+  }
+
+  if (position === "bottom-right") {
+    return {
+      x: imageDimensions.width - textDimensions.width - margin,
+      y: imageDimensions.height - textDimensions.height - margin,
+    };
+  }
+
+  return { x: centerX, y: centerY };
+}
+
+export async function readImageMetadata(file: File): Promise<ImageWatermarkMetadata> {
+  const mimeType = getBrowserImageMimeType(file);
+
+  if (!mimeType) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  try {
+    const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+
+    if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+      throw new Error("La imagen no tiene dimensiones validas.");
+    }
+
+    return {
+      fileName: file.name,
+      fileSize: file.size,
+      height: image.naturalHeight,
+      mimeType,
+      width: image.naturalWidth,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error("No se pudo leer la imagen.");
+  }
+}
+
+function configureWatermarkFont(context: CanvasRenderingContext2D, fontSize: number) {
+  context.font = `700 ${fontSize}px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+}
+
+function measureWatermarkText(context: CanvasRenderingContext2D, text: string, fontSize: number): TextBoxDimensions {
+  configureWatermarkFont(context, fontSize);
+  const metrics = context.measureText(text);
+  return {
+    height: Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) || fontSize,
+    width: Math.ceil(metrics.width),
+  };
+}
+
+export async function addImageWatermark(file: File, options: ImageWatermarkOptions): Promise<ImageWatermarkResult> {
+  if (!isWatermarkableImageFile(file)) {
+    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+  }
+
+  const validationError = validateWatermarkOptions(options);
+  if (validationError) {
+    throw new Error(validationError);
+  }
+
+  if (!canExportBrowserImageFormat(options.outputFormat)) {
+    throw new Error(`Este navegador no permite exportar imagenes como ${getImageFormatLabel(options.outputFormat)}.`);
+  }
+
+  const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
+  const canvas = document.createElement("canvas");
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const context = canvas.getContext("2d");
+
+  if (!context) {
+    throw new Error("No se pudo preparar la imagen.");
+  }
+
+  if (options.outputFormat === "jpeg") {
+    context.fillStyle = "#ffffff";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  context.drawImage(image, 0, 0);
+  const textDimensions = measureWatermarkText(context, options.text, options.fontSize);
+  const coordinates = calculateWatermarkPosition(
+    { height: canvas.height, width: canvas.width },
+    textDimensions,
+    options.position,
+    options.margin,
+  );
+
+  context.save();
+  context.globalAlpha = options.opacity;
+  configureWatermarkFont(context, options.fontSize);
+  context.fillStyle = normalizeHexColor(options.color);
+  context.textAlign = "left";
+  context.textBaseline = "top";
+  context.fillText(options.text, coordinates.x, coordinates.y);
+  context.restore();
+
+  const mimeType = getBrowserImageOutputMimeType(options.outputFormat);
+  const result = await exportBrowserCanvas(canvas, {
+    errorMessage: "No se pudo exportar la imagen con marca de agua.",
+    mimeType,
+    quality: options.quality,
+  });
+
+  return {
+    bytes: result.bytes,
+    fileName: buildWatermarkedImageFileName(
+      options.outputBaseName,
+      options.outputFormat,
+      getWatermarkedImageOutputBaseName(file.name),
+    ),
+    format: options.outputFormat,
+    height: result.height,
+    mimeType,
+    size: result.size,
+    width: result.width,
+  };
+}
diff --git a/src/tools/image/image-watermark/imageWatermark.types.ts b/src/tools/image/image-watermark/imageWatermark.types.ts
new file mode 100644
index 0000000..c6554c9
--- /dev/null
+++ b/src/tools/image/image-watermark/imageWatermark.types.ts
@@ -0,0 +1,54 @@
+import type { BrowserImageOutputFormat } from "../../../shared/utils/imageFiles";
+
+export type ImageWatermarkPosition =
+  | "top-left"
+  | "top-right"
+  | "center"
+  | "bottom-left"
+  | "bottom-right";
+
+export type ImageDimensions = {
+  height: number;
+  width: number;
+};
+
+export type TextBoxDimensions = ImageDimensions;
+
+export type ImageWatermarkOptions = {
+  color: string;
+  fontSize: number;
+  margin: number;
+  opacity: number;
+  outputBaseName: string;
+  outputFormat: ImageWatermarkOutputFormat;
+  position: ImageWatermarkPosition;
+  quality?: number;
+  text: string;
+};
+
+export type WatermarkCoordinates = {
+  x: number;
+  y: number;
+};
+
+export type ImageWatermarkMetadata = {
+  fileName: string;
+  fileSize: number;
+  height: number;
+  mimeType: string;
+  width: number;
+};
+
+export type ImageWatermarkOutputFormat = BrowserImageOutputFormat;
+
+export type ImageWatermarkResult = {
+  bytes: ArrayBuffer;
+  fileName: string;
+  format: ImageWatermarkOutputFormat;
+  height: number;
+  mimeType: string;
+  size: number;
+  width: number;
+};
+
+export type ImageWatermarkStatus = "idle" | "reading" | "ready" | "processing" | "success" | "error";
diff --git a/src/tools/image/image-watermark/index.ts b/src/tools/image/image-watermark/index.ts
new file mode 100644
index 0000000..8fb79e8
--- /dev/null
+++ b/src/tools/image/image-watermark/index.ts
@@ -0,0 +1 @@
+export { ImageWatermarkTool } from "./ImageWatermarkTool";

From f4df4b157d7ac2f75fe8d801c15fa70780bcff15 Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Sat, 6 Jun 2026 04:34:45 -0300
Subject: [PATCH 09/10] feat(image): add SVG to PNG tool

---
 src/features/tools/data/tools.ts              | 104 ++++
 .../tools/renderers/toolRenderers.tsx         |   3 +
 src/tools/image/svg-to-png/README.md          |  18 +
 src/tools/image/svg-to-png/SvgToPngTool.tsx   | 569 ++++++++++++++++++
 src/tools/image/svg-to-png/index.ts           |   1 +
 .../image/svg-to-png/svgToPng.service.test.ts |  80 +++
 .../image/svg-to-png/svgToPng.service.ts      | 235 ++++++++
 src/tools/image/svg-to-png/svgToPng.types.ts  |  37 ++
 8 files changed, 1047 insertions(+)
 create mode 100644 src/tools/image/svg-to-png/README.md
 create mode 100644 src/tools/image/svg-to-png/SvgToPngTool.tsx
 create mode 100644 src/tools/image/svg-to-png/index.ts
 create mode 100644 src/tools/image/svg-to-png/svgToPng.service.test.ts
 create mode 100644 src/tools/image/svg-to-png/svgToPng.service.ts
 create mode 100644 src/tools/image/svg-to-png/svgToPng.types.ts

diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index cb7f748..b1c8db1 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -1296,6 +1296,110 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       },
     },
   },
+  {
+    id: "svg-to-png",
+    slug: "svg-a-png",
+    slugEn: "svg-to-png",
+    name: { es: "SVG a PNG", en: "SVG to PNG" },
+    description: {
+      es: "Convierte un archivo SVG a PNG desde tu navegador.",
+      en: "Convert an SVG file to PNG from your browser.",
+    },
+    category: "image",
+    tags: {
+      es: ["svg", "png", "imagen", "vector", "convertir"],
+      en: ["svg", "png", "image", "vector", "convert"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Convertir SVG a PNG online gratis",
+        description:
+          "Convierte SVG simple a PNG desde tu navegador. Ajusta tamano y fondo antes de descargar, sin backend ni subir archivos.",
+      },
+      en: {
+        title: "Convert SVG to PNG online free",
+        description:
+          "Convert simple SVG to PNG from your browser. Adjust size and background before downloading, with no backend or uploads.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "SVG a PNG convierte un archivo SVG o codigo SVG pegado en una imagen PNG generada localmente.",
+        howTo: [
+          "Selecciona un archivo SVG o pega codigo SVG.",
+          "Revisa el nombre, peso y dimensiones detectadas desde width/height o viewBox.",
+          "Ajusta ancho, alto, fondo transparente o color de fondo.",
+          "Convierte y descarga el PNG.",
+        ],
+        useCases: [
+          "Exportar un logo SVG como PNG.",
+          "Crear una version raster para compartir o usar en una pagina.",
+          "Probar rapidamente un SVG pegado como imagen PNG.",
+        ],
+        limits: [
+          "Algunos SVG con recursos externos o scripts pueden no procesarse.",
+          "Los scripts se rechazan.",
+          "Los SVG con recursos externos pueden no renderizarse igual.",
+          "Maximo 8000 px por lado y 64 megapixeles de salida.",
+        ],
+        privacy:
+          "Todo se procesa localmente en tu navegador; no subimos el SVG a Modulaq.",
+        commonErrors: [
+          "Contenido sin etiqueta SVG valida.",
+          "SVG con scripts.",
+          "Dimensiones de salida no validas o demasiado grandes.",
+          "SVG con recursos externos que el navegador no puede renderizar en canvas.",
+        ],
+        technicalNotes: [
+          "La conversion usa Blob SVG, Image, canvas y exportacion PNG en el navegador.",
+          "Solo exporta PNG.",
+          "No promete compatibilidad perfecta con todos los SVG.",
+        ],
+      },
+      en: {
+        summary:
+          "SVG to PNG converts an SVG file or pasted SVG code into a locally generated PNG image.",
+        howTo: [
+          "Select an SVG file or paste SVG code.",
+          "Review the detected name, size and dimensions from width/height or viewBox.",
+          "Adjust width, height, transparent background or background color.",
+          "Convert and download the PNG.",
+        ],
+        useCases: [
+          "Export an SVG logo as PNG.",
+          "Create a raster version to share or use on a page.",
+          "Quickly test pasted SVG as a PNG image.",
+        ],
+        limits: [
+          "Some SVGs with external resources or scripts may not process.",
+          "Scripts are rejected.",
+          "SVGs with external resources may not render the same.",
+          "Maximum 8000 px per side and 64 megapixels output.",
+        ],
+        privacy:
+          "Everything is processed locally in your browser; we don't upload the SVG to Modulaq.",
+        commonErrors: [
+          "Content without a valid SVG tag.",
+          "SVG with scripts.",
+          "Invalid or too large output dimensions.",
+          "SVG with external resources the browser cannot render into canvas.",
+        ],
+        technicalNotes: [
+          "Conversion uses an SVG Blob, Image, canvas and PNG export in the browser.",
+          "It only exports PNG.",
+          "It does not promise perfect compatibility with every SVG.",
+        ],
+      },
+    },
+  },
   {
     id: "image-watermark",
     slug: "agregar-marca-agua-imagen",
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index a5615c1..b619bec 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -37,6 +37,9 @@ const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
   "image-splitter": lazy(() =>
     import("../../../tools/image/image-splitter").then((module) => ({ default: module.ImageSplitterTool })),
   ),
+  "svg-to-png": lazy(() =>
+    import("../../../tools/image/svg-to-png").then((module) => ({ default: module.SvgToPngTool })),
+  ),
   "image-watermark": lazy(() =>
     import("../../../tools/image/image-watermark").then((module) => ({ default: module.ImageWatermarkTool })),
   ),
diff --git a/src/tools/image/svg-to-png/README.md b/src/tools/image/svg-to-png/README.md
new file mode 100644
index 0000000..9dcc188
--- /dev/null
+++ b/src/tools/image/svg-to-png/README.md
@@ -0,0 +1,18 @@
+# SVG a PNG
+
+Herramienta local para convertir SVG simple a PNG desde el navegador.
+
+## Alcance
+
+- Permite subir un archivo `.svg` o pegar codigo SVG.
+- Valida que exista una etiqueta `<svg>`.
+- Rechaza SVG con `<script>`.
+- Muestra dimensiones detectadas desde `width`/`height` o `viewBox`.
+- Permite ajustar ancho, alto, fondo transparente o color de fondo.
+- Exporta solo PNG.
+
+## Limitaciones
+
+- Algunos SVG con recursos externos pueden no procesarse o renderizar igual.
+- No promete compatibilidad perfecta con todos los SVG.
+- No usa backend ni sube archivos.
diff --git a/src/tools/image/svg-to-png/SvgToPngTool.tsx b/src/tools/image/svg-to-png/SvgToPngTool.tsx
new file mode 100644
index 0000000..d459e1e
--- /dev/null
+++ b/src/tools/image/svg-to-png/SvgToPngTool.tsx
@@ -0,0 +1,569 @@
+import { Code, Download, FileCode, Image as ImageIcon, Loader2, RotateCcw, Upload } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import {
+  analyzeSvgSource,
+  buildSvgPngFileName,
+  convertSvgToPng,
+  defaultSvgBackgroundColor,
+  defaultSvgPngBaseName,
+  formatFileSize,
+  getDefaultSvgOutputDimensions,
+  getSvgPngOutputBaseName,
+  normalizeHexColor,
+  readSvgFile,
+  validateSvgContent,
+  validateSvgOutputDimensions,
+} from "./svgToPng.service";
+import type { SvgToPngMetadata, SvgToPngResult, SvgToPngStatus } from "./svgToPng.types";
+
+const acceptedSvgTypes = "image/svg+xml,.svg";
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+
+type DownloadableResult = SvgToPngResult & {
+  url: string;
+};
+
+const copy = {
+  es: {
+    background: "Color de fondo",
+    code: "Codigo SVG",
+    codePlaceholder: '<svg width="320" height="180" viewBox="0 0 320 180">...</svg>',
+    dimensionsHelp: "Podes ajustar tamano y fondo antes de descargar.",
+    downloadReady: "PNG listo",
+    externalWarning: "Los SVG con recursos externos pueden no renderizarse igual.",
+    height: "Alto",
+    inputHelp: "Convierte SVG simple a PNG desde tu navegador.",
+    invalidFile: "Selecciona un archivo SVG.",
+    outputIntro: "Todo se procesa localmente en tu navegador.",
+    outputTitle: "Vista previa y salida",
+    pasteIntro: "Tambien podes pegar codigo SVG.",
+    previewAlt: "Vista previa del SVG",
+    processing: "Convirtiendo SVG a PNG...",
+    sourceTitle: "SVG de origen",
+    transparent: "Fondo transparente",
+    type: "Tipo",
+    upload: "Seleccionar SVG",
+    width: "Ancho",
+  },
+  en: {
+    background: "Background color",
+    code: "SVG code",
+    codePlaceholder: '<svg width="320" height="180" viewBox="0 0 320 180">...</svg>',
+    dimensionsHelp: "You can adjust size and background before downloading.",
+    downloadReady: "PNG ready",
+    externalWarning: "SVGs with external resources may not render the same.",
+    height: "Height",
+    inputHelp: "Convert simple SVG to PNG from your browser.",
+    invalidFile: "Select an SVG file.",
+    outputIntro: "Everything is processed locally in your browser.",
+    outputTitle: "Preview and output",
+    pasteIntro: "You can also paste SVG code.",
+    previewAlt: "SVG preview",
+    processing: "Converting SVG to PNG...",
+    sourceTitle: "Source SVG",
+    transparent: "Transparent background",
+    type: "Type",
+    upload: "Select SVG",
+    width: "Width",
+  },
+} as const;
+
+function parseNumberInput(value: string) {
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : Number.NaN;
+}
+
+function formatDetectedDimensions(metadata: SvgToPngMetadata) {
+  if (metadata.width && metadata.height) {
+    return `${metadata.width} x ${metadata.height}px`;
+  }
+
+  if (metadata.viewBox) {
+    return `viewBox ${metadata.viewBox.width} x ${metadata.viewBox.height}`;
+  }
+
+  return "-";
+}
+
+export function SvgToPngTool() {
+  const { language, t } = useI18n();
+  const labels = copy[language];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const resultUrlRef = useRef<string | null>(null);
+  const [svgText, setSvgText] = useState("");
+  const [metadata, setMetadata] = useState<SvgToPngMetadata | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [widthInput, setWidthInput] = useState("");
+  const [heightInput, setHeightInput] = useState("");
+  const [hasCustomDimensions, setHasCustomDimensions] = useState(false);
+  const [transparentBackground, setTransparentBackground] = useState(true);
+  const [backgroundColor, setBackgroundColor] = useState(defaultSvgBackgroundColor);
+  const [outputFileName, setOutputFileName] = useState(defaultSvgPngBaseName);
+  const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
+  const [status, setStatus] = useState<SvgToPngStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DownloadableResult | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
+    };
+  }, []);
+
+  const width = parseNumberInput(widthInput);
+  const height = parseNumberInput(heightInput);
+  const normalizedBackgroundColor = normalizeHexColor(backgroundColor);
+  const contentError = svgText.trim() ? validateSvgContent(svgText) : null;
+  const dimensionError = metadata ? validateSvgOutputDimensions(width, height) : null;
+  const finalOutputFileName = buildSvgPngFileName(
+    outputFileName,
+    metadata ? getSvgPngOutputBaseName(metadata.fileName) : defaultSvgPngBaseName,
+  );
+  const canConvert = Boolean(svgText.trim() && metadata) && !contentError && !dimensionError && status !== "processing";
+
+  const clearResult = () => {
+    if (resultUrlRef.current) {
+      URL.revokeObjectURL(resultUrlRef.current);
+      resultUrlRef.current = null;
+    }
+    setResult(null);
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    clearResult();
+    if (status === "success" || status === "error") {
+      setStatus(metadata ? "ready" : "idle");
+    }
+  };
+
+  const clearPreview = () => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    setPreviewUrl(null);
+  };
+
+  const updatePreview = (content: string) => {
+    clearPreview();
+    if (validateSvgContent(content)) return;
+
+    const previewUrlObject = URL.createObjectURL(new Blob([content], { type: "image/svg+xml" }));
+    previewUrlRef.current = previewUrlObject;
+    setPreviewUrl(previewUrlObject);
+  };
+
+  const applySvgSource = (content: string, fileName: string | null = null) => {
+    setSvgText(content);
+    clearResult();
+    setError(null);
+
+    if (!content.trim()) {
+      setMetadata(null);
+      clearPreview();
+      setStatus("idle");
+      return;
+    }
+
+    try {
+      const nextMetadata = analyzeSvgSource(content, fileName);
+      const nextDimensions = getDefaultSvgOutputDimensions(nextMetadata);
+      setMetadata(nextMetadata);
+      updatePreview(content);
+      if (!hasCustomDimensions) {
+        setWidthInput(String(nextDimensions.width));
+        setHeightInput(String(nextDimensions.height));
+      }
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getSvgPngOutputBaseName(fileName));
+      }
+      setStatus("ready");
+    } catch (nextError) {
+      setMetadata(null);
+      clearPreview();
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo leer el SVG.");
+    }
+  };
+
+  const processFile = async (nextFile: File | undefined) => {
+    if (!nextFile) return;
+    setStatus("reading");
+    setError(null);
+    clearResult();
+
+    if (!nextFile.name.toLowerCase().endsWith(".svg") && nextFile.type !== "image/svg+xml") {
+      setStatus("error");
+      setError(labels.invalidFile);
+      return;
+    }
+
+    try {
+      const { metadata: nextMetadata, text } = await readSvgFile(nextFile);
+      setSvgText(text);
+      setMetadata(nextMetadata);
+      updatePreview(text);
+      const nextDimensions = getDefaultSvgOutputDimensions(nextMetadata);
+      if (!hasCustomDimensions) {
+        setWidthInput(String(nextDimensions.width));
+        setHeightInput(String(nextDimensions.height));
+      }
+      if (!hasCustomOutputFileName) {
+        setOutputFileName(getSvgPngOutputBaseName(nextFile.name));
+      }
+      setStatus("ready");
+    } catch (nextError) {
+      setMetadata(null);
+      clearPreview();
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo leer el SVG.");
+    }
+  };
+
+  const clearSelection = () => {
+    clearPreview();
+    clearResult();
+    setSvgText("");
+    setMetadata(null);
+    setWidthInput("");
+    setHeightInput("");
+    setHasCustomDimensions(false);
+    setTransparentBackground(true);
+    setBackgroundColor(defaultSvgBackgroundColor);
+    setOutputFileName(defaultSvgPngBaseName);
+    setHasCustomOutputFileName(false);
+    setStatus("idle");
+    setError(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const convertToPng = async () => {
+    if (!canConvert) return;
+    setStatus("processing");
+    setError(null);
+    clearResult();
+
+    try {
+      const nextResult = await convertSvgToPng(svgText, {
+        backgroundColor: normalizedBackgroundColor,
+        height,
+        outputBaseName: outputFileName,
+        transparentBackground,
+        width,
+      });
+      const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
+      resultUrlRef.current = resultUrl;
+      setResult({ ...nextResult, url: resultUrl });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : "No se pudo convertir el SVG a PNG.");
+    }
+  };
+
+  const downloadResult = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.url;
+    link.download = result.fileName;
+    link.click();
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.95fr)_minmax(310px,0.54fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.inputHelp}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-44 place-items-center rounded-lg border border-dashed p-5 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFile(event.dataTransfer.files[0]);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={26} />
+              </span>
+              <span className="mt-4 block text-base font-semibold text-ink-900">{labels.upload}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">.svg / image/svg+xml</span>
+            </span>
+          </button>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedSvgTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {labels.code}
+            <textarea
+              className={cn(inputClassName, "min-h-44 resize-y py-3 font-mono text-xs leading-5")}
+              placeholder={labels.codePlaceholder}
+              spellCheck={false}
+              value={svgText}
+              onChange={(event) => applySvgSource(event.target.value, null)}
+            />
+            <span className="text-xs font-normal leading-5 text-ink-500">{labels.pasteIntro}</span>
+          </label>
+
+          {metadata ? (
+            <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[96px_minmax(0,1fr)]">
+              <span className="grid h-24 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal shadow-sm sm:w-24">
+                <FileCode size={28} />
+              </span>
+              <dl className="grid min-w-0 gap-2 text-sm">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                  <dd className="truncate font-semibold text-ink-900">{metadata.fileName ?? defaultSvgPngBaseName}</dd>
+                </div>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  <div>
+                    <dt className="text-ink-500">{labels.type}</dt>
+                    <dd className="font-semibold text-ink-900">SVG</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                    <dd className="font-semibold text-ink-900">{formatFileSize(metadata.sourceSize)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                    <dd className="font-semibold text-ink-900">{formatDetectedDimensions(metadata)}</dd>
+                  </div>
+                </div>
+              </dl>
+            </div>
+          ) : null}
+
+          {metadata?.hasExternalResources ? (
+            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {labels.externalWarning}
+            </p>
+          ) : null}
+
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.dimensionsHelp}</p>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.width}
+                <input
+                  className={inputClassName}
+                  inputMode="numeric"
+                  min={1}
+                  type="number"
+                  value={widthInput}
+                  onChange={(event) => {
+                    setWidthInput(event.target.value);
+                    setHasCustomDimensions(true);
+                    resetFeedback();
+                  }}
+                />
+              </label>
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.height}
+                <input
+                  className={inputClassName}
+                  inputMode="numeric"
+                  min={1}
+                  type="number"
+                  value={heightInput}
+                  onChange={(event) => {
+                    setHeightInput(event.target.value);
+                    setHasCustomDimensions(true);
+                    resetFeedback();
+                  }}
+                />
+              </label>
+            </div>
+
+            <label className="flex items-center gap-2 text-sm font-semibold text-ink-700">
+              <input
+                checked={transparentBackground}
+                className="h-4 w-4 accent-accent-cyan"
+                type="checkbox"
+                onChange={(event) => {
+                  setTransparentBackground(event.target.checked);
+                  resetFeedback();
+                }}
+              />
+              {labels.transparent}
+            </label>
+
+            {!transparentBackground ? (
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {labels.background}
+                <span className="flex min-h-11 items-center gap-2 rounded-lg border border-surface-200/90 bg-surface-50/95 px-2 shadow-sm">
+                  <input
+                    className="h-8 w-10 rounded border border-surface-200 bg-transparent"
+                    type="color"
+                    value={normalizedBackgroundColor}
+                    onChange={(event) => {
+                      setBackgroundColor(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                  <input
+                    className="min-w-0 flex-1 bg-transparent text-sm font-normal text-ink-900 outline-none"
+                    value={backgroundColor}
+                    onChange={(event) => {
+                      setBackgroundColor(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                </span>
+              </label>
+            ) : null}
+
+            {dimensionError ? (
+              <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+                {dimensionError}
+              </p>
+            ) : null}
+          </div>
+
+          {status === "reading" || status === "processing" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {status === "processing" ? labels.processing : t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {status === "error" && error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.outputIntro}</p>
+        </div>
+
+        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+            {previewUrl && metadata && !dimensionError ? (
+              <div
+                className="grid w-full max-w-md place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-[length:18px_18px] shadow-sm"
+                style={{
+                  aspectRatio: `${width} / ${height}`,
+                  backgroundColor: transparentBackground ? undefined : normalizedBackgroundColor,
+                  backgroundImage: transparentBackground
+                    ? "linear-gradient(45deg, rgba(15,23,42,.08) 25%, transparent 25%), linear-gradient(-45deg, rgba(15,23,42,.08) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(15,23,42,.08) 75%), linear-gradient(-45deg, transparent 75%, rgba(15,23,42,.08) 75%)"
+                    : undefined,
+                  backgroundPosition: transparentBackground ? "0 0, 0 9px, 9px -9px, -9px 0px" : undefined,
+                }}
+              >
+                <img alt={labels.previewAlt} className="h-full w-full object-fill" src={previewUrl} />
+              </div>
+            ) : (
+              <div className="text-center text-sm text-ink-500">
+                <ImageIcon className="mx-auto text-accent-teal" size={32} />
+                <p className="mt-2 font-semibold text-ink-700">{labels.upload}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 text-sm shadow-sm">
+            <p className="text-ink-500">{t("imageUi.finalFormat")}</p>
+            <p className="mt-1 font-semibold text-ink-900">PNG</p>
+          </div>
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {t("imageUi.outputName")}
+            <input
+              className={cn(inputClassName, "w-full")}
+              value={outputFileName}
+              placeholder={metadata ? getSvgPngOutputBaseName(metadata.fileName) : defaultSvgPngBaseName}
+              onChange={(event) => {
+                setOutputFileName(event.target.value);
+                setHasCustomOutputFileName(true);
+                resetFeedback();
+              }}
+            />
+            <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
+          </label>
+
+          {result ? (
+            <div className="grid gap-3 rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{labels.downloadReady}</p>
+              <dl className="grid gap-2 sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalDimensions")}</dt>
+                  <dd className="font-semibold text-ink-900">
+                    {result.width} x {result.height}px
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalFormat")}</dt>
+                  <dd className="font-semibold text-ink-900">PNG</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.finalSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(result.size)}</dd>
+                </div>
+              </dl>
+              <Button type="button" variant="secondary" className="gap-2" onClick={downloadResult}>
+                <Download size={16} />
+                {t("imageUi.downloadImage")}
+              </Button>
+            </div>
+          ) : null}
+
+          <div className="grid gap-2 pt-1">
+            <Button type="button" className="gap-2" onClick={() => void convertToPng()} disabled={!canConvert}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <Code size={16} />}
+              {language === "en" ? "Convert to PNG" : "Convertir a PNG"}
+            </Button>
+            <Button type="button" variant="secondary" className="gap-2" onClick={() => fileInputRef.current?.click()}>
+              <Upload size={16} />
+              {labels.upload}
+            </Button>
+            <Button type="button" variant="ghost" className="gap-2" onClick={clearSelection} disabled={!svgText && status === "idle"}>
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/svg-to-png/index.ts b/src/tools/image/svg-to-png/index.ts
new file mode 100644
index 0000000..a17ea6f
--- /dev/null
+++ b/src/tools/image/svg-to-png/index.ts
@@ -0,0 +1 @@
+export { SvgToPngTool } from "./SvgToPngTool";
diff --git a/src/tools/image/svg-to-png/svgToPng.service.test.ts b/src/tools/image/svg-to-png/svgToPng.service.test.ts
new file mode 100644
index 0000000..642108d
--- /dev/null
+++ b/src/tools/image/svg-to-png/svgToPng.service.test.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildSvgPngFileName,
+  extractSvgDimensions,
+  getDefaultSvgOutputDimensions,
+  getSvgPngOutputBaseName,
+  hasExternalSvgResources,
+  hasSvgScript,
+  looksLikeSvg,
+  validateSvgContent,
+  validateSvgOutputDimensions,
+} from "./svgToPng.service";
+
+describe("svgToPng.service", () => {
+  it("detects valid SVG content", () => {
+    expect(looksLikeSvg('<svg width="10" height="10"></svg>')).toBe(true);
+    expect(validateSvgContent('<svg viewBox="0 0 10 10"><path /></svg>')).toBeNull();
+  });
+
+  it("rejects content without SVG", () => {
+    expect(looksLikeSvg("<div>Nope</div>")).toBe(false);
+    expect(validateSvgContent("<div>Nope</div>")).toMatch(/SVG/);
+  });
+
+  it("detects scripts", () => {
+    const svg = '<svg width="10" height="10"><script>alert(1)</script></svg>';
+    expect(hasSvgScript(svg)).toBe(true);
+    expect(validateSvgContent(svg)).toMatch(/scripts/);
+  });
+
+  it("extracts width and height", () => {
+    expect(extractSvgDimensions('<svg width="320" height="180"></svg>')).toMatchObject({
+      height: 180,
+      width: 320,
+    });
+    expect(extractSvgDimensions('<svg width="320px" height="180px"></svg>')).toMatchObject({
+      height: 180,
+      width: 320,
+    });
+  });
+
+  it("extracts viewBox dimensions", () => {
+    expect(extractSvgDimensions('<svg viewBox="0 0 640 360"></svg>')).toEqual({
+      height: 360,
+      viewBox: { height: 360, minX: 0, minY: 0, width: 640 },
+      width: 640,
+    });
+  });
+
+  it("calculates default output dimensions", () => {
+    expect(getDefaultSvgOutputDimensions(extractSvgDimensions('<svg width="240" height="120"></svg>'))).toEqual({
+      height: 120,
+      width: 240,
+    });
+    expect(getDefaultSvgOutputDimensions({ height: null, viewBox: null, width: null })).toEqual({
+      height: 512,
+      width: 512,
+    });
+  });
+
+  it("validates output dimensions", () => {
+    expect(validateSvgOutputDimensions(800, 400)).toBeNull();
+    expect(validateSvgOutputDimensions(0, 400)).toMatch(/mayores que cero/);
+    expect(validateSvgOutputDimensions(800, Number.NaN)).toMatch(/validos/);
+    expect(validateSvgOutputDimensions(800.5, 400)).toMatch(/enteros/);
+    expect(validateSvgOutputDimensions(8001, 400)).toMatch(/8000px/);
+  });
+
+  it("builds final PNG names", () => {
+    expect(getSvgPngOutputBaseName("logo.svg")).toBe("logo");
+    expect(getSvgPngOutputBaseName(null)).toBe("svg-to-png");
+    expect(buildSvgPngFileName("logo")).toBe("logo.png");
+    expect(buildSvgPngFileName("", "svg-to-png")).toBe("svg-to-png.png");
+  });
+
+  it("detects external resources", () => {
+    expect(hasExternalSvgResources('<svg><image href="https://example.com/a.png" /></svg>')).toBe(true);
+    expect(hasExternalSvgResources("<svg><rect fill=\"url(//example.com/a.svg#id)\" /></svg>")).toBe(true);
+  });
+});
diff --git a/src/tools/image/svg-to-png/svgToPng.service.ts b/src/tools/image/svg-to-png/svgToPng.service.ts
new file mode 100644
index 0000000..e1d28e4
--- /dev/null
+++ b/src/tools/image/svg-to-png/svgToPng.service.ts
@@ -0,0 +1,235 @@
+import { formatFileSize } from "../../../shared/utils/file";
+import {
+  buildBrowserImageDownloadFileName,
+  exportBrowserCanvas,
+  getImageDownloadBaseName,
+  loadBrowserImage,
+} from "../../../shared/utils/imageFiles";
+import type { SvgDimensions, SvgToPngMetadata, SvgToPngOptions, SvgToPngResult, SvgViewBox } from "./svgToPng.types";
+
+export const defaultSvgPngBaseName = "svg-to-png";
+export const defaultSvgOutputWidth = 512;
+export const defaultSvgOutputHeight = 512;
+export const defaultSvgBackgroundColor = "#FFFFFF";
+export const maxSvgOutputSide = 8000;
+export const maxSvgOutputPixels = 64_000_000;
+
+export { formatFileSize };
+
+const svgTagPattern = /<svg(?:\s|>|\/)/i;
+const svgCloseTagPattern = /<\/svg\s*>/i;
+const scriptTagPattern = /<script(?:\s|>|\/)/i;
+const externalResourcePattern =
+  /\b(?:href|xlink:href)\s*=\s*["'](?:https?:)?\/\//i;
+const externalUrlPattern = /url\(\s*["']?(?:https?:)?\/\//i;
+
+export function looksLikeSvg(content: string) {
+  return svgTagPattern.test(content) && svgCloseTagPattern.test(content);
+}
+
+export function hasSvgScript(content: string) {
+  return scriptTagPattern.test(content);
+}
+
+export function hasExternalSvgResources(content: string) {
+  return externalResourcePattern.test(content) || externalUrlPattern.test(content);
+}
+
+export function validateSvgContent(content: string) {
+  if (!looksLikeSvg(content)) {
+    return "El contenido debe incluir una etiqueta SVG valida.";
+  }
+
+  if (hasSvgScript(content)) {
+    return "No se admiten SVG con scripts.";
+  }
+
+  return null;
+}
+
+function parseSvgNumber(value: string | undefined) {
+  if (!value) return null;
+
+  const trimmedValue = value.trim();
+  if (trimmedValue.endsWith("%")) return null;
+
+  const match = trimmedValue.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(?:px|pt|pc|mm|cm|in|em|rem)?$/i);
+  if (!match) return null;
+
+  const numberValue = Number(match[1]);
+  return Number.isFinite(numberValue) && numberValue > 0 ? numberValue : null;
+}
+
+function readSvgAttribute(content: string, attributeName: string) {
+  const svgOpenMatch = content.match(/<svg\b[^>]*>/i);
+  if (!svgOpenMatch) return undefined;
+
+  const attributePattern = new RegExp(`\\b${attributeName}\\s*=\\s*["']([^"']+)["']`, "i");
+  return svgOpenMatch[0].match(attributePattern)?.[1];
+}
+
+export function extractSvgViewBox(content: string): SvgViewBox | null {
+  const value = readSvgAttribute(content, "viewBox");
+  if (!value) return null;
+
+  const parts = value
+    .trim()
+    .split(/[\s,]+/)
+    .map((part) => Number(part));
+
+  if (parts.length !== 4 || parts.some((part) => !Number.isFinite(part))) {
+    return null;
+  }
+
+  const [minX, minY, width, height] = parts;
+  if (width <= 0 || height <= 0) return null;
+
+  return { height, minX, minY, width };
+}
+
+export function extractSvgDimensions(content: string): SvgDimensions {
+  const viewBox = extractSvgViewBox(content);
+  const width = parseSvgNumber(readSvgAttribute(content, "width")) ?? viewBox?.width ?? null;
+  const height = parseSvgNumber(readSvgAttribute(content, "height")) ?? viewBox?.height ?? null;
+
+  return { height, viewBox, width };
+}
+
+export function getDefaultSvgOutputDimensions(dimensions: SvgDimensions) {
+  const width = dimensions.width ?? dimensions.viewBox?.width ?? defaultSvgOutputWidth;
+  const height = dimensions.height ?? dimensions.viewBox?.height ?? defaultSvgOutputHeight;
+
+  return {
+    height: Math.max(1, Math.round(height)),
+    width: Math.max(1, Math.round(width)),
+  };
+}
+
+export function validateSvgOutputDimensions(width: number, height: number) {
+  if (!Number.isFinite(width) || !Number.isFinite(height)) {
+    return "El ancho y el alto deben ser numeros validos.";
+  }
+
+  if (!Number.isInteger(width) || !Number.isInteger(height)) {
+    return "El ancho y el alto deben ser numeros enteros.";
+  }
+
+  if (width <= 0 || height <= 0) {
+    return "El ancho y el alto deben ser mayores que cero.";
+  }
+
+  if (width > maxSvgOutputSide || height > maxSvgOutputSide) {
+    return `El ancho y el alto no pueden superar ${maxSvgOutputSide}px.`;
+  }
+
+  if (width * height > maxSvgOutputPixels) {
+    return "La imagen supera el limite de 64 megapixeles.";
+  }
+
+  return null;
+}
+
+export function normalizeHexColor(value: string, fallback = defaultSvgBackgroundColor) {
+  const trimmedValue = value.trim();
+  const shortMatch = trimmedValue.match(/^#?([0-9a-f]{3})$/i);
+
+  if (shortMatch) {
+    return `#${shortMatch[1]
+      .split("")
+      .map((character) => `${character}${character}`)
+      .join("")
+      .toUpperCase()}`;
+  }
+
+  const fullMatch = trimmedValue.match(/^#?([0-9a-f]{6})$/i);
+  if (fullMatch) {
+    return `#${fullMatch[1].toUpperCase()}`;
+  }
+
+  return fallback;
+}
+
+export function getSvgPngOutputBaseName(fileName?: string | null) {
+  if (!fileName) return defaultSvgPngBaseName;
+  return getImageDownloadBaseName(fileName, defaultSvgPngBaseName);
+}
+
+export function buildSvgPngFileName(baseName: string, fallbackBaseName = defaultSvgPngBaseName) {
+  return buildBrowserImageDownloadFileName(baseName, "png", fallbackBaseName);
+}
+
+export function analyzeSvgSource(content: string, fileName: string | null = null): SvgToPngMetadata {
+  const validationError = validateSvgContent(content);
+  if (validationError) {
+    throw new Error(validationError);
+  }
+
+  return {
+    ...extractSvgDimensions(content),
+    fileName,
+    hasExternalResources: hasExternalSvgResources(content),
+    sourceSize: new Blob([content], { type: "image/svg+xml" }).size,
+  };
+}
+
+export async function readSvgFile(file: File) {
+  const text = await file.text();
+  return {
+    metadata: analyzeSvgSource(text, file.name),
+    text,
+  };
+}
+
+function createSvgFile(content: string) {
+  return new File([content], "source.svg", { type: "image/svg+xml" });
+}
+
+export async function convertSvgToPng(content: string, options: SvgToPngOptions): Promise<SvgToPngResult> {
+  const validationError = validateSvgContent(content);
+  if (validationError) {
+    throw new Error(validationError);
+  }
+
+  const dimensionError = validateSvgOutputDimensions(options.width, options.height);
+  if (dimensionError) {
+    throw new Error(dimensionError);
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = options.width;
+  canvas.height = options.height;
+
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("No se pudo preparar el PNG.");
+  }
+
+  if (!options.transparentBackground) {
+    context.fillStyle = normalizeHexColor(options.backgroundColor);
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  try {
+    const image = await loadBrowserImage(createSvgFile(content), "No se pudo renderizar el SVG.");
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const result = await exportBrowserCanvas(canvas, {
+      errorMessage: "No se pudo exportar el PNG.",
+      mimeType: "image/png",
+    });
+
+    return {
+      bytes: result.bytes,
+      fileName: buildSvgPngFileName(options.outputBaseName),
+      height: result.height,
+      mimeType: "image/png",
+      size: result.size,
+      width: result.width,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error("No se pudo convertir el SVG a PNG.");
+  }
+}
diff --git a/src/tools/image/svg-to-png/svgToPng.types.ts b/src/tools/image/svg-to-png/svgToPng.types.ts
new file mode 100644
index 0000000..caabbc6
--- /dev/null
+++ b/src/tools/image/svg-to-png/svgToPng.types.ts
@@ -0,0 +1,37 @@
+export type SvgViewBox = {
+  height: number;
+  minX: number;
+  minY: number;
+  width: number;
+};
+
+export type SvgDimensions = {
+  height: number | null;
+  viewBox: SvgViewBox | null;
+  width: number | null;
+};
+
+export type SvgToPngMetadata = SvgDimensions & {
+  fileName: string | null;
+  hasExternalResources: boolean;
+  sourceSize: number;
+};
+
+export type SvgToPngOptions = {
+  backgroundColor: string;
+  height: number;
+  outputBaseName: string;
+  transparentBackground: boolean;
+  width: number;
+};
+
+export type SvgToPngResult = {
+  bytes: ArrayBuffer;
+  fileName: string;
+  height: number;
+  mimeType: "image/png";
+  size: number;
+  width: number;
+};
+
+export type SvgToPngStatus = "idle" | "reading" | "ready" | "processing" | "success" | "error";

From f20d5fc3780b087dbbe550ba42925cee5b155a3c Mon Sep 17 00:00:00 2001
From: "NELSON_PC\\nelso" <nj_romero@pj.gov.py>
Date: Sat, 6 Jun 2026 17:48:29 -0300
Subject: [PATCH 10/10] feat(image): add image tools suite and polish image
 workflows

---
 git                                           |   0
 src/features/tools/data/tools.ts              | 232 +++++---
 .../tools/renderers/toolRenderers.tsx         |   7 +-
 src/pages/ToolDetail/ToolDetailPage.tsx       |   2 +
 .../image/image-base64/Base64ToImageTool.tsx  | 218 ++++++++
 .../image/image-base64/ImageBase64Tool.tsx    | 465 ----------------
 .../image/image-base64/ImageToBase64Tool.tsx  | 260 +++++++++
 src/tools/image/image-base64/README.md        |  16 +-
 .../image-base64/imageBase64.service.test.ts  |  24 +
 src/tools/image/image-base64/index.ts         |   3 +-
 .../ImageColorExtractorTool.tsx               | 525 +++++++++++-------
 .../imageColorExtractor.service.test.ts       |  24 +
 .../imageColorExtractor.service.ts            |  24 +-
 .../image-compressor/ImageCompressorTool.tsx  |  50 +-
 .../image-converter/ImageConverterTool.tsx    |  47 +-
 .../image/image-cropper/ImageCropperTool.tsx  | 130 +++--
 .../image/image-joiner/ImageJoinerTool.tsx    |  85 ++-
 src/tools/image/image-joiner/README.md        |  17 +-
 .../ImagePlaceholderTool.tsx                  |  41 +-
 .../image/image-resizer/ImageResizerTool.tsx  |  92 ++-
 .../image/image-rotator/ImageRotatorTool.tsx  |  88 ++-
 .../image-splitter/ImageSplitterTool.tsx      |  85 ++-
 .../image-to-favicon/ImageToFaviconTool.tsx   |  62 ++-
 .../image-watermark/ImageWatermarkTool.tsx    | 405 ++++++++++----
 src/tools/image/image-watermark/README.md     |   1 -
 .../image-watermark/imageWatermark.service.ts | 150 +++--
 .../image-watermark/imageWatermark.types.ts   |  20 +-
 .../image/shared/OutputFormatSelector.tsx     |  43 ++
 28 files changed, 1801 insertions(+), 1315 deletions(-)
 create mode 100644 git
 create mode 100644 src/tools/image/image-base64/Base64ToImageTool.tsx
 delete mode 100644 src/tools/image/image-base64/ImageBase64Tool.tsx
 create mode 100644 src/tools/image/image-base64/ImageToBase64Tool.tsx
 create mode 100644 src/tools/image/shared/OutputFormatSelector.tsx

diff --git a/git b/git
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/tools/data/tools.ts b/src/features/tools/data/tools.ts
index b1c8db1..462082f 100644
--- a/src/features/tools/data/tools.ts
+++ b/src/features/tools/data/tools.ts
@@ -529,7 +529,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
         ],
         technicalNotes: [
           "La conversión usa canvas del navegador.",
-          "JPG no conserva transparencia; la herramienta usa fondo blanco al exportar.",
           "La calidad se aplica a JPG y WebP, no a PNG.",
         ],
       },
@@ -562,7 +561,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
         ],
         technicalNotes: [
           "Conversion uses the browser canvas.",
-          "JPG does not preserve transparency; the tool exports it over a white background.",
           "Quality applies to JPG and WebP, not PNG.",
         ],
       },
@@ -618,7 +616,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
           "Preparar una captura o recurso visual sin subirlo a un servidor.",
         ],
         limits: [
-          "JPG no conserva transparencia.",
           "WebP aparece si tu navegador permite exportarlo correctamente.",
           "Tamano maximo por imagen: 15 MB.",
         ],
@@ -651,7 +648,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
           "Prepare a screenshot or visual asset without uploading it to a server.",
         ],
         limits: [
-          "JPG does not preserve transparency.",
           "WebP appears if your browser can export it correctly.",
           "Maximum image size: 15 MB.",
         ],
@@ -720,7 +716,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
           "Extraer una parte de una foto sin subirla a un servidor.",
         ],
         limits: [
-          "JPG no conserva transparencia.",
           "WebP aparece si tu navegador permite exportarlo correctamente.",
           "Tamano maximo por imagen: 15 MB.",
           "El area de recorte no puede salirse de la imagen.",
@@ -754,7 +749,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
           "Extract part of a photo without uploading it to a server.",
         ],
         limits: [
-          "JPG does not preserve transparency.",
           "WebP appears if your browser can export it correctly.",
           "Maximum image size: 15 MB.",
           "The crop area cannot go outside the image.",
@@ -880,9 +874,9 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
     id: "image-joiner",
     slug: "unir-imagenes",
     slugEn: "join-images",
-    name: { es: "Unir imágenes", en: "Join images" },
+    name: { es: "Unir imágenes", en: "Join images" },
     description: {
-      es: "Une varias imágenes en una sola imagen vertical, horizontal o en cuadrícula.",
+      es: "Une varias imágenes en una sola imagen vertical, horizontal o en cuadrícula.",
       en: "Join multiple images into one vertical, horizontal or grid image.",
     },
     category: "image",
@@ -899,9 +893,9 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
     apiStatus: "planned",
     seo: {
       es: {
-        title: "Unir imágenes online gratis",
+        title: "Unir imágenes online gratis",
         description:
-          "Une imágenes PNG, JPG o WebP en una sola imagen vertical, horizontal o en cuadrícula desde tu navegador. Sin subir archivos a Modulaq.",
+          "Une imágenes PNG, JPG o WebP en una sola imagen vertical, horizontal o en cuadrícula desde tu navegador. Sin subir archivos a Modulaq.",
       },
       en: {
         title: "Join images online free",
@@ -912,37 +906,36 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
     doc: {
       es: {
         summary:
-          "Unir imágenes combina varias imágenes locales en un solo canvas con modo vertical, horizontal o cuadrícula.",
+          "Unir imágenes combina varias imágenes locales en un solo canvas con modo vertical, horizontal o cuadrícula.",
         howTo: [
-          "Agrega dos o más imágenes PNG, JPG/JPEG o WebP.",
+          "Agrega dos o más imágenes PNG, JPG/JPEG o WebP.",
           "Revisa nombre, tipo, peso y dimensiones de cada imagen.",
           "Ordena la lista con subir, bajar o eliminar.",
-          "Elige modo vertical, horizontal o cuadrícula. En cuadrícula, define columnas.",
-          "Ajusta separación, padding, color de fondo y formato de salida.",
-          "Une las imágenes y descarga el resultado.",
+          "Elige modo vertical, horizontal o cuadrícula. En cuadrícula, define columnas.",
+          "Ajusta separación, padding, color de fondo y formato de salida.",
+          "Une las imágenes y descarga el resultado.",
         ],
         useCases: [
           "Crear una tira vertical de capturas.",
-          "Poner imágenes lado a lado.",
-          "Armar una cuadrícula simple sin subir archivos.",
+          "Poner imágenes lado a lado.",
+          "Armar una cuadrícula simple sin subir archivos.",
         ],
         limits: [
-          "JPG no conserva transparencia.",
           "WebP aparece si tu navegador permite exportarlo correctamente.",
-          "Hasta 30 imágenes, 15 MB por imagen y 100 MB en total.",
-          "Las imágenes se dibujan en sus dimensiones originales.",
+          "Hasta 30 imágenes, 15 MB por imagen y 100 MB en total.",
+          "Las imágenes se dibujan en sus dimensiones originales.",
         ],
         privacy:
-          "El procesamiento de estas imágenes ocurre en tu navegador; no las subimos a Modulaq para unirlas.",
+          "El procesamiento de estas imágenes ocurre en tu navegador; no las subimos a Modulaq para unirlas.",
         commonErrors: [
           "Archivo que no es una imagen PNG, JPG o WebP.",
-          "Imagen dañada o que el navegador no puede decodificar.",
+          "Imagen dañada o que el navegador no puede decodificar.",
           "Canvas final demasiado grande para procesarlo localmente.",
         ],
         technicalNotes: [
-          "La exportación usa canvas en el navegador.",
+          "La exportación usa canvas en el navegador.",
           "Vertical y horizontal centran cada imagen en el eje secundario.",
-          "La cuadrícula usa celdas uniformes y calcula filas automáticamente.",
+          "La cuadrícula usa celdas uniformes y calcula filas automáticamente.",
         ],
       },
       en: {
@@ -962,7 +955,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
           "Build a simple grid without uploading files.",
         ],
         limits: [
-          "JPG does not preserve transparency.",
           "WebP appears if your browser can export it correctly.",
           "Up to 30 images, 15 MB each and 100 MB total.",
           "Images are drawn at their original dimensions.",
@@ -1034,7 +1026,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
         ],
         limits: [
           "Maximo 100 partes por operacion.",
-          "JPG no conserva transparencia.",
           "WebP aparece si tu navegador permite exportarlo correctamente.",
           "Tamano maximo por imagen: 15 MB.",
         ],
@@ -1069,7 +1060,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
         ],
         limits: [
           "Maximum 100 parts per operation.",
-          "JPG does not preserve transparency.",
           "WebP appears if your browser can export it correctly.",
           "Maximum image size: 15 MB.",
         ],
@@ -1425,7 +1415,7 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
       es: {
         title: "Agregar marca de agua a imagen online gratis",
         description:
-          "Agrega una marca de agua de texto a una imagen PNG, JPG o WebP. Configura texto, posicion, color y opacidad desde tu navegador.",
+          "Agrega una marca de agua de texto o logo a una imagen PNG, JPG o WebP. Configura posición, margen y opacidad desde tu navegador.",
       },
       en: {
         title: "Add image watermark online free",
@@ -1436,7 +1426,7 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
     doc: {
       es: {
         summary:
-          "Agregar marca de agua permite superponer texto sobre una imagen local y exportar el resultado desde el navegador.",
+          "Agregar marca de agua permite superponer texto o un logo sobre una imagen local y exportar el resultado desde el navegador.",
         howTo: [
           "Selecciona una imagen PNG, JPG/JPEG o WebP.",
           "Revisa nombre, tipo, peso y dimensiones originales.",
@@ -1451,7 +1441,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
           "Preparar una imagen con texto sobrepuesto sin subirla a un servidor.",
         ],
         limits: [
-          "JPG no conserva transparencia.",
           "WebP aparece si tu navegador permite exportarlo correctamente.",
           "No promete proteccion real contra copia o uso no autorizado.",
           "No incluye marca de agua con otra imagen ni drag visual.",
@@ -1486,7 +1475,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
           "Prepare an image with overlaid text without uploading it to a server.",
         ],
         limits: [
-          "JPG does not preserve transparency.",
           "WebP appears if your browser can export it correctly.",
           "It does not promise real protection against copying or unauthorized use.",
           "It does not include image watermarks or visual drag editing.",
@@ -1569,7 +1557,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
         ],
         technicalNotes: [
           "La exportación usa canvas.toBlob.",
-          "JPG no conserva transparencia; la herramienta exporta sobre fondo blanco.",
           "PNG no usa control de calidad y puede no reducir peso.",
         ],
       },
@@ -1602,7 +1589,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
         ],
         technicalNotes: [
           "Export uses canvas.toBlob.",
-          "JPG does not preserve transparency; the tool exports over a white background.",
           "PNG has no quality control and may not reduce file size.",
         ],
       },
@@ -1671,7 +1657,6 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
         ],
         technicalNotes: [
           "La redimensión usa canvas del navegador.",
-          "JPG no conserva transparencia; la herramienta exporta sobre fondo blanco.",
           "La salida WebP depende del soporte real del navegador.",
         ],
       },
@@ -1704,20 +1689,19 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
         ],
         technicalNotes: [
           "Resizing uses the browser canvas.",
-          "JPG does not preserve transparency; the tool exports over a white background.",
           "WebP output depends on actual browser support.",
         ],
       },
     },
   },
   {
-    id: "image-base64",
-    slug: "imagen-base64",
-    slugEn: "image-base64",
-    name: { es: "Imagen ↔ Base64", en: "Image ↔ Base64" },
+    id: "image-to-base64",
+    slug: "imagen-a-base64",
+    slugEn: "image-to-base64",
+    name: { es: "Imagen a Base64", en: "Image to Base64" },
     description: {
-      es: "Convierte imágenes a Base64 y reconstruye imágenes desde Base64 o Data URL.",
-      en: "Convert images to Base64 and rebuild images from Base64 or Data URLs.",
+      es: "Convierte una imagen en texto Base64 o Data URL. Todo se procesa localmente en tu navegador.",
+      en: "Convert an image into Base64 text or a Data URL. Everything runs locally in your browser.",
     },
     category: "image",
     tags: {
@@ -1733,81 +1717,179 @@ export async function imagesToPdf(files: File[]): Promise<Uint8Array> {
     apiStatus: "planned",
     seo: {
       es: {
-        title: "Imagen a Base64 y Base64 a imagen online",
+        title: "Imagen a Base64 online",
         description:
-          "Convertí una imagen a Base64 o reconstruí una imagen desde Base64/Data URL. Todo se procesa localmente en tu navegador.",
+          "Convierte una imagen PNG, JPG o WebP a Base64 puro o Data URL. Todo se procesa localmente en tu navegador.",
       },
       en: {
-        title: "Image to Base64 and Base64 to image online",
+        title: "Image to Base64 online",
         description:
-          "Convert an image to Base64 or rebuild an image from Base64/Data URL. Everything runs locally in your browser.",
+          "Convert a PNG, JPG or WebP image to plain Base64 or a Data URL. Everything runs locally in your browser.",
       },
     },
     doc: {
       es: {
         summary:
-          "Imagen ↔ Base64 ofrece dos modos internos: convertir una imagen a Base64/Data URL y reconstruir una imagen desde texto Base64.",
+          "Imagen a Base64 convierte un archivo PNG, JPG/JPEG o WebP en texto Base64 puro y Data URL completa.",
         howTo: [
-          "Elegí el modo Imagen a Base64 o Base64 a imagen.",
-          "Para imagen a Base64, cargá una imagen PNG, JPG/JPEG o WebP.",
-          "Copiá Base64 puro o Data URL completa, o descargá el resultado como TXT.",
-          "Para Base64 a imagen, pegá Base64 puro o una Data URL.",
-          "Si pegás Base64 puro, elegí el tipo de imagen esperado antes de reconstruir.",
+          "Carga una imagen PNG, JPG/JPEG o WebP.",
+          "Revisa nombre, tipo, peso original y extension detectada.",
+          "Copia Base64 puro o Data URL completa.",
+          "Descarga el resultado como TXT si necesitas guardarlo.",
         ],
         useCases: [
-          "Incrustar una imagen pequeña en HTML, CSS o JSON.",
-          "Probar payloads Base64 en desarrollo.",
-          "Recuperar una imagen a partir de una Data URL.",
+          "Incrustar una imagen pequena en HTML, CSS o JSON.",
+          "Preparar una Data URL para pruebas frontend.",
+          "Compartir un payload Base64 sin backend.",
         ],
         limits: [
-          "Base64 suele ocupar más que el archivo binario original.",
+          "Base64 suele ocupar mas que el archivo binario original.",
           "No comprime, optimiza ni convierte formato de imagen.",
-          "Una cadena Base64 válida puede no representar una imagen previsualizable.",
+          "Las imagenes grandes generan textos largos dificiles de revisar manualmente.",
         ],
         privacy:
-          "La conversión y reconstrucción ocurren en tu navegador; no subimos estos datos a Modulaq.",
+          "La conversion ocurre en tu navegador; no subimos esta imagen a Modulaq.",
         commonErrors: [
-          "Base64 inválido o incompleto.",
-          "Data URL sin MIME válido.",
-          "Base64 válido que no corresponde a una imagen del tipo elegido.",
+          "Archivo que no es PNG, JPG/JPEG o WebP.",
+          "Imagen danada o que el navegador no puede leer.",
+          "Archivo demasiado grande para procesar con estabilidad.",
         ],
         technicalNotes: [
-          "Imagen a Base64 usa FileReader.readAsDataURL.",
-          "Base64 a imagen decodifica con atob y genera un Blob local.",
+          "Usa FileReader.readAsDataURL.",
+          "El Base64 puro se obtiene removiendo el prefijo Data URL.",
           "Los MIME admitidos son image/png, image/jpeg e image/webp.",
         ],
       },
       en: {
         summary:
-          "Image ↔ Base64 provides two internal modes: convert an image to Base64/Data URL and rebuild an image from Base64 text.",
+          "Image to Base64 converts a PNG, JPG/JPEG or WebP file into plain Base64 text and a full Data URL.",
         howTo: [
-          "Choose Image to Base64 or Base64 to image.",
-          "For image to Base64, upload a PNG, JPG/JPEG or WebP image.",
-          "Copy the plain Base64 or full Data URL, or download the result as TXT.",
-          "For Base64 to image, paste plain Base64 or a Data URL.",
-          "If you paste plain Base64, choose the expected image type before rebuilding.",
+          "Upload a PNG, JPG/JPEG or WebP image.",
+          "Review name, type, original size and detected extension.",
+          "Copy the plain Base64 or the full Data URL.",
+          "Download the result as TXT if you need to save it.",
         ],
         useCases: [
           "Embed a small image in HTML, CSS or JSON.",
-          "Test Base64 payloads during development.",
-          "Recover an image from a Data URL.",
+          "Prepare a Data URL for frontend testing.",
+          "Share a Base64 payload without a backend.",
         ],
         limits: [
           "Base64 usually takes more space than the original binary file.",
           "It does not compress, optimize or convert the image format.",
+          "Large images generate long text that is hard to inspect manually.",
+        ],
+        privacy:
+          "Conversion happens in your browser; we don't upload this image to Modulaq.",
+        commonErrors: [
+          "A file that is not PNG, JPG/JPEG or WebP.",
+          "A damaged image or one the browser cannot read.",
+          "A file too large to process reliably.",
+        ],
+        technicalNotes: [
+          "Uses FileReader.readAsDataURL.",
+          "Plain Base64 is obtained by removing the Data URL prefix.",
+          "Supported MIME types are image/png, image/jpeg and image/webp.",
+        ],
+      },
+    },
+  },
+  {
+    id: "base64-to-image",
+    slug: "base64-a-imagen",
+    slugEn: "base64-to-image",
+    name: { es: "Base64 a imagen", en: "Base64 to image" },
+    description: {
+      es: "Reconstruye una imagen desde Base64 o Data URL. Una cadena Base64 valida no siempre representa una imagen.",
+      en: "Rebuild an image from Base64 or a Data URL. A valid Base64 string does not always represent an image.",
+    },
+    category: "image",
+    tags: {
+      es: ["base64", "imagen", "data url", "png", "jpg", "webp"],
+      en: ["base64", "image", "data url", "png", "jpg", "webp"],
+    },
+    modes: v11AvailableModes,
+    plannedModes: v11PlannedModes,
+    status: "active",
+    pricing: "free",
+    requiresBackend: false,
+    requiresAI: false,
+    apiStatus: "planned",
+    seo: {
+      es: {
+        title: "Base64 a imagen online",
+        description:
+          "Pega Base64 puro o una Data URL y descarga la imagen reconstruida como PNG, JPG o WebP. El proceso ocurre localmente.",
+      },
+      en: {
+        title: "Base64 to image online",
+        description:
+          "Paste plain Base64 or a Data URL and download the rebuilt image as PNG, JPG or WebP. Processing happens locally.",
+      },
+    },
+    doc: {
+      es: {
+        summary:
+          "Base64 a imagen reconstruye un archivo descargable desde Base64 puro o una Data URL con MIME de imagen.",
+        howTo: [
+          "Pega Base64 puro o una Data URL.",
+          "Si pegas Base64 puro, elige el tipo esperado: PNG, JPG o WebP.",
+          "Define el nombre de salida.",
+          "Reconstruye la imagen y descargala si la previsualizacion es valida.",
+        ],
+        useCases: [
+          "Recuperar una imagen desde una Data URL.",
+          "Validar payloads Base64 recibidos en desarrollo.",
+          "Convertir texto Base64 en un archivo descargable.",
+        ],
+        limits: [
+          "Una cadena Base64 valida puede no representar una imagen previsualizable.",
+          "Data URL debe usar image/png, image/jpeg o image/webp.",
+          "No corrige contenido danado ni cambia la imagen real.",
+        ],
+        privacy:
+          "La reconstruccion ocurre en tu navegador; no subimos este texto a Modulaq.",
+        commonErrors: [
+          "Base64 invalido o incompleto.",
+          "Data URL invalida o con MIME no soportado.",
+          "Base64 valido que no corresponde a una imagen del tipo elegido.",
+        ],
+        technicalNotes: [
+          "Decodifica con atob y genera un Blob local.",
+          "Si el texto es Data URL, se usa el MIME detectado.",
+          "Si el texto es Base64 puro, se usa el MIME elegido por el usuario.",
+        ],
+      },
+      en: {
+        summary:
+          "Base64 to image rebuilds a downloadable file from plain Base64 or a Data URL with an image MIME type.",
+        howTo: [
+          "Paste plain Base64 or a Data URL.",
+          "If you paste plain Base64, choose the expected type: PNG, JPG or WebP.",
+          "Set the output name.",
+          "Rebuild the image and download it if the preview is valid.",
+        ],
+        useCases: [
+          "Recover an image from a Data URL.",
+          "Validate Base64 payloads during development.",
+          "Turn Base64 text into a downloadable file.",
+        ],
+        limits: [
           "A valid Base64 string may not represent a previewable image.",
+          "Data URLs must use image/png, image/jpeg or image/webp.",
+          "It does not repair damaged content or change the actual image.",
         ],
         privacy:
-          "Conversion and rebuilding happen in your browser; we don't upload this data to Modulaq.",
+          "Rebuilding happens in your browser; we don't upload this text to Modulaq.",
         commonErrors: [
           "Invalid or incomplete Base64.",
-          "Data URL without a valid MIME type.",
+          "Invalid Data URL or unsupported MIME type.",
           "Valid Base64 that does not match the selected image type.",
         ],
         technicalNotes: [
-          "Image to Base64 uses FileReader.readAsDataURL.",
-          "Base64 to image decodes with atob and creates a local Blob.",
-          "Supported MIME types are image/png, image/jpeg and image/webp.",
+          "Decodes with atob and creates a local Blob.",
+          "If the text is a Data URL, the detected MIME is used.",
+          "If the text is plain Base64, the user-selected MIME is used.",
         ],
       },
     },
diff --git a/src/features/tools/renderers/toolRenderers.tsx b/src/features/tools/renderers/toolRenderers.tsx
index b619bec..e9ed796 100644
--- a/src/features/tools/renderers/toolRenderers.tsx
+++ b/src/features/tools/renderers/toolRenderers.tsx
@@ -8,8 +8,11 @@ export type ToolRendererProps = {
 export type ToolRenderer = LazyExoticComponent<ComponentType<ToolRendererProps>>;
 
 const toolRenderers: Partial<Record<ToolMetadata["id"], ToolRenderer>> = {
-  "image-base64": lazy(() =>
-    import("../../../tools/image/image-base64").then((module) => ({ default: module.ImageBase64Tool })),
+  "base64-to-image": lazy(() =>
+    import("../../../tools/image/image-base64").then((module) => ({ default: module.Base64ToImageTool })),
+  ),
+  "image-to-base64": lazy(() =>
+    import("../../../tools/image/image-base64").then((module) => ({ default: module.ImageToBase64Tool })),
   ),
   "image-compressor": lazy(() =>
     import("../../../tools/image/image-compressor").then((module) => ({ default: module.ImageCompressorTool })),
diff --git a/src/pages/ToolDetail/ToolDetailPage.tsx b/src/pages/ToolDetail/ToolDetailPage.tsx
index f1f4f43..cd7672a 100644
--- a/src/pages/ToolDetail/ToolDetailPage.tsx
+++ b/src/pages/ToolDetail/ToolDetailPage.tsx
@@ -55,6 +55,8 @@ const relatedToolIds: Record<string, string[]> = {
   "split-pdf": ["merge-pdf", "reorder-pdf-pages"],
   "reorder-pdf-pages": ["merge-pdf", "split-pdf"],
   "image-to-pdf": ["merge-pdf"],
+  "image-to-base64": ["base64-to-image"],
+  "base64-to-image": ["image-to-base64"],
 };
 
 function isDefinition(tool: ToolDefinition | undefined): tool is ToolDefinition {
diff --git a/src/tools/image/image-base64/Base64ToImageTool.tsx b/src/tools/image/image-base64/Base64ToImageTool.tsx
new file mode 100644
index 0000000..bd216c6
--- /dev/null
+++ b/src/tools/image/image-base64/Base64ToImageTool.tsx
@@ -0,0 +1,218 @@
+import { Download, FileImage, Loader2, RotateCcw } from "lucide-react";
+import { useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import type { BrowserImageMimeType } from "../../../shared/utils/imageFiles";
+import {
+  base64ImageMimeTypes,
+  buildBase64ImageFileName,
+  defaultImageOutputBaseName,
+  formatFileSize,
+  getBase64TextSize,
+  getMimeLabel,
+  inferExtensionFromMime,
+  parseBase64ImageInput,
+} from "./imageBase64.service";
+import type { Base64ImageResult, ImageBase64Status } from "./imageBase64.types";
+
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+const textareaClassName = cn(inputClassName, "min-h-56 resize-y py-3 font-mono text-xs leading-5");
+
+type ReconstructedImage = Base64ImageResult & {
+  url: string;
+};
+
+export function Base64ToImageTool() {
+  const { language, t } = useI18n();
+  const previewUrlRef = useRef<string | null>(null);
+  const [status, setStatus] = useState<ImageBase64Status>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [base64Input, setBase64Input] = useState("");
+  const [fallbackMimeType, setFallbackMimeType] = useState<BrowserImageMimeType>("image/png");
+  const [imageOutputBaseName, setImageOutputBaseName] = useState(defaultImageOutputBaseName);
+  const [reconstructedImage, setReconstructedImage] = useState<ReconstructedImage | null>(null);
+
+  const intro =
+    language === "en"
+      ? "Rebuild an image from Base64 or a Data URL."
+      : "Reconstruye una imagen desde Base64 o Data URL.";
+  const warning =
+    language === "en"
+      ? "A valid Base64 string does not always represent an image."
+      : "Una cadena Base64 válida no siempre representa una imagen.";
+
+  const clearPreviewUrl = () => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    if (status === "success" || status === "error") {
+      setStatus("idle");
+    }
+  };
+
+  const reconstructImage = () => {
+    setStatus("processing");
+    setError(null);
+    clearPreviewUrl();
+    setReconstructedImage(null);
+
+    try {
+      const parsed = parseBase64ImageInput(base64Input, fallbackMimeType);
+      const url = URL.createObjectURL(parsed.blob);
+      previewUrlRef.current = url;
+      setReconstructedImage({
+        ...parsed,
+        fileName: buildBase64ImageFileName(imageOutputBaseName, parsed.mimeType),
+        url,
+      });
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : t("tools.image-base64.ui.couldNotReconstruct"));
+    }
+  };
+
+  const downloadImage = () => {
+    if (!reconstructedImage) return;
+    const link = document.createElement("a");
+    link.href = reconstructedImage.url;
+    link.download = reconstructedImage.fileName;
+    link.click();
+  };
+
+  const clear = () => {
+    clearPreviewUrl();
+    setBase64Input("");
+    setFallbackMimeType("image/png");
+    setImageOutputBaseName(defaultImageOutputBaseName);
+    setReconstructedImage(null);
+    setStatus("idle");
+    setError(null);
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.95fr)_minmax(310px,0.55fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.base64Source")}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{intro}</p>
+            <p className="mt-1 text-xs leading-5 text-ink-500">{warning}</p>
+          </div>
+          <textarea
+            className={textareaClassName}
+            placeholder={t("tools.image-base64.ui.base64Placeholder")}
+            value={base64Input}
+            onChange={(event) => {
+              setBase64Input(event.target.value);
+              resetFeedback();
+            }}
+          />
+          <div className="grid gap-3 sm:grid-cols-2">
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {t("tools.image-base64.ui.fallbackType")}
+              <select
+                className={inputClassName}
+                value={fallbackMimeType}
+                onChange={(event) => {
+                  setFallbackMimeType(event.target.value as BrowserImageMimeType);
+                  resetFeedback();
+                }}
+              >
+                {base64ImageMimeTypes.map((mimeType) => (
+                  <option key={mimeType} value={mimeType}>
+                    {getMimeLabel(mimeType)}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              {t("tools.image-base64.ui.imageName")}
+              <input
+                className={inputClassName}
+                value={imageOutputBaseName}
+                onChange={(event) => {
+                  setImageOutputBaseName(event.target.value);
+                  resetFeedback();
+                }}
+              />
+            </label>
+          </div>
+          {error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+          <div className="grid gap-2">
+            <Button type="button" className="gap-2" onClick={reconstructImage} disabled={!base64Input.trim()}>
+              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <FileImage size={16} />}
+              {t("tools.image-base64.ui.reconstructCta")}
+            </Button>
+            <Button type="button" variant="ghost" className="gap-2" onClick={clear}>
+              <RotateCcw size={16} />
+              {t("toolUi.clear")}
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.reconstructedTitle")}</h3>
+            <p className="mt-1 text-xs leading-5 text-ink-500">{t("tools.image-base64.ui.reconstructedIntro")}</p>
+          </div>
+
+          {reconstructedImage ? (
+            <div className="grid gap-3">
+              <img
+                src={reconstructedImage.url}
+                alt=""
+                className="max-h-72 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm"
+                onError={() => {
+                  setStatus("error");
+                  setError(t("tools.image-base64.ui.invalidMime"));
+                  clearPreviewUrl();
+                  setReconstructedImage(null);
+                }}
+              />
+              <dl className="grid gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 text-sm shadow-sm sm:grid-cols-2">
+                <div>
+                  <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                  <dd className="font-semibold text-ink-900">{getMimeLabel(reconstructedImage.mimeType)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("tools.image-base64.ui.extension")}</dt>
+                  <dd className="font-semibold text-ink-900">.{inferExtensionFromMime(reconstructedImage.mimeType)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("tools.image-base64.ui.reconstructedSize")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(reconstructedImage.blob.size)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink-500">{t("tools.image-base64.ui.processedText")}</dt>
+                  <dd className="font-semibold text-ink-900">{formatFileSize(getBase64TextSize(reconstructedImage.base64))}</dd>
+                </div>
+              </dl>
+              <Button type="button" className="gap-2" onClick={downloadImage}>
+                <Download size={16} />
+                {t("imageUi.downloadImage")}
+              </Button>
+            </div>
+          ) : (
+            <p className="rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              {t("tools.image-base64.ui.pasteFirst")}
+            </p>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-base64/ImageBase64Tool.tsx b/src/tools/image/image-base64/ImageBase64Tool.tsx
deleted file mode 100644
index bbf1375..0000000
--- a/src/tools/image/image-base64/ImageBase64Tool.tsx
+++ /dev/null
@@ -1,465 +0,0 @@
-import { Clipboard, Download, FileImage, Loader2, RotateCcw, Upload } from "lucide-react";
-import { useRef, useState } from "react";
-import { Button } from "../../../shared/components/Button";
-import { useI18n } from "../../../shared/i18n/I18nProvider";
-import { cn } from "../../../shared/utils/cn";
-import { getImageFileSizeLimitError } from "../../../shared/utils/fileProcessingLimits";
-import {
-  base64ImageMimeTypes,
-  buildBase64ImageFileName,
-  buildBase64TextFileName,
-  defaultImageOutputBaseName,
-  defaultTextOutputBaseName,
-  fileToBase64,
-  formatFileSize,
-  getBase64TextSize,
-  getMimeLabel,
-  inferExtensionFromMime,
-  parseBase64ImageInput,
-} from "./imageBase64.service";
-import type {
-  Base64ImageResult,
-  ImageBase64CopyTarget,
-  ImageBase64Metadata,
-  ImageBase64Mode,
-  ImageBase64Status,
-} from "./imageBase64.types";
-import type { BrowserImageMimeType } from "../../../shared/utils/imageFiles";
-
-const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
-const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
-const textareaClassName = cn(inputClassName, "min-h-56 resize-y py-3 font-mono text-xs leading-5");
-
-type ReconstructedImage = Base64ImageResult & {
-  url: string;
-};
-
-export function ImageBase64Tool() {
-  const { t } = useI18n();
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const previewUrlRef = useRef<string | null>(null);
-  const [mode, setMode] = useState<ImageBase64Mode>("image-to-base64");
-  const [status, setStatus] = useState<ImageBase64Status>("idle");
-  const [error, setError] = useState<string | null>(null);
-  const [imageMetadata, setImageMetadata] = useState<ImageBase64Metadata | null>(null);
-  const [textOutputBaseName, setTextOutputBaseName] = useState(defaultTextOutputBaseName);
-  const [base64Input, setBase64Input] = useState("");
-  const [fallbackMimeType, setFallbackMimeType] = useState<BrowserImageMimeType>("image/png");
-  const [imageOutputBaseName, setImageOutputBaseName] = useState(defaultImageOutputBaseName);
-  const [reconstructedImage, setReconstructedImage] = useState<ReconstructedImage | null>(null);
-  const [copiedTarget, setCopiedTarget] = useState<ImageBase64CopyTarget | null>(null);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const getCopyLabel = (target: ImageBase64CopyTarget) => {
-    if (target === copiedTarget) return t("toolUi.copied");
-    return target === "base64"
-      ? t("tools.image-base64.ui.copyBase64")
-      : t("tools.image-base64.ui.copyDataUrl");
-  };
-
-  const clearPreviewUrl = () => {
-    if (previewUrlRef.current) {
-      URL.revokeObjectURL(previewUrlRef.current);
-      previewUrlRef.current = null;
-    }
-  };
-
-  const resetFeedback = () => {
-    setError(null);
-    setCopiedTarget(null);
-    if (status === "success" || status === "error") {
-      setStatus("idle");
-    }
-  };
-
-  const switchMode = (nextMode: ImageBase64Mode) => {
-    setMode(nextMode);
-    setError(null);
-    setCopiedTarget(null);
-    setStatus("idle");
-  };
-
-  const processFile = async (file: File | undefined) => {
-    if (!file) return;
-    setStatus("reading");
-    setError(null);
-    setImageMetadata(null);
-    setCopiedTarget(null);
-
-    const fileLimitError = getImageFileSizeLimitError(file);
-    if (fileLimitError) {
-      setStatus("error");
-      setError(fileLimitError);
-      return;
-    }
-
-    try {
-      const nextMetadata = await fileToBase64(file);
-      setImageMetadata(nextMetadata);
-      setTextOutputBaseName(nextMetadata.fileName.replace(/\.[^.]+$/, "") || defaultTextOutputBaseName);
-      setStatus("success");
-    } catch (nextError) {
-      setStatus("error");
-      setError(nextError instanceof Error ? nextError.message : t("tools.image-base64.ui.couldNotConvert"));
-    }
-  };
-
-  const copyText = async (target: ImageBase64CopyTarget) => {
-    if (!imageMetadata) return;
-    try {
-      await navigator.clipboard.writeText(target === "base64" ? imageMetadata.base64 : imageMetadata.dataUrl);
-      setCopiedTarget(target);
-      window.setTimeout(() => setCopiedTarget(null), 1800);
-    } catch {
-      setError(t("tools.image-base64.ui.couldNotCopy"));
-    }
-  };
-
-  const downloadText = () => {
-    if (!imageMetadata) return;
-    const content = `Base64:\n${imageMetadata.base64}\n\nData URL:\n${imageMetadata.dataUrl}\n`;
-    const url = URL.createObjectURL(new Blob([content], { type: "text/plain;charset=utf-8" }));
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = buildBase64TextFileName(textOutputBaseName);
-    link.click();
-    URL.revokeObjectURL(url);
-  };
-
-  const clearImageToBase64 = () => {
-    setImageMetadata(null);
-    setTextOutputBaseName(defaultTextOutputBaseName);
-    setStatus("idle");
-    setError(null);
-    setCopiedTarget(null);
-    setIsDragging(false);
-    if (fileInputRef.current) fileInputRef.current.value = "";
-  };
-
-  const reconstructImage = () => {
-    setStatus("processing");
-    setError(null);
-    setCopiedTarget(null);
-    clearPreviewUrl();
-    setReconstructedImage(null);
-
-    try {
-      const parsed = parseBase64ImageInput(base64Input, fallbackMimeType);
-      const url = URL.createObjectURL(parsed.blob);
-      previewUrlRef.current = url;
-      setReconstructedImage({
-        ...parsed,
-        fileName: buildBase64ImageFileName(imageOutputBaseName, parsed.mimeType),
-        url,
-      });
-      setStatus("success");
-    } catch (nextError) {
-      setStatus("error");
-      setError(nextError instanceof Error ? nextError.message : t("tools.image-base64.ui.couldNotReconstruct"));
-    }
-  };
-
-  const downloadImage = () => {
-    if (!reconstructedImage) return;
-    const link = document.createElement("a");
-    link.href = reconstructedImage.url;
-    link.download = reconstructedImage.fileName;
-    link.click();
-  };
-
-  const clearBase64ToImage = () => {
-    clearPreviewUrl();
-    setBase64Input("");
-    setFallbackMimeType("image/png");
-    setImageOutputBaseName(defaultImageOutputBaseName);
-    setReconstructedImage(null);
-    setStatus("idle");
-    setError(null);
-  };
-
-  return (
-    <div className="grid gap-5">
-      <section className="rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
-        <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
-          <div>
-            <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.title")}</h3>
-            <p className="mt-1 text-sm leading-6 text-ink-500">{t("tools.image-base64.ui.intro")}</p>
-          </div>
-          <div className="grid gap-2 sm:grid-cols-2">
-            <Button type="button" variant={mode === "image-to-base64" ? "primary" : "secondary"} onClick={() => switchMode("image-to-base64")}>
-              {t("tools.image-base64.ui.modeImageToBase64")}
-            </Button>
-            <Button type="button" variant={mode === "base64-to-image" ? "primary" : "secondary"} onClick={() => switchMode("base64-to-image")}>
-              {t("tools.image-base64.ui.modeBase64ToImage")}
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {mode === "image-to-base64" ? (
-        <div className="grid gap-5 lg:grid-cols-[minmax(0,0.95fr)_minmax(310px,0.55fr)]">
-          <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
-            <div className="grid gap-4">
-              <div>
-                <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.sourceTitle")}</h3>
-                <p className="mt-1 text-sm leading-6 text-ink-500">{t("tools.image-base64.ui.sourceIntro")}</p>
-              </div>
-
-              <button
-                className={cn(
-                  "grid min-h-44 place-items-center rounded-lg border border-dashed p-6 text-center transition",
-                  isDragging
-                    ? "border-accent-cyan bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
-                )}
-                type="button"
-                onClick={() => fileInputRef.current?.click()}
-                onDragEnter={(event) => {
-                  event.preventDefault();
-                  setIsDragging(true);
-                }}
-                onDragOver={(event) => event.preventDefault()}
-                onDragLeave={(event) => {
-                  event.preventDefault();
-                  setIsDragging(false);
-                }}
-                onDrop={(event) => {
-                  event.preventDefault();
-                  setIsDragging(false);
-                  void processFile(event.dataTransfer.files[0]);
-                }}
-              >
-                <span>
-                  <span className="mx-auto grid h-12 w-12 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
-                    <Upload size={24} />
-                  </span>
-                  <span className="mt-3 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
-                  <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHintShort")}</span>
-                </span>
-              </button>
-
-              <input
-                ref={fileInputRef}
-                accept={acceptedImageTypes}
-                className="hidden"
-                type="file"
-                onChange={(event) => {
-                  void processFile(event.target.files?.[0]);
-                  event.target.value = "";
-                }}
-              />
-
-              {status === "reading" ? (
-                <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
-                  <Loader2 className="animate-spin text-accent-teal" size={16} />
-                  {t("imageUi.reading")}
-                </p>
-              ) : null}
-
-              {error ? (
-                <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-                  {error}
-                </p>
-              ) : null}
-
-              {imageMetadata ? (
-                <dl className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 text-sm shadow-sm sm:grid-cols-2">
-                  <div>
-                    <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
-                    <dd className="truncate font-semibold text-ink-900">{imageMetadata.fileName}</dd>
-                  </div>
-                  <div>
-                    <dt className="text-ink-500">{t("imageUi.type")}</dt>
-                    <dd className="font-semibold text-ink-900">{getMimeLabel(imageMetadata.mimeType)}</dd>
-                  </div>
-                  <div>
-                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
-                    <dd className="font-semibold text-ink-900">{formatFileSize(imageMetadata.fileSize)}</dd>
-                  </div>
-                  <div>
-                    <dt className="text-ink-500">{t("tools.image-base64.ui.detectedExtension")}</dt>
-                    <dd className="font-semibold text-ink-900">.{imageMetadata.extension}</dd>
-                  </div>
-                </dl>
-              ) : null}
-            </div>
-          </section>
-
-          <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
-            <div className="grid gap-4">
-              <div>
-                <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.resultTitle")}</h3>
-                <p className="mt-1 text-xs leading-5 text-ink-500">{t("tools.image-base64.ui.resultIntro")}</p>
-              </div>
-
-              <label className="grid gap-2 text-sm font-semibold text-ink-700">
-                {t("tools.image-base64.ui.txtName")}
-                <input
-                  className={inputClassName}
-                  value={textOutputBaseName}
-                  onChange={(event) => {
-                    setTextOutputBaseName(event.target.value);
-                    resetFeedback();
-                  }}
-                />
-              </label>
-
-              {imageMetadata ? (
-                <>
-                  <div
-                    className="rounded-lg border border-accent-cyan/25 bg-accent-cyan/10 p-3 text-sm text-ink-700"
-                    dangerouslySetInnerHTML={{
-                      __html: t("tools.image-base64.ui.textSize", {
-                        size: formatFileSize(imageMetadata.textSize),
-                      }),
-                    }}
-                  />
-                  <textarea className={textareaClassName} readOnly value={imageMetadata.dataUrl} />
-                  <div className="grid gap-2">
-                    <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyText("base64")}>
-                      <Clipboard size={16} />
-                      {getCopyLabel("base64")}
-                    </Button>
-                    <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyText("data-url")}>
-                      <Clipboard size={16} />
-                      {getCopyLabel("data-url")}
-                    </Button>
-                    <Button type="button" className="gap-2" onClick={downloadText}>
-                      <Download size={16} />
-                      {t("tools.image-base64.ui.downloadTxt")}
-                    </Button>
-                    <Button type="button" variant="ghost" className="gap-2" onClick={clearImageToBase64}>
-                      <RotateCcw size={16} />
-                      {t("toolUi.clear")}
-                    </Button>
-                  </div>
-                </>
-              ) : (
-                <p className="rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
-                  {t("tools.image-base64.ui.pickFirstImage")}
-                </p>
-              )}
-            </div>
-          </section>
-        </div>
-      ) : (
-        <div className="grid gap-5 lg:grid-cols-[minmax(0,0.95fr)_minmax(310px,0.55fr)]">
-          <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
-            <div className="grid gap-4">
-              <div>
-                <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.base64Source")}</h3>
-                <p className="mt-1 text-sm leading-6 text-ink-500">{t("tools.image-base64.ui.base64SourceIntro")}</p>
-              </div>
-              <textarea
-                className={textareaClassName}
-                placeholder={t("tools.image-base64.ui.base64Placeholder")}
-                value={base64Input}
-                onChange={(event) => {
-                  setBase64Input(event.target.value);
-                  resetFeedback();
-                }}
-              />
-              <div className="grid gap-3 sm:grid-cols-2">
-                <label className="grid gap-2 text-sm font-semibold text-ink-700">
-                  {t("tools.image-base64.ui.fallbackType")}
-                  <select
-                    className={inputClassName}
-                    value={fallbackMimeType}
-                    onChange={(event) => {
-                      setFallbackMimeType(event.target.value as BrowserImageMimeType);
-                      resetFeedback();
-                    }}
-                  >
-                    {base64ImageMimeTypes.map((mimeType) => (
-                      <option key={mimeType} value={mimeType}>
-                        {getMimeLabel(mimeType)}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <label className="grid gap-2 text-sm font-semibold text-ink-700">
-                  {t("tools.image-base64.ui.imageName")}
-                  <input
-                    className={inputClassName}
-                    value={imageOutputBaseName}
-                    onChange={(event) => {
-                      setImageOutputBaseName(event.target.value);
-                      resetFeedback();
-                    }}
-                  />
-                </label>
-              </div>
-              {error ? (
-                <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-                  {error}
-                </p>
-              ) : null}
-              <div className="grid gap-2">
-                <Button type="button" className="gap-2" onClick={reconstructImage} disabled={!base64Input.trim()}>
-                  {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <FileImage size={16} />}
-                  {t("tools.image-base64.ui.reconstructCta")}
-                </Button>
-                <Button type="button" variant="ghost" className="gap-2" onClick={clearBase64ToImage}>
-                  <RotateCcw size={16} />
-                  {t("toolUi.clear")}
-                </Button>
-              </div>
-            </div>
-          </section>
-
-          <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
-            <div className="grid gap-4">
-              <div>
-                <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.reconstructedTitle")}</h3>
-                <p className="mt-1 text-xs leading-5 text-ink-500">{t("tools.image-base64.ui.reconstructedIntro")}</p>
-              </div>
-
-              {reconstructedImage ? (
-                <div className="grid gap-3">
-                  <img
-                    src={reconstructedImage.url}
-                    alt=""
-                    className="max-h-72 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm"
-                    onError={() => {
-                      setStatus("error");
-                      setError(t("tools.image-base64.ui.invalidMime"));
-                      clearPreviewUrl();
-                      setReconstructedImage(null);
-                    }}
-                  />
-                  <dl className="grid gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 text-sm shadow-sm sm:grid-cols-2">
-                    <div>
-                      <dt className="text-ink-500">{t("imageUi.type")}</dt>
-                      <dd className="font-semibold text-ink-900">{getMimeLabel(reconstructedImage.mimeType)}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-ink-500">{t("tools.image-base64.ui.extension")}</dt>
-                      <dd className="font-semibold text-ink-900">.{inferExtensionFromMime(reconstructedImage.mimeType)}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-ink-500">{t("tools.image-base64.ui.reconstructedSize")}</dt>
-                      <dd className="font-semibold text-ink-900">{formatFileSize(reconstructedImage.blob.size)}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-ink-500">{t("tools.image-base64.ui.processedText")}</dt>
-                      <dd className="font-semibold text-ink-900">{formatFileSize(getBase64TextSize(reconstructedImage.base64))}</dd>
-                    </div>
-                  </dl>
-                  <Button type="button" className="gap-2" onClick={downloadImage}>
-                    <Download size={16} />
-                    {t("imageUi.downloadImage")}
-                  </Button>
-                </div>
-              ) : (
-                <p className="rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
-                  {t("tools.image-base64.ui.pasteFirst")}
-                </p>
-              )}
-            </div>
-          </section>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/tools/image/image-base64/ImageToBase64Tool.tsx b/src/tools/image/image-base64/ImageToBase64Tool.tsx
new file mode 100644
index 0000000..3dfbb01
--- /dev/null
+++ b/src/tools/image/image-base64/ImageToBase64Tool.tsx
@@ -0,0 +1,260 @@
+import { Clipboard, Download, Loader2, RotateCcw, Upload } from "lucide-react";
+import { useRef, useState } from "react";
+import { Button } from "../../../shared/components/Button";
+import { useI18n } from "../../../shared/i18n/I18nProvider";
+import { cn } from "../../../shared/utils/cn";
+import { getImageFileSizeLimitError } from "../../../shared/utils/fileProcessingLimits";
+import {
+  buildBase64TextFileName,
+  defaultTextOutputBaseName,
+  fileToBase64,
+  formatFileSize,
+  getMimeLabel,
+} from "./imageBase64.service";
+import type { ImageBase64CopyTarget, ImageBase64Metadata, ImageBase64Status } from "./imageBase64.types";
+
+const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+const inputClassName =
+  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+const textareaClassName = cn(inputClassName, "min-h-56 resize-y py-3 font-mono text-xs leading-5");
+
+export function ImageToBase64Tool() {
+  const { language, t } = useI18n();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [status, setStatus] = useState<ImageBase64Status>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [imageMetadata, setImageMetadata] = useState<ImageBase64Metadata | null>(null);
+  const [textOutputBaseName, setTextOutputBaseName] = useState(defaultTextOutputBaseName);
+  const [copiedTarget, setCopiedTarget] = useState<ImageBase64CopyTarget | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const intro =
+    language === "en"
+      ? "Convert an image into Base64 text or a Data URL."
+      : "Convierte una imagen en texto Base64 o Data URL.";
+  const localNote =
+    language === "en"
+      ? "Everything is processed locally in your browser."
+      : "Todo se procesa localmente en tu navegador.";
+
+  const getCopyLabel = (target: ImageBase64CopyTarget) => {
+    if (target === copiedTarget) return t("toolUi.copied");
+    return target === "base64"
+      ? t("tools.image-base64.ui.copyBase64")
+      : t("tools.image-base64.ui.copyDataUrl");
+  };
+
+  const resetFeedback = () => {
+    setError(null);
+    setCopiedTarget(null);
+    if (status === "success" || status === "error") {
+      setStatus("idle");
+    }
+  };
+
+  const processFile = async (file: File | undefined) => {
+    if (!file) return;
+    setStatus("reading");
+    setError(null);
+    setImageMetadata(null);
+    setCopiedTarget(null);
+
+    const fileLimitError = getImageFileSizeLimitError(file);
+    if (fileLimitError) {
+      setStatus("error");
+      setError(fileLimitError);
+      return;
+    }
+
+    try {
+      const nextMetadata = await fileToBase64(file);
+      setImageMetadata(nextMetadata);
+      setTextOutputBaseName(nextMetadata.fileName.replace(/\.[^.]+$/, "") || defaultTextOutputBaseName);
+      setStatus("success");
+    } catch (nextError) {
+      setStatus("error");
+      setError(nextError instanceof Error ? nextError.message : t("tools.image-base64.ui.couldNotConvert"));
+    }
+  };
+
+  const copyText = async (target: ImageBase64CopyTarget) => {
+    if (!imageMetadata) return;
+    try {
+      await navigator.clipboard.writeText(target === "base64" ? imageMetadata.base64 : imageMetadata.dataUrl);
+      setCopiedTarget(target);
+      window.setTimeout(() => setCopiedTarget(null), 1800);
+    } catch {
+      setError(t("tools.image-base64.ui.couldNotCopy"));
+    }
+  };
+
+  const downloadText = () => {
+    if (!imageMetadata) return;
+    const content = `Base64:\n${imageMetadata.base64}\n\nData URL:\n${imageMetadata.dataUrl}\n`;
+    const url = URL.createObjectURL(new Blob([content], { type: "text/plain;charset=utf-8" }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = buildBase64TextFileName(textOutputBaseName);
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const clear = () => {
+    setImageMetadata(null);
+    setTextOutputBaseName(defaultTextOutputBaseName);
+    setStatus("idle");
+    setError(null);
+    setCopiedTarget(null);
+    setIsDragging(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.95fr)_minmax(310px,0.55fr)]">
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.sourceTitle")}</h3>
+            <p className="mt-1 text-sm leading-6 text-ink-500">{intro}</p>
+            <p className="mt-1 text-xs leading-5 text-ink-500">{localNote}</p>
+          </div>
+
+          <button
+            className={cn(
+              "grid min-h-44 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+              isDragging
+                ? "border-accent-cyan bg-accent-cyan/10"
+                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
+            )}
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragging(false);
+              void processFile(event.dataTransfer.files[0]);
+            }}
+          >
+            <span>
+              <span className="mx-auto grid h-12 w-12 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                <Upload size={24} />
+              </span>
+              <span className="mt-3 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
+              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHintShort")}</span>
+            </span>
+          </button>
+
+          <input
+            ref={fileInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
+          {status === "reading" ? (
+            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              <Loader2 className="animate-spin text-accent-teal" size={16} />
+              {t("imageUi.reading")}
+            </p>
+          ) : null}
+
+          {error ? (
+            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+              {error}
+            </p>
+          ) : null}
+
+          {imageMetadata ? (
+            <dl className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 text-sm shadow-sm sm:grid-cols-2">
+              <div>
+                <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                <dd className="truncate font-semibold text-ink-900">{imageMetadata.fileName}</dd>
+              </div>
+              <div>
+                <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                <dd className="font-semibold text-ink-900">{getMimeLabel(imageMetadata.mimeType)}</dd>
+              </div>
+              <div>
+                <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                <dd className="font-semibold text-ink-900">{formatFileSize(imageMetadata.fileSize)}</dd>
+              </div>
+              <div>
+                <dt className="text-ink-500">{t("tools.image-base64.ui.detectedExtension")}</dt>
+                <dd className="font-semibold text-ink-900">.{imageMetadata.extension}</dd>
+              </div>
+            </dl>
+          ) : null}
+        </div>
+      </section>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <div className="grid gap-4">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{t("tools.image-base64.ui.resultTitle")}</h3>
+            <p className="mt-1 text-xs leading-5 text-ink-500">{t("tools.image-base64.ui.resultIntro")}</p>
+          </div>
+
+          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+            {t("tools.image-base64.ui.txtName")}
+            <input
+              className={inputClassName}
+              value={textOutputBaseName}
+              onChange={(event) => {
+                setTextOutputBaseName(event.target.value);
+                resetFeedback();
+              }}
+            />
+          </label>
+
+          {imageMetadata ? (
+            <>
+              <div
+                className="rounded-lg border border-accent-cyan/25 bg-accent-cyan/10 p-3 text-sm text-ink-700"
+                dangerouslySetInnerHTML={{
+                  __html: t("tools.image-base64.ui.textSize", {
+                    size: formatFileSize(imageMetadata.textSize),
+                  }),
+                }}
+              />
+              <textarea className={textareaClassName} readOnly value={imageMetadata.dataUrl} />
+              <div className="grid gap-2">
+                <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyText("base64")}>
+                  <Clipboard size={16} />
+                  {getCopyLabel("base64")}
+                </Button>
+                <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyText("data-url")}>
+                  <Clipboard size={16} />
+                  {getCopyLabel("data-url")}
+                </Button>
+                <Button type="button" className="gap-2" onClick={downloadText}>
+                  <Download size={16} />
+                  {t("tools.image-base64.ui.downloadTxt")}
+                </Button>
+                <Button type="button" variant="ghost" className="gap-2" onClick={clear}>
+                  <RotateCcw size={16} />
+                  {t("toolUi.clear")}
+                </Button>
+              </div>
+            </>
+          ) : (
+            <p className="rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+              {t("tools.image-base64.ui.pickFirstImage")}
+            </p>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/tools/image/image-base64/README.md b/src/tools/image/image-base64/README.md
index 7e3530d..f22c705 100644
--- a/src/tools/image/image-base64/README.md
+++ b/src/tools/image/image-base64/README.md
@@ -1,11 +1,13 @@
-# Imagen Base64
+# Imagen a Base64 / Base64 a imagen
 
-Herramienta frontend-only para convertir una imagen a Base64 y reconstruir una imagen desde Base64 o Data URL.
+Modulo frontend-only con dos herramientas publicas separadas y un service compartido:
+
+- Imagen a Base64.
+- Base64 a imagen.
 
 ## Alcance inicial
 
-- Modo Imagen a Base64.
-- Modo Base64 a imagen.
+- UI independiente para cada direccion.
 - Base64 puro y Data URL completa.
 - Copia de Base64 y Data URL.
 - Descarga TXT del resultado textual.
@@ -16,6 +18,12 @@ Herramienta frontend-only para convertir una imagen a Base64 y reconstruir una i
 
 La lectura, codificacion y reconstruccion se realizan localmente en el navegador. No se usa backend.
 
+## Arquitectura
+
+- `ImageToBase64Tool.tsx`: flujo archivo imagen a Base64/Data URL.
+- `Base64ToImageTool.tsx`: flujo Base64/Data URL a imagen descargable.
+- `imageBase64.service.ts`: parseo, validacion, nombres de salida y conversiones compartidas.
+
 ## Limitaciones
 
 - Base64 suele ocupar mas que el archivo binario original.
diff --git a/src/tools/image/image-base64/imageBase64.service.test.ts b/src/tools/image/image-base64/imageBase64.service.test.ts
index 1800aa7..1719f4d 100644
--- a/src/tools/image/image-base64/imageBase64.service.test.ts
+++ b/src/tools/image/image-base64/imageBase64.service.test.ts
@@ -4,6 +4,7 @@ import {
   getBase64TextSize,
   inferExtensionFromMime,
   isValidBase64,
+  parseBase64ImageInput,
   parseDataUrl,
   stripDataUrlPrefix,
 } from "./imageBase64.service";
@@ -52,4 +53,27 @@ describe("imageBase64.service", () => {
     expect(getBase64TextSize(pngBase64)).toBe(pngBase64.length);
     expect(getBase64TextSize(pngBase64, "image/png")).toBe(pngDataUrl.length);
   });
+
+  it("rebuilds an image result from a Data URL using the detected MIME", () => {
+    const result = parseBase64ImageInput(pngDataUrl, "image/jpeg");
+
+    expect(result.mimeType).toBe("image/png");
+    expect(result.base64).toBe(pngBase64);
+    expect(result.fileName).toBe("imagen-reconstruida.png");
+    expect(result.dataUrl).toBe(pngDataUrl);
+  });
+
+  it("rebuilds an image result from plain Base64 using the selected MIME", () => {
+    const result = parseBase64ImageInput(pngBase64, "image/webp");
+
+    expect(result.mimeType).toBe("image/webp");
+    expect(result.extension).toBe("webp");
+    expect(result.fileName).toBe("imagen-reconstruida.webp");
+  });
+
+  it("rejects unsupported Data URL MIME types", () => {
+    expect(() => parseBase64ImageInput(`data:text/plain;base64,${pngBase64}`, "image/png")).toThrow(
+      "La Data URL debe usar image/png, image/jpeg o image/webp.",
+    );
+  });
 });
diff --git a/src/tools/image/image-base64/index.ts b/src/tools/image/image-base64/index.ts
index 007f358..133b817 100644
--- a/src/tools/image/image-base64/index.ts
+++ b/src/tools/image/image-base64/index.ts
@@ -1,3 +1,4 @@
-export { ImageBase64Tool } from "./ImageBase64Tool";
+export { Base64ToImageTool } from "./Base64ToImageTool";
+export { ImageToBase64Tool } from "./ImageToBase64Tool";
 export * from "./imageBase64.service";
 export type * from "./imageBase64.types";
diff --git a/src/tools/image/image-color-extractor/ImageColorExtractorTool.tsx b/src/tools/image/image-color-extractor/ImageColorExtractorTool.tsx
index 5e5fb0e..18acdea 100644
--- a/src/tools/image/image-color-extractor/ImageColorExtractorTool.tsx
+++ b/src/tools/image/image-color-extractor/ImageColorExtractorTool.tsx
@@ -1,4 +1,4 @@
-import { Copy, Download, FileImage, Loader2, Palette, RotateCcw, Upload } from "lucide-react";
+import { Copy, Download, FileImage, Loader2, Palette, RotateCcw, Upload } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
@@ -26,8 +26,15 @@ import type {
 } from "./imageColorExtractor.types";
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
+const inputClassName =
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type PaletteExportFormat = "json" | "txt";
+type ColorCountMode = "preset" | "custom";
+
+const customColorCountDefault = 16;
+const minCustomColorCount = 1;
+const maxCustomColorCount = 24;
 
 const copy = {
   es: {
@@ -35,38 +42,50 @@ const copy = {
     copied: "Copiado",
     copyHex: "Copiar HEX",
     copyRgb: "Copiar RGB",
+    customCount: "Otro",
+    customCountError: "Ingresa un numero entre 1 y 24.",
+    customCountLabel: "Cantidad personalizada",
+    dominantHelp: "Los colores son una estimacion basada en muestreo local.",
+    dominantMode: "Colores dominantes",
     downloadJson: "Descargar JSON",
     downloadTxt: "Descargar TXT",
     emptyPalette: "Extrae colores para ver la paleta.",
-    estimation: "Los colores son una estimacion basada en muestreo local.",
+    foundColors: "Colores encontrados",
+    mode: "Modo",
     outputName: "Nombre de la paleta",
-    outputTitle: "Paleta",
+    outputTitle: "Resumen y descarga",
     paletteReady: "Paleta lista",
+    paletteTitle: "Paleta de colores",
     processing: "Analizando imagen...",
     samplePixels: "Pixeles muestreados",
-    sourceIntro: "Extrae una paleta aproximada de colores dominantes desde una imagen.",
+    sourceIntro: "Extrae una paleta aproximada de colores dominantes.",
     sourceTitle: "Imagen de origen",
     swatch: "Muestra de color",
-    totalLocal: "Todo se procesa en tu navegador.",
   },
   en: {
     analyze: "Extract colors",
     copied: "Copied",
     copyHex: "Copy HEX",
     copyRgb: "Copy RGB",
+    customCount: "Other",
+    customCountError: "Enter a number from 1 to 24.",
+    customCountLabel: "Custom count",
+    dominantHelp: "Colors are an estimate based on local sampling.",
+    dominantMode: "Dominant colors",
     downloadJson: "Download JSON",
     downloadTxt: "Download TXT",
     emptyPalette: "Extract colors to see the palette.",
-    estimation: "Colors are an estimate based on local sampling.",
+    foundColors: "Colors found",
+    mode: "Mode",
     outputName: "Palette name",
-    outputTitle: "Palette",
+    outputTitle: "Summary and download",
     paletteReady: "Palette ready",
+    paletteTitle: "Color palette",
     processing: "Analyzing image...",
     samplePixels: "Sampled pixels",
     sourceIntro: "Extract an approximate palette of dominant colors from an image.",
     sourceTitle: "Source image",
     swatch: "Color swatch",
-    totalLocal: "Everything is processed in your browser.",
   },
 } as const;
 
@@ -88,6 +107,8 @@ export function ImageColorExtractorTool() {
   const [metadata, setMetadata] = useState<ImageColorExtractorMetadata | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [colorCount, setColorCount] = useState(defaultColorCount);
+  const [colorCountMode, setColorCountMode] = useState<ColorCountMode>("preset");
+  const [customColorCountInput, setCustomColorCountInput] = useState(String(customColorCountDefault));
   const [outputFileName, setOutputFileName] = useState(defaultOutputBaseName);
   const [hasCustomOutputFileName, setHasCustomOutputFileName] = useState(false);
   const [status, setStatus] = useState<ImageColorExtractorStatus>("idle");
@@ -105,7 +126,16 @@ export function ImageColorExtractorTool() {
   const fallbackBaseName = metadata ? getPaletteOutputBaseName(metadata.fileName) : defaultOutputBaseName;
   const txtFileName = buildPaletteFileName(outputFileName, "txt", fallbackBaseName);
   const jsonFileName = buildPaletteFileName(outputFileName, "json", fallbackBaseName);
-  const canAnalyze = Boolean(file && metadata) && status !== "reading" && status !== "processing";
+  const customColorCountValue = Number(customColorCountInput);
+  const customColorCountError =
+    colorCountMode === "custom" &&
+    (!Number.isInteger(customColorCountValue) ||
+      customColorCountValue < minCustomColorCount ||
+      customColorCountValue > maxCustomColorCount)
+      ? labels.customCountError
+      : null;
+  const canAnalyze =
+    Boolean(file && metadata) && !customColorCountError && status !== "reading" && status !== "processing";
   const colors = result?.colors ?? [];
 
   const resetFeedback = () => {
@@ -164,6 +194,8 @@ export function ImageColorExtractorTool() {
     setMetadata(null);
     setPreviewUrl(null);
     setColorCount(defaultColorCount);
+    setColorCountMode("preset");
+    setCustomColorCountInput(String(customColorCountDefault));
     setOutputFileName(defaultOutputBaseName);
     setHasCustomOutputFileName(false);
     setResult(null);
@@ -211,233 +243,316 @@ export function ImageColorExtractorTool() {
   };
 
   return (
-    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.9fr)_minmax(320px,0.58fr)]">
-      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
-        <div className="grid gap-4">
-          <div>
-            <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
-            <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
-          </div>
+    <div className="grid gap-5">
+      <div className="grid gap-5 lg:grid-cols-[minmax(0,0.9fr)_minmax(320px,0.58fr)]">
+        <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+          <div className="grid gap-4">
+            <div>
+              <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
+              <p className="mt-1 text-sm leading-6 text-ink-500">{labels.sourceIntro}</p>
+            </div>
 
-          <button
-            className={cn(
-              "grid min-h-52 place-items-center rounded-lg border border-dashed p-6 text-center transition",
-              isDragging
-                ? "border-accent-cyan bg-accent-cyan/10"
-                : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
-            )}
-            type="button"
-            onClick={() => fileInputRef.current?.click()}
-            onDragEnter={(event) => {
-              event.preventDefault();
-              setIsDragging(true);
-            }}
-            onDragOver={(event) => event.preventDefault()}
-            onDragLeave={(event) => {
-              event.preventDefault();
-              setIsDragging(false);
-            }}
-            onDrop={(event) => {
-              event.preventDefault();
-              setIsDragging(false);
-              void processFile(event.dataTransfer.files[0]);
-            }}
-          >
-            <span>
-              <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
-                <Upload size={26} />
-              </span>
-              <span className="mt-4 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
-              <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
-            </span>
-          </button>
-          <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
-
-          <input
-            ref={fileInputRef}
-            accept={acceptedImageTypes}
-            className="hidden"
-            type="file"
-            onChange={(event) => {
-              void processFile(event.target.files?.[0]);
-              event.target.value = "";
-            }}
-          />
-
-          {metadata ? (
-            <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
-              {previewUrl ? (
-                <img
-                  src={previewUrl}
-                  alt=""
-                  className="h-28 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-32"
-                />
-              ) : (
-                <span className="grid h-28 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal sm:w-32">
-                  <FileImage size={28} />
-                </span>
+            <button
+              className={cn(
+                "grid min-h-52 place-items-center rounded-lg border border-dashed p-6 text-center transition",
+                isDragging
+                  ? "border-accent-cyan bg-accent-cyan/10"
+                  : "border-surface-200/80 bg-surface-50/80 hover:border-accent-cyan/55 hover:bg-surface-50",
               )}
-              <dl className="grid min-w-0 gap-2 text-sm">
-                <div>
-                  <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
-                  <dd className="truncate font-semibold text-ink-900">{metadata.fileName}</dd>
-                </div>
-                <div className="grid gap-2 sm:grid-cols-3">
-                  <div>
-                    <dt className="text-ink-500">{t("imageUi.type")}</dt>
-                    <dd className="font-semibold text-ink-900">{getImageMimeLabel(metadata.mimeType)}</dd>
-                  </div>
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              onDragEnter={(event) => {
+                event.preventDefault();
+                setIsDragging(true);
+              }}
+              onDragOver={(event) => event.preventDefault()}
+              onDragLeave={(event) => {
+                event.preventDefault();
+                setIsDragging(false);
+              }}
+              onDrop={(event) => {
+                event.preventDefault();
+                setIsDragging(false);
+                void processFile(event.dataTransfer.files[0]);
+              }}
+            >
+              <span>
+                <span className="mx-auto grid h-14 w-14 place-items-center rounded-lg border border-surface-200 bg-surface-50 text-accent-teal">
+                  <Upload size={26} />
+                </span>
+                <span className="mt-4 block text-base font-semibold text-ink-900">{t("imageUi.selectImage")}</span>
+                <span className="mt-2 block text-sm leading-6 text-ink-500">{t("imageUi.dropImageHint")}</span>
+              </span>
+            </button>
+            <p className="text-xs leading-5 text-ink-600">{t("imageUi.maxSize")}</p>
+
+            <input
+              ref={fileInputRef}
+              accept={acceptedImageTypes}
+              className="hidden"
+              type="file"
+              onChange={(event) => {
+                void processFile(event.target.files?.[0]);
+                event.target.value = "";
+              }}
+            />
+
+            {metadata ? (
+              <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
+                {previewUrl ? (
+                  <img
+                    src={previewUrl}
+                    alt=""
+                    className="h-28 w-full rounded-lg border border-surface-200/80 bg-surface-50 object-contain shadow-sm sm:w-32"
+                  />
+                ) : (
+                  <span className="grid h-28 w-full place-items-center rounded-lg border border-surface-200/80 bg-surface-50 text-accent-teal sm:w-32">
+                    <FileImage size={28} />
+                  </span>
+                )}
+                <dl className="grid min-w-0 gap-2 text-sm">
                   <div>
-                    <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
-                    <dd className="font-semibold text-ink-900">{formatFileSize(metadata.fileSize)}</dd>
+                    <dt className="text-ink-500">{t("imageUi.fileName")}</dt>
+                    <dd className="truncate font-semibold text-ink-900">{metadata.fileName}</dd>
                   </div>
-                  <div>
-                    <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
-                    <dd className="font-semibold text-ink-900">
-                      {metadata.width} x {metadata.height}px
-                    </dd>
+                  <div className="grid gap-2 sm:grid-cols-3">
+                    <div>
+                      <dt className="text-ink-500">{t("imageUi.type")}</dt>
+                      <dd className="font-semibold text-ink-900">{getImageMimeLabel(metadata.mimeType)}</dd>
+                    </div>
+                    <div>
+                      <dt className="text-ink-500">{t("imageUi.originalSize")}</dt>
+                      <dd className="font-semibold text-ink-900">{formatFileSize(metadata.fileSize)}</dd>
+                    </div>
+                    <div>
+                      <dt className="text-ink-500">{t("imageUi.dimensions")}</dt>
+                      <dd className="font-semibold text-ink-900">
+                        {metadata.width} x {metadata.height}px
+                      </dd>
+                    </div>
                   </div>
-                </div>
-              </dl>
-            </div>
-          ) : null}
+                </dl>
+              </div>
+            ) : null}
+
+            {status === "reading" ? (
+              <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+                <Loader2 className="animate-spin text-accent-teal" size={16} />
+                {t("imageUi.reading")}
+              </p>
+            ) : null}
+
+            {status === "error" && error ? (
+              <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
+                {error}
+              </p>
+            ) : null}
+
+          </div>
+        </section>
 
-          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
-            <div className="grid gap-2 sm:grid-cols-4">
-              {colorCountOptions.map((nextCount) => (
+        <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+          <div>
+            <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
+            <p className="mt-1 text-xs leading-5 text-ink-500">{labels.dominantHelp}</p>
+          </div>
+
+          <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
+            <div className="grid gap-3 rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 shadow-sm">
+              <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.dominantMode}</p>
+              <div className="grid grid-cols-2 gap-2 sm:grid-cols-5 lg:grid-cols-2 xl:grid-cols-5">
+                {colorCountOptions.map((nextCount) => (
+                  <button
+                    key={nextCount}
+                    type="button"
+                    className={cn(
+                      "rounded-md border px-3 py-2 text-sm font-semibold transition",
+                      colorCountMode === "preset" && colorCount === nextCount
+                        ? "border-accent-cyan/45 bg-accent-cyan/10 text-ink-900"
+                        : "border-surface-200/80 bg-surface-50/90 text-ink-700 hover:border-accent-cyan/35",
+                    )}
+                    onClick={() => {
+                      setColorCountMode("preset");
+                      setColorCount(nextCount);
+                      setResult(null);
+                      resetFeedback();
+                    }}
+                  >
+                    {nextCount}
+                  </button>
+                ))}
                 <button
-                  key={nextCount}
                   type="button"
                   className={cn(
                     "rounded-md border px-3 py-2 text-sm font-semibold transition",
-                    colorCount === nextCount
+                    colorCountMode === "custom"
                       ? "border-accent-cyan/45 bg-accent-cyan/10 text-ink-900"
                       : "border-surface-200/80 bg-surface-50/90 text-ink-700 hover:border-accent-cyan/35",
                   )}
                   onClick={() => {
-                    setColorCount(nextCount);
+                    const nextValue =
+                      Number.isInteger(customColorCountValue) &&
+                      customColorCountValue >= minCustomColorCount &&
+                      customColorCountValue <= maxCustomColorCount
+                        ? customColorCountValue
+                        : customColorCountDefault;
+                    setColorCountMode("custom");
+                    setCustomColorCountInput(String(nextValue));
+                    setColorCount(nextValue);
                     setResult(null);
                     resetFeedback();
                   }}
                 >
-                  {nextCount}
+                  {labels.customCount}
                 </button>
-              ))}
+              </div>
+              {colorCountMode === "custom" ? (
+                <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                  {labels.customCountLabel}
+                  <input
+                    className={inputClassName}
+                    inputMode="numeric"
+                    max={maxCustomColorCount}
+                    min={minCustomColorCount}
+                    type="number"
+                    value={customColorCountInput}
+                    onChange={(event) => {
+                      const nextInput = event.target.value;
+                      const nextValue = Number(nextInput);
+                      setCustomColorCountInput(nextInput);
+                      if (
+                        Number.isInteger(nextValue) &&
+                        nextValue >= minCustomColorCount &&
+                        nextValue <= maxCustomColorCount
+                      ) {
+                        setColorCount(nextValue);
+                        setResult(null);
+                      }
+                      resetFeedback();
+                    }}
+                  />
+                  {customColorCountError ? (
+                    <span className="text-xs font-normal leading-5 text-accent-violet">{customColorCountError}</span>
+                  ) : null}
+                </label>
+              ) : null}
+              <p className="text-xs leading-5 text-ink-500">{labels.dominantHelp}</p>
+            </div>
+
+            <div className="grid gap-2">
+              <Button type="button" className="gap-2" onClick={() => void analyzeImage()} disabled={!canAnalyze}>
+                {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <Palette size={16} />}
+                {labels.analyze}
+              </Button>
+              <Button type="button" variant="ghost" className="gap-2" onClick={clearSelection} disabled={!file && status === "idle"}>
+                <RotateCcw size={16} />
+                {t("toolUi.clear")}
+              </Button>
+            </div>
+
+            {status === "processing" ? (
+              <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
+                <Loader2 className="animate-spin text-accent-teal" size={16} />
+                {labels.processing}
+              </p>
+            ) : null}
+
+            <div className="rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
+              <p className="font-semibold text-ink-900">{colors.length > 0 ? labels.paletteReady : labels.emptyPalette}</p>
+              <dl className="mt-3 grid gap-2 text-xs text-ink-600">
+                <div className="flex items-center justify-between gap-3">
+                  <dt>{labels.mode}</dt>
+                  <dd className="font-semibold text-ink-900">{labels.dominantMode}</dd>
+                </div>
+                <div className="flex items-center justify-between gap-3">
+                  <dt>{labels.samplePixels}</dt>
+                  <dd className="font-semibold text-ink-900">{result?.sampledPixels ?? "-"}</dd>
+                </div>
+                <div className="flex items-center justify-between gap-3">
+                  <dt>{labels.foundColors}</dt>
+                  <dd className="font-semibold text-ink-900">{colors.length || "-"}</dd>
+                </div>
+              </dl>
             </div>
-            <p className="text-xs leading-5 text-ink-500">{labels.estimation}</p>
-            <p className="text-xs leading-5 text-ink-500">{labels.totalLocal}</p>
-          </div>
 
-          {status === "reading" || status === "processing" ? (
-            <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
-              <Loader2 className="animate-spin text-accent-teal" size={16} />
-              {status === "processing" ? labels.processing : t("imageUi.reading")}
-            </p>
-          ) : null}
-
-          {status === "error" && error ? (
-            <p role="alert" className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {error}
-            </p>
-          ) : null}
-
-          <div className="grid gap-2">
-            <Button type="button" className="gap-2" onClick={() => void analyzeImage()} disabled={!canAnalyze}>
-              {status === "processing" ? <Loader2 className="animate-spin" size={16} /> : <Palette size={16} />}
-              {labels.analyze}
-            </Button>
-            <Button type="button" variant="ghost" className="gap-2" onClick={clearSelection} disabled={!file && status === "idle"}>
-              <RotateCcw size={16} />
-              {t("toolUi.clear")}
-            </Button>
+            <label className="grid min-w-0 gap-2 text-sm font-semibold text-ink-700">
+              {labels.outputName}
+              <input
+                className={inputClassName}
+                value={outputFileName}
+                placeholder={defaultOutputBaseName}
+                onChange={(event) => {
+                  setOutputFileName(event.target.value);
+                  setHasCustomOutputFileName(true);
+                  resetFeedback();
+                }}
+              />
+            </label>
+
+            <div className="grid gap-2 sm:grid-cols-2">
+              <Button type="button" variant="secondary" className="gap-2" onClick={() => downloadPalette("txt")} disabled={colors.length === 0}>
+                <Download size={16} />
+                {labels.downloadTxt}
+              </Button>
+              <Button type="button" variant="secondary" className="gap-2" onClick={() => downloadPalette("json")} disabled={colors.length === 0}>
+                <Download size={16} />
+                {labels.downloadJson}
+              </Button>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </div>
 
       <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
         <div>
-          <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
-          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.estimation}</p>
+          <h3 className="text-sm font-semibold text-ink-900">{labels.paletteTitle}</h3>
+          <p className="mt-1 text-xs leading-5 text-ink-500">{labels.dominantHelp}</p>
         </div>
 
-        <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          {colors.length > 0 ? (
-            <div className="grid gap-3">
-              <div className="rounded-lg border border-accent-teal/25 bg-accent-teal/10 p-3 text-sm text-ink-700">
-                <p className="font-semibold text-ink-900">{labels.paletteReady}</p>
-                <p className="mt-1 text-xs text-ink-600">
-                  {labels.samplePixels}: {result?.sampledPixels ?? 0}
-                </p>
-              </div>
-
-              {colors.map((color: ExtractedImageColor) => {
-                const rgb = formatRgb(color.rgb);
-                return (
-                  <div key={color.hex} className="grid gap-3 rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 shadow-sm sm:grid-cols-[72px_minmax(0,1fr)]">
-                    <div
-                      aria-label={labels.swatch}
-                      className="h-16 rounded-lg border border-surface-200/80 shadow-sm"
-                      style={{ backgroundColor: color.hex }}
-                    />
-                    <div className="grid min-w-0 gap-2 text-sm">
-                      <div className="flex flex-wrap items-center justify-between gap-2">
-                        <div>
-                          <p className="font-semibold text-ink-900">{color.hex}</p>
-                          <p className="text-xs text-ink-500">{rgb}</p>
-                        </div>
-                        <p className="rounded-md bg-surface-100 px-2 py-1 text-xs font-semibold text-ink-700">
-                          {color.percentage.toFixed(1)}%
-                        </p>
-                      </div>
-                      <div className="grid gap-2 sm:grid-cols-2">
-                        <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyValue(color.hex)}>
-                          <Copy size={15} />
-                          {copiedValue === color.hex ? labels.copied : labels.copyHex}
-                        </Button>
-                        <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyValue(rgb)}>
-                          <Copy size={15} />
-                          {copiedValue === rgb ? labels.copied : labels.copyRgb}
-                        </Button>
+        {colors.length > 0 ? (
+          <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            {colors.map((color: ExtractedImageColor) => {
+              const rgb = formatRgb(color.rgb);
+              return (
+                <div key={`${color.hex}-${color.count}`} className="grid min-w-0 gap-3 rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 shadow-sm">
+                  <div
+                    aria-label={labels.swatch}
+                    className="h-16 rounded-lg border border-surface-200/80 shadow-sm"
+                    style={{ backgroundColor: color.hex }}
+                  />
+                  <div className="grid min-w-0 gap-2 text-sm">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <div className="min-w-0">
+                        <p className="font-semibold text-ink-900">{color.hex}</p>
+                        <p className="break-all text-xs text-ink-500">{rgb}</p>
                       </div>
+                      <p className="rounded-md bg-surface-100 px-2 py-1 text-xs font-semibold text-ink-700">
+                        {color.percentage.toFixed(1)}%
+                      </p>
+                    </div>
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyValue(color.hex)}>
+                        <Copy size={15} />
+                        {copiedValue === color.hex ? labels.copied : labels.copyHex}
+                      </Button>
+                      <Button type="button" variant="secondary" className="gap-2" onClick={() => void copyValue(rgb)}>
+                        <Copy size={15} />
+                        {copiedValue === rgb ? labels.copied : labels.copyRgb}
+                      </Button>
                     </div>
                   </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="grid min-h-56 place-items-center rounded-lg border border-surface-200/80 bg-surface-50/90 p-4 text-center text-sm text-ink-500">
-              <span>
-                <Palette className="mx-auto text-accent-teal" size={34} />
-                <span className="mt-2 block font-semibold text-ink-700">{labels.emptyPalette}</span>
-              </span>
-            </div>
-          )}
-
-          <label className="grid gap-2 text-sm font-semibold text-ink-700">
-            {labels.outputName}
-            <input
-              className="min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25"
-              value={outputFileName}
-              placeholder={defaultOutputBaseName}
-              onChange={(event) => {
-                setOutputFileName(event.target.value);
-                setHasCustomOutputFileName(true);
-                resetFeedback();
-              }}
-            />
-          </label>
-
-          <div className="grid gap-2 sm:grid-cols-2">
-            <Button type="button" variant="secondary" className="gap-2" onClick={() => downloadPalette("txt")} disabled={colors.length === 0}>
-              <Download size={16} />
-              {labels.downloadTxt}
-            </Button>
-            <Button type="button" variant="secondary" className="gap-2" onClick={() => downloadPalette("json")} disabled={colors.length === 0}>
-              <Download size={16} />
-              {labels.downloadJson}
-            </Button>
+                </div>
+              );
+            })}
           </div>
-        </div>
+        ) : (
+          <div className="mt-5 grid min-h-48 place-items-center rounded-lg border border-surface-200/80 bg-surface-50/90 p-4 text-center text-sm text-ink-500">
+            <span>
+              <Palette className="mx-auto text-accent-teal" size={34} />
+              <span className="mt-2 block font-semibold text-ink-700">{labels.emptyPalette}</span>
+            </span>
+          </div>
+        )}
       </section>
     </div>
   );
diff --git a/src/tools/image/image-color-extractor/imageColorExtractor.service.test.ts b/src/tools/image/image-color-extractor/imageColorExtractor.service.test.ts
index f1d5451..5e47a10 100644
--- a/src/tools/image/image-color-extractor/imageColorExtractor.service.test.ts
+++ b/src/tools/image/image-color-extractor/imageColorExtractor.service.test.ts
@@ -65,6 +65,30 @@ describe("imageColorExtractor.service", () => {
     expect(extractDominantColorsFromImageData(data, { colorCount: 4 }).colors).toHaveLength(4);
   });
 
+  it("accepts custom color counts between presets", () => {
+    const data = new Uint8ClampedArray([
+      ...pixel(255, 0, 0),
+      ...pixel(0, 255, 0),
+      ...pixel(0, 0, 255),
+      ...pixel(255, 255, 0),
+      ...pixel(0, 255, 255),
+      ...pixel(255, 0, 255),
+    ]);
+
+    expect(extractDominantColorsFromImageData(data, { colorCount: 5 }).colors).toHaveLength(5);
+  });
+
+
+  it("does not pad dominant colors beyond detected buckets", () => {
+    const data = new Uint8ClampedArray([
+      ...pixel(255, 0, 0),
+      ...pixel(0, 255, 0),
+      ...pixel(0, 0, 255),
+    ]);
+
+    expect(extractDominantColorsFromImageData(data, { colorCount: 12 }).colors).toHaveLength(3);
+  });
+
   it("exports TXT and JSON palettes", () => {
     const colors = [
       { count: 2, hex: "#FF0000", percentage: 66.666, rgb: { r: 255, g: 0, b: 0 } },
diff --git a/src/tools/image/image-color-extractor/imageColorExtractor.service.ts b/src/tools/image/image-color-extractor/imageColorExtractor.service.ts
index b11bb01..5200f71 100644
--- a/src/tools/image/image-color-extractor/imageColorExtractor.service.ts
+++ b/src/tools/image/image-color-extractor/imageColorExtractor.service.ts
@@ -14,8 +14,9 @@ import type {
 } from "./imageColorExtractor.types";
 
 export const defaultOutputBaseName = "paleta-imagen";
-export const defaultColorCount = 6;
-export const colorCountOptions = [4, 6, 8, 12] as const;
+export const defaultColorCount = 8;
+export const colorCountOptions = [4, 8, 12, 24] as const;
+export const maxColorCount = 24;
 export const maxSamplePixels = 50_000;
 const bucketSize = 32;
 
@@ -87,9 +88,11 @@ function getBucketKey(color: RgbColor) {
 }
 
 function normalizeColorCount(colorCount: number) {
-  return colorCountOptions.includes(colorCount as (typeof colorCountOptions)[number])
-    ? colorCount
-    : defaultColorCount;
+  if (!Number.isFinite(colorCount) || colorCount < 1) {
+    return defaultColorCount;
+  }
+
+  return Math.min(maxColorCount, Math.floor(colorCount));
 }
 
 function toExtractedColor(bucket: ColorBucket, visiblePixelCount: number): ExtractedImageColor {
@@ -188,14 +191,14 @@ export async function readImageMetadata(file: File): Promise<ImageColorExtractor
   const mimeType = getBrowserImageMimeType(file);
 
   if (!mimeType) {
-    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+    throw new Error("Seleccioná una imagen PNG, JPG o WebP válida.");
   }
 
   try {
     const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
 
     if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
-      throw new Error("La imagen no tiene dimensiones validas.");
+      throw new Error("La imagen no tiene dimensiones válidas.");
     }
 
     return {
@@ -216,10 +219,10 @@ export async function readImageMetadata(file: File): Promise<ImageColorExtractor
 
 export async function extractImageColors(
   file: File,
-  { colorCount }: ExtractImageColorsOptions,
+  options: ExtractImageColorsOptions,
 ): Promise<ImageColorExtractorResult> {
   if (!isColorExtractableImageFile(file)) {
-    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+    throw new Error("Seleccioná una imagen PNG, JPG o WebP válida.");
   }
 
   const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
@@ -235,5 +238,6 @@ export async function extractImageColors(
 
   context.drawImage(image, 0, 0, sampleDimensions.width, sampleDimensions.height);
   const imageData = context.getImageData(0, 0, sampleDimensions.width, sampleDimensions.height);
-  return extractDominantColorsFromImageData(imageData.data, { colorCount });
+
+  return extractDominantColorsFromImageData(imageData.data, options);
 }
diff --git a/src/tools/image/image-compressor/ImageCompressorTool.tsx b/src/tools/image/image-compressor/ImageCompressorTool.tsx
index 8e3d5c0..ddde31d 100644
--- a/src/tools/image/image-compressor/ImageCompressorTool.tsx
+++ b/src/tools/image/image-compressor/ImageCompressorTool.tsx
@@ -1,6 +1,7 @@
 import { Download, FileImage, Loader2, RotateCcw, SlidersHorizontal, Upload } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -26,7 +27,7 @@ import type {
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type DownloadableResult = ImageCompressorResult & {
   url: string;
@@ -41,7 +42,7 @@ const formatDescKeys: Record<ImageCompressorOutputFormat, TranslationKey> = {
 };
 
 export function ImageCompressorTool() {
-  const { t } = useI18n();
+  const { language, t } = useI18n();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const previewUrlRef = useRef<string | null>(null);
   const resultUrlRef = useRef<string | null>(null);
@@ -78,10 +79,6 @@ export function ImageCompressorTool() {
     metadata ? getCompressedImageOutputBaseName(metadata.fileName) : defaultOutputBaseName,
   );
   const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
-  const transparencyWarning =
-    outputFormat === "jpeg" && metadata?.mimeType !== "image/jpeg"
-      ? t("imageUi.transparencyWarning")
-      : null;
   const canCompress = Boolean(file && metadata) && status !== "reading" && status !== "processing";
 
   // Compute the size-change label inline using t() so we don't depend on
@@ -316,27 +313,17 @@ export function ImageCompressorTool() {
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
-          </div>
+          <OutputFormatSelector
+            description={t(formatDescKeys[outputFormat])}
+            formats={outputFormats}
+            getLabel={getImageFormatLabel}
+            label={language === "en" ? "Output format" : "Formato final"}
+            value={outputFormat}
+            onChange={(format) => {
+              setOutputFormat(format);
+              resetFeedback();
+            }}
+          />
 
           {!webpSupported ? (
             <p className="text-xs leading-5 text-ink-500">{t("imageUi.webpUnavailable")}</p>
@@ -357,16 +344,7 @@ export function ImageCompressorTool() {
                   resetFeedback();
                 }}
               />
-              <span className="text-xs font-normal leading-5 text-ink-500">{t("tools.image-compressor.ui.qualityNote")}</span>
             </label>
-          ) : (
-            <p className="text-xs leading-5 text-ink-500">{t("tools.image-compressor.ui.pngNoQuality")}</p>
-          )}
-
-          {transparencyWarning ? (
-            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {transparencyWarning}
-            </p>
           ) : null}
 
           <label className="grid gap-2 text-sm font-semibold text-ink-700">
diff --git a/src/tools/image/image-converter/ImageConverterTool.tsx b/src/tools/image/image-converter/ImageConverterTool.tsx
index 70f222e..0b9c040 100644
--- a/src/tools/image/image-converter/ImageConverterTool.tsx
+++ b/src/tools/image/image-converter/ImageConverterTool.tsx
@@ -1,6 +1,7 @@
 import { Download, FileImage, ImagePlus, Loader2, RotateCcw, Upload } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -28,7 +29,7 @@ import type {
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type DownloadableResult = ImageConverterResult & {
   url: string;
@@ -43,7 +44,7 @@ const formatDescKeys: Record<ImageConverterOutputFormat, TranslationKey> = {
 };
 
 export function ImageConverterTool() {
-  const { t } = useI18n();
+  const { language, t } = useI18n();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const previewUrlRef = useRef<string | null>(null);
   const resultUrlRef = useRef<string | null>(null);
@@ -78,10 +79,6 @@ export function ImageConverterTool() {
     metadata ? getImageOutputBaseName(metadata.fileName) : defaultOutputBaseName,
   );
   const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
-  const transparencyWarning =
-    outputFormat === "jpeg" && metadata?.mimeType !== "image/jpeg"
-      ? t("imageUi.transparencyWarning")
-      : null;
   const canConvert = Boolean(file && metadata) && status !== "reading" && status !== "processing";
 
   const clearResult = () => {
@@ -300,27 +297,17 @@ export function ImageConverterTool() {
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
-          </div>
+          <OutputFormatSelector
+            description={t(formatDescKeys[outputFormat])}
+            formats={outputFormats}
+            getLabel={getImageFormatLabel}
+            label={language === "en" ? "Output format" : "Formato final"}
+            value={outputFormat}
+            onChange={(format) => {
+              setOutputFormat(format);
+              resetFeedback();
+            }}
+          />
 
           {!webpSupported ? (
             <p className="text-xs leading-5 text-ink-500">{t("imageUi.webpUnavailable")}</p>
@@ -345,12 +332,6 @@ export function ImageConverterTool() {
             </label>
           ) : null}
 
-          {transparencyWarning ? (
-            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {transparencyWarning}
-            </p>
-          ) : null}
-
           <label className="grid gap-2 text-sm font-semibold text-ink-700">
             {t("imageUi.outputName")}
             <input
diff --git a/src/tools/image/image-cropper/ImageCropperTool.tsx b/src/tools/image/image-cropper/ImageCropperTool.tsx
index 3d7e382..c80d1ed 100644
--- a/src/tools/image/image-cropper/ImageCropperTool.tsx
+++ b/src/tools/image/image-cropper/ImageCropperTool.tsx
@@ -1,6 +1,7 @@
 import { Crop, Download, FileImage, Loader2, Maximize2, RotateCcw, Scan, Upload } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -35,7 +36,7 @@ import type {
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type DownloadableResult = ImageCropperResult & {
   url: string;
@@ -52,12 +53,13 @@ const formatDescKeys: Record<ImageCropperOutputFormat, TranslationKey> = {
 const copy = {
   es: {
     centerCrop: "Centrar recorte",
-    cropHelp: "Los valores X/Y empiezan desde la esquina superior izquierda.",
+    cropHelp: "X e Y ubican el inicio del recorte; ancho y alto definen su tamano.",
+    cropSummary: "Recorte desde (X: {{x}}, Y: {{y}}), tamano {{width}} x {{height}} px",
     cropTitle: "Area de recorte",
     downloadReady: "Imagen recortada lista",
     fullImage: "Imagen completa",
+    heightLabel: "Alto del recorte",
     invalidPreview: "Ajusta el recorte para ver la vista previa.",
-    jpgTransparency: "JPG no conserva transparencia.",
     outputIntro: "El resultado se genera desde un canvas local.",
     outputTitle: "Vista previa y salida",
     previewAlt: "Vista previa del recorte",
@@ -65,16 +67,22 @@ const copy = {
     sourceIntro: "Recorta una imagen definiendo el area exacta.",
     sourceTitle: "Archivo y recorte",
     squareCrop: "Cuadrado centrado",
+    widthLabel: "Ancho del recorte",
     webpHint: "WebP aparece si tu navegador permite exportarlo correctamente.",
+    xHelp: "X indica cuantos pixeles se avanza desde el borde izquierdo.",
+    xLabel: "X / izquierda",
+    yHelp: "Y indica cuantos pixeles se baja desde el borde superior.",
+    yLabel: "Y / arriba",
   },
   en: {
     centerCrop: "Center crop",
-    cropHelp: "X/Y values start from the top-left corner.",
+    cropHelp: "X and Y place the crop start; width and height define its size.",
+    cropSummary: "Crop from (X: {{x}}, Y: {{y}}), size {{width}} x {{height}} px",
     cropTitle: "Crop area",
     downloadReady: "Cropped image ready",
     fullImage: "Full image",
+    heightLabel: "Crop height",
     invalidPreview: "Adjust the crop to see the preview.",
-    jpgTransparency: "JPG does not preserve transparency.",
     outputIntro: "The result is generated from a local canvas.",
     outputTitle: "Preview and output",
     previewAlt: "Crop preview",
@@ -82,10 +90,19 @@ const copy = {
     sourceIntro: "Crop an image by defining the exact area.",
     sourceTitle: "File and crop",
     squareCrop: "Centered square",
+    widthLabel: "Crop width",
     webpHint: "WebP appears if your browser can export it correctly.",
+    xHelp: "X indicates how many pixels to move from the left edge.",
+    xLabel: "X / left",
+    yHelp: "Y indicates how many pixels to move down from the top edge.",
+    yLabel: "Y / top",
   },
 } as const;
 
+function formatTemplate(template: string, values: Record<string, string>) {
+  return Object.entries(values).reduce((result, [key, value]) => result.replace(`{{${key}}}`, value), template);
+}
+
 function parseNumberInput(value: string) {
   const numberValue = Number(value);
   return Number.isFinite(numberValue) ? numberValue : Number.NaN;
@@ -155,7 +172,6 @@ export function ImageCropperTool() {
     outputFormat,
     metadata ? getCroppedImageOutputBaseName(metadata.fileName) : defaultOutputBaseName,
   );
-  const transparencyWarning = outputFormat === "jpeg" && metadata?.mimeType !== "image/jpeg" ? labels.jpgTransparency : null;
   const canCrop = Boolean(file && metadata) && !cropError && status !== "reading" && status !== "processing";
 
   const clearResult = () => {
@@ -376,22 +392,36 @@ export function ImageCropperTool() {
             </div>
             <div className="grid gap-3 sm:grid-cols-4">
               <label className="grid gap-2 text-sm font-semibold text-ink-700">
-                X
+                {labels.xLabel}
                 <input className={inputClassName} inputMode="numeric" value={xInput} onChange={(event) => { setXInput(event.target.value); resetFeedback(); }} />
               </label>
               <label className="grid gap-2 text-sm font-semibold text-ink-700">
-                Y
+                {labels.yLabel}
                 <input className={inputClassName} inputMode="numeric" value={yInput} onChange={(event) => { setYInput(event.target.value); resetFeedback(); }} />
               </label>
               <label className="grid gap-2 text-sm font-semibold text-ink-700">
-                {language === "en" ? "Width" : "Ancho"}
+                {labels.widthLabel}
                 <input className={inputClassName} inputMode="numeric" value={widthInput} onChange={(event) => { setWidthInput(event.target.value); resetFeedback(); }} />
               </label>
               <label className="grid gap-2 text-sm font-semibold text-ink-700">
-                {language === "en" ? "Height" : "Alto"}
+                {labels.heightLabel}
                 <input className={inputClassName} inputMode="numeric" value={heightInput} onChange={(event) => { setHeightInput(event.target.value); resetFeedback(); }} />
               </label>
             </div>
+            <div className="grid gap-1 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-xs leading-5 text-ink-500">
+              <p>{labels.xHelp}</p>
+              <p>{labels.yHelp}</p>
+              {!cropError && outputDimensions ? (
+                <p className="font-semibold text-ink-700">
+                  {formatTemplate(labels.cropSummary, {
+                    height: String(outputDimensions.height),
+                    width: String(outputDimensions.width),
+                    x: stringifyCropValue(cropRect.x),
+                    y: stringifyCropValue(cropRect.y),
+                  })}
+                </p>
+              ) : null}
+            </div>
             <div className="grid gap-2 sm:grid-cols-3">
               <Button
                 type="button"
@@ -431,6 +461,38 @@ export function ImageCropperTool() {
             ) : null}
           </div>
 
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <OutputFormatSelector
+              description={t(formatDescKeys[outputFormat])}
+              formats={outputFormats}
+              getLabel={getImageFormatLabel}
+              label={language === "en" ? "Output format" : "Formato final"}
+              value={outputFormat}
+              onChange={(format) => {
+                setOutputFormat(format);
+                resetFeedback();
+              }}
+            />
+
+            {shouldShowQuality ? (
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+                <input
+                  className="w-full accent-accent-cyan"
+                  min={10}
+                  max={100}
+                  step={1}
+                  type="range"
+                  value={qualityPercent}
+                  onChange={(event) => {
+                    setQualityPercent(Number(event.target.value));
+                    resetFeedback();
+                  }}
+                />
+              </label>
+            ) : null}
+          </div>
+
           {status === "reading" ? (
             <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
               <Loader2 className="animate-spin text-accent-teal" size={16} />
@@ -453,7 +515,7 @@ export function ImageCropperTool() {
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+          <div className="grid aspect-square w-full place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
             {previewUrl && metadata && !cropError ? (
               <div className="w-full max-w-md overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50 shadow-sm" style={{ aspectRatio: `${cropRect.width} / ${cropRect.height}` }}>
                 <img
@@ -478,54 +540,8 @@ export function ImageCropperTool() {
             </p>
           </div>
 
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
-          </div>
 
-          <p className="text-xs leading-5 text-ink-500">{labels.webpHint}</p>
-
-          {shouldShowQuality ? (
-            <label className="grid gap-2 text-sm font-semibold text-ink-700">
-              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
-              <input
-                className="w-full accent-accent-cyan"
-                min={10}
-                max={100}
-                step={1}
-                type="range"
-                value={qualityPercent}
-                onChange={(event) => {
-                  setQualityPercent(Number(event.target.value));
-                  resetFeedback();
-                }}
-              />
-              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
-            </label>
-          ) : null}
 
-          {transparencyWarning ? (
-            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {transparencyWarning}
-            </p>
-          ) : null}
 
           <label className="grid gap-2 text-sm font-semibold text-ink-700">
             {t("imageUi.outputName")}
diff --git a/src/tools/image/image-joiner/ImageJoinerTool.tsx b/src/tools/image/image-joiner/ImageJoinerTool.tsx
index 14fa3ca..2eec126 100644
--- a/src/tools/image/image-joiner/ImageJoinerTool.tsx
+++ b/src/tools/image/image-joiner/ImageJoinerTool.tsx
@@ -14,6 +14,7 @@ import {
 } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -52,7 +53,7 @@ import type {
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type ImageJoinerItem = {
   file: File;
@@ -81,7 +82,6 @@ const copy = {
     emptyList: "Agrega al menos dos imagenes para preparar la union.",
     grid: "Cuadricula",
     horizontal: "Horizontal",
-    jpgTransparency: "JPG no conserva transparencia.",
     layoutTitle: "Orden y composicion",
     mode: "Modo de union",
     outputIntro: "Todo se procesa localmente en tu navegador.",
@@ -104,7 +104,6 @@ const copy = {
     emptyList: "Add at least two images to prepare the join.",
     grid: "Grid",
     horizontal: "Horizontal",
-    jpgTransparency: "JPG does not preserve transparency.",
     layoutTitle: "Order and composition",
     mode: "Join mode",
     outputIntro: "Everything is processed locally in your browser.",
@@ -213,7 +212,6 @@ export function ImageJoinerTool() {
   const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
   const fallbackBaseName = items[0] ? getJoinedImageOutputBaseName(items[0].metadata.fileName) : defaultOutputBaseName;
   const finalOutputFileName = buildJoinedImageFileName(outputFileName, outputFormat, fallbackBaseName);
-  const transparencyWarning = outputFormat === "jpeg" ? labels.jpgTransparency : null;
   const canJoin = items.length >= 2 && !layoutError && status !== "reading" && status !== "processing";
 
   const clearResult = () => {
@@ -609,7 +607,7 @@ export function ImageJoinerTool() {
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+          <div className="grid aspect-square w-full place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
             {layout ? (
               <div
                 className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-200/80 shadow-sm"
@@ -646,54 +644,37 @@ export function ImageJoinerTool() {
             <p className="mt-1 font-semibold text-ink-900">{layout ? `${layout.width} x ${layout.height}px` : "-"}</p>
           </div>
 
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
-          </div>
-
-          <p className="text-xs leading-5 text-ink-500">{labels.webpHint}</p>
-
-          {shouldShowQuality ? (
-            <label className="grid gap-2 text-sm font-semibold text-ink-700">
-              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
-              <input
-                className="w-full accent-accent-cyan"
-                min={10}
-                max={100}
-                step={1}
-                type="range"
-                value={qualityPercent}
-                onChange={(event) => {
-                  setQualityPercent(Number(event.target.value));
-                  resetFeedback();
-                }}
-              />
-              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
-            </label>
-          ) : null}
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <OutputFormatSelector
+              description={t(formatDescKeys[outputFormat])}
+              formats={outputFormats}
+              getLabel={getImageFormatLabel}
+              label={language === "en" ? "Output format" : "Formato final"}
+              value={outputFormat}
+              onChange={(format) => {
+                setOutputFormat(format);
+                resetFeedback();
+              }}
+            />
 
-          {transparencyWarning ? (
-            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {transparencyWarning}
-            </p>
-          ) : null}
+            {shouldShowQuality ? (
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+                <input
+                  className="w-full accent-accent-cyan"
+                  min={10}
+                  max={100}
+                  step={1}
+                  type="range"
+                  value={qualityPercent}
+                  onChange={(event) => {
+                    setQualityPercent(Number(event.target.value));
+                    resetFeedback();
+                  }}
+                />
+              </label>
+            ) : null}
+          </div>
 
           <label className="grid gap-2 text-sm font-semibold text-ink-700">
             {t("imageUi.outputName")}
diff --git a/src/tools/image/image-joiner/README.md b/src/tools/image/image-joiner/README.md
index d13785e..4260d12 100644
--- a/src/tools/image/image-joiner/README.md
+++ b/src/tools/image/image-joiner/README.md
@@ -1,18 +1,17 @@
-# Unir imagenes
+# Unir imágenes
 
-Herramienta local para unir varias imagenes en una sola imagen final.
+Herramienta local para unir varias imágenes en una sola imagen final.
 
 ## Comportamiento
 
-- Acepta imagenes PNG, JPG/JPEG o WebP que el navegador pueda decodificar.
-- Permite reordenar, subir, bajar y eliminar imagenes.
-- Modos de union: vertical, horizontal y cuadrícula.
-- La cuadrícula usa un numero configurable de columnas y calcula las filas automaticamente.
-- Permite ajustar separacion, padding exterior y color de fondo.
+- Acepta imágenes PNG, JPG/JPEG o WebP que el navegador pueda decodificar.
+- Permite reordenar, subir, bajar y eliminar imágenes.
+- Modos de unión: vertical, horizontal y cuadrícula.
+- La cuadrícula usa un número configurable de columnas y calcula las filas automáticamente.
+- Permite ajustar separación, padding exterior y color de fondo.
 - Exporta PNG, JPG o WebP si el navegador lo soporta.
-- JPG no conserva transparencia.
 - Todo el procesamiento ocurre en el navegador.
 
 ## Layout
 
-Las imagenes se dibujan en sus dimensiones originales. Vertical y horizontal centran cada imagen en el eje secundario. La cuadrícula usa celdas uniformes basadas en la imagen mas grande para mantener una composicion simple y predecible.
+Las imágenes se dibujan en sus dimensiones originales. Vertical y horizontal centran cada imagen en el eje secundario. La cuadrícula usa celdas uniformes basadas en la imagen más grande para mantener una composición simple y predecible.
diff --git a/src/tools/image/image-placeholder/ImagePlaceholderTool.tsx b/src/tools/image/image-placeholder/ImagePlaceholderTool.tsx
index ad1b94e..9329aa5 100644
--- a/src/tools/image/image-placeholder/ImagePlaceholderTool.tsx
+++ b/src/tools/image/image-placeholder/ImagePlaceholderTool.tsx
@@ -1,6 +1,7 @@
 import { Download, Image as ImageIcon, Loader2, RotateCcw, Type } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -30,7 +31,7 @@ import type {
 } from "./imagePlaceholder.types";
 
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type DownloadableResult = ImagePlaceholderResult & {
   url: string;
@@ -321,6 +322,20 @@ export function ImagePlaceholderTool() {
             </div>
           </div>
 
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <OutputFormatSelector
+              description={t(formatDescKeys[outputFormat])}
+              formats={outputFormats}
+              getLabel={getImageFormatLabel}
+              label={language === "en" ? "Output format" : "Formato final"}
+              value={outputFormat}
+              onChange={(format) => {
+                setOutputFormat(format);
+                resetFeedback();
+              }}
+            />
+          </div>
+
           {status === "processing" ? (
             <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
               <Loader2 className="animate-spin text-accent-teal" size={16} />
@@ -343,7 +358,7 @@ export function ImagePlaceholderTool() {
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+          <div className="grid aspect-square w-full place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
             {!dimensionError ? (
               <div
                 aria-label={labels.placeholderAlt}
@@ -369,28 +384,6 @@ export function ImagePlaceholderTool() {
             <p className="mt-1 font-semibold text-ink-900">{dimensionError ? "-" : `${width} x ${height}px`}</p>
           </div>
 
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
-          </div>
-
           {shouldShowQuality ? (
             <label className="grid gap-2 text-sm font-semibold text-ink-700">
               {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
diff --git a/src/tools/image/image-resizer/ImageResizerTool.tsx b/src/tools/image/image-resizer/ImageResizerTool.tsx
index 384dd25..70d47be 100644
--- a/src/tools/image/image-resizer/ImageResizerTool.tsx
+++ b/src/tools/image/image-resizer/ImageResizerTool.tsx
@@ -1,6 +1,7 @@
 import { Download, FileImage, Loader2, Maximize2, RotateCcw, Upload } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -33,7 +34,7 @@ import type {
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type DownloadableResult = ImageResizerResult & {
   url: string;
@@ -53,7 +54,7 @@ function toPositiveInteger(value: string) {
 }
 
 export function ImageResizerTool() {
-  const { t } = useI18n();
+  const { language, t } = useI18n();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const previewUrlRef = useRef<string | null>(null);
   const resultUrlRef = useRef<string | null>(null);
@@ -97,10 +98,6 @@ export function ImageResizerTool() {
     outputFormat,
     metadata ? getResizedImageOutputBaseName(metadata.fileName) : defaultOutputBaseName,
   );
-  const transparencyWarning =
-    outputFormat === "jpeg" && metadata?.mimeType !== "image/jpeg"
-      ? t("imageUi.transparencyWarning")
-      : null;
   const canResize = Boolean(file && metadata) && !dimensionsError && status !== "reading" && status !== "processing";
 
   const deltaLabel = (() => {
@@ -387,7 +384,7 @@ export function ImageResizerTool() {
             {t("tools.image-resizer.ui.maintainRatio")}
           </label>
 
-          <div className="grid gap-3 sm:grid-cols-3">
+          <div className="grid gap-3 sm:grid-cols-2 2xl:grid-cols-3">
             <label className="grid gap-2 text-sm font-semibold text-ink-700">
               {t("tools.image-resizer.ui.width")}
               <input className={inputClassName} inputMode="numeric" value={widthInput} onChange={(event) => updateWidth(event.target.value)} />
@@ -408,56 +405,6 @@ export function ImageResizerTool() {
             </p>
           ) : null}
 
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
-          </div>
-
-          {!webpSupported ? (
-            <p className="text-xs leading-5 text-ink-500">{t("imageUi.webpUnavailable")}</p>
-          ) : null}
-
-          {shouldShowQuality ? (
-            <label className="grid gap-2 text-sm font-semibold text-ink-700">
-              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
-              <input
-                className="w-full accent-accent-cyan"
-                min={10}
-                max={100}
-                step={1}
-                type="range"
-                value={qualityPercent}
-                onChange={(event) => {
-                  setQualityPercent(Number(event.target.value));
-                  resetFeedback();
-                }}
-              />
-            </label>
-          ) : null}
-
-          {transparencyWarning ? (
-            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {transparencyWarning}
-            </p>
-          ) : null}
-
           <label className="grid gap-2 text-sm font-semibold text-ink-700">
             {t("imageUi.outputName")}
             <input
@@ -473,6 +420,37 @@ export function ImageResizerTool() {
             <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
           </label>
 
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <OutputFormatSelector
+              description={t(formatDescKeys[outputFormat])}
+              formats={outputFormats}
+              getLabel={getImageFormatLabel}
+              label={language === "en" ? "Output format" : "Formato final"}
+              value={outputFormat}
+              onChange={(format) => {
+                setOutputFormat(format);
+                resetFeedback();
+              }}
+            />
+            {shouldShowQuality ? (
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+                <input
+                  className="w-full accent-accent-cyan"
+                  min={10}
+                  max={100}
+                  step={1}
+                  type="range"
+                  value={qualityPercent}
+                  onChange={(event) => {
+                    setQualityPercent(Number(event.target.value));
+                    resetFeedback();
+                  }}
+                />
+              </label>
+            ) : null}
+          </div>
+
           {status === "processing" ? (
             <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
               <Loader2 className="animate-spin text-accent-teal" size={16} />
diff --git a/src/tools/image/image-rotator/ImageRotatorTool.tsx b/src/tools/image/image-rotator/ImageRotatorTool.tsx
index eeeccfa..66b8312 100644
--- a/src/tools/image/image-rotator/ImageRotatorTool.tsx
+++ b/src/tools/image/image-rotator/ImageRotatorTool.tsx
@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -44,7 +45,7 @@ import type {
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type DownloadableResult = ImageRotatorResult & {
   url: string;
@@ -81,7 +82,6 @@ const copy = {
     downloadReady: "Imagen lista",
     flipHorizontal: "Voltear horizontal",
     flipVertical: "Voltear vertical",
-    jpgTransparency: "JPG no conserva transparencia.",
     noImage: "Selecciona una imagen para habilitar las acciones.",
     outputIntro: "El resultado se genera desde un canvas local.",
     outputTitle: "Vista previa y salida",
@@ -103,7 +103,6 @@ const copy = {
     downloadReady: "Image ready",
     flipHorizontal: "Flip horizontal",
     flipVertical: "Flip vertical",
-    jpgTransparency: "JPG does not preserve transparency.",
     noImage: "Select an image to enable actions.",
     outputIntro: "The result is generated from a local canvas.",
     outputTitle: "Preview and output",
@@ -186,7 +185,6 @@ export function ImageRotatorTool() {
     outputFormat,
     metadata ? getRotatedImageOutputBaseName(metadata.fileName) : defaultOutputBaseName,
   );
-  const transparencyWarning = outputFormat === "jpeg" && metadata?.mimeType !== "image/jpeg" ? labels.jpgTransparency : null;
   const canRotate = Boolean(file && metadata) && status !== "reading" && status !== "processing";
 
   const actionLabels: Record<ImageRotatorAction, string> = {
@@ -437,6 +435,38 @@ export function ImageRotatorTool() {
             </Button>
           </div>
 
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <OutputFormatSelector
+              description={t(formatDescKeys[outputFormat])}
+              formats={outputFormats}
+              getLabel={getImageFormatLabel}
+              label={language === "en" ? "Output format" : "Formato final"}
+              value={outputFormat}
+              onChange={(format) => {
+                setOutputFormat(format);
+                resetFeedback();
+              }}
+            />
+
+            {shouldShowQuality ? (
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+                <input
+                  className="w-full accent-accent-cyan"
+                  min={10}
+                  max={100}
+                  step={1}
+                  type="range"
+                  value={qualityPercent}
+                  onChange={(event) => {
+                    setQualityPercent(Number(event.target.value));
+                    resetFeedback();
+                  }}
+                />
+              </label>
+            ) : null}
+          </div>
+
           {status === "reading" ? (
             <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
               <Loader2 className="animate-spin text-accent-teal" size={16} />
@@ -459,11 +489,11 @@ export function ImageRotatorTool() {
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+          <div className="grid aspect-square w-full place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
             {previewUrl ? (
               <img
                 alt={labels.previewAlt}
-                className="max-h-72 max-w-full object-contain transition-transform duration-200"
+                className="max-h-full max-w-full object-contain transition-transform duration-200"
                 src={previewUrl}
                 style={{ transform: getPreviewTransform(transform) }}
               />
@@ -482,54 +512,8 @@ export function ImageRotatorTool() {
             </p>
           </div>
 
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
-          </div>
 
-          <p className="text-xs leading-5 text-ink-500">{labels.webpHint}</p>
-
-          {shouldShowQuality ? (
-            <label className="grid gap-2 text-sm font-semibold text-ink-700">
-              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
-              <input
-                className="w-full accent-accent-cyan"
-                min={10}
-                max={100}
-                step={1}
-                type="range"
-                value={qualityPercent}
-                onChange={(event) => {
-                  setQualityPercent(Number(event.target.value));
-                  resetFeedback();
-                }}
-              />
-              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
-            </label>
-          ) : null}
 
-          {transparencyWarning ? (
-            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {transparencyWarning}
-            </p>
-          ) : null}
 
           <label className="grid gap-2 text-sm font-semibold text-ink-700">
             {t("imageUi.outputName")}
diff --git a/src/tools/image/image-splitter/ImageSplitterTool.tsx b/src/tools/image/image-splitter/ImageSplitterTool.tsx
index 1876c47..07f1278 100644
--- a/src/tools/image/image-splitter/ImageSplitterTool.tsx
+++ b/src/tools/image/image-splitter/ImageSplitterTool.tsx
@@ -1,6 +1,7 @@
 import { Download, FileArchive, FileImage, Grid3X3, Loader2, Ruler, RotateCcw, Upload } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -34,7 +35,7 @@ import type {
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type DownloadableResult = ImageSplitterResult & {
   url: string;
@@ -56,7 +57,6 @@ const copy = {
     fixedMode: "Tamano fijo",
     fixedWidth: "Ancho de cada parte",
     gridMode: "Filas y columnas",
-    jpgTransparency: "JPG no conserva transparencia.",
     modeTitle: "Modo de division",
     outputIntro: "El resultado se descarga como ZIP.",
     outputTitle: "Vista previa y salida",
@@ -76,7 +76,6 @@ const copy = {
     fixedMode: "Fixed size",
     fixedWidth: "Part width",
     gridMode: "Rows and columns",
-    jpgTransparency: "JPG does not preserve transparency.",
     modeTitle: "Split mode",
     outputIntro: "The result downloads as a ZIP.",
     outputTitle: "Preview and output",
@@ -432,6 +431,38 @@ export function ImageSplitterTool() {
             ) : null}
           </div>
 
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <OutputFormatSelector
+              description={t(formatDescKeys[outputFormat])}
+              formats={outputFormats}
+              getLabel={getImageFormatLabel}
+              label={language === "en" ? "Output format" : "Formato final"}
+              value={outputFormat}
+              onChange={(format) => {
+                setOutputFormat(format);
+                resetFeedback();
+              }}
+            />
+
+            {shouldShowQuality ? (
+              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
+                <input
+                  className="w-full accent-accent-cyan"
+                  min={10}
+                  max={100}
+                  step={1}
+                  type="range"
+                  value={qualityPercent}
+                  onChange={(event) => {
+                    setQualityPercent(Number(event.target.value));
+                    resetFeedback();
+                  }}
+                />
+              </label>
+            ) : null}
+          </div>
+
           {status === "reading" ? (
             <p className="flex items-center gap-2 rounded-lg border border-surface-200/80 bg-surface-50/90 px-3 py-2 text-sm text-ink-600 shadow-sm">
               <Loader2 className="animate-spin text-accent-teal" size={16} />
@@ -454,7 +485,7 @@ export function ImageSplitterTool() {
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+          <div className="grid aspect-square w-full place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
             {previewUrl && metadata && parts.length > 0 ? (
               <div
                 className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50 shadow-sm"
@@ -488,54 +519,8 @@ export function ImageSplitterTool() {
             </div>
           </div>
 
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
-          </div>
 
-          <p className="text-xs leading-5 text-ink-500">{labels.webpHint}</p>
-
-          {shouldShowQuality ? (
-            <label className="grid gap-2 text-sm font-semibold text-ink-700">
-              {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
-              <input
-                className="w-full accent-accent-cyan"
-                min={10}
-                max={100}
-                step={1}
-                type="range"
-                value={qualityPercent}
-                onChange={(event) => {
-                  setQualityPercent(Number(event.target.value));
-                  resetFeedback();
-                }}
-              />
-              <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.qualityHelp")}</span>
-            </label>
-          ) : null}
 
-          {outputFormat === "jpeg" ? (
-            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {labels.jpgTransparency}
-            </p>
-          ) : null}
 
           <label className="grid gap-2 text-sm font-semibold text-ink-700">
             {labels.zipName}
diff --git a/src/tools/image/image-to-favicon/ImageToFaviconTool.tsx b/src/tools/image/image-to-favicon/ImageToFaviconTool.tsx
index 8af088c..779ccfa 100644
--- a/src/tools/image/image-to-favicon/ImageToFaviconTool.tsx
+++ b/src/tools/image/image-to-favicon/ImageToFaviconTool.tsx
@@ -1,4 +1,4 @@
-import { Download, FileArchive, FileImage, Loader2, Package, RotateCcw, Upload } from "lucide-react";
+import { ChevronDown, ChevronUp, Download, FileArchive, FileImage, Loader2, Package, RotateCcw, Upload } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
@@ -79,6 +79,7 @@ export function ImageToFaviconTool() {
   const [error, setError] = useState<string | null>(null);
   const [result, setResult] = useState<DownloadableResult | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [isZipContentsOpen, setIsZipContentsOpen] = useState(true);
 
   useEffect(() => {
     return () => {
@@ -191,8 +192,9 @@ export function ImageToFaviconTool() {
   };
 
   return (
-    <div className="grid gap-5 lg:grid-cols-[minmax(0,0.96fr)_minmax(310px,0.52fr)]">
-      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+    <div className="grid gap-5">
+      <div className="grid gap-5 lg:grid-cols-[minmax(0,0.96fr)_minmax(310px,0.52fr)]">
+        <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
         <div className="grid gap-4">
           <div>
             <h3 className="text-sm font-semibold text-ink-900">{labels.sourceTitle}</h3>
@@ -301,22 +303,21 @@ export function ImageToFaviconTool() {
             </p>
           ) : null}
         </div>
-      </section>
+        </section>
 
-      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
         <div>
           <h3 className="text-sm font-semibold text-ink-900">{labels.outputTitle}</h3>
           <p className="mt-1 text-xs leading-5 text-ink-500">{labels.readmeIncluded}</p>
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-4">
+          <div className="mx-auto grid min-h-44 w-full max-w-72 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-4">
             {previewUrl ? (
               <div className="grid gap-3 text-center">
-                <div className="mx-auto grid h-32 w-32 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-[linear-gradient(45deg,#eef2f7_25%,transparent_25%),linear-gradient(-45deg,#eef2f7_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#eef2f7_75%),linear-gradient(-45deg,transparent_75%,#eef2f7_75%)] bg-[length:16px_16px] bg-[position:0_0,0_8px,8px_-8px,-8px_0] shadow-sm">
+                <div className="mx-auto grid h-28 w-28 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-[linear-gradient(45deg,#eef2f7_25%,transparent_25%),linear-gradient(-45deg,#eef2f7_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#eef2f7_75%),linear-gradient(-45deg,transparent_75%,#eef2f7_75%)] bg-[length:16px_16px] bg-[position:0_0,0_8px,8px_-8px,-8px_0] shadow-sm">
                   <img alt={labels.previewAlt} className="h-full w-full object-cover" src={previewUrl} />
                 </div>
-                <p className="text-xs leading-5 text-ink-500">Cover centrado</p>
               </div>
             ) : (
               <div className="text-center text-sm text-ink-500">
@@ -326,24 +327,6 @@ export function ImageToFaviconTool() {
             )}
           </div>
 
-          <div className="rounded-lg border border-surface-200/80 bg-surface-50/90 p-3 shadow-sm">
-            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.zipContents}</p>
-            <ul className="mt-3 grid gap-2 text-sm text-ink-700">
-              {iconSpecs.map((icon) => (
-                <li key={icon.fileName} className="flex items-center justify-between gap-3 rounded-md border border-surface-200/70 bg-surface-50 px-3 py-2">
-                  <span className="min-w-0 truncate">{icon.fileName}</span>
-                  <span className="shrink-0 font-semibold text-ink-900">
-                    {icon.size} x {icon.size}
-                  </span>
-                </li>
-              ))}
-              <li className="flex items-center justify-between gap-3 rounded-md border border-surface-200/70 bg-surface-50 px-3 py-2">
-                <span className="min-w-0 truncate">README.txt</span>
-                <span className="shrink-0 font-semibold text-ink-900">HTML</span>
-              </li>
-            </ul>
-          </div>
-
           <label className="grid gap-2 text-sm font-semibold text-ink-700">
             {labels.outputName}
             <input
@@ -413,6 +396,33 @@ export function ImageToFaviconTool() {
             </Button>
           </div>
         </div>
+        </section>
+      </div>
+
+      <section className="min-w-0 rounded-2xl border border-surface-200/80 bg-gradient-to-br from-surface-50/95 to-surface-100/50 p-4 shadow-panel ring-1 ring-surface-50/80 backdrop-blur">
+        <details open={isZipContentsOpen} onToggle={(event) => setIsZipContentsOpen(event.currentTarget.open)}>
+          <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold text-ink-900">
+            <span>{labels.zipContents}</span>
+            <span className="inline-flex shrink-0 items-center gap-2 rounded-md bg-surface-100 px-2 py-1 text-xs text-ink-600">
+              {language === "en" ? `${iconSpecs.length + 1} files included` : `${iconSpecs.length + 1} archivos incluidos`}
+              {isZipContentsOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+            </span>
+          </summary>
+          <ul className="mt-4 grid gap-2 text-sm text-ink-700 sm:grid-cols-2 lg:grid-cols-4">
+            {iconSpecs.map((icon) => (
+              <li key={icon.fileName} className="flex min-w-0 items-center justify-between gap-3 rounded-md border border-surface-200/70 bg-surface-50 px-3 py-2">
+                <span className="min-w-0 truncate">{icon.fileName}</span>
+                <span className="shrink-0 font-semibold text-ink-900">
+                  {icon.size} x {icon.size}
+                </span>
+              </li>
+            ))}
+            <li className="flex min-w-0 items-center justify-between gap-3 rounded-md border border-surface-200/70 bg-surface-50 px-3 py-2">
+              <span className="min-w-0 truncate">README.txt</span>
+              <span className="shrink-0 font-semibold text-ink-900">HTML</span>
+            </li>
+          </ul>
+        </details>
       </section>
     </div>
   );
diff --git a/src/tools/image/image-watermark/ImageWatermarkTool.tsx b/src/tools/image/image-watermark/ImageWatermarkTool.tsx
index 9244e4b..a0d6dac 100644
--- a/src/tools/image/image-watermark/ImageWatermarkTool.tsx
+++ b/src/tools/image/image-watermark/ImageWatermarkTool.tsx
@@ -1,6 +1,7 @@
-import { Download, FileImage, Loader2, RotateCcw, Stamp, Upload } from "lucide-react";
+import { Download, FileImage, Image as ImageIcon, Loader2, RotateCcw, Stamp, Upload } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "../../../shared/components/Button";
+import { OutputFormatSelector } from "../shared/OutputFormatSelector";
 import type { TranslationKey } from "../../../shared/i18n/dictionaries/es";
 import { useI18n } from "../../../shared/i18n/I18nProvider";
 import { cn } from "../../../shared/utils/cn";
@@ -13,10 +14,12 @@ import {
 import {
   addImageWatermark,
   buildWatermarkedImageFileName,
+  calculateLogoWatermarkDimensions,
   calculateWatermarkPosition,
   defaultOutputBaseName,
   defaultWatermarkColor,
   defaultWatermarkFontSize,
+  defaultWatermarkLogoMaxWidthPercent,
   defaultWatermarkMargin,
   defaultWatermarkOpacity,
   defaultWatermarkText,
@@ -24,13 +27,16 @@ import {
   getImageFormatLabel,
   getImageMimeLabel,
   getWatermarkedImageOutputBaseName,
+  isWatermarkLogoFile,
   normalizeHexColor,
   readImageMetadata,
   validateWatermarkFontSize,
+  validateWatermarkLogoMaxWidthPercent,
   validateWatermarkMargin,
   validateWatermarkOpacity,
 } from "./imageWatermark.service";
 import type {
+  ImageWatermarkKind,
   ImageWatermarkMetadata,
   ImageWatermarkOutputFormat,
   ImageWatermarkPosition,
@@ -40,7 +46,7 @@ import type {
 
 const acceptedImageTypes = "image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp";
 const inputClassName =
-  "min-h-11 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
+  "min-h-11 w-full min-w-0 rounded-lg border border-surface-200/90 bg-surface-50/95 px-3 text-sm font-normal text-ink-900 shadow-sm outline-none transition placeholder:text-ink-500/70 focus:border-accent-cyan focus:bg-surface-50 focus:ring-2 focus:ring-accent-cyan/25";
 
 type DownloadableResult = ImageWatermarkResult & {
   url: string;
@@ -69,21 +75,29 @@ const copy = {
     center: "Centro",
     color: "Color",
     downloadReady: "Imagen con marca lista",
-    fontSize: "Tamano de fuente",
-    jpgTransparency: "JPG no conserva transparencia.",
+    fontSize: "Tamaño de fuente",
+    imageKind: "Imagen/logo",
+    logoHelp: "PNG, JPG/JPEG o WebP. Para usar un SVG como logo, convertí primero SVG a PNG.",
+    logoInvalid: "Seleccioná un logo PNG, JPG/JPEG o WebP. Para usar un SVG como logo, convertí primero SVG a PNG.",
+    logoMaxWidth: "Ancho máximo del logo",
+    logoMissing: "Seleccioná una imagen/logo para la marca de agua.",
     margin: "Margen",
     opacity: "Opacidad",
-    outputIntro: "Todo se procesa localmente en tu navegador.",
+    outputIntro: "Previsualizá el resultado y descargá la imagen final.",
     outputTitle: "Vista previa y salida",
-    position: "Posicion",
     previewAlt: "Vista previa de marca de agua",
+    previewHelp: "La vista previa aparecerá aquí.",
+    previewTitle: "Vista previa",
     processing: "Agregando marca de agua...",
-    sourceIntro: "Agrega una marca de agua de texto sobre una imagen.",
+    selectLogo: "Seleccionar logo",
+    sourceIntro: "Agregá una marca de agua de texto o logo sobre una imagen.",
     sourceTitle: "Imagen y marca",
     text: "Texto",
-    textHelp: "Configura texto, posicion, color y opacidad.",
+    textHelp: "Configurá texto, posición, color y opacidad.",
+    textKind: "Texto",
     topLeft: "Arriba izquierda",
     topRight: "Arriba derecha",
+    type: "Tipo de marca",
   },
   en: {
     bottomLeft: "Bottom left",
@@ -92,20 +106,28 @@ const copy = {
     color: "Color",
     downloadReady: "Watermarked image ready",
     fontSize: "Font size",
-    jpgTransparency: "JPG does not preserve transparency.",
+    imageKind: "Image/logo",
+    logoHelp: "PNG, JPG/JPEG or WebP. To use an SVG logo, convert SVG to PNG first.",
+    logoInvalid: "Select a PNG, JPG/JPEG or WebP logo. To use an SVG logo, convert SVG to PNG first.",
+    logoMaxWidth: "Logo max width",
+    logoMissing: "Select an image/logo watermark.",
     margin: "Margin",
     opacity: "Opacity",
-    outputIntro: "Everything is processed locally in your browser.",
+    outputIntro: "Preview the result and download the final image.",
     outputTitle: "Preview and output",
-    position: "Position",
     previewAlt: "Watermark preview",
+    previewHelp: "The preview will appear here.",
+    previewTitle: "Preview",
     processing: "Adding watermark...",
-    sourceIntro: "Add a text watermark over an image.",
+    selectLogo: "Select logo",
+    sourceIntro: "Add a text or logo watermark over an image.",
     sourceTitle: "Image and watermark",
     text: "Text",
     textHelp: "Configure text, position, color and opacity.",
+    textKind: "Text",
     topLeft: "Top left",
     topRight: "Top right",
+    type: "Watermark type",
   },
 } as const;
 
@@ -117,6 +139,8 @@ const positionLabelKeys: Record<ImageWatermarkPosition, keyof typeof copy.es> =
   "bottom-right": "bottomRight",
 };
 
+const watermarkKindOptions: ImageWatermarkKind[] = ["text", "image"];
+
 function parseNumberInput(value: string) {
   const numberValue = Number(value);
   return Number.isFinite(numberValue) ? numberValue : Number.NaN;
@@ -147,18 +171,47 @@ function getPreviewWatermarkStyle(
   };
 }
 
+function getPreviewLogoStyle(
+  metadata: ImageWatermarkMetadata,
+  logoMetadata: ImageWatermarkMetadata,
+  logoMaxWidthPercent: number,
+  position: ImageWatermarkPosition,
+  margin: number,
+) {
+  const logoDimensions = calculateLogoWatermarkDimensions(metadata, logoMetadata, logoMaxWidthPercent);
+  const coordinates = calculateWatermarkPosition(metadata, logoDimensions, position, margin);
+
+  return {
+    height: `${(logoDimensions.height / metadata.height) * 100}%`,
+    left: `${(coordinates.x / metadata.width) * 100}%`,
+    top: `${(coordinates.y / metadata.height) * 100}%`,
+    width: `${(logoDimensions.width / metadata.width) * 100}%`,
+  };
+}
+
+function isSvgFile(file: File) {
+  return file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg");
+}
+
 export function ImageWatermarkTool() {
   const { language, t } = useI18n();
   const labels = copy[language];
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const logoInputRef = useRef<HTMLInputElement | null>(null);
   const previewUrlRef = useRef<string | null>(null);
+  const logoPreviewUrlRef = useRef<string | null>(null);
   const resultUrlRef = useRef<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [metadata, setMetadata] = useState<ImageWatermarkMetadata | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [watermarkKind, setWatermarkKind] = useState<ImageWatermarkKind>("text");
   const [text, setText] = useState(defaultWatermarkText);
   const [fontSizeInput, setFontSizeInput] = useState(String(defaultWatermarkFontSize));
   const [color, setColor] = useState(defaultWatermarkColor);
+  const [logoFile, setLogoFile] = useState<File | null>(null);
+  const [logoMetadata, setLogoMetadata] = useState<ImageWatermarkMetadata | null>(null);
+  const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
+  const [logoMaxWidthPercentInput, setLogoMaxWidthPercentInput] = useState(String(defaultWatermarkLogoMaxWidthPercent));
   const [opacityPercent, setOpacityPercent] = useState(Math.round(defaultWatermarkOpacity * 100));
   const [position, setPosition] = useState<ImageWatermarkPosition>("bottom-right");
   const [marginInput, setMarginInput] = useState(String(defaultWatermarkMargin));
@@ -176,6 +229,7 @@ export function ImageWatermarkTool() {
     setWebpSupported(canExportBrowserImageFormat("webp"));
     return () => {
       if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+      if (logoPreviewUrlRef.current) URL.revokeObjectURL(logoPreviewUrlRef.current);
       if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
     };
   }, []);
@@ -186,13 +240,19 @@ export function ImageWatermarkTool() {
   );
   const fontSize = parseNumberInput(fontSizeInput);
   const margin = parseNumberInput(marginInput);
+  const logoMaxWidthPercent = parseNumberInput(logoMaxWidthPercentInput);
   const opacity = opacityPercent / 100;
   const normalizedColor = normalizeHexColor(color);
   const fontSizeError = validateWatermarkFontSize(fontSize);
   const marginError = validateWatermarkMargin(margin);
   const opacityError = validateWatermarkOpacity(opacity);
-  const textError = text.trim() ? null : language === "en" ? "Enter watermark text." : "Ingresa un texto para la marca de agua.";
-  const watermarkError = textError ?? fontSizeError ?? marginError ?? opacityError;
+  const logoMaxWidthError = validateWatermarkLogoMaxWidthPercent(logoMaxWidthPercent);
+  const textError = text.trim() ? null : language === "en" ? "Enter watermark text." : "Ingresá un texto para la marca de agua.";
+  const sharedWatermarkError = marginError ?? opacityError;
+  const watermarkError =
+    watermarkKind === "text"
+      ? textError ?? fontSizeError ?? sharedWatermarkError
+      : (!logoFile || !logoMetadata ? labels.logoMissing : logoMaxWidthError ?? sharedWatermarkError);
   const shouldShowQuality = outputFormat === "jpeg" || outputFormat === "webp";
   const fallbackBaseName = metadata ? getWatermarkedImageOutputBaseName(metadata.fileName) : defaultOutputBaseName;
   const finalOutputFileName = buildWatermarkedImageFileName(outputFileName, outputFormat, fallbackBaseName);
@@ -214,6 +274,17 @@ export function ImageWatermarkTool() {
     }
   };
 
+  const clearLogoSelection = () => {
+    if (logoPreviewUrlRef.current) {
+      URL.revokeObjectURL(logoPreviewUrlRef.current);
+      logoPreviewUrlRef.current = null;
+    }
+    setLogoFile(null);
+    setLogoMetadata(null);
+    setLogoPreviewUrl(null);
+    if (logoInputRef.current) logoInputRef.current.value = "";
+  };
+
   const processFile = async (nextFile: File | undefined) => {
     if (!nextFile) return;
     setStatus("reading");
@@ -252,18 +323,46 @@ export function ImageWatermarkTool() {
     }
   };
 
+  const processLogoFile = async (nextLogoFile: File | undefined) => {
+    if (!nextLogoFile) return;
+    resetFeedback();
+
+    if (isSvgFile(nextLogoFile) || !isWatermarkLogoFile(nextLogoFile)) {
+      clearLogoSelection();
+      setError(labels.logoInvalid);
+      return;
+    }
+
+    try {
+      const nextLogoMetadata = await readImageMetadata(nextLogoFile);
+      if (logoPreviewUrlRef.current) URL.revokeObjectURL(logoPreviewUrlRef.current);
+      const nextLogoPreviewUrl = URL.createObjectURL(nextLogoFile);
+      logoPreviewUrlRef.current = nextLogoPreviewUrl;
+      setLogoFile(nextLogoFile);
+      setLogoMetadata(nextLogoMetadata);
+      setLogoPreviewUrl(nextLogoPreviewUrl);
+      setWatermarkKind("image");
+    } catch (nextError) {
+      clearLogoSelection();
+      setError(nextError instanceof Error ? nextError.message : labels.logoInvalid);
+    }
+  };
+
   const clearSelection = () => {
     if (previewUrlRef.current) {
       URL.revokeObjectURL(previewUrlRef.current);
       previewUrlRef.current = null;
     }
     clearResult();
+    clearLogoSelection();
     setFile(null);
     setMetadata(null);
     setPreviewUrl(null);
+    setWatermarkKind("text");
     setText(defaultWatermarkText);
     setFontSizeInput(String(defaultWatermarkFontSize));
     setColor(defaultWatermarkColor);
+    setLogoMaxWidthPercentInput(String(defaultWatermarkLogoMaxWidthPercent));
     setOpacityPercent(Math.round(defaultWatermarkOpacity * 100));
     setPosition("bottom-right");
     setMarginInput(String(defaultWatermarkMargin));
@@ -284,17 +383,33 @@ export function ImageWatermarkTool() {
     clearResult();
 
     try {
-      const nextResult = await addImageWatermark(file, {
-        color: normalizedColor,
-        fontSize,
-        margin,
-        opacity,
-        outputBaseName: outputFileName,
-        outputFormat,
-        position,
-        quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
-        text,
-      });
+      const nextResult = await addImageWatermark(
+        file,
+        watermarkKind === "image" && logoFile
+          ? {
+              kind: "image",
+              logoFile,
+              logoMaxWidthPercent,
+              margin,
+              opacity,
+              outputBaseName: outputFileName,
+              outputFormat,
+              position,
+              quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
+            }
+          : {
+              color: normalizedColor,
+              fontSize,
+              kind: "text",
+              margin,
+              opacity,
+              outputBaseName: outputFileName,
+              outputFormat,
+              position,
+              quality: shouldShowQuality ? jpegQualityPercentToDecimal(qualityPercent) : undefined,
+              text,
+            },
+      );
       const resultUrl = URL.createObjectURL(new Blob([nextResult.bytes], { type: nextResult.mimeType }));
       resultUrlRef.current = resultUrl;
       setResult({ ...nextResult, url: resultUrl });
@@ -367,6 +482,17 @@ export function ImageWatermarkTool() {
             }}
           />
 
+          <input
+            ref={logoInputRef}
+            accept={acceptedImageTypes}
+            className="hidden"
+            type="file"
+            onChange={(event) => {
+              void processLogoFile(event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+
           {metadata ? (
             <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm sm:grid-cols-[128px_minmax(0,1fr)]">
               {previewUrl ? (
@@ -406,34 +532,118 @@ export function ImageWatermarkTool() {
           ) : null}
 
           <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
-            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.textHelp}</p>
-            <label className="grid gap-2 text-sm font-semibold text-ink-700">
-              {labels.text}
-              <input
-                className={inputClassName}
-                value={text}
-                onChange={(event) => {
-                  setText(event.target.value);
-                  resetFeedback();
-                }}
-              />
-            </label>
-            <div className="grid gap-3 sm:grid-cols-3">
-              <label className="grid gap-2 text-sm font-semibold text-ink-700">
-                {labels.fontSize}
-                <input
-                  className={inputClassName}
-                  inputMode="numeric"
-                  min={8}
-                  type="number"
-                  value={fontSizeInput}
-                  onChange={(event) => {
-                    setFontSizeInput(event.target.value);
+            <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{labels.type}</p>
+            <div className="grid gap-2 sm:grid-cols-2">
+              {watermarkKindOptions.map((nextKind) => (
+                <button
+                  key={nextKind}
+                  type="button"
+                  className={cn(
+                    "rounded-md border p-3 text-left transition",
+                    watermarkKind === nextKind
+                      ? "border-accent-cyan/45 bg-accent-cyan/10"
+                      : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
+                  )}
+                  onClick={() => {
+                    setWatermarkKind(nextKind);
                     resetFeedback();
                   }}
-                />
-              </label>
-              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+                >
+                  <span className="flex items-center gap-2 text-sm font-semibold text-ink-900">
+                    {nextKind === "text" ? <Stamp size={16} /> : <ImageIcon size={16} />}
+                    {nextKind === "text" ? labels.textKind : labels.imageKind}
+                  </span>
+                </button>
+              ))}
+            </div>
+
+            {watermarkKind === "text" ? (
+              <div className="grid gap-3">
+                <p className="text-xs leading-5 text-ink-500">{labels.textHelp}</p>
+                <label className="grid min-w-0 gap-2 text-sm font-semibold text-ink-700">
+                  {labels.text}
+                  <input
+                    className={inputClassName}
+                    value={text}
+                    onChange={(event) => {
+                      setText(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                </label>
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <label className="grid min-w-0 gap-2 text-sm font-semibold text-ink-700">
+                    {labels.fontSize}
+                    <input
+                      className={inputClassName}
+                      inputMode="numeric"
+                      min={8}
+                      type="number"
+                      value={fontSizeInput}
+                      onChange={(event) => {
+                        setFontSizeInput(event.target.value);
+                        resetFeedback();
+                      }}
+                    />
+                  </label>
+                  <label className="grid min-w-0 gap-2 text-sm font-semibold text-ink-700">
+                    {labels.color}
+                    <span className="flex min-h-11 min-w-0 items-center gap-2 rounded-lg border border-surface-200/90 bg-surface-50/95 px-2 shadow-sm">
+                      <input
+                        className="h-8 w-10 shrink-0 rounded border border-surface-200 bg-transparent"
+                        type="color"
+                        value={normalizedColor}
+                        onChange={(event) => {
+                          setColor(event.target.value);
+                          resetFeedback();
+                        }}
+                      />
+                      <input
+                        className="min-w-0 flex-1 bg-transparent text-sm font-normal text-ink-900 outline-none"
+                        value={color}
+                        onChange={(event) => {
+                          setColor(event.target.value);
+                          resetFeedback();
+                        }}
+                      />
+                    </span>
+                  </label>
+                </div>
+              </div>
+            ) : (
+              <div className="grid gap-3">
+                <p className="text-xs leading-5 text-ink-500">{labels.logoHelp}</p>
+                <button
+                  className="grid min-h-28 place-items-center rounded-lg border border-dashed border-surface-200/80 bg-surface-50/80 p-4 text-center transition hover:border-accent-cyan/55 hover:bg-surface-50"
+                  type="button"
+                  onClick={() => logoInputRef.current?.click()}
+                >
+                  <span>
+                    <ImageIcon className="mx-auto text-accent-teal" size={26} />
+                    <span className="mt-2 block text-sm font-semibold text-ink-900">{labels.selectLogo}</span>
+                    <span className="mt-1 block break-all text-xs leading-5 text-ink-500">{logoMetadata?.fileName ?? labels.logoHelp}</span>
+                  </span>
+                </button>
+                <label className="grid min-w-0 gap-2 text-sm font-semibold text-ink-700">
+                  {labels.logoMaxWidth}: {logoMaxWidthPercentInput}%
+                  <input
+                    className="w-full accent-accent-cyan"
+                    min={1}
+                    max={100}
+                    step={1}
+                    type="range"
+                    value={logoMaxWidthPercentInput}
+                    onChange={(event) => {
+                      setLogoMaxWidthPercentInput(event.target.value);
+                      resetFeedback();
+                    }}
+                  />
+                </label>
+              </div>
+            )}
+
+            <div className="grid gap-3 sm:grid-cols-2">
+              <label className="grid min-w-0 gap-2 text-sm font-semibold text-ink-700">
                 {labels.margin}
                 <input
                   className={inputClassName}
@@ -447,7 +657,7 @@ export function ImageWatermarkTool() {
                   }}
                 />
               </label>
-              <label className="grid gap-2 text-sm font-semibold text-ink-700">
+              <label className="grid min-w-0 gap-2 text-sm font-semibold text-ink-700">
                 {labels.opacity}: {opacityPercent}%
                 <input
                   className="h-11 w-full accent-accent-cyan"
@@ -464,36 +674,13 @@ export function ImageWatermarkTool() {
               </label>
             </div>
 
-            <label className="grid gap-2 text-sm font-semibold text-ink-700">
-              {labels.color}
-              <span className="flex min-h-11 items-center gap-2 rounded-lg border border-surface-200/90 bg-surface-50/95 px-2 shadow-sm">
-                <input
-                  className="h-8 w-10 rounded border border-surface-200 bg-transparent"
-                  type="color"
-                  value={normalizedColor}
-                  onChange={(event) => {
-                    setColor(event.target.value);
-                    resetFeedback();
-                  }}
-                />
-                <input
-                  className="min-w-0 flex-1 bg-transparent text-sm font-normal text-ink-900 outline-none"
-                  value={color}
-                  onChange={(event) => {
-                    setColor(event.target.value);
-                    resetFeedback();
-                  }}
-                />
-              </span>
-            </label>
-
-            <div className="grid gap-2 sm:grid-cols-2">
+            <div className="grid grid-cols-2 gap-2 xl:grid-cols-3">
               {positionOptions.map((nextPosition) => (
                 <button
                   key={nextPosition}
                   type="button"
                   className={cn(
-                    "rounded-md border px-3 py-2 text-sm font-semibold transition",
+                    "min-h-10 rounded-md border px-2 py-2 text-sm font-semibold transition",
                     position === nextPosition
                       ? "border-accent-cyan/45 bg-accent-cyan/10 text-ink-900"
                       : "border-surface-200/80 bg-surface-50/90 text-ink-700 hover:border-accent-cyan/35",
@@ -537,14 +724,14 @@ export function ImageWatermarkTool() {
         </div>
 
         <div className="mt-5 grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-4 shadow-sm">
-          <div className="grid min-h-56 place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
+          <div className="grid aspect-square w-full place-items-center overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50/90 p-3">
             {previewUrl && metadata ? (
               <div
                 className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-200/80 bg-surface-50 shadow-sm"
                 style={{ aspectRatio: `${metadata.width} / ${metadata.height}` }}
               >
                 <img alt={labels.previewAlt} className="h-full w-full object-fill" src={previewUrl} />
-                {text.trim() && !watermarkError ? (
+                {watermarkKind === "text" && text.trim() && !textError && !fontSizeError && !marginError ? (
                   <span
                     className="pointer-events-none absolute whitespace-nowrap font-bold leading-none"
                     style={{
@@ -556,39 +743,41 @@ export function ImageWatermarkTool() {
                     {text}
                   </span>
                 ) : null}
+                {watermarkKind === "image" && logoPreviewUrl && logoMetadata && !logoMaxWidthError && !marginError ? (
+                  <img
+                    alt=""
+                    className="pointer-events-none absolute object-contain"
+                    src={logoPreviewUrl}
+                    style={{
+                      ...getPreviewLogoStyle(metadata, logoMetadata, logoMaxWidthPercent, position, margin),
+                      opacity,
+                    }}
+                  />
+                ) : null}
               </div>
             ) : (
               <div className="text-center text-sm text-ink-500">
                 <Stamp className="mx-auto text-accent-teal" size={32} />
-                <p className="mt-2 font-semibold text-ink-700">{t("imageUi.selectImage")}</p>
+                <p className="mt-2 font-semibold text-ink-700">{labels.previewTitle}</p>
+                <p className="mt-1 text-xs leading-5 text-ink-500">{labels.previewHelp}</p>
               </div>
             )}
           </div>
 
-          <div className="grid gap-2">
-            {outputFormats.map((format) => (
-              <button
-                key={format}
-                type="button"
-                className={cn(
-                  "rounded-md border p-3 text-left transition",
-                  outputFormat === format
-                    ? "border-accent-cyan/45 bg-accent-cyan/10"
-                    : "border-surface-200/80 bg-surface-50/90 hover:border-accent-cyan/35",
-                )}
-                onClick={() => {
-                  setOutputFormat(format);
-                  resetFeedback();
-                }}
-              >
-                <span className="block text-sm font-semibold text-ink-900">{getImageFormatLabel(format)}</span>
-                <span className="mt-1 block text-xs leading-5 text-ink-500">{t(formatDescKeys[format])}</span>
-              </button>
-            ))}
+          <div className="grid gap-3 rounded-xl border border-surface-200/80 bg-surface-50/80 p-3 shadow-sm">
+            <OutputFormatSelector
+              description={t(formatDescKeys[outputFormat])}
+              formats={outputFormats}
+              getLabel={getImageFormatLabel}
+              label={language === "en" ? "Output format" : "Formato final"}
+              value={outputFormat}
+              onChange={(format) => {
+                setOutputFormat(format);
+                resetFeedback();
+              }}
+            />
           </div>
 
-          <p className="text-xs leading-5 text-ink-500">{language === "en" ? "WebP appears if your browser can export it correctly." : "WebP aparece si tu navegador permite exportarlo correctamente."}</p>
-
           {shouldShowQuality ? (
             <label className="grid gap-2 text-sm font-semibold text-ink-700">
               {t("imageUi.qualityLabel", { format: getImageFormatLabel(outputFormat), percent: qualityPercent })}
@@ -608,16 +797,10 @@ export function ImageWatermarkTool() {
             </label>
           ) : null}
 
-          {outputFormat === "jpeg" ? (
-            <p className="rounded-md border border-accent-violet/20 bg-accent-violet/8 px-3 py-2 text-sm text-ink-600">
-              {labels.jpgTransparency}
-            </p>
-          ) : null}
-
-          <label className="grid gap-2 text-sm font-semibold text-ink-700">
+          <label className="grid min-w-0 gap-2 text-sm font-semibold text-ink-700">
             {t("imageUi.outputName")}
             <input
-              className={cn(inputClassName, "w-full")}
+              className={inputClassName}
               value={outputFileName}
               placeholder={fallbackBaseName}
               onChange={(event) => {
@@ -626,7 +809,7 @@ export function ImageWatermarkTool() {
                 resetFeedback();
               }}
             />
-            <span className="text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
+            <span className="break-all text-xs font-normal leading-5 text-ink-500">{t("imageUi.willPrepareAs", { name: finalOutputFileName })}</span>
           </label>
 
           {result ? (
diff --git a/src/tools/image/image-watermark/README.md b/src/tools/image/image-watermark/README.md
index ca9544e..e9fbd6f 100644
--- a/src/tools/image/image-watermark/README.md
+++ b/src/tools/image/image-watermark/README.md
@@ -8,7 +8,6 @@ Herramienta local para agregar una marca de agua de texto sobre una imagen.
 - Permite configurar texto, tamano de fuente, color, opacidad, posicion y margen.
 - Posiciones: arriba izquierda, arriba derecha, centro, abajo izquierda y abajo derecha.
 - Exporta PNG, JPG o WebP si el navegador lo soporta.
-- JPG no conserva transparencia.
 - Todo el procesamiento ocurre en el navegador.
 
 ## Limites
diff --git a/src/tools/image/image-watermark/imageWatermark.service.ts b/src/tools/image/image-watermark/imageWatermark.service.ts
index 1d439a3..2218e8f 100644
--- a/src/tools/image/image-watermark/imageWatermark.service.ts
+++ b/src/tools/image/image-watermark/imageWatermark.service.ts
@@ -25,9 +25,12 @@ export const defaultWatermarkColor = "#FFFFFF";
 export const defaultWatermarkOpacity = 0.65;
 export const defaultWatermarkFontSize = 48;
 export const defaultWatermarkMargin = 32;
+export const defaultWatermarkLogoMaxWidthPercent = 22;
 export const minWatermarkFontSize = 8;
 export const maxWatermarkFontSize = 512;
 export const maxWatermarkMargin = 10_000;
+export const minWatermarkLogoMaxWidthPercent = 1;
+export const maxWatermarkLogoMaxWidthPercent = 100;
 
 export { formatFileSize };
 
@@ -35,6 +38,10 @@ export function isWatermarkableImageFile(file: File) {
   return isBrowserImageFile(file);
 }
 
+export function isWatermarkLogoFile(file: File) {
+  return getBrowserImageMimeType(file) !== null;
+}
+
 export function getImageFormatLabel(format: ImageWatermarkOutputFormat) {
   if (format === "jpeg") {
     return "JPG";
@@ -98,7 +105,7 @@ export function normalizeHexColor(value: string, fallback = defaultWatermarkColo
 
 export function validateWatermarkOpacity(opacity: number) {
   if (!Number.isFinite(opacity)) {
-    return "La opacidad debe ser un numero valido.";
+    return "La opacidad debe ser un número válido.";
   }
 
   if (opacity < 0.1 || opacity > 1) {
@@ -110,15 +117,31 @@ export function validateWatermarkOpacity(opacity: number) {
 
 export function validateWatermarkFontSize(fontSize: number) {
   if (!Number.isFinite(fontSize)) {
-    return "El tamano de fuente debe ser un numero valido.";
+    return "El tamaño de fuente debe ser un número válido.";
   }
 
   if (!Number.isInteger(fontSize)) {
-    return "El tamano de fuente debe ser un numero entero.";
+    return "El tamaño de fuente debe ser un número entero.";
   }
 
   if (fontSize < minWatermarkFontSize || fontSize > maxWatermarkFontSize) {
-    return `El tamano de fuente debe estar entre ${minWatermarkFontSize} y ${maxWatermarkFontSize}px.`;
+    return `El tamaño de fuente debe estar entre ${minWatermarkFontSize} y ${maxWatermarkFontSize}px.`;
+  }
+
+  return null;
+}
+
+export function validateWatermarkLogoMaxWidthPercent(maxWidthPercent: number) {
+  if (!Number.isFinite(maxWidthPercent)) {
+    return "El ancho máximo del logo debe ser un número válido.";
+  }
+
+  if (!Number.isInteger(maxWidthPercent)) {
+    return "El ancho máximo del logo debe ser un número entero.";
+  }
+
+  if (maxWidthPercent < minWatermarkLogoMaxWidthPercent || maxWidthPercent > maxWatermarkLogoMaxWidthPercent) {
+    return `El ancho máximo del logo debe estar entre ${minWatermarkLogoMaxWidthPercent}% y ${maxWatermarkLogoMaxWidthPercent}%.`;
   }
 
   return null;
@@ -126,35 +149,43 @@ export function validateWatermarkFontSize(fontSize: number) {
 
 export function validateWatermarkMargin(margin: number) {
   if (!Number.isFinite(margin)) {
-    return "El margen debe ser un numero valido.";
+    return "El margen debe ser un número válido.";
   }
 
   if (!Number.isInteger(margin)) {
-    return "El margen debe ser un numero entero.";
+    return "El margen debe ser un número entero.";
   }
 
   if (margin < 0 || margin > maxWatermarkMargin) {
-    return "El margen debe ser cero o mayor y no superar el limite permitido.";
+    return "El margen debe ser cero o mayor y no superar el límite permitido.";
   }
 
   return null;
 }
 
-export function validateWatermarkOptions({ color, fontSize, margin, opacity, text }: ImageWatermarkOptions) {
-  if (!text.trim()) {
-    return "Ingresa un texto para la marca de agua.";
-  }
-
-  const fontSizeError = validateWatermarkFontSize(fontSize);
-  if (fontSizeError) return fontSizeError;
-
-  const opacityError = validateWatermarkOpacity(opacity);
+export function validateWatermarkOptions(options: ImageWatermarkOptions) {
+  const opacityError = validateWatermarkOpacity(options.opacity);
   if (opacityError) return opacityError;
 
-  const marginError = validateWatermarkMargin(margin);
+  const marginError = validateWatermarkMargin(options.margin);
   if (marginError) return marginError;
 
-  if (normalizeHexColor(color, "") === "") {
+  if (options.kind === "image") {
+    if (!isWatermarkLogoFile(options.logoFile)) {
+      return "Seleccioná un logo PNG, JPG/JPEG o WebP. Para usar un SVG como logo, convertí primero SVG a PNG.";
+    }
+
+    return validateWatermarkLogoMaxWidthPercent(options.logoMaxWidthPercent);
+  }
+
+  if (!options.text.trim()) {
+    return "Ingresá un texto para la marca de agua.";
+  }
+
+  const fontSizeError = validateWatermarkFontSize(options.fontSize);
+  if (fontSizeError) return fontSizeError;
+
+  if (normalizeHexColor(options.color, "") === "") {
     return "El color debe ser hexadecimal.";
   }
 
@@ -163,47 +194,63 @@ export function validateWatermarkOptions({ color, fontSize, margin, opacity, tex
 
 export function calculateWatermarkPosition(
   imageDimensions: ImageDimensions,
-  textDimensions: TextBoxDimensions,
+  watermarkDimensions: TextBoxDimensions,
   position: ImageWatermarkPosition,
   margin: number,
 ) {
-  const centerX = Math.round((imageDimensions.width - textDimensions.width) / 2);
-  const centerY = Math.round((imageDimensions.height - textDimensions.height) / 2);
+  const centerX = Math.round((imageDimensions.width - watermarkDimensions.width) / 2);
+  const centerY = Math.round((imageDimensions.height - watermarkDimensions.height) / 2);
 
   if (position === "top-left") {
     return { x: margin, y: margin };
   }
 
   if (position === "top-right") {
-    return { x: imageDimensions.width - textDimensions.width - margin, y: margin };
+    return { x: imageDimensions.width - watermarkDimensions.width - margin, y: margin };
   }
 
   if (position === "bottom-left") {
-    return { x: margin, y: imageDimensions.height - textDimensions.height - margin };
+    return { x: margin, y: imageDimensions.height - watermarkDimensions.height - margin };
   }
 
   if (position === "bottom-right") {
     return {
-      x: imageDimensions.width - textDimensions.width - margin,
-      y: imageDimensions.height - textDimensions.height - margin,
+      x: imageDimensions.width - watermarkDimensions.width - margin,
+      y: imageDimensions.height - watermarkDimensions.height - margin,
     };
   }
 
   return { x: centerX, y: centerY };
 }
 
+export function calculateLogoWatermarkDimensions(
+  imageDimensions: ImageDimensions,
+  logoDimensions: ImageDimensions,
+  maxWidthPercent: number,
+) {
+  const targetWidth = Math.max(1, Math.round((imageDimensions.width * maxWidthPercent) / 100));
+  const widthScale = targetWidth / logoDimensions.width;
+  const heightScale = imageDimensions.height / logoDimensions.height;
+  const scale = Math.min(widthScale, heightScale);
+
+  return {
+    height: Math.max(1, Math.round(logoDimensions.height * scale)),
+    width: Math.max(1, Math.round(logoDimensions.width * scale)),
+  };
+}
+
 export async function readImageMetadata(file: File): Promise<ImageWatermarkMetadata> {
   const mimeType = getBrowserImageMimeType(file);
 
   if (!mimeType) {
-    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+    throw new Error("Seleccioná una imagen PNG, JPG o WebP válida.");
   }
 
   try {
     const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
 
     if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
-      throw new Error("La imagen no tiene dimensiones validas.");
+      throw new Error("La imagen no tiene dimensiones válidas.");
     }
 
     return {
@@ -237,7 +284,7 @@ function measureWatermarkText(context: CanvasRenderingContext2D, text: string, f
 
 export async function addImageWatermark(file: File, options: ImageWatermarkOptions): Promise<ImageWatermarkResult> {
   if (!isWatermarkableImageFile(file)) {
-    throw new Error("Selecciona una imagen PNG, JPG o WebP valida.");
+    throw new Error("Seleccioná una imagen PNG, JPG o WebP válida.");
   }
 
   const validationError = validateWatermarkOptions(options);
@@ -246,7 +293,7 @@ export async function addImageWatermark(file: File, options: ImageWatermarkOptio
   }
 
   if (!canExportBrowserImageFormat(options.outputFormat)) {
-    throw new Error(`Este navegador no permite exportar imagenes como ${getImageFormatLabel(options.outputFormat)}.`);
+    throw new Error(`Este navegador no permite exportar imágenes como ${getImageFormatLabel(options.outputFormat)}.`);
   }
 
   const image = await loadBrowserImage(file, "No se pudo decodificar la imagen en este navegador.");
@@ -265,21 +312,40 @@ export async function addImageWatermark(file: File, options: ImageWatermarkOptio
   }
 
   context.drawImage(image, 0, 0);
-  const textDimensions = measureWatermarkText(context, options.text, options.fontSize);
-  const coordinates = calculateWatermarkPosition(
-    { height: canvas.height, width: canvas.width },
-    textDimensions,
-    options.position,
-    options.margin,
-  );
-
   context.save();
   context.globalAlpha = options.opacity;
-  configureWatermarkFont(context, options.fontSize);
-  context.fillStyle = normalizeHexColor(options.color);
-  context.textAlign = "left";
-  context.textBaseline = "top";
-  context.fillText(options.text, coordinates.x, coordinates.y);
+
+  if (options.kind === "image") {
+    const logo = await loadBrowserImage(options.logoFile, "No se pudo decodificar el logo en este navegador.");
+    const logoDimensions = calculateLogoWatermarkDimensions(
+      { height: canvas.height, width: canvas.width },
+      { height: logo.naturalHeight, width: logo.naturalWidth },
+      options.logoMaxWidthPercent,
+    );
+    const coordinates = calculateWatermarkPosition(
+      { height: canvas.height, width: canvas.width },
+      logoDimensions,
+      options.position,
+      options.margin,
+    );
+
+    context.drawImage(logo, coordinates.x, coordinates.y, logoDimensions.width, logoDimensions.height);
+  } else {
+    const textDimensions = measureWatermarkText(context, options.text, options.fontSize);
+    const coordinates = calculateWatermarkPosition(
+      { height: canvas.height, width: canvas.width },
+      textDimensions,
+      options.position,
+      options.margin,
+    );
+
+    configureWatermarkFont(context, options.fontSize);
+    context.fillStyle = normalizeHexColor(options.color);
+    context.textAlign = "left";
+    context.textBaseline = "top";
+    context.fillText(options.text, coordinates.x, coordinates.y);
+  }
+
   context.restore();
 
   const mimeType = getBrowserImageOutputMimeType(options.outputFormat);
diff --git a/src/tools/image/image-watermark/imageWatermark.types.ts b/src/tools/image/image-watermark/imageWatermark.types.ts
index c6554c9..9472bfd 100644
--- a/src/tools/image/image-watermark/imageWatermark.types.ts
+++ b/src/tools/image/image-watermark/imageWatermark.types.ts
@@ -7,6 +7,8 @@ export type ImageWatermarkPosition =
   | "bottom-left"
   | "bottom-right";
 
+export type ImageWatermarkKind = "text" | "image";
+
 export type ImageDimensions = {
   height: number;
   width: number;
@@ -14,18 +16,30 @@ export type ImageDimensions = {
 
 export type TextBoxDimensions = ImageDimensions;
 
-export type ImageWatermarkOptions = {
-  color: string;
-  fontSize: number;
+export type SharedImageWatermarkOptions = {
   margin: number;
   opacity: number;
   outputBaseName: string;
   outputFormat: ImageWatermarkOutputFormat;
   position: ImageWatermarkPosition;
   quality?: number;
+};
+
+export type TextImageWatermarkOptions = SharedImageWatermarkOptions & {
+  color: string;
+  fontSize: number;
+  kind: "text";
   text: string;
 };
 
+export type LogoImageWatermarkOptions = SharedImageWatermarkOptions & {
+  kind: "image";
+  logoFile: File;
+  logoMaxWidthPercent: number;
+};
+
+export type ImageWatermarkOptions = TextImageWatermarkOptions | LogoImageWatermarkOptions;
+
 export type WatermarkCoordinates = {
   x: number;
   y: number;
diff --git a/src/tools/image/shared/OutputFormatSelector.tsx b/src/tools/image/shared/OutputFormatSelector.tsx
new file mode 100644
index 0000000..236ca3b
--- /dev/null
+++ b/src/tools/image/shared/OutputFormatSelector.tsx
@@ -0,0 +1,43 @@
+import { cn } from "../../../shared/utils/cn";
+
+type OutputFormatSelectorProps<Format extends string> = {
+  description: string;
+  formats: readonly Format[];
+  getLabel: (format: Format) => string;
+  label: string;
+  onChange: (format: Format) => void;
+  value: Format;
+};
+
+export function OutputFormatSelector<Format extends string>({
+  description,
+  formats,
+  getLabel,
+  label,
+  onChange,
+  value,
+}: OutputFormatSelectorProps<Format>) {
+  return (
+    <div className="grid min-w-0 gap-2">
+      <p className="text-xs font-semibold uppercase tracking-wide text-ink-500">{label}</p>
+      <div className="flex min-w-0 flex-wrap gap-2">
+        {formats.map((format) => (
+          <button
+            key={format}
+            type="button"
+            className={cn(
+              "min-h-10 rounded-full border px-4 py-2 text-sm font-semibold transition",
+              value === format
+                ? "border-accent-cyan/45 bg-accent-cyan/10 text-ink-900"
+                : "border-surface-200/80 bg-surface-50/90 text-ink-700 hover:border-accent-cyan/35",
+            )}
+            onClick={() => onChange(format)}
+          >
+            {getLabel(format)}
+          </button>
+        ))}
+      </div>
+      <p className="text-xs leading-5 text-ink-500">{description}</p>
+    </div>
+  );
+}