limbo-component 1.6.7 → 1.8.0

package/dist/limbo.es.js

@@ -31,7 +31,7 @@ const DEFAULT_MESSAGES = {
     "message.no_images": "No hay imágenes disponibles",
     "message.upload_success": "Imagen subida correctamente",
     "message.upload_error": "Error al subir la imagen",
-    "message.delete_confirm": "¿Estás seguro de que quieres eliminar esta imagen?",
+    "message.delete_confirm": "¿Estás seguro de que deseas eliminar esta imagen? Esta acción también eliminará todos sus recortes.",
     "message.copy_success": "URL copiada al portapapeles",
     "message.copy_error": "Error al copiar URL",
     // Errores
@@ -219,17 +219,70 @@ class ConfigManager {
         // libre por defecto
         lockAspectRatio: false,
         // Aspect ratios permitidos - formato: { label, value, ratio }
-        allowedAspectRatios: [
-          { label: "📐 Libre", value: "", ratio: null },
-          { label: "⬜ 1:1 (Cuadrado)", value: "1", ratio: 1 },
-          { label: "📺 4:3 (Clásico)", value: "4/3", ratio: 4 / 3 },
-          { label: "🖥️ 16:9 (Widescreen)", value: "16/9", ratio: 16 / 9 },
-          { label: "📷 3:2 (Foto)", value: "3/2", ratio: 3 / 2 },
-          { label: "📱 2:3 (Retrato)", value: "2/3", ratio: 2 / 3 },
-          { label: "📲 9:16 (Stories)", value: "9/16", ratio: 9 / 16 }
-        ],
-        showFreeAspectRatio: true
+        showFreeAspectRatio: true,
         // Permitir aspecto libre
+        // Nuevas opciones avanzadas
+        showDimensionInputs: false,
+        // Si true, muestra inputs width x height en lugar de aspect ratio
+        enableEditMode: true,
+        // Si permite editar variantes existentes
+        showDownloadInCropper: false,
+        // Si muestra botón de descarga en el cropper
+        showCropName: false,
+        // Si muestra campo de nombre de recorte editable
+        // Recortes obligatorios - Array de objetos con {label, width, height, required}
+        mandatoryCrops: [],
+        /* Ejemplo de mandatoryCrops:
+        [
+          { label: "Thumbnail", width: 300, height: 300, required: true },
+          { label: "Header", width: 1920, height: 400, required: true },
+          { label: "Mobile", width: 750, height: 1334, required: false }
+        ]
+        */
+        allowCustomCrops: true
+        // Permitir que el usuario añada recortes personalizados además de los obligatorios
+      },
+      // Configuración de galería
+      gallery: {
+        // Configuración de filtros
+        filters: {
+          showNameFilter: true,
+          // Mostrar filtro por nombre de archivo
+          showUploadedByFilter: false,
+          // Mostrar filtro por usuario que subió (oculto por defecto)
+          showDateFilter: true,
+          // Mostrar filtros de rango de fechas
+          enabledFilters: ["name", "date"],
+          // Filtros activos por defecto
+          // Filtros personalizados adicionales
+          customFilters: []
+          /* Ejemplo de customFilters:
+          [
+            {
+              key: "tag",
+              label: "Etiqueta",
+              type: "select", // select | text | date | range
+              options: ["producto", "banner", "avatar"]
+            }
+          ]
+          */
+        },
+        // Configuración de carga
+        loading: {
+          showPlaceholders: true,
+          // Mostrar placeholders mientras carga
+          placeholderCount: 10,
+          // Número de placeholders a mostrar
+          showSpinner: true
+          // Mostrar spinner de carga
+        },
+        // Configuración de paginación
+        pagination: {
+          itemsPerPage: 20,
+          // Elementos por página
+          showPageSize: true
+          // Permitir cambiar el tamaño de página
+        }
       },
       // Validación de archivos
       validation: {
@@ -240,6 +293,9 @@ class ConfigManager {
         maxWidth: null,
         maxHeight: null
       },
+      // Configuración de descarga
+      downloadFormat: "webp",
+      // webp | jpeg | jpg | png - Format for downloaded images
       // Configuración de retorno
       return: {
         format: "url",
@@ -290,9 +346,33 @@ class ConfigManager {
         showCloseButton: true
       },
       // Callbacks por defecto
-      callbacks: {},
+      callbacks: {
+        // Callback cuando se sube una imagen
+        onUpload: null,
+        // (data) => { assetId, url, fileName, mime, width, height, instanceId }
+        // Callback cuando se selecciona una imagen
+        onSelect: null,
+        // (data) => { assetId, url, fileName, mime, width, height, instanceId }
+        // Callback cuando se elimina una imagen
+        onDelete: null,
+        // (assetId, instanceId) => void
+        // NUEVO: Callback cuando se guardan recortes/variantes
+        onCropsSaved: null,
+        // (data) => { crops: Array, assetId, instanceId }
+        // NUEVO: Callback cuando se completa el cropper (modo crop-only)
+        onCropperComplete: null,
+        // (data) => { crops: Array, instanceId }
+        // NUEVO: Callback cuando se cancela el cropper sin guardar
+        onCropperCancelled: null,
+        // (data) => { assetId?, instanceId }
+        // NUEVO: Callback cuando ocurre un error en el cropper
+        onCropperError: null
+        // (error, instanceId) => void
+      },
       // Configuración avanzada
       autoDestroy: false,
+      autoHideOnComplete: false,
+      // Si true, oculta el componente al completar (solo embed mode)
       debug: false,
       apiEndpoint: null,
       // ========== CONFIGURACIÓN DE AUTENTICACIÓN JWT V2 ==========
@@ -453,17 +533,34 @@ class ConfigManager {
         aspectRatio: null,
         lockAspectRatio: false,
         // Aspect ratios permitidos - formato: { label, value, ratio }
-        allowedAspectRatios: [
-          { label: "📐 Libre", value: "", ratio: null },
-          { label: "⬜ 1:1 (Cuadrado)", value: "1", ratio: 1 },
-          { label: "📺 4:3 (Clásico)", value: "4/3", ratio: 4 / 3 },
-          { label: "🖥️ 16:9 (Widescreen)", value: "16/9", ratio: 16 / 9 },
-          { label: "📷 3:2 (Foto)", value: "3/2", ratio: 3 / 2 },
-          { label: "📱 2:3 (Retrato)", value: "2/3", ratio: 2 / 3 },
-          { label: "📲 9:16 (Stories)", value: "9/16", ratio: 9 / 16 }
-        ],
-        showFreeAspectRatio: true
+        showFreeAspectRatio: true,
         // Permitir aspecto libre
+        // Nuevas opciones avanzadas
+        showDimensionInputs: false,
+        enableEditMode: true,
+        showDownloadInCropper: false,
+        showCropName: false,
+        mandatoryCrops: [],
+        allowCustomCrops: true
+      },
+      // Configuración de galería
+      gallery: {
+        filters: {
+          showNameFilter: true,
+          showUploadedByFilter: false,
+          showDateFilter: true,
+          enabledFilters: ["name", "date"],
+          customFilters: []
+        },
+        loading: {
+          showPlaceholders: true,
+          placeholderCount: 10,
+          showSpinner: true
+        },
+        pagination: {
+          itemsPerPage: 20,
+          showPageSize: true
+        }
       },
       // Validación de archivos
       validation: {
@@ -517,9 +614,33 @@ class ConfigManager {
         customProperties: {}
       },
       // Callbacks por defecto
-      callbacks: {},
+      callbacks: {
+        // Callback cuando se sube una imagen
+        onUpload: null,
+        // (data) => { assetId, url, fileName, mime, width, height, instanceId }
+        // Callback cuando se selecciona una imagen
+        onSelect: null,
+        // (data) => { assetId, url, fileName, mime, width, height, instanceId }
+        // Callback cuando se elimina una imagen
+        onDelete: null,
+        // (assetId, instanceId) => void
+        // NUEVO: Callback cuando se guardan recortes/variantes
+        onCropsSaved: null,
+        // (data) => { crops: Array, assetId, instanceId }
+        // NUEVO: Callback cuando se completa el cropper (modo crop-only)
+        onCropperComplete: null,
+        // (data) => { crops: Array, instanceId }
+        // NUEVO: Callback cuando se cancela el cropper sin guardar
+        onCropperCancelled: null,
+        // (data) => { assetId?, instanceId }
+        // NUEVO: Callback cuando ocurre un error en el cropper
+        onCropperError: null
+        // (error, instanceId) => void
+      },
       // Configuración avanzada
       autoDestroy: false,
+      autoHideOnComplete: false,
+      // Si true, oculta el componente al completar (solo embed mode)
       debug: false,
       apiEndpoint: null,
       // ========== CONFIGURACIÓN DE AUTENTICACIÓN JWT V2 ==========
@@ -726,6 +847,128 @@ class ConfigManager {
     this.setJWTAuth(apiKey);
     return this;
   }
+  /**
+   * ========================================
+   * HELPERS PARA CONFIGURACIÓN DE CROPPER
+   * ========================================
+   */
+  /**
+   * Obtener recortes obligatorios configurados
+   */
+  getMandatoryCrops(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.cropper?.mandatoryCrops || [];
+  }
+  /**
+   * Verificar si hay recortes obligatorios configurados
+   */
+  hasMandatoryCrops(config = null) {
+    const crops = this.getMandatoryCrops(config);
+    return crops.length > 0;
+  }
+  /**
+   * Verificar si está habilitado el modo de edición de variantes
+   */
+  isEditModeEnabled(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.cropper?.enableEditMode !== false;
+  }
+  /**
+   * Verificar si se muestran inputs de dimensiones en lugar de aspect ratio
+   */
+  showDimensionInputs(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.cropper?.showDimensionInputs === true;
+  }
+  /**
+   * Verificar si se muestra botón de descarga en el cropper
+   */
+  showDownloadInCropper(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.cropper?.showDownloadInCropper === true;
+  }
+  /**
+   * Verificar si se muestra campo de nombre de recorte
+   */
+  showCropName(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.cropper?.showCropName === true;
+  }
+  /**
+   * Verificar si se permiten recortes personalizados
+   */
+  allowCustomCrops(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.cropper?.allowCustomCrops !== false;
+  }
+  /**
+   * ========================================
+   * HELPERS PARA CONFIGURACIÓN DE GALERÍA
+   * ========================================
+   */
+  /**
+   * Obtener configuración de filtros de galería
+   */
+  getGalleryFilters(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.gallery?.filters || this.defaults.gallery.filters;
+  }
+  /**
+   * Verificar si un filtro específico está habilitado
+   */
+  isGalleryFilterEnabled(filterName, config = null) {
+    const filters = this.getGalleryFilters(config);
+    return filters.enabledFilters?.includes(filterName) || false;
+  }
+  /**
+   * Obtener filtros personalizados de galería
+   */
+  getCustomGalleryFilters(config = null) {
+    const filters = this.getGalleryFilters(config);
+    return filters.customFilters || [];
+  }
+  /**
+   * Obtener configuración de carga de galería
+   */
+  getGalleryLoadingConfig(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.gallery?.loading || this.defaults.gallery.loading;
+  }
+  /**
+   * Verificar si se muestran placeholders en la galería
+   */
+  showGalleryPlaceholders(config = null) {
+    const loading = this.getGalleryLoadingConfig(config);
+    return loading.showPlaceholders !== false;
+  }
+  /**
+   * Obtener número de placeholders a mostrar
+   */
+  getPlaceholderCount(config = null) {
+    const loading = this.getGalleryLoadingConfig(config);
+    return loading.placeholderCount || 10;
+  }
+  /**
+   * Verificar si se muestra spinner de carga en galería
+   */
+  showGallerySpinner(config = null) {
+    const loading = this.getGalleryLoadingConfig(config);
+    return loading.showSpinner !== false;
+  }
+  /**
+   * Obtener configuración de paginación de galería
+   */
+  getGalleryPagination(config = null) {
+    const mergedConfig = config || this.merge();
+    return mergedConfig.gallery?.pagination || this.defaults.gallery.pagination;
+  }
+  /**
+   * Obtener items por página
+   */
+  getItemsPerPage(config = null) {
+    const pagination = this.getGalleryPagination(config);
+    return pagination.itemsPerPage || 20;
+  }
 }
 var client = { exports: {} };
 var reactDomClient_production = {};
@@ -31017,37 +31260,33 @@ function ImageVariantsModal({
       parent_asset_id: image.id,
       variant_info: variant
     };
-    accessibilityManager?.announce(`Variante seleccionada: ${variant.name}`);
+    accessibilityManager?.announce(`Recorte seleccionado: ${variant.name}`);
     onSelect?.(variantAsImage);
     onClose?.();
   };
   const handleCopyVariantUrl = async (variant) => {
     try {
       await navigator.clipboard.writeText(variant.url);
-      accessibilityManager?.announce(`URL de variante ${variant.name} copiada`);
+      accessibilityManager?.announce(`URL de recorte ${variant.name} copiada`);
     } catch (err) {
       console.error("Error copying variant URL:", err);
-      accessibilityManager?.announceError("Error al copiar URL de variante");
+      accessibilityManager?.announceError("Error al copiar URL de recorte");
     }
   };
-  const handleDownloadVariant = (variant) => {
-    accessibilityManager?.announce(`Descargando ${image.filename}`);
-    fetch(image.url || image.path, { mode: "cors" }).then((resp) => resp.blob()).then((blob) => {
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${variant.name}.${variant.format}`;
-      document.body.appendChild(a);
-      a.click();
-      setTimeout(() => {
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
-      }, 100);
-    });
+  const handleDownloadVariant = async (variant) => {
+    const { downloadImage: downloadImage2 } = await Promise.resolve().then(() => downloadImage$1);
+    await downloadImage2(
+      variant.url,
+      variant.name || "limbo-variant",
+      {
+        originalFormat: variant.format || variant.output_format,
+        accessibilityManager
+      }
+    );
   };
   const handleViewVariant = (variant) => {
     accessibilityManager?.announce(
-      `Abriendo variante ${variant.name} en nueva pestaña`
+      `Abriendo recorte ${variant.name} en nueva pestaña`
     );
     window.open(variant.url, "_blank");
   };
@@ -31066,26 +31305,21 @@ function ImageVariantsModal({
       accessibilityManager?.announceError("Error al copiar URL");
     }
   };
-  const handleDownloadOriginal = () => {
-    accessibilityManager?.announce(`Descargando ${image.filename}`);
-    fetch(image.url || image.path, { mode: "cors" }).then((resp) => resp.blob()).then((blob) => {
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      const filename = image.filename.split(".")[0];
-      a.href = url;
-      a.download = `${filename || "image"}.webp`;
-      document.body.appendChild(a);
-      a.click();
-      setTimeout(() => {
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
-      }, 100);
-    });
+  const handleDownloadOriginal = async () => {
+    const { downloadImage: downloadImage2 } = await Promise.resolve().then(() => downloadImage$1);
+    await downloadImage2(
+      image.url || image.path,
+      image.filename || "limbo-image",
+      {
+        originalFormat: image.format,
+        accessibilityManager
+      }
+    );
   };
   const handleDeleteOriginal = async () => {
     if (!onDelete) return;
     const confirmed = window.confirm(
-      `¿Estás seguro de que deseas eliminar "${image.filename}"? Esta acción también eliminará todas sus variantes.`
+      `¿Estás seguro de que deseas eliminar "${image.filename}"? Esta acción también eliminará todos sus recortes.`
     );
     if (confirmed) {
       accessibilityManager?.announce(`Eliminando imagen ${image.filename}`);
@@ -31103,27 +31337,27 @@ function ImageVariantsModal({
   };
   const handleDeleteVariant = async (variant) => {
     const confirmed = window.confirm(
-      `¿Estás seguro de que deseas eliminar la variante "${variant.name || variant.filename}"?`
+      `¿Estás seguro de que deseas eliminar el recorte "${variant.name || variant.filename}"?`
     );
     if (confirmed) {
       accessibilityManager?.announce(
-        `Eliminando variante ${variant.name || variant.filename}`
+        `Eliminando recorte ${variant.name || variant.filename}`
       );
       const result = await removeVariant(image.id, variant.id);
       if (result.success) {
-        setDeleteMessage("Variante eliminada correctamente");
+        setDeleteMessage("Recorte eliminado correctamente");
         setDeleteMessageType("success");
-        accessibilityManager?.announce(`Variante eliminada correctamente`);
+        accessibilityManager?.announce(`Recorte eliminado correctamente`);
         onVariantDeleted?.();
         setTimeout(() => {
           setDeleteMessage(null);
           setDeleteMessageType(null);
         }, 3e3);
       } else {
-        setDeleteMessage(`Error al eliminar variante: ${result.error}`);
+        setDeleteMessage(`Error al eliminar recorte: ${result.error}`);
         setDeleteMessageType("error");
         accessibilityManager?.announceError(
-          `Error al eliminar variante: ${result.error}`
+          `Error al eliminar recorte: ${result.error}`
         );
         setTimeout(() => {
           setDeleteMessage(null);
@@ -31148,7 +31382,7 @@ function ImageVariantsModal({
           children: [
             /* @__PURE__ */ jsxs("div", { className: "limbo-modal-header", children: [
               /* @__PURE__ */ jsxs("h2", { id: "variants-modal-title", children: [
-                "Variantes de ",
+                "Recortes de ",
                 image?.filename
               ] }),
               /* @__PURE__ */ jsx(
@@ -31156,7 +31390,7 @@ function ImageVariantsModal({
                 {
                   className: "limbo-modal-close",
                   onClick: onClose,
-                  "aria-label": "Cerrar modal de variantes",
+                  "aria-label": "Cerrar modal de recortes",
                   children: "✕"
                 }
               )
@@ -31179,10 +31413,10 @@ function ImageVariantsModal({
             ),
             /* @__PURE__ */ jsx("div", { className: "limbo-modal-body", children: loading ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-loading", children: [
               /* @__PURE__ */ jsx("div", { className: "limbo-loader" }),
-              /* @__PURE__ */ jsx("p", { children: "Cargando variantes..." })
+              /* @__PURE__ */ jsx("p", { children: "Cargando recortes..." })
             ] }) : error ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-error", children: [
               /* @__PURE__ */ jsxs("p", { children: [
-                "Error al cargar variantes: ",
+                "Error al cargar recortes: ",
                 error
               ] }),
               /* @__PURE__ */ jsx(
@@ -31194,8 +31428,8 @@ function ImageVariantsModal({
                 }
               )
             ] }) : variants.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-empty", children: [
-              /* @__PURE__ */ jsx("p", { children: "Esta imagen no tiene variantes aún." }),
-              /* @__PURE__ */ jsx("small", { children: "Las variantes aparecerán aquí después de hacer recortes o redimensionados." })
+              /* @__PURE__ */ jsx("p", { children: "Esta imagen no tiene recortes aún." }),
+              /* @__PURE__ */ jsx("small", { children: "Los recortes aparecerán aquí después de hacer recortes o redimensionados." })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { className: "limbo-variant-section", children: [
                 /* @__PURE__ */ jsx("h3", { children: "Imagen original" }),
@@ -31289,7 +31523,7 @@ function ImageVariantsModal({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "limbo-variant-section", children: [
                 /* @__PURE__ */ jsxs("h3", { children: [
-                  "Variantes (",
+                  "Recortes (",
                   variants.length,
                   ")"
                 ] }),
@@ -31428,7 +31662,7 @@ function ImageCard({
     delete: true,
     crop: true,
     variants: true
-    // Nueva acción para ver variantes
+    // Nueva acción para ver recortes
   }
 }) {
   const [copied, setCopied] = useState(false);
@@ -31483,23 +31717,18 @@ function ImageCard({
       );
     }
   };
-  const handleDownload = (e) => {
+  const handleDownload = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    accessibilityManager?.announce(`Descargando ${image.filename}`);
-    fetch(image.url || image.path, { mode: "cors" }).then((resp) => resp.blob()).then((blob) => {
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      const filename = image.filename.split(".")[0];
-      a.href = url;
-      a.download = `${filename || "image"}.webp`;
-      document.body.appendChild(a);
-      a.click();
-      setTimeout(() => {
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
-      }, 100);
-    });
+    const { downloadImage: downloadImage2 } = await Promise.resolve().then(() => downloadImage$1);
+    await downloadImage2(
+      image.url || image.path,
+      image.filename || "limbo-image",
+      {
+        originalFormat: image.format,
+        accessibilityManager
+      }
+    );
   };
   const handleCrop = (e) => {
     e.stopPropagation();
@@ -31516,7 +31745,7 @@ function ImageCard({
   }, [image.variants_count]);
   const handleShowVariants = (e) => {
     e.stopPropagation();
-    accessibilityManager?.announce(`Mostrando variantes de ${image.filename}`);
+    accessibilityManager?.announce(`Mostrando recortes de ${image.filename}`);
     setShowVariants(true);
   };
   const handleSelect = (e) => {
@@ -31604,7 +31833,7 @@ function ImageCard({
                   "button",
                   {
                     type: "button",
-                    title: `Ver ${variantsCount} variante${variantsCount !== 1 ? "s" : ""}`,
+                    title: `Ver ${variantsCount} recorte${variantsCount !== 1 ? "s" : ""}`,
                     className: `btn btn-variants border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
                     onClick: handleShowVariants,
                     tabIndex: -1,
@@ -31775,7 +32004,7 @@ function ImageCard({
             {
               src: image.url || image.path,
               loading: "eager",
-              alt: image.filename,
+              alt: image.filename.split(".")[0] ?? image.filename,
               className: "w-full object-cover rounded aspect-square",
               sizes: `height: ${thumbnailSize * 6}px,width: ${thumbnailSize * 6}px`,
               draggable: false,
@@ -31807,7 +32036,7 @@ function ImageCard({
                   fontWeight: "500"
                 }
               },
-              children: image.filename
+              children: image.filename.split(".")[0] ?? image.filename
             }
           )
         ]
@@ -31834,6 +32063,38 @@ function ImageCard({
     )
   ] });
 }
+function ImageCardSkeleton() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "limbo-image-card animate-pulse",
+      role: "status",
+      "aria-label": "Cargando imagen...",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-full aspect-square bg-neutral-gray-200 rounded-md flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-12 h-12 text-neutral-gray-300",
+            fill: "currentColor",
+            viewBox: "0 0 20 20",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "limbo-image-card-name opacity-100 position-relative bottom-0 p-2", children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-neutral-gray-200 rounded w-3/4" }) }),
+        /* @__PURE__ */ jsx("span", { className: "limbo-sr-only", children: "Cargando imagen..." })
+      ]
+    }
+  );
+}
 function Loader({ text = "Cargando..." }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -31879,50 +32140,7 @@ function Loader({ text = "Cargando..." }) {
     }
   );
 }
-const cache$5 = /* @__PURE__ */ new Map();
-const CACHE_TTL$5 = 5 * 60 * 1e3;
-function useIsAllowedAll() {
-  const [allowed, setAllowed] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    const cacheKey = "auth-status";
-    const cached = cache$5.get(cacheKey);
-    const now = Date.now();
-    if (cached && now - cached.timestamp < CACHE_TTL$5) {
-      setAllowed(cached.data);
-      setLoading(false);
-      return;
-    }
-    let isMounted = true;
-    const checkAuthStatus = async () => {
-      try {
-        const isAuthenticated = true;
-        if (!isMounted) return;
-        cache$5.set(cacheKey, { data: isAuthenticated, timestamp: Date.now() });
-        setAllowed(isAuthenticated);
-      } catch (err) {
-        if (isMounted) {
-          setError(err.message);
-          setAllowed(false);
-        }
-      } finally {
-        if (isMounted) setLoading(false);
-      }
-    };
-    checkAuthStatus();
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-  const invalidateCache = () => {
-    cache$5.delete("auth-status");
-  };
-  return { allowed, loading, error, invalidateCache };
-}
 function Gallery({
-  apiKey,
-  prod,
   onSelect,
   onCrop,
   // Nueva prop separada para cropping
@@ -31931,6 +32149,24 @@ function Gallery({
   images,
   loading,
   error,
+  filters = {
+    name: "",
+    dateFrom: "",
+    dateTo: "",
+    uploadedBy: ""
+  },
+  onFiltersChange,
+  filterConfig = {
+    showNameFilter: true,
+    showUploadedByFilter: false,
+    // Oculto por defecto según especificaciones
+    showDateFilter: true
+  },
+  loadingConfig = {
+    showPlaceholders: true,
+    placeholderCount: 10,
+    showSpinner: true
+  },
   allowedActions = {
     select: true,
     download: true,
@@ -31938,18 +32174,13 @@ function Gallery({
     delete: true,
     crop: true,
     variants: true
-    // Nueva acción para ver variantes
+    // Nueva acción para ver recortes
   }
 }) {
-  const [filters, setFilters] = useState({
-    search: "",
-    dateFrom: "",
-    dateTo: "",
-    originPortal: "",
-    uploadedBy: ""
-  });
+  const showNameFilter = filterConfig.showNameFilter !== false;
+  const showUploadedByFilter = filterConfig.showUploadedByFilter === true;
+  const showDateFilter = filterConfig.showDateFilter !== false;
   const galleryRef = useRef(null);
-  const showOriginPortal = useIsAllowedAll();
   const accessibilityManager = window.limboCore?.accessibilityManager;
   useEffect(() => {
     if (galleryRef.current && window.limboCore?.keyboardManager) {
@@ -31976,7 +32207,9 @@ function Gallery({
   }, [loading, error, images.length, accessibilityManager]);
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setFilters((prev) => ({ ...prev, [name]: value }));
+    if (onFiltersChange) {
+      onFiltersChange({ ...filters, [name]: value });
+    }
   };
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsx("div", { className: "limbo-card mb-6 p-4 bg-brand-blue-050 shadow-md", children: /* @__PURE__ */ jsxs(
@@ -31986,16 +32219,16 @@ function Gallery({
         onSubmit: (e) => e.preventDefault(),
         "aria-label": "Filtrar imágenes",
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:min-w-[180px] sm:flex-1", children: [
-            /* @__PURE__ */ jsx("label", { htmlFor: "search", className: "form-label mb-1", children: "Nombre" }),
+          showNameFilter && /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:min-w-[180px] sm:flex-1", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "name", className: "form-label mb-1", children: "Nombre" }),
             /* @__PURE__ */ jsx(
               "input",
               {
                 type: "text",
-                name: "search",
-                id: "search",
+                name: "name",
+                id: "name",
                 placeholder: "Buscar por nombre...",
-                value: filters.search,
+                value: filters.name,
                 onChange: handleChange,
                 className: "form-control",
                 autoComplete: "off"
@@ -32003,50 +32236,37 @@ function Gallery({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row flex-wrap gap-2 justify-between items-start sm:items-end w-full sm:w-auto", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "dateFrom", className: "form-label mb-1", children: "Desde" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "date",
-                  name: "dateFrom",
-                  id: "dateFrom",
-                  value: filters.dateFrom,
-                  onChange: handleChange,
-                  className: "form-control"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "dateTo", className: "form-label mb-1", children: "Hasta" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "date",
-                  name: "dateTo",
-                  id: "dateTo",
-                  value: filters.dateTo,
-                  onChange: handleChange,
-                  className: "form-control"
-                }
-              )
-            ] }),
-            showOriginPortal && /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "originPortal", className: "form-label mb-1", children: "Portal de origen" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  name: "originPortal",
-                  id: "originPortal",
-                  placeholder: "Portal de origen",
-                  value: filters.originPortal,
-                  onChange: handleChange,
-                  className: "form-control"
-                }
-              )
+            showDateFilter && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "dateFrom", className: "form-label mb-1", children: "Desde" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "date",
+                    name: "dateFrom",
+                    id: "dateFrom",
+                    value: filters.dateFrom,
+                    onChange: handleChange,
+                    className: "form-control"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "dateTo", className: "form-label mb-1", children: "Hasta" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "date",
+                    name: "dateTo",
+                    id: "dateTo",
+                    value: filters.dateTo,
+                    onChange: handleChange,
+                    className: "form-control"
+                  }
+                )
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
+            showUploadedByFilter && /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
               /* @__PURE__ */ jsx("label", { htmlFor: "uploadedBy", className: "form-label mb-1", children: "Subido por" }),
               /* @__PURE__ */ jsx(
                 "input",
@@ -32065,7 +32285,27 @@ function Gallery({
         ]
       }
     ) }),
-    loading ? /* @__PURE__ */ jsx(Loader, { text: "Cargando imágenes..." }) : error ? /* @__PURE__ */ jsx("div", { className: "alert alert-danger text-center", children: error }) : /* @__PURE__ */ jsx(
+    loading ? loadingConfig.showPlaceholders ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: galleryRef,
+        className: "limbo-gallery mt-4",
+        "data-limbo-responsive": true,
+        role: "grid",
+        "aria-label": "Cargando imágenes de la galería",
+        "aria-busy": "true",
+        children: Array.from({ length: loadingConfig.placeholderCount }).map((_, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "gridcell",
+            "aria-posinset": index + 1,
+            "aria-setsize": loadingConfig.placeholderCount,
+            children: /* @__PURE__ */ jsx(ImageCardSkeleton, {})
+          },
+          `skeleton-${index}`
+        ))
+      }
+    ) : loadingConfig.showSpinner ? /* @__PURE__ */ jsx(Loader, { text: "Cargando imágenes..." }) : null : error ? /* @__PURE__ */ jsx("div", { className: "alert alert-danger text-center", children: error }) : /* @__PURE__ */ jsx(
       "div",
       {
         ref: galleryRef,
@@ -36597,6 +36837,21 @@ class CropperManager {
         return false;
       }
     },
+    // Establecer posición y tamaño directamente
+    set: (x, y, width, height) => {
+      if (!this.selectionElement) return false;
+      try {
+        this.selectionElement.x = x;
+        this.selectionElement.y = y;
+        this.selectionElement.width = width;
+        this.selectionElement.height = height;
+        this.selectionElement.$render();
+        return true;
+      } catch (error) {
+        console.warn("Error setting selection:", error);
+        return false;
+      }
+    },
     // Exportar a canvas
     toCanvas: async (options = {}) => {
       if (!this.selectionElement) return null;
@@ -36998,11 +37253,136 @@ const useCropper = (image, options = {}) => {
     manager: managerRef.current
   };
 };
+async function downloadImage(imageSource, filename, options = {}) {
+  const {
+    format = null,
+    originalFormat = "webp",
+    onSuccess = null,
+    onError = null,
+    accessibilityManager = null
+  } = options;
+  try {
+    const globalConfig2 = window.limboCore?.config?.getGlobal();
+    const downloadFormat = format || globalConfig2?.downloadFormat || originalFormat || "webp";
+    const cleanFilename = filename.split(".")[0];
+    const finalFilename = `${cleanFilename}.${downloadFormat}`;
+    if (accessibilityManager) {
+      accessibilityManager.announce(`Descargando ${finalFilename}`);
+    }
+    if (imageSource.startsWith("data:image/")) {
+      downloadFromBase64(imageSource, finalFilename);
+      if (onSuccess) {
+        onSuccess(finalFilename);
+      }
+      if (accessibilityManager) {
+        accessibilityManager.announce(`${finalFilename} descargado correctamente`);
+      }
+      return true;
+    }
+    const response = await fetch(imageSource, { mode: "cors" });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const blob = await response.blob();
+    let finalBlob = blob;
+    const sourceMimeType = blob.type;
+    const targetMimeType = `image/${downloadFormat === "jpg" ? "jpeg" : downloadFormat}`;
+    if (sourceMimeType !== targetMimeType && shouldConvertFormat(downloadFormat)) {
+      finalBlob = await convertBlobFormat(blob, downloadFormat);
+    }
+    const blobUrl = window.URL.createObjectURL(finalBlob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = finalFilename;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(() => {
+      window.URL.revokeObjectURL(blobUrl);
+      document.body.removeChild(link);
+    }, 100);
+    if (onSuccess) {
+      onSuccess(finalFilename);
+    }
+    if (accessibilityManager) {
+      accessibilityManager.announce(`${finalFilename} descargado correctamente`);
+    }
+    return true;
+  } catch (error) {
+    console.error("Error downloading image:", error);
+    if (onError) {
+      onError(error);
+    }
+    if (accessibilityManager) {
+      accessibilityManager.announce(`Error al descargar la imagen: ${error.message}`);
+    }
+    return false;
+  }
+}
+function downloadFromBase64(dataUri, filename) {
+  const link = document.createElement("a");
+  link.href = dataUri;
+  link.download = filename;
+  link.style.display = "none";
+  document.body.appendChild(link);
+  link.click();
+  setTimeout(() => {
+    document.body.removeChild(link);
+  }, 100);
+}
+function shouldConvertFormat(format) {
+  const supportedConversions = ["webp", "jpeg", "jpg", "png"];
+  return supportedConversions.includes(format.toLowerCase());
+}
+async function convertBlobFormat(blob, targetFormat) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const objectUrl = URL.createObjectURL(blob);
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0);
+        const mimeType = `image/${targetFormat === "jpg" ? "jpeg" : targetFormat}`;
+        const quality = targetFormat === "png" ? void 0 : 0.92;
+        canvas.toBlob(
+          (convertedBlob) => {
+            URL.revokeObjectURL(objectUrl);
+            if (convertedBlob) {
+              resolve(convertedBlob);
+            } else {
+              resolve(blob);
+            }
+          },
+          mimeType,
+          quality
+        );
+      } catch (error) {
+        URL.revokeObjectURL(objectUrl);
+        resolve(blob);
+      }
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      resolve(blob);
+    };
+    img.src = objectUrl;
+  });
+}
+const downloadImage$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: downloadImage,
+  downloadImage
+}, Symbol.toStringTag, { value: "Module" }));
 function CropperView({
   image,
   onSave,
   onCancel,
   onDelete,
+  onError = null,
+  // Callback para manejar errores
   deleting = false,
   onVariantCreated = null
   // Callback cuando se crea una variante
@@ -37010,7 +37390,6 @@ function CropperView({
   const [showPreview, setShowPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState(null);
   const [previewLoading, setPreviewLoading] = useState(false);
-  const [aspectRatio, setAspectRatio] = useState("");
   const [showGrid, setShowGrid] = useState(true);
   const [shade, setShade] = useState(true);
   const [flipStates, setFlipStates] = useState({
@@ -37018,27 +37397,88 @@ function CropperView({
     vertical: false
   });
   const [showTips, setShowTips] = useState(false);
+  const [showVisualOptions, setShowVisualOptions] = useState(true);
+  const [showSelectorOptions, setShowSelectorOptions] = useState(true);
+  const [showImageOptions, setShowImageOptions] = useState(true);
   const [zoomInfo, setZoomInfo] = useState({ current: 1, percentage: 100 });
-  const accessibilityManager = window.limboCore?.accessibilityManager;
-  const allowedAspectRatios = useMemo(() => {
+  const [editableFilename] = useState(() => {
+    const [name] = image.filename.split(".");
+    return name;
+  });
+  const cropConfig = useMemo(() => {
     const config = window.limboCore?.config?.getGlobal() || {};
-    return config.cropper?.allowedAspectRatios || [
-      { label: "📐 Libre", value: "", ratio: null },
-      { label: "⬜ 1:1 (Cuadrado)", value: "1", ratio: 1 },
-      { label: "📺 4:3 (Clásico)", value: "4/3", ratio: 4 / 3 },
-      { label: "🖥️ 16:9 (Widescreen)", value: "16/9", ratio: 16 / 9 },
-      { label: "📷 3:2 (Foto)", value: "3/2", ratio: 3 / 2 },
-      { label: "📱 2:3 (Retrato)", value: "2/3", ratio: 2 / 3 },
-      { label: "📲 9:16 (Stories)", value: "9/16", ratio: 9 / 16 }
-    ];
+    const mandatoryCrops = config.cropper?.mandatoryCrops || [];
+    const allowCustomCrops = config.cropper?.allowCustomCrops !== false;
+    const showDimensionInputs = config.cropper?.showDimensionInputs === true;
+    return {
+      mandatoryCrops,
+      allowCustomCrops,
+      showDimensionInputs
+    };
   }, []);
+  const [crops, setCrops] = useState(() => {
+    if (cropConfig.mandatoryCrops.length > 0) {
+      return cropConfig.mandatoryCrops.map((crop, index) => ({
+        id: `crop-${index}`,
+        label: crop.label,
+        width: crop.width,
+        height: crop.height,
+        required: crop.required !== false,
+        // Por defecto son obligatorios
+        isCustom: false,
+        confirmed: false,
+        // Estado del crop (se guarda al cambiar de crop)
+        savedState: null
+        // {cropData, transforms: {zoom, rotation, flip}}
+      }));
+    } else {
+      return [
+        {
+          id: "crop-default-0",
+          label: editableFilename,
+          width: image.width || 1920,
+          height: image.height || 1080,
+          required: false,
+          isCustom: true,
+          confirmed: false,
+          savedState: null
+        }
+      ];
+    }
+  });
+  const [activeCropIndex, setActiveCropIndex] = useState(0);
+  const activeCrop = crops[activeCropIndex];
+  const [shouldCenter, setShouldCenter] = useState(false);
+  const calculatedAspectRatio = useMemo(() => {
+    if (!activeCrop || !activeCrop.width || !activeCrop.height) return "";
+    return activeCrop.width / activeCrop.height;
+  }, [activeCrop]);
+  const minCropSizes = useMemo(() => {
+    const MIN_SIZE = 50;
+    if (!calculatedAspectRatio || calculatedAspectRatio === "") {
+      return { minWidth: MIN_SIZE, minHeight: MIN_SIZE };
+    }
+    if (calculatedAspectRatio >= 1) {
+      const minWidth = MIN_SIZE;
+      const minHeight = MIN_SIZE / calculatedAspectRatio;
+      return { minWidth, minHeight };
+    } else {
+      const minHeight = MIN_SIZE;
+      const minWidth = MIN_SIZE * calculatedAspectRatio;
+      return { minWidth, minHeight };
+    }
+  }, [calculatedAspectRatio]);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [selectedCropsForAction, setSelectedCropsForAction] = useState([]);
+  const [pendingAction, setPendingAction] = useState(null);
+  const accessibilityManager = window.limboCore?.accessibilityManager;
   const {
     createCropVariant,
     loading: creatingVariant,
     error: variantError
   } = useCreateVariant();
   const cropper = useCropper(image, {
-    aspectRatio,
+    aspectRatio: calculatedAspectRatio || null,
     showGrid,
     shade,
     initialCoverage: 0.5,
@@ -37060,21 +37500,24 @@ function CropperView({
   const toggleGrid = useCallback(() => setShowGrid((v) => !v), []);
   const toggleShade = useCallback(() => setShade((v) => !v), []);
   const toggleTips = useCallback(() => setShowTips((v) => !v), []);
+  const toggleVisualOptions = useCallback(
+    () => setShowVisualOptions((v) => !v),
+    []
+  );
+  const toggleSelectorOptions = useCallback(
+    () => setShowSelectorOptions((v) => !v),
+    []
+  );
+  const toggleImageOptions = useCallback(
+    () => setShowImageOptions((v) => !v),
+    []
+  );
   const centerImage = useCallback(() => transform.center(), [transform]);
   const centerSelection = useCallback(() => selection.center(), [selection]);
   const resetSelection = useCallback(() => selection.reset(), [selection]);
   const move = useCallback((x, y) => transform.move(x, y), [transform]);
   const zoom = useCallback((factor) => transform.zoom(factor), [transform]);
   const rotate = useCallback((deg) => transform.rotate(deg), [transform]);
-  const resetAll = useCallback(() => {
-    utils.resetAll();
-    setAspectRatio("");
-    setShowGrid(true);
-    setShade(true);
-    setFlipStates({ horizontal: false, vertical: false });
-    setShowPreview(false);
-    setPreviewUrl(null);
-  }, [utils]);
   const setSelectionCoverage = useCallback(
     (coverage) => {
       selection.setCoverage(coverage);
@@ -37096,16 +37539,188 @@ function CropperView({
       return { ...prev, vertical: newVertical };
     });
   }, [transform]);
-  const handleAspectRatio = useCallback(
-    (ratioValue) => {
-      setAspectRatio(ratioValue);
-      const ratioConfig = allowedAspectRatios.find(
-        (r) => r.value === ratioValue
+  const saveCurrentCropState = useCallback(() => {
+    if (!cropper.manager || !state.isReady) return;
+    try {
+      const currentCropData = cropData ? { ...cropData } : null;
+      const currentZoom = cropper.manager.transform.getZoom();
+      const currentRotation = cropper.manager.transform.getRotation();
+      const savedState = {
+        cropData: currentCropData,
+        transforms: {
+          zoom: currentZoom,
+          rotation: currentRotation,
+          flipHorizontal: flipStates.horizontal,
+          flipVertical: flipStates.vertical
+        }
+      };
+      setCrops(
+        (prevCrops) => prevCrops.map(
+          (crop, index) => index === activeCropIndex ? { ...crop, savedState } : crop
+        )
       );
-      const numericRatio = ratioConfig ? ratioConfig.ratio : ratioValue;
-      selection.setAspectRatio(numericRatio);
+      return savedState;
+    } catch (error) {
+      console.warn("Error saving crop state:", error);
+      return null;
+    }
+  }, [cropper.manager, state.isReady, cropData, flipStates, activeCropIndex]);
+  const restoreCropState = useCallback(
+    (cropState) => {
+      if (!cropper.manager || !state.isReady || !cropState) return;
+      try {
+        const { cropData: savedCropData, transforms } = cropState;
+        if (transforms) {
+          utils.resetAll();
+          if (transforms.zoom && transforms.zoom !== 1) {
+            cropper.manager.transform.setZoom(transforms.zoom);
+          }
+          if (transforms.rotation && transforms.rotation !== 0) {
+            cropper.manager.transform.setRotation(transforms.rotation);
+          }
+          if (transforms.flipHorizontal) {
+            cropper.manager.transform.flipHorizontal();
+          }
+          if (transforms.flipVertical) {
+            cropper.manager.transform.flipVertical();
+          }
+          setFlipStates({
+            horizontal: transforms.flipHorizontal || false,
+            vertical: transforms.flipVertical || false
+          });
+        }
+        if (savedCropData) {
+          const { x, y, width, height } = savedCropData;
+          selection.set(x, y, width, height);
+        }
+      } catch (error) {
+        console.warn("Error restoring crop state:", error);
+      }
+    },
+    [cropper.manager, state.isReady, selection, utils]
+  );
+  const validateCropNames = useCallback(() => {
+    for (let i = 0; i < crops.length; i++) {
+      const crop = crops[i];
+      if (!crop.label || crop.label.trim() === "") {
+        return i;
+      }
+    }
+    return -1;
+  }, [crops]);
+  const switchToCrop = useCallback(
+    (newIndex) => {
+      if (newIndex === activeCropIndex) return;
+      saveCurrentCropState();
+      setActiveCropIndex(newIndex);
+      setShouldCenter(true);
+    },
+    [activeCropIndex, saveCurrentCropState]
+  );
+  const addCustomCrop = useCallback(() => {
+    if (!cropConfig.allowCustomCrops) {
+      alert("No se pueden añadir recortes personalizados en este modo.");
+      return;
+    }
+    saveCurrentCropState();
+    const newCropId = `crop-custom-${Date.now()}`;
+    const newCrop = {
+      id: newCropId,
+      label: `Recorte ${crops.length + 1}`,
+      width: image.width || 1920,
+      height: image.height || 1080,
+      required: false,
+      isCustom: true,
+      confirmed: false,
+      savedState: null
+    };
+    setCrops((prevCrops) => [...prevCrops, newCrop]);
+    setActiveCropIndex(crops.length);
+    accessibilityManager?.announce(
+      `Nuevo recorte personalizado añadido: ${newCrop.label}`
+    );
+  }, [cropConfig.allowCustomCrops, saveCurrentCropState, crops.length, image.width, image.height, accessibilityManager]);
+  const updateCropDimensions = useCallback(
+    (field, value) => {
+      const numValue = parseInt(value, 10);
+      if (value === "" || isNaN(numValue)) {
+        return;
+      }
+      setCrops(
+        (prevCrops) => prevCrops.map(
+          (crop, index) => index === activeCropIndex ? { ...crop, [field]: numValue } : crop
+        )
+      );
+    },
+    [activeCropIndex]
+  );
+  const validateAndApplyCropDimensions = useCallback(
+    (field) => {
+      const currentValue = activeCrop[field];
+      let minValue = 100;
+      if (canvasRef.current && imageInfo) {
+        const canvasRect = canvasRef.current.getBoundingClientRect();
+        const canvasMinSize = Math.min(canvasRect.width, canvasRect.height);
+        minValue = Math.max(100, Math.round(canvasMinSize * 0.05));
+      }
+      const clampedValue = Math.max(minValue, Math.min(5e3, currentValue));
+      if (clampedValue !== currentValue) {
+        setCrops(
+          (prevCrops) => prevCrops.map(
+            (crop, index) => index === activeCropIndex ? { ...crop, [field]: clampedValue } : crop
+          )
+        );
+      }
+      const updatedCrop = { ...activeCrop, [field]: clampedValue };
+      const newRatio = updatedCrop.width / updatedCrop.height;
+      const currentSelection = selection.getData?.();
+      selection.setAspectRatio(newRatio);
+      if (currentSelection && currentSelection.x !== void 0) {
+        setTimeout(() => {
+          selection.set?.(
+            currentSelection.x,
+            currentSelection.y,
+            currentSelection.width,
+            currentSelection.height
+          );
+        }, 50);
+      }
+    },
+    [activeCropIndex, activeCrop, selection, canvasRef, imageInfo]
+  );
+  const updateCropLabel = useCallback(
+    (newLabel) => {
+      setCrops(
+        (prevCrops) => prevCrops.map(
+          (crop, index) => index === activeCropIndex ? { ...crop, label: newLabel } : crop
+        )
+      );
+    },
+    [activeCropIndex]
+  );
+  const removeCustomCrop = useCallback(
+    (cropIndex) => {
+      const cropToRemove = crops[cropIndex];
+      if (cropToRemove.required) {
+        alert("No se puede eliminar un recorte obligatorio.");
+        return;
+      }
+      if (crops.length === 1) {
+        alert("Debe haber al menos un recorte.");
+        return;
+      }
+      setCrops(
+        (prevCrops) => prevCrops.filter((_, index) => index !== cropIndex)
+      );
+      if (cropIndex === activeCropIndex) {
+        const newIndex = Math.max(0, cropIndex - 1);
+        setActiveCropIndex(newIndex);
+      } else if (cropIndex < activeCropIndex) {
+        setActiveCropIndex((prev) => prev - 1);
+      }
+      accessibilityManager?.announce(`Recorte ${cropToRemove.label} eliminado`);
     },
-    [selection, allowedAspectRatios]
+    [crops, activeCropIndex, accessibilityManager]
   );
   const generatePreview = useCallback(async () => {
     if (!canExport) return null;
@@ -37116,12 +37731,15 @@ function CropperView({
         imageSmoothingEnabled: true,
         imageSmoothingQuality: "high"
       });
-      return canvas ? canvas.toDataURL("image/jpeg", 0.9) : null;
+      return canvas ? canvas.toDataURL(
+        `image/${globalThis.downloadFormat || image.mime_type.split("/")[1] || "webp"}`,
+        0.9
+      ) : null;
     } catch (error) {
       console.warn("Error generating preview:", error);
       return null;
     }
-  }, [canExport, selection]);
+  }, [canExport, image.mime_type, selection]);
   const preview = useCallback(async () => {
     if (showPreview) {
       setShowPreview(false);
@@ -37151,7 +37769,7 @@ function CropperView({
       setPreviewLoading(false);
     }
   }, [canExport, generatePreview, showPreview]);
-  const saveCrop = useCallback(async () => {
+  const performSaveCrop = useCallback(async () => {
     if (!canExport) {
       const errorMsg = "No se puede exportar el recorte por restricciones de CORS en la imagen original.";
       accessibilityManager?.announceError(errorMsg);
@@ -37164,7 +37782,7 @@ function CropperView({
       alert(errorMsg);
       return;
     }
-    accessibilityManager?.announce("Creando variante recortada de la imagen");
+    accessibilityManager?.announce("Creando recorte de la imagen");
     try {
       if (!cropData || !effectiveImageInfo) {
         console.error("❌ Datos faltantes:", { cropData, effectiveImageInfo });
@@ -37192,60 +37810,181 @@ function CropperView({
         width: width / naturalWidth,
         height: height / naturalHeight
       };
-      const cropAspectRatio = width / height;
-      let variantWidth, variantHeight;
-      const maxDimension = 1200;
-      if (cropAspectRatio > 1) {
-        variantWidth = Math.min(width, maxDimension);
-        variantHeight = Math.round(variantWidth / cropAspectRatio);
-      } else {
-        variantHeight = Math.min(height, maxDimension);
-        variantWidth = Math.round(variantHeight * cropAspectRatio);
-      }
+      const variantWidth = Math.min(activeCrop.width, 5e3);
+      const variantHeight = Math.min(activeCrop.height, 5e3);
       const ts = Date.now();
-      const [name] = image.filename.split(".");
-      const variantName = `${name}_crop_${ts}`;
+      const variantName = `${editableFilename}_${activeCrop.label || "crop"}_${ts}`;
       const result = await createCropVariant(image.id, cropParams, {
         name: variantName,
         width: variantWidth,
         height: variantHeight,
-        format: "webp",
+        format: globalThis.downloadFormat || "webp",
         quality: 90
       });
       if (result) {
-        accessibilityManager?.announceSuccess(
-          `Variante recortada creada: ${variantName}`
-        );
+        accessibilityManager?.announceSuccess(`Recorte creado: ${variantName}`);
         onVariantCreated?.(image.id, result);
         onSave(result);
       }
     } catch (error) {
       console.warn("Error creating crop variant:", error);
-      const errorMsg = "No se pudo crear la variante recortada. Inténtalo de nuevo.";
+      const errorMsg = "No se pudo crear el recorte. Inténtalo de nuevo.";
       accessibilityManager?.announceError(errorMsg);
       alert(errorMsg);
+      onError?.(error);
     }
   }, [
     canExport,
+    state.isReady,
+    accessibilityManager,
     cropData,
     effectiveImageInfo,
-    image.filename,
-    image.id,
+    editableFilename,
+    activeCrop.label,
+    activeCrop.width,
+    activeCrop.height,
     createCropVariant,
-    onSave,
+    image.id,
     onVariantCreated,
+    onSave,
+    onError
+  ]);
+  const saveCrop = useCallback(async () => {
+    const invalidCropIndex = validateCropNames();
+    if (invalidCropIndex !== -1) {
+      const cropWithoutName = crops[invalidCropIndex];
+      alert(`El recorte "${cropWithoutName.label || cropWithoutName || "(sin nombre)"}" debe tener un nombre válido.`);
+      setActiveCropIndex(invalidCropIndex);
+      return;
+    }
+    if (crops.length > 1) {
+      setPendingAction("save");
+      setSelectedCropsForAction(crops.map((_, index) => index));
+      setShowConfirmModal(true);
+      return;
+    }
+    await performSaveCrop();
+  }, [validateCropNames, crops, performSaveCrop]);
+  const performDownload = useCallback(async () => {
+    if (!canExport) {
+      const errorMsg = "No se puede descargar el recorte por restricciones de CORS en la imagen original.";
+      accessibilityManager?.announceError(errorMsg);
+      alert(errorMsg);
+      return;
+    }
+    try {
+      accessibilityManager?.announce("Preparando descarga del recorte");
+      let downloadUrl = previewUrl;
+      if (!downloadUrl) {
+        downloadUrl = await generatePreview();
+      }
+      if (!downloadUrl) {
+        throw new Error("No se pudo generar la imagen para descargar");
+      }
+      const cropName = activeCrop.label.replace(/\.[^/.]+$/, " ").replace(" ", "-").trim();
+      const filename = `${editableFilename}_${cropName || "crop"}`;
+      await downloadImage(downloadUrl, filename, {
+        accessibilityManager,
+        onSuccess: (finalFilename) => {
+          accessibilityManager?.announce(
+            `Recorte descargado como ${finalFilename}`
+          );
+        },
+        onError: (error) => {
+          accessibilityManager?.announceError(
+            `Error al descargar: ${error.message}`
+          );
+          alert(`Error al descargar la imagen: ${error.message}`);
+        }
+      });
+    } catch (error) {
+      console.error("Error downloading crop:", error);
+      accessibilityManager?.announceError(
+        `Error al descargar el recorte: ${error.message}`
+      );
+      alert(`Error al descargar el recorte: ${error.message}`);
+    }
+  }, [
+    canExport,
     accessibilityManager,
-    state.isReady
+    previewUrl,
+    activeCrop.label,
+    editableFilename,
+    generatePreview
   ]);
+  const handleDownload = useCallback(async () => {
+    const invalidCropIndex = validateCropNames();
+    if (invalidCropIndex !== -1) {
+      const cropWithoutName = crops[invalidCropIndex];
+      alert(`El recorte "${cropWithoutName.label || cropWithoutName || "(sin nombre)"}" debe tener un nombre válido.`);
+      setActiveCropIndex(invalidCropIndex);
+      return;
+    }
+    if (crops.length > 1) {
+      setPendingAction("download");
+      setSelectedCropsForAction(crops.map((_, index) => index));
+      setShowConfirmModal(true);
+      return;
+    }
+    await performDownload();
+  }, [validateCropNames, crops, performDownload]);
   useEffect(() => {
     setShowPreview(false);
     setPreviewUrl(null);
   }, [image]);
   useEffect(() => {
     if (!cropper.manager) return;
-    selection.setAspectRatio(aspectRatio);
+    if (calculatedAspectRatio) {
+      selection.setAspectRatio(calculatedAspectRatio);
+    }
     utils.setBackground(shade);
-  }, [aspectRatio, shade, cropper.manager, selection, utils]);
+  }, [calculatedAspectRatio, shade, cropper.manager, selection, utils]);
+  useEffect(() => {
+    if (!cropper.manager || !state.isReady) return;
+    const cropState = activeCrop?.savedState;
+    if (cropState) {
+      restoreCropState(cropState);
+      setShouldCenter(false);
+    } else {
+      if (calculatedAspectRatio) {
+        selection.setAspectRatio(calculatedAspectRatio);
+        if (shouldCenter) {
+          setTimeout(() => {
+            selection.center();
+            setShouldCenter(false);
+          }, 100);
+        }
+      }
+    }
+  }, [
+    activeCropIndex,
+    activeCrop,
+    calculatedAspectRatio,
+    cropper.manager,
+    state.isReady,
+    restoreCropState,
+    selection,
+    shouldCenter
+  ]);
+  useEffect(() => {
+    if (!imageInfo || !state.isReady || cropConfig.mandatoryCrops.length > 0)
+      return;
+    const defaultCrop = crops[0];
+    if (defaultCrop && defaultCrop.id === "crop-default-0" && (defaultCrop.width === 1920 || defaultCrop.height === 1080)) {
+      const newWidth = Math.min(imageInfo.naturalWidth, 5e3);
+      const newHeight = Math.min(imageInfo.naturalHeight, 5e3);
+      setCrops([
+        {
+          ...defaultCrop,
+          width: newWidth,
+          height: newHeight
+        }
+      ]);
+      console.log(
+        `[CropperView] Crop por defecto actualizado a ${newWidth}×${newHeight}px`
+      );
+    }
+  }, [imageInfo, state.isReady, cropConfig.mandatoryCrops.length, crops]);
   useEffect(() => {
     if (!cropper.manager || !cropper.manager.utils) return;
     try {
@@ -37289,7 +38028,7 @@ function CropperView({
     showPreview,
     canExport,
     generatePreview,
-    aspectRatio,
+    calculatedAspectRatio,
     flipStates,
     previewUrl
   ]);
@@ -37322,19 +38061,27 @@ function CropperView({
     };
   }, [canvasRef]);
   if (!image) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-view px-2 border-2 border-gray-200/50 rounded-lg min-w-fit max-w-7xl mx-auto h-screen flex flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-header flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 sm:p-6 pb-4 border-b border-gray-200 bg-white z-10 flex-shrink-0 gap-4 sm:gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg sm:text-xl font-bold text-gray-800 truncate", children: "Recortar imagen" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mt-1 truncate", children: image.filename })
+  return /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-view px-2 border-2 border-gray-200/50 rounded-lg min-w-fit max-w-7xl mx-auto h-full min-h-full flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-header flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 lg:p-6 pb-4 border-b border-gray-200 bg-white z-10 flex-shrink-0 gap-4 lg:gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg sm:text-xl font-bold text-gray-800", children: "Generar recortes" }),
+          crops.length > 1 && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 bg-blue-100 text-blue-800 text-xs font-semibold rounded", children: activeCrop.label })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-gray-500 whitespace-nowrap", children: "Nombre:" }),
+          /* @__PURE__ */ jsx("div", { className: "", children: editableFilename + "." + (globalThis.downloadFormat || image.mime_type.split("/")[1] || "webp") })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 w-full sm:w-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row self-end gap-2 w-full sm:w-auto", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: onCancel,
             disabled: creatingVariant,
-            className: "limbo-btn limbo-btn-secondary px-4 py-2 flex-1 sm:flex-initial",
+            className: "limbo-btn limbo-btn-secondary px-4 sm:py-1 h-min flex-1",
+            "aria-label": "Cancelar y volver",
+            title: "Cancelar y volver",
             children: "Cancelar"
           }
         ),
@@ -37343,8 +38090,9 @@ function CropperView({
           {
             onClick: () => onDelete?.(image),
             disabled: deleting | creatingVariant,
-            className: "limbo-btn limbo-btn-danger px-4 py-2 flex-1 sm:flex-initial",
+            className: "limbo-btn limbo-btn-danger px-4 sm:py-1 h-min flex-1 sm:flex-initial",
             "aria-label": `Eliminar imagen ${image.filename}`,
+            title: `Eliminar imagen ${image.filename}`,
             children: deleting ? "Eliminando..." : "Eliminar"
           }
         )
@@ -37356,15 +38104,6 @@ function CropperView({
         " ",
         variantError
       ] }),
-      cropData && cropData.width > 0 && /* @__PURE__ */ jsxs("div", { className: "alert alert-info mb-2 text-sm", role: "status", children: [
-        /* @__PURE__ */ jsx("strong", { children: "Área:" }),
-        " ",
-        Math.round(cropData.width),
-        " ×",
-        " ",
-        Math.round(cropData.height),
-        " px"
-      ] }),
       imageInfo && /* @__PURE__ */ jsxs("div", { className: "alert alert-secondary mb-2 text-sm", role: "status", children: [
         /* @__PURE__ */ jsx("strong", { children: "Original:" }),
         " ",
@@ -37382,10 +38121,135 @@ function CropperView({
           " px)"
         ] })
       ] }),
-      !canExport && /* @__PURE__ */ jsx("div", { className: "alert alert-warning mb-2 text-sm", role: "alert", children: "⚠️ No se puede exportar por restricciones CORS" })
+      !canExport && /* @__PURE__ */ jsx("div", { className: "alert alert-warning mb-2 text-sm", role: "alert", children: "⚠️ No se puede exportar por restricciones CORS" }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white border-b border-gray-200 p-3 sm:p-4 flex-shrink-0 sticky top-0 z-10 mb-3 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-gray-700", children: [
+            "Recortes ",
+            crops.length > 1 && `(${crops.length})`
+          ] }),
+          cropConfig.allowCustomCrops && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: addCustomCrop,
+              disabled: creatingVariant,
+              className: "text-xs cursor-pointer px-2 py-1 bg-green-100 hover:bg-green-200 text-green-800 rounded border border-green-300 transition-colors flex items-center gap-1",
+              title: "Añadir recorte personalizado",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "icon icon-add-green text-green-800 icon--xs" }),
+                "Añadir recorte"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 justify-items-stretch items-start justify-stretch w-full", children: crops.map((crop, index) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: `flex items-center gap-3 p-2 rounded border cursor-pointer transition-colors ${activeCropIndex === index ? "bg-blue-50 border-blue-300" : "bg-gray-50 border-gray-200 hover:bg-gray-100"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "active-crop",
+                  checked: activeCropIndex === index,
+                  onChange: () => switchToCrop(index),
+                  disabled: creatingVariant,
+                  className: "w-4 h-4 text-blue-600 hidden"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-800 truncate", children: activeCrop.label === crop.label && crop.required === false ? /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: crop.label,
+                      onChange: (e) => updateCropLabel(e.target.value),
+                      disabled: creatingVariant || crop.required,
+                      className: "w-full text-sm px-2 py-1.5 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed",
+                      placeholder: "Nombre del recorte",
+                      required: true,
+                      maxLength: 25
+                    }
+                  ) : crop.label }),
+                  crop.required && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-red-100 text-red-700 rounded", children: "Obligatorio" }),
+                  crop.isCustom && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-purple-100 text-purple-700 rounded", children: "Personalizado" })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+                  crop.width,
+                  " × ",
+                  crop.height,
+                  " px"
+                ] })
+              ] }),
+              !crop.required && crops.length > 1 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.preventDefault();
+                    removeCustomCrop(index);
+                  },
+                  className: `flex items-stretch group max-h-fit hover:bg-red-500/50 text-red-500 hover:text-red-700 p-1 rounded-full aspect-square cursor-pointer`,
+                  title: "Eliminar recorte",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `group-hover:bg-gray-transparent-50 icon icon-close-small icon--xs`
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          crop.id
+        )) }),
+        activeCrop && /* @__PURE__ */ jsx("div", { className: "mt-4 pt-4 border-t border-gray-200 space-y-3", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-700 block mb-1", children: "Dimensiones (px)" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: "100",
+                max: "5000",
+                value: activeCrop.width,
+                onChange: (e) => updateCropDimensions("width", e.target.value),
+                onBlur: () => validateAndApplyCropDimensions("width"),
+                disabled: creatingVariant,
+                className: "flex-1 text-sm px-2 py-1.5 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
+                placeholder: "Ancho"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-gray-400 font-bold", children: "×" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: "100",
+                max: "5000",
+                value: activeCrop.height,
+                onChange: (e) => updateCropDimensions("height", e.target.value),
+                onBlur: () => validateAndApplyCropDimensions("height"),
+                disabled: creatingVariant,
+                className: "flex-1 text-sm px-2 py-1.5 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
+                placeholder: "Alto"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+              "Proporción:",
+              " ",
+              calculatedAspectRatio ? calculatedAspectRatio.toFixed(2) : "N/A"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Min: 100px | Max: 5000px" })
+          ] })
+        ] }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row flex-1 overflow-hidden rounded-lg gap-4 md:gap-0 cropper-main-content-area", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1 relative min-w-0 order-2 md:order-1", children: /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-container absolute inset-2 sm:inset-4 bg-white rounded-lg border-2 border-gray-200 shadow-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cropper-main-content-area flex flex-col lg:flex-row flex-1 overflow-hidden rounded-lg gap-4 md:gap-0 aspect-auto lg:aspect-square xl:aspect-auto w-full max-w-[95%] lg:max-w-full self-center lg:max-h-[50rem]", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 relative min-w-0 order-1", children: /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-container lg:absolute inset-2 sm:inset-4 bg-white rounded-lg border-2 border-gray-200 shadow-lg overflow-hidden", children: [
         showPreview && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 bg-white rounded-lg border border-gray-300 p-2 sm:p-3 z-50 shadow-xl w-48 sm:w-64 max-w-[calc(50%-1rem)] sm:max-w-[calc(50%-2rem)] md:min-w-1/4", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-2", children: [
             /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-gray-700", children: "Vista previa" }),
@@ -37458,9 +38322,13 @@ function CropperView({
                   "initial-coverage": "0.5",
                   movable: true,
                   resizable: true,
-                  keyboard: "false",
+                  keyboard: "true",
                   action: "move",
-                  style: { cursor: "move" },
+                  style: {
+                    cursor: "move",
+                    minWidth: `${minCropSizes.minWidth}px`,
+                    minHeight: `${minCropSizes.minHeight}px`
+                  },
                   "data-prevent-delete": "true",
                   tabindex: "-1",
                   children: [
@@ -37503,61 +38371,401 @@ function CropperView({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "limbo-cropper-controls w-full md:w-80 bg-white border-t md:border-t-0 md:border-l border-gray-200 overflow-y-auto flex-shrink-0 order-1 md:order-2 max-h-96 md:max-h-none", children: /* @__PURE__ */ jsxs("div", { className: "p-3 sm:p-4 space-y-3 sm:space-y-4 relative", children: [
-        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-4 md:sticky top-0 z-50", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Acciones" }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex limbo-cropper-controls w-full lg:w-80 h-full bg-white border-t md:border-t-0 md:border-l border-gray-200 lg:overflow-y-auto flex-shrink-0 order-1 max-h-none", children: /* @__PURE__ */ jsxs("div", { className: "p-3 min-h-full sm:p-4 space-y-3 sm:space-y-4 relative w-full grid grid-cols-1 lg:flex lg:flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-4", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: toggleVisualOptions,
+              className: "w-full p-2 my-1 cursor-pointer hover:bg-neutral-gray-050/50 transition-colors rounded-md",
+              "aria-expanded": showVisualOptions,
+              "aria-label": "Mostrar/ocultar opciones de visualizción",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Visualización" }),
+                /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `icon ${!showVisualOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
+                  }
+                ) })
+              ] })
+            }
+          ),
+          showVisualOptions && /* @__PURE__ */ jsxs("div", { className: "pb-2 space-y-2", children: [
             /* @__PURE__ */ jsxs(
               "button",
               {
-                onClick: preview,
-                disabled: creatingVariant || !canExport,
-                className: `w-full min-h-10 transition-colors ${showPreview ? "limbo-btn limbo-btn-danger" : "limbo-btn limbo-btn-primary"}`,
-                "aria-label": "Generar vista previa del recorte",
+                onClick: toggleGrid,
+                className: `w-full flex cursor-pointer items-center justify-between p-2 rounded transition-colors ${showGrid ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
+                disabled: creatingVariant,
+                "aria-pressed": showGrid,
+                title: "Mostrar/ocultar cuadrícula de la regla de los tercios en el selector",
+                "aria-label": "Activar/desactivar grid",
                 children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `icon ${showPreview ? "icon-close-small-white" : "icon-search-white"}`
-                    }
-                  ),
-                  showPreview ? "Cerrar previa" : "Vista previa"
+                  /* @__PURE__ */ jsxs("span", { className: "text-sm flex items-center", children: [
+                    /* @__PURE__ */ jsx("span", { className: "icon icon-area-blue me-1" }),
+                    " ",
+                    "Cuadrícula"
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: showGrid ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "icon icon-tick icon--xs align-[middle!important] -mt-0.5" }),
+                    " ",
+                    "Activo"
+                  ] }) : "Inactivo" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: saveCrop,
-                disabled: creatingVariant || !cropData || !effectiveImageInfo || !canExport || !state.isReady,
-                className: "w-full limbo-btn limbo-btn-success min-h-10",
-                "aria-label": "Guardar imagen recortada",
-                children: creatingVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-save-white" }),
-                  " ",
-                  "Guardando..."
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-save-white" }),
-                  " Guardar recorte"
-                ] })
-              }
-            ),
             /* @__PURE__ */ jsxs(
               "button",
               {
-                onClick: resetAll,
+                onClick: toggleShade,
+                className: `w-full flex cursor-pointer items-center justify-between p-2 rounded transition-colors ${shade ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
                 disabled: creatingVariant,
-                className: "w-full limbo-btn limbo-btn-secondary min-h-10",
-                "aria-label": "Reiniciar todas las configuraciones",
+                "aria-pressed": shade,
+                "aria-label": "Activar/desactivar sombreado",
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-refresh-white" }),
-                  " Reiniciar todo"
+                  /* @__PURE__ */ jsxs("span", { className: "text-sm flex items-center", children: [
+                    /* @__PURE__ */ jsx("span", { className: "icon icon-comparison-blue me-1" }),
+                    " ",
+                    "Tablero"
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: shade ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "icon icon-tick icon--xs align-[middle!important] -mt-0.5" }),
+                    " ",
+                    "Activo"
+                  ] }) : "Inactivo" })
                 ]
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-brand-blue-50 to-green-50 rounded-lg border border-blue-200 shadow-sm", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bg-white rounded-lg border border-gray-200 p-4" + (showSelectorOptions ? "" : " bg-neutral-gray-50/50"),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: toggleSelectorOptions,
+                  className: "w-full p-2 my-1 cursor-pointer hover:bg-neutral-gray-050/50 transition-colors rounded-md",
+                  "aria-expanded": showSelectorOptions,
+                  "aria-label": "Mostrar/ocultar opciones de visualizción",
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Ajustes del selector" }),
+                    /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `icon ${!showSelectorOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
+                      }
+                    ) })
+                  ] })
+                }
+              ),
+              showSelectorOptions && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSelectionCoverage(0.5),
+                      className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      disabled: creatingVariant,
+                      "aria-label": "Selección 50%",
+                      title: "Tamaño de selector 50%",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "50%" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSelectionCoverage(0.7),
+                      className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      disabled: creatingVariant,
+                      "aria-label": "Selección 70%",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "70%" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSelectionCoverage(0.9),
+                      className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      disabled: creatingVariant,
+                      "aria-label": "Selección 90%",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "90%" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSelectionCoverage(1),
+                      className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      disabled: creatingVariant,
+                      "aria-label": "Selección completa",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "100%" }) })
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: centerSelection,
+                      className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      title: "Centrar selección",
+                      disabled: creatingVariant,
+                      "aria-label": "Centrar área de selección",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
+                        /* @__PURE__ */ jsx("span", { className: "icon icon-radio-button icon--sm align-[middle!important] " }),
+                        " ",
+                        "Centrar selección"
+                      ] }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: resetSelection,
+                      className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      title: "Reiniciar selección",
+                      disabled: creatingVariant,
+                      "aria-label": "Reiniciar área de selección",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
+                        /* @__PURE__ */ jsx("span", { className: "icon icon-refresh icon--sm lign-[middle!important] " }),
+                        " ",
+                        "Reset selección"
+                      ] }) })
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-4", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: toggleImageOptions,
+              className: "w-full p-2 my-1 cursor-pointer hover:bg-neutral-gray-050/50 transition-colors rounded-md",
+              "aria-expanded": showImageOptions,
+              "aria-label": "Mostrar/ocultar opciones de visualizción",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Transformar imagen" }),
+                /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `icon ${!showImageOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
+                  }
+                ) })
+              ] })
+            }
+          ),
+          showImageOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 hidden lg:block", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Mover imagen" }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-1", children: [
+                /* @__PURE__ */ jsx("div", {}),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => move(0, -10),
+                    className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Mover arriba",
+                    disabled: creatingVariant,
+                    "aria-label": "Mover imagen hacia arriba",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", {}),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => move(-10, 0),
+                    className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Mover izquierda",
+                    disabled: creatingVariant,
+                    "aria-label": "Mover imagen hacia la izquierda",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-blue" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: centerImage,
+                    className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Centrar y ajustar imagen",
+                    disabled: creatingVariant,
+                    "aria-label": "Centrar y ajustar imagen",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-radio-button-blue icon-md" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => move(10, 0),
+                    className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Mover derecha",
+                    disabled: creatingVariant,
+                    "aria-label": "Mover imagen hacia la derecha",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-blue" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", {}),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => move(0, 10),
+                    className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Mover abajo",
+                    disabled: creatingVariant,
+                    "aria-label": "Mover imagen hacia abajo",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-down-blue" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", {})
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 mb-2", children: [
+                "Zoom ",
+                zoomInfo ? zoomInfo.percentage + "%" : ""
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => zoom(-0.2),
+                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Alejar 20%",
+                    disabled: creatingVariant,
+                    "aria-label": "Alejar imagen",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-out-blue" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: resetZoomOnly,
+                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Restablecer zoom original",
+                    disabled: creatingVariant,
+                    "aria-label": "Restablecer el zoom para que la imagen se vea con su resolución original",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-screenshot-blue" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => zoom(0.2),
+                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Acercar 20%",
+                    disabled: creatingVariant,
+                    "aria-label": "Acercar imagen",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-in-blue" }) })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Rotación" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1 *:text-brand-blue-1000 *:text-sm", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => rotate(-90),
+                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Rotar -90°",
+                    disabled: creatingVariant,
+                    "aria-label": "Rotar imagen 90 grados a la izquierda",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-reply-blue" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => rotate(-45),
+                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Rotar -45°",
+                    disabled: creatingVariant,
+                    "aria-label": "Rotar imagen 45 grados a la izquierda",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "-45°" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => rotate(45),
+                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Rotar +45°",
+                    disabled: creatingVariant,
+                    "aria-label": "Rotar imagen 45 grados a la derecha",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "+45°" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => rotate(90),
+                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Rotar +90°",
+                    disabled: creatingVariant,
+                    "aria-label": "Rotar imagen 90 grados a la derecha",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-send-arrow-blue" }) })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Voltear" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: flipHorizontal,
+                    className: `flex-1 p-2 rounded cursor-pointer transition-colors text-sm ${flipStates.horizontal ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
+                    title: `Voltear horizontalmente ${flipStates.horizontal ? "(activo)" : ""}`,
+                    disabled: creatingVariant,
+                    "aria-label": "Voltear imagen horizontalmente",
+                    "aria-pressed": flipStates.horizontal,
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-right-blue border border-brand-blue-1000 rounded" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: flipVertical,
+                    className: `flex-1 p-2 cursor-pointer rounded transition-colors text-sm ${flipStates.vertical ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
+                    title: `Voltear verticalmente ${flipStates.vertical ? "(activo)" : ""}`,
+                    disabled: creatingVariant,
+                    "aria-label": "Voltear imagen verticalmente",
+                    "aria-pressed": flipStates.vertical,
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-down-blue border border-brand-blue-1000 rounded" }) })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  transform.reset();
+                  setFlipStates({ horizontal: false, vertical: false });
+                },
+                className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                title: "Reiniciar transformaciones",
+                disabled: creatingVariant,
+                "aria-label": "Reiniciar todas las transformaciones de la imagen",
+                children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "icon icon-refresh-blue icon--sm align-[middle!important] " }),
+                  " ",
+                  "Reiniciar ajustes"
+                ] }) })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-brand-blue-50 to-green-50 rounded-lg border border-blue-200 shadow-sm hidden lg:block", children: [
           /* @__PURE__ */ jsxs(
             "button",
             {
@@ -37586,7 +38794,7 @@ function CropperView({
                 /* @__PURE__ */ jsxs("div", { children: [
                   "• ",
                   /* @__PURE__ */ jsx("strong", { children: "Arrastra la imagen:" }),
-                  " Haz clic fuera del área de selección y arrastra"
+                  " Haz clic sobre la imagen del área de selección y arrastra"
                 ] }),
                 /* @__PURE__ */ jsxs("div", { children: [
                   "• ",
@@ -37618,11 +38826,6 @@ function CropperView({
                   "• ",
                   /* @__PURE__ */ jsx("strong", { children: "Tamaños rápidos:" }),
                   " Usa los botones 50%, 70%, 90%, 100%"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Proporciones:" }),
-                  " Selecciona ratios predefinidos (1:1, 16:9, etc.)"
                 ] })
               ] })
             ] }),
@@ -37660,9 +38863,14 @@ function CropperView({
                 ] }),
                 /* @__PURE__ */ jsxs("div", { children: [
                   "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Grid:" }),
+                  /* @__PURE__ */ jsx("strong", { children: "Cuadricula:" }),
                   " Actívalo para aplicar la regla de los tercios"
                 ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  "• ",
+                  /* @__PURE__ */ jsx("strong", { children: "Tablero:" }),
+                  " Actívalo para cuadrar medjor las medidas o como ayuda visual para imagenes con transparencia"
+                ] }),
                 /* @__PURE__ */ jsxs("div", { children: [
                   "• ",
                   /* @__PURE__ */ jsx("strong", { children: "Transformaciones:" }),
@@ -37691,366 +38899,139 @@ function CropperView({
               ] })
             ] })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-3 sm:p-4", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Proporción" }),
-          /* @__PURE__ */ jsx("div", { className: "limbo-cropper-aspect-buttons grid grid-cols-2 md:grid-cols-1 gap-2 md:hidden", children: allowedAspectRatios.map((ratio) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => handleAspectRatio(ratio.value),
-              className: `p-2 text-xs rounded border transition-colors cursor-pointer ${aspectRatio === ratio.value ? "bg-blue-100 border-blue-300 text-blue-800" : "bg-gray-100 border-gray-300 text-gray-700"}`,
-              disabled: creatingVariant,
-              title: `Cambiar a proporción ${ratio.label}`,
-              children: ratio.label
-            },
-            ratio.value
-          )) }),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: aspectRatio,
-              onChange: (e) => handleAspectRatio(e.target.value),
-              className: "w-full form-control hidden md:block",
-              disabled: creatingVariant,
-              "aria-label": "Seleccionar proporción de aspecto",
-              children: allowedAspectRatios.map((ratio) => /* @__PURE__ */ jsx("option", { value: ratio.value, children: ratio.label }, ratio.value))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-4", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Visualización" }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: toggleGrid,
-                className: `w-full flex cursor-pointer items-center justify-between p-2 rounded transition-colors ${showGrid ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                disabled: creatingVariant,
-                "aria-pressed": showGrid,
-                "aria-label": "Activar/desactivar grid",
-                children: [
-                  /* @__PURE__ */ jsxs("span", { className: "text-sm flex items-center", children: [
-                    /* @__PURE__ */ jsx("span", { className: "icon icon-area-blue me-1" }),
-                    " Grid"
-                  ] }),
-                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: showGrid ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "icon icon-tick icon--xs align-[middle!important] -mt-0.5" }),
-                    " ",
-                    "Activo"
-                  ] }) : "Inactivo" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: toggleShade,
-                className: `w-full flex cursor-pointer items-center justify-between p-2 rounded transition-colors ${shade ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                disabled: creatingVariant,
-                "aria-pressed": shade,
-                "aria-label": "Activar/desactivar sombreado",
-                children: [
-                  /* @__PURE__ */ jsxs("span", { className: "text-sm flex items-center", children: [
-                    /* @__PURE__ */ jsx("span", { className: "icon icon-comparison-blue me-1" }),
-                    " ",
-                    "Sombreado"
-                  ] }),
-                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: shade ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "icon icon-tick icon--xs align-[middle!important] -mt-0.5" }),
-                    " ",
-                    "Activo"
-                  ] }) : "Inactivo" })
-                ]
-              }
-            )
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "limbo-cropper-footer flex-shrink-0 border-t border-gray-200 bg-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 sm:gap-3 items-stretch sm:items-center justify-end max-w-7xl mx-auto", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: preview,
+          disabled: creatingVariant || !canExport,
+          className: `px-6 py-2.5 min-h-[44px] transition-colors order-2 ${showPreview ? "limbo-btn limbo-btn-danger" : "limbo-btn limbo-btn-info"}`,
+          "aria-label": "Generar vista previa del recorte",
+          title: "Mostar/Ocultar vista previa del recorte",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx("span", { className: `icon md:mr-1 icon-search-white` }),
+            /* @__PURE__ */ jsx("span", { className: "hidden md:block text-nowrap", children: showPreview ? "Cerrar previa" : "Vista previa" })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-4", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Ajustes del selector" }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleDownload,
+          disabled: creatingVariant || !canExport,
+          className: "limbo-btn limbo-btn-primary px-6 py-2.5 min-h-[44px] order-3",
+          "aria-label": "Descargar recorte sin guardar",
+          title: "Descargar recorte sin guardar",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "icon icon-download-white md:mr-1" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden md:block text-nowrap", children: "Descargar" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: saveCrop,
+          disabled: creatingVariant || !cropData || !effectiveImageInfo || !canExport || !state.isReady,
+          className: "limbo-btn limbo-btn-success px-6 py-2.5 min-h-[44px] order-4",
+          "aria-label": "Guardar imagen recortada",
+          title: "Guardar imagen recortada",
+          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: creatingVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "hidden md:block text-nowrap icon icon-save-white md:mr-1" }),
+            "Guardando..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "icon icon-save-white md:mr-1" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden md:block text-nowrap", children: "Guardar recorte" })
+          ] }) })
+        }
+      )
+    ] }) }),
+    showConfirmModal && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999] p-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-xl max-w-lg w-full max-h-[80vh] overflow-hidden flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-b border-gray-200", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-800", children: pendingAction === "save" ? "Seleccionar recortes a guardar" : "Seleccionar recortes a descargar" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 mt-1", children: [
+          "Marca los recortes que deseas ",
+          pendingAction === "save" ? "guardar" : "descargar"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4 overflow-y-auto flex-1", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: crops.map((crop, index) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: `flex items-center gap-3 p-3 rounded border cursor-pointer transition-colors ${selectedCropsForAction.includes(index) ? "bg-blue-50 border-blue-300" : "bg-gray-50 border-gray-200 hover:bg-gray-100"} ${crop.required ? "opacity-75" : ""}`,
+          children: [
             /* @__PURE__ */ jsx(
-              "button",
+              "input",
               {
-                onClick: centerSelection,
-                className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                title: "Centrar selección",
-                disabled: creatingVariant,
-                "aria-label": "Centrar área de selección",
-                children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-radio-button icon--sm align-[middle!important] " }),
-                  " ",
-                  "Centrar selección"
-                ] }) })
+                type: "checkbox",
+                checked: selectedCropsForAction.includes(index),
+                disabled: crop.required,
+                onChange: (e) => {
+                  if (e.target.checked) {
+                    setSelectedCropsForAction((prev) => [...prev, index]);
+                  } else {
+                    setSelectedCropsForAction((prev) => prev.filter((i) => i !== index));
+                  }
+                },
+                className: "w-4 h-4 text-blue-600"
               }
             ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: resetSelection,
-                className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                title: "Reiniciar selección",
-                disabled: creatingVariant,
-                "aria-label": "Reiniciar área de selección",
-                children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-refresh icon--sm lign-[middle!important] " }),
-                  " ",
-                  "Reset selección"
-                ] }) })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Tamaños rápidos" }),
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-1", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setSelectionCoverage(0.5),
-                  className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  disabled: creatingVariant,
-                  "aria-label": "Selección 50%",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "50%" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setSelectionCoverage(0.7),
-                  className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  disabled: creatingVariant,
-                  "aria-label": "Selección 70%",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "70%" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setSelectionCoverage(0.9),
-                  className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  disabled: creatingVariant,
-                  "aria-label": "Selección 90%",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "90%" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setSelectionCoverage(1),
-                  className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  disabled: creatingVariant,
-                  "aria-label": "Selección completa",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "100%" }) })
-                }
-              )
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-4", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Transformar imagen" }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Mover imagen" }),
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-1", children: [
-              /* @__PURE__ */ jsx("div", {}),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => move(0, -10),
-                  className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Mover arriba",
-                  disabled: creatingVariant,
-                  "aria-label": "Mover imagen hacia arriba",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx("div", {}),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => move(-10, 0),
-                  className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Mover izquierda",
-                  disabled: creatingVariant,
-                  "aria-label": "Mover imagen hacia la izquierda",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-blue" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: centerImage,
-                  className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Centrar y ajustar imagen",
-                  disabled: creatingVariant,
-                  "aria-label": "Centrar y ajustar imagen",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-radio-button-blue icon-md" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => move(10, 0),
-                  className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Mover derecha",
-                  disabled: creatingVariant,
-                  "aria-label": "Mover imagen hacia la derecha",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-blue" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx("div", {}),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => move(0, 10),
-                  className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Mover abajo",
-                  disabled: creatingVariant,
-                  "aria-label": "Mover imagen hacia abajo",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-down-blue" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx("div", {})
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 mb-2", children: [
-              "Zoom ",
-              zoomInfo ? zoomInfo.percentage + "%" : ""
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => zoom(-0.2),
-                  className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Alejar 20%",
-                  disabled: creatingVariant,
-                  "aria-label": "Alejar imagen",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-out-blue" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: resetZoomOnly,
-                  className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Restablecer zoom original",
-                  disabled: creatingVariant,
-                  "aria-label": "Restablecer el zoom para que la imagen se vea con su resolución original",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-screenshot-blue" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => zoom(0.2),
-                  className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Acercar 20%",
-                  disabled: creatingVariant,
-                  "aria-label": "Acercar imagen",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-in-blue" }) })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Rotación" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-1 *:text-brand-blue-1000 *:text-sm", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => rotate(-90),
-                  className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Rotar -90°",
-                  disabled: creatingVariant,
-                  "aria-label": "Rotar imagen 90 grados a la izquierda",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-reply-blue" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => rotate(-45),
-                  className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Rotar -45°",
-                  disabled: creatingVariant,
-                  "aria-label": "Rotar imagen 45 grados a la izquierda",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "-45°" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => rotate(45),
-                  className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Rotar +45°",
-                  disabled: creatingVariant,
-                  "aria-label": "Rotar imagen 45 grados a la derecha",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "+45°" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => rotate(90),
-                  className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  title: "Rotar +90°",
-                  disabled: creatingVariant,
-                  "aria-label": "Rotar imagen 90 grados a la derecha",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-send-arrow-blue" }) })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Voltear" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: flipHorizontal,
-                  className: `flex-1 p-2 rounded cursor-pointer transition-colors text-sm ${flipStates.horizontal ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                  title: `Voltear horizontalmente ${flipStates.horizontal ? "(activo)" : ""}`,
-                  disabled: creatingVariant,
-                  "aria-label": "Voltear imagen horizontalmente",
-                  "aria-pressed": flipStates.horizontal,
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-right-blue border border-brand-blue-1000 rounded" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: flipVertical,
-                  className: `flex-1 p-2 cursor-pointer rounded transition-colors text-sm ${flipStates.vertical ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                  title: `Voltear verticalmente ${flipStates.vertical ? "(activo)" : ""}`,
-                  disabled: creatingVariant,
-                  "aria-label": "Voltear imagen verticalmente",
-                  "aria-pressed": flipStates.vertical,
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-down-blue border border-brand-blue-1000 rounded" }) })
-                }
-              )
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-800 truncate", children: crop.label }),
+                crop.required && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-red-100 text-red-700 rounded", children: "Obligatorio" })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+                crop.width,
+                " × ",
+                crop.height,
+                " px"
+              ] })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                transform.reset();
-                setFlipStates({ horizontal: false, vertical: false });
-              },
-              className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-              title: "Reiniciar transformaciones",
-              disabled: creatingVariant,
-              "aria-label": "Reiniciar todas las transformaciones de la imagen",
-              children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
-                /* @__PURE__ */ jsx("span", { className: "icon icon-refresh-blue icon--sm align-[middle!important] " }),
-                " ",
-                "Reiniciar ajustes"
-              ] }) })
-            }
-          )
-        ] })
-      ] }) })
-    ] })
+          ]
+        },
+        crop.id
+      )) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-t border-gray-200 flex gap-3 justify-end", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setShowConfirmModal(false);
+              setPendingAction(null);
+              setSelectedCropsForAction([]);
+            },
+            className: "limbo-btn limbo-btn-secondary px-4 py-2",
+            children: "Cancelar"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: async () => {
+              setShowConfirmModal(false);
+              if (pendingAction === "save") {
+                await performSaveCrop();
+              } else {
+                await performDownload();
+              }
+              setPendingAction(null);
+              setSelectedCropsForAction([]);
+            },
+            disabled: selectedCropsForAction.length === 0,
+            className: "limbo-btn limbo-btn-primary px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: [
+              pendingAction === "save" ? "Guardar" : "Descargar",
+              " (",
+              selectedCropsForAction.length,
+              ")"
+            ]
+          }
+        )
+      ] })
+    ] }) })
   ] });
 }
 function Pagination({
@@ -38360,6 +39341,18 @@ function useTokenExpiration() {
     handleTokenExpiredClose
   };
 }
+function useDebounce(value, delay = 500) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
 function App({
   apiKey,
   prod = false,
@@ -38392,6 +39385,14 @@ function App({
   sessionStorage.removeItem("limbo_portals_images");
   sessionStorage.removeItem("limbo_portals_portalResults");
   sessionStorage.removeItem("limbo_portals_paginationInfo");
+  const [galleryFilters, setGalleryFilters] = useState({
+    name: "",
+    uploadedBy: "",
+    dateFrom: "",
+    dateTo: ""
+  });
+  const debouncedName = useDebounce(galleryFilters.name, 500);
+  const debouncedUploadedBy = useDebounce(galleryFilters.uploadedBy, 500);
   const getFilteredFeatures = () => {
     switch (modeUI) {
       case "gallery-only":
@@ -38435,6 +39436,14 @@ function App({
     error: deleteError,
     reset: resetDelete
   } = useDeleteImage();
+  const apiParams = {
+    limit: itemsPerPage,
+    page: currentPage,
+    ...debouncedName && { name: debouncedName },
+    ...debouncedUploadedBy && { uploadedBy: debouncedUploadedBy },
+    ...galleryFilters.dateFrom && { dateFrom: galleryFilters.dateFrom },
+    ...galleryFilters.dateTo && { dateTo: galleryFilters.dateTo }
+  };
   const {
     images,
     loading: loadingImages,
@@ -38442,7 +39451,7 @@ function App({
     pagination,
     invalidateCache,
     setImages
-  } = useImages(apiKey, prod, { limit: itemsPerPage, page: currentPage });
+  } = useImages(apiKey, prod, apiParams);
   const { refreshVariants } = useImageVariants();
   const handleVariantCreated = (assetId, variantData) => {
     refreshVariants(assetId);
@@ -38486,7 +39495,7 @@ function App({
     }
   };
   const handleDelete = async (imageId) => {
-    if (!confirm("¿Estás seguro de que quieres eliminar esta imagen?")) {
+    if (!confirm("¿Estás seguro de que deseas eliminar esta imagen? Esta acción también eliminará todos sus recortes.")) {
       return;
     }
     const success = await deleteImg(imageId);
@@ -38524,8 +39533,148 @@ function App({
     if (tabId !== "upload") resetUpload();
     if (tabId !== "gallery") resetDelete();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "limbo-card-parent max-w-7xl mx-auto my-8 p-6 shadow-xl w-full", children: [
-    ui.showTabs && /* @__PURE__ */ jsx(Tabs, { tabs, active: activeTab, onChange: handleTabChange }),
+  const determineScenario = () => {
+    if (modeUI === "crop-only" || activeFeatures.length === 1 && activeFeatures[0] === "cropper") {
+      return "crop-only";
+    }
+    if (activeFeatures.includes("gallery")) {
+      return "with-gallery";
+    }
+    if (activeFeatures.includes("upload") && !activeFeatures.includes("gallery")) {
+      return "upload-only";
+    }
+    return "with-gallery";
+  };
+  const handleCropSave = (result) => {
+    const scenario = determineScenario();
+    const globalConfig2 = window.limboCore?.config?.getGlobal() || {};
+    const mode = globalConfig2.mode || "embed";
+    const autoHide = globalConfig2.autoHideOnComplete || false;
+    const crops = Array.isArray(result) ? result : [result];
+    if (scenario === "with-gallery") {
+      invalidateCache();
+    }
+    if (callbacks.onCropsSaved) {
+      callbacks.onCropsSaved({
+        crops,
+        assetId: selectedImage?.id,
+        instanceId
+      });
+    }
+    if (window.limboCore?.events) {
+      window.limboCore.events.emit("cropsSaved", {
+        crops,
+        assetId: selectedImage?.id,
+        instanceId
+      });
+    }
+    switch (scenario) {
+      case "with-gallery":
+        setSelectedImage(null);
+        setActiveTab("gallery");
+        break;
+      case "upload-only":
+        if (mode === "modal") {
+          window.limboCore?.modals?.closeAllModals();
+        } else {
+          setSelectedImage(null);
+          setActiveTab("upload");
+        }
+        break;
+      case "crop-only":
+        if (mode === "modal") {
+          if (callbacks.onCropperComplete) {
+            callbacks.onCropperComplete({
+              crops,
+              instanceId
+            });
+          }
+          if (window.limboCore?.events) {
+            window.limboCore.events.emit("cropperComplete", {
+              crops,
+              instanceId
+            });
+          }
+          window.limboCore?.modals?.closeAllModals();
+        } else {
+          if (callbacks.onCropperComplete) {
+            callbacks.onCropperComplete({
+              crops,
+              instanceId
+            });
+          }
+          if (window.limboCore?.events) {
+            window.limboCore.events.emit("cropperComplete", {
+              crops,
+              instanceId
+            });
+          }
+          if (autoHide) {
+            const container = document.querySelector(`#limbo-instance-${instanceId}`);
+            if (container) container.style.display = "none";
+          }
+        }
+        break;
+    }
+  };
+  const handleCropCancel = () => {
+    const scenario = determineScenario();
+    const globalConfig2 = window.limboCore?.config?.getGlobal() || {};
+    const mode = globalConfig2.mode || "embed";
+    if (callbacks.onCropperCancelled) {
+      callbacks.onCropperCancelled({
+        assetId: selectedImage?.id,
+        instanceId
+      });
+    }
+    if (window.limboCore?.events) {
+      window.limboCore.events.emit("cropperCancelled", {
+        assetId: selectedImage?.id,
+        instanceId
+      });
+    }
+    switch (scenario) {
+      case "with-gallery":
+        setSelectedImage(null);
+        setActiveTab("gallery");
+        break;
+      case "upload-only":
+        if (mode === "modal") {
+          window.limboCore?.modals?.closeAllModals();
+        } else {
+          setSelectedImage(null);
+          setActiveTab("upload");
+        }
+        break;
+      case "crop-only":
+        if (mode === "modal") {
+          window.limboCore?.modals?.closeAllModals();
+        } else {
+          if (window.limboCore?.events) {
+            window.limboCore.events.emit("cropperClosed", {
+              instanceId,
+              reason: "cancelled"
+            });
+          }
+        }
+        break;
+    }
+  };
+  const handleCropError = (error) => {
+    if (callbacks.onCropperError) {
+      callbacks.onCropperError(error, instanceId);
+    }
+    if (window.limboCore?.events) {
+      window.limboCore.events.emit("cropperError", {
+        error,
+        assetId: selectedImage?.id,
+        instanceId
+      });
+    }
+    console.error("Cropper error:", error);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "limbo-card-parent max-w-7xl mx-auto my-8 p-6 shadow-xs w-full", children: [
+    ui.showTabs && activeTab != "cropper" && /* @__PURE__ */ jsx(Tabs, { tabs, active: activeTab, onChange: handleTabChange }),
     imagesError && /* @__PURE__ */ jsxs("div", { className: "alert alert-danger", children: [
       "Error al cargar imágenes: ",
       imagesError
@@ -38539,8 +39688,6 @@ function App({
       /* @__PURE__ */ jsx(
         Gallery,
         {
-          apiKey,
-          prod,
           onSelect: handleImageSelect,
           onCrop: handleImageCrop,
           onDelete: isActionAllowed("delete") ? handleDelete : null,
@@ -38548,6 +39695,13 @@ function App({
           images,
           loading: loadingImages,
           error: imagesError,
+          filters: galleryFilters,
+          onFiltersChange: (newFilters) => {
+            setGalleryFilters(newFilters);
+            setCurrentPage(1);
+          },
+          filterConfig: ui.galleryFilters || {},
+          loadingConfig: ui.galleryLoading || {},
           allowedActions: {
             select: isActionAllowed("select"),
             download: isActionAllowed("download"),
@@ -38591,16 +39745,10 @@ function App({
       CropperView,
       {
         image: selectedImage,
-        onSave: () => {
-          invalidateCache();
-          setSelectedImage(null);
-          setActiveTab("gallery");
-        },
-        onCancel: () => {
-          setSelectedImage(null);
-          setActiveTab("gallery");
-        },
+        onSave: handleCropSave,
+        onCancel: handleCropCancel,
         onDelete: () => handleDelete(selectedImage?.id),
+        onError: handleCropError,
         deleting,
         onVariantCreated: handleVariantCreated
       }
@@ -38905,7 +40053,12 @@ class LimboInstance {
         id: `limbo-component-container-${this.id}`,
         className: "limbo-instance limbo-component-container-wrapper py-3",
         "data-limbo-id": this.id,
-        "data-limbo-mode": this.config.mode
+        "data-limbo-mode": this.config.mode,
+        "data-limbo-version": "2.0",
+        "data-limbo-isolated": "true",
+        // Agregar aria-label para accesibilidad
+        "aria-label": "Limbo Image Manager",
+        "role": "region"
       },
       React.createElement(App, {
         apiKey: this.config.apiKey || null,
@@ -41925,6 +43078,288 @@ class LimboCore {
     });
     modalInstance.open();
   }
+  // ========================================
+  // MÉTODOS PREFAB - CASOS DE USO COMUNES
+  // ========================================
+  /**
+   * 🎨 Abrir galería de imágenes en modal
+   * Caso de uso: Selector rápido de imágenes existentes
+   *
+   * @param {Object} options - Opciones de configuración
+   * @param {Function} options.onSelect - Callback cuando se selecciona imagen
+   * @param {Object} options.filters - Filtros pre-aplicados
+   * @returns {Object} Instancia del modal
+   *
+   * @example
+   * Limbo.openGallery({
+   *   onSelect: (image) => console.log('Imagen seleccionada:', image)
+   * });
+   */
+  openGallery(options = {}) {
+    const instance = this.create({
+      mode: "modal",
+      modeUI: "gallery-only",
+      features: ["gallery"],
+      autoDestroy: true,
+      modal: {
+        title: options.title || "Seleccionar Imagen",
+        size: options.size || "large"
+      },
+      callbacks: {
+        onSelect: (imageData) => {
+          options.onSelect?.(imageData);
+          if (options.autoClose !== false) {
+            instance.close();
+          }
+        }
+      },
+      ...options
+    });
+    instance.open();
+    return instance;
+  }
+  /**
+   * 📤 Abrir uploader en modal
+   * Caso de uso: Subida rápida de nueva imagen
+   *
+   * @param {Object} options - Opciones de configuración
+   * @param {Function} options.onUpload - Callback cuando se sube imagen
+   * @param {Boolean} options.redirectToGallery - Si true, muestra galería tras subir
+   * @returns {Object} Instancia del modal
+   *
+   * @example
+   * Limbo.openUploader({
+   *   onUpload: (image) => console.log('Imagen subida:', image),
+   *   redirectToGallery: false
+   * });
+   */
+  openUploader(options = {}) {
+    const features = options.redirectToGallery !== false ? ["upload", "gallery"] : ["upload"];
+    const instance = this.create({
+      mode: "modal",
+      modeUI: options.redirectToGallery !== false ? "full" : "upload-only",
+      features,
+      autoDestroy: true,
+      modal: {
+        title: options.title || "Subir Imagen",
+        size: options.size || "medium"
+      },
+      callbacks: {
+        onUpload: (imageData) => {
+          options.onUpload?.(imageData);
+          if (options.autoClose !== false && !options.redirectToGallery) {
+            instance.close();
+          }
+        }
+      },
+      ...options
+    });
+    instance.open();
+    return instance;
+  }
+  /**
+   * ✂️ Abrir cropper standalone con imagen externa
+   * Caso de uso: Recortar una imagen específica sin galería
+   *
+   * @param {String} imageUrl - URL de la imagen a recortar
+   * @param {Object} options - Opciones de configuración
+   * @param {Array} options.mandatoryCrops - Recortes obligatorios
+   * @param {Function} options.onComplete - Callback cuando se completan los recortes
+   * @param {Function} options.onCancelled - Callback cuando se cancela
+   * @returns {Object} Instancia del modal
+   *
+   * @example
+   * Limbo.openCropper('https://example.com/image.jpg', {
+   *   mandatoryCrops: [
+   *     { label: 'Thumbnail', width: 300, height: 300, required: true },
+   *     { label: 'Header', width: 1920, height: 400, required: true }
+   *   ],
+   *   onComplete: (crops) => console.log('Recortes:', crops),
+   *   onCancelled: () => console.log('Cancelado')
+   * });
+   */
+  openCropper(imageUrl, options = {}) {
+    if (!imageUrl) {
+      throw new Error("Limbo.openCropper: imageUrl es requerido");
+    }
+    const imageObject = {
+      url: imageUrl,
+      filename: options.filename || "image.jpg",
+      width: options.width || 1920,
+      height: options.height || 1080,
+      mime_type: options.mimeType || "image/jpeg",
+      id: options.assetId || `external-${Date.now()}`
+    };
+    const instance = this.create({
+      mode: "modal",
+      modeUI: "crop-only",
+      features: ["cropper"],
+      autoDestroy: true,
+      modal: {
+        title: options.title || "Recortar Imagen",
+        size: "xlarge"
+      },
+      cropper: {
+        mandatoryCrops: options.mandatoryCrops || [],
+        allowCustomCrops: options.allowCustomCrops !== false,
+        enforceRequiredCrops: options.enforceRequiredCrops !== false
+      },
+      callbacks: {
+        onCropperComplete: (data) => {
+          options.onComplete?.(data);
+          if (options.autoClose !== false) {
+            instance.close();
+          }
+        },
+        onCropperCancelled: (data) => {
+          options.onCancelled?.(data);
+          if (options.autoClose !== false) {
+            instance.close();
+          }
+        },
+        onCropperError: (error) => {
+          options.onError?.(error);
+        }
+      },
+      // Pasar imagen al componente
+      _externalImage: imageObject,
+      ...options
+    });
+    instance.open();
+    return instance;
+  }
+  /**
+   * 🖼️ Crear galería embebida en un contenedor
+   * Caso de uso: Galería permanente en una página
+   *
+   * @param {String|HTMLElement} container - Selector o elemento del contenedor
+   * @param {Object} options - Opciones de configuración
+   * @returns {Object} Instancia del componente
+   *
+   * @example
+   * Limbo.createInlineGallery('#gallery-container', {
+   *   onSelect: (image) => console.log('Seleccionada:', image)
+   * });
+   */
+  createInlineGallery(container, options = {}) {
+    return this.create({
+      container,
+      mode: "embed",
+      modeUI: "gallery-only",
+      features: ["gallery"],
+      callbacks: {
+        onSelect: options.onSelect,
+        onDelete: options.onDelete
+      },
+      ...options
+    });
+  }
+  /**
+   * 📤 Crear uploader embebido en un contenedor
+   * Caso de uso: Formulario de subida permanente
+   *
+   * @param {String|HTMLElement} container - Selector o elemento del contenedor
+   * @param {Object} options - Opciones de configuración
+   * @returns {Object} Instancia del componente
+   *
+   * @example
+   * Limbo.createInlineUploader('#upload-container', {
+   *   onUpload: (image) => console.log('Subida:', image)
+   * });
+   */
+  createInlineUploader(container, options = {}) {
+    return this.create({
+      container,
+      mode: "embed",
+      modeUI: "upload-only",
+      features: ["upload"],
+      callbacks: {
+        onUpload: options.onUpload
+      },
+      ...options
+    });
+  }
+  /**
+   * ✂️ Crear cropper embebido con imagen externa
+   * Caso de uso: Editor de recortes embebido en página
+   *
+   * @param {String|HTMLElement} container - Selector o elemento del contenedor
+   * @param {String} imageUrl - URL de la imagen a recortar
+   * @param {Object} options - Opciones de configuración
+   * @returns {Object} Instancia del componente
+   *
+   * @example
+   * Limbo.createStandaloneCropper('#cropper-container', 'https://example.com/image.jpg', {
+   *   mandatoryCrops: [{ label: 'Avatar', width: 200, height: 200, required: true }],
+   *   onComplete: (crops) => console.log('Recortes completados:', crops),
+   *   autoHideOnComplete: true
+   * });
+   */
+  createStandaloneCropper(container, imageUrl, options = {}) {
+    if (!container) {
+      throw new Error("Limbo.createStandaloneCropper: container es requerido");
+    }
+    if (!imageUrl) {
+      throw new Error("Limbo.createStandaloneCropper: imageUrl es requerido");
+    }
+    const imageObject = {
+      url: imageUrl,
+      filename: options.filename || "image.jpg",
+      width: options.width || 1920,
+      height: options.height || 1080,
+      mime_type: options.mimeType || "image/jpeg",
+      id: options.assetId || `external-${Date.now()}`
+    };
+    return this.create({
+      container,
+      mode: "embed",
+      modeUI: "crop-only",
+      features: ["cropper"],
+      autoHideOnComplete: options.autoHideOnComplete !== false,
+      cropper: {
+        mandatoryCrops: options.mandatoryCrops || [],
+        allowCustomCrops: options.allowCustomCrops !== false,
+        enforceRequiredCrops: options.enforceRequiredCrops !== false
+      },
+      callbacks: {
+        onCropperComplete: options.onComplete,
+        onCropperCancelled: options.onCancelled,
+        onCropperError: options.onError
+      },
+      // Pasar imagen al componente
+      _externalImage: imageObject,
+      ...options
+    });
+  }
+  /**
+   * 🎯 Crear selector completo (galería + uploader + cropper)
+   * Caso de uso: Selector completo con todas las funcionalidades
+   *
+   * @param {String|HTMLElement} container - Selector o elemento del contenedor
+   * @param {Object} options - Opciones de configuración
+   * @returns {Object} Instancia del componente
+   *
+   * @example
+   * Limbo.createFullSelector('#selector', {
+   *   onSelect: (image) => document.getElementById('preview').src = image.url,
+   *   onUpload: (image) => console.log('Nueva imagen:', image)
+   * });
+   */
+  createFullSelector(container, options = {}) {
+    return this.create({
+      container,
+      mode: options.mode || "embed",
+      modeUI: "full",
+      features: ["gallery", "upload", "cropper"],
+      callbacks: {
+        onSelect: options.onSelect,
+        onUpload: options.onUpload,
+        onDelete: options.onDelete,
+        onCropsSaved: options.onCropsSaved
+      },
+      ...options
+    });
+  }
 }
 const Limbo = new LimboCore();
 if (typeof window !== "undefined") {