limbo-component 1.6.6 → 1.6.7

package/dist/limbo.es.js

@@ -30628,6 +30628,8 @@ function adaptAssetsListFromV2(v2Response) {
       height: asset.height,
       upload_date: asset.upload_date || asset.created_at,
       processing_status: asset.processing_status || asset.status,
+      // Variantes
+      variants: asset.variants_count ? adaptVariantsFromV2(asset.variants) || adaptVariantsFromV2(asset.image_variants) || [] : [],
       // URL principal - handle multiple URL formats from different backend responses
       url: makeAbsoluteUrl(
         asset.master_url || asset.master?.url_signed || asset.urls?.original || asset.url
@@ -30681,6 +30683,23 @@ function adaptVariantsListFromV2(v2Response) {
   });
   return { result: legacyVariants };
 }
+function adaptVariantsFromV2(v2Variants) {
+  if (!Array.isArray(v2Variants)) {
+    return [];
+  }
+  return v2Variants.map((variant) => ({
+    id: variant.id,
+    name: variant.name,
+    width: variant.width,
+    height: variant.height,
+    format: variant.output_format,
+    file_size: variant.file_size,
+    crop_params: variant.crop_params,
+    url: makeAbsoluteUrl(variant.url),
+    expires_at: variant.expires_at,
+    created_at: variant.created_at
+  }));
+}
 function adaptUploadFromV2(v2Response) {
   if (!v2Response?.success || !v2Response?.data) {
     return { result: null };
@@ -31012,13 +31031,19 @@ function ImageVariantsModal({
     }
   };
   const handleDownloadVariant = (variant) => {
-    accessibilityManager?.announce(`Descargando variante ${variant.name}`);
-    const a = document.createElement("a");
-    a.href = variant.url;
-    a.download = `${image.filename}_${variant.name}.${variant.format}`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
+    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 handleViewVariant = (variant) => {
     accessibilityManager?.announce(
@@ -31042,15 +31067,20 @@ function ImageVariantsModal({
     }
   };
   const handleDownloadOriginal = () => {
-    accessibilityManager?.announce(
-      `Descargando imagen original ${image.filename}`
-    );
-    const a = document.createElement("a");
-    a.href = image.url;
-    a.download = image.filename;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
+    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 handleDeleteOriginal = async () => {
     if (!onDelete) return;
@@ -31277,7 +31307,7 @@ function ImageVariantsModal({
                             {
                               src: variant.url,
                               alt: variant.name || variant.filename || `Variante ${variant.id}`,
-                              loading: "lazy",
+                              loading: "eager",
                               onError: () => handleVariantImageError(variant.id),
                               style: {
                                 display: hasImageError ? "none" : "block"
@@ -31460,8 +31490,9 @@ function ImageCard({
     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 = image.filename || "imagen.jpg";
+      a.download = `${filename || "image"}.webp`;
       document.body.appendChild(a);
       a.click();
       setTimeout(() => {
@@ -31552,7 +31583,7 @@ function ImageCard({
         className: `limbo-image-card flex flex-col items-center cursor-pointer relative transition ${isDeleting ? "opacity-50" : ""} ${isMobile ? "limbo-image-card--mobile" : ""}`,
         onClick: handleImageClick,
         onKeyDown: handleKeyDown,
-        title: isMobile ? "Toque para ver imagen" : "Haga click en la imagen para ver preview en nueva pestaña (Enter/Space para abrir, D descargar, C copiar, Delete eliminar, X recortar)",
+        title: isMobile ? "Toque para ver imagen" : "Haga click en la imagen para ver preview en nueva pestaña",
         role: "button",
         tabIndex: 0,
         "aria-label": `Imagen ${image.filename}. ${image.width}x${image.height} px`,
@@ -31743,6 +31774,7 @@ function ImageCard({
             "img",
             {
               src: image.url || image.path,
+              loading: "eager",
               alt: image.filename,
               className: "w-full object-cover rounded aspect-square",
               sizes: `height: ${thumbnailSize * 6}px,width: ${thumbnailSize * 6}px`,
@@ -37015,13 +37047,16 @@ function CropperView({
   const { refs, state, transform, selection, utils } = cropper;
   const { canvasRef, imageRef, selectionRef } = refs;
   const { cropData, imageInfo, canExport, transformVersion } = state;
-  const effectiveImageInfo = useMemo(() => imageInfo || {
-    naturalWidth: image.width || 1920,
-    // Usar dimensiones de la imagen prop como fallback
-    naturalHeight: image.height || 1080,
-    currentWidth: image.width || 1920,
-    currentHeight: image.height || 1080
-  }, [imageInfo, image.width, image.height]);
+  const effectiveImageInfo = useMemo(
+    () => imageInfo || {
+      naturalWidth: image.width || 1920,
+      // Usar dimensiones de la imagen prop como fallback
+      naturalHeight: image.height || 1080,
+      currentWidth: image.width || 1920,
+      currentHeight: image.height || 1080
+    },
+    [imageInfo, image.width, image.height]
+  );
   const toggleGrid = useCallback(() => setShowGrid((v) => !v), []);
   const toggleShade = useCallback(() => setShade((v) => !v), []);
   const toggleTips = useCallback(() => setShowTips((v) => !v), []);
@@ -37133,15 +37168,21 @@ function CropperView({
     try {
       if (!cropData || !effectiveImageInfo) {
         console.error("❌ Datos faltantes:", { cropData, effectiveImageInfo });
-        throw new Error(`No hay datos de recorte disponibles. CropData: ${!!cropData}, ImageInfo: ${!!effectiveImageInfo}`);
+        throw new Error(
+          `No hay datos de recorte disponibles. CropData: ${!!cropData}, ImageInfo: ${!!effectiveImageInfo}`
+        );
       }
       if (!cropData.x && cropData.x !== 0 || !cropData.y && cropData.y !== 0 || !cropData.width || !cropData.height) {
         console.error("❌ CropData inválido:", cropData);
-        throw new Error("Los datos de recorte no tienen las propiedades esperadas");
+        throw new Error(
+          "Los datos de recorte no tienen las propiedades esperadas"
+        );
       }
       if (!effectiveImageInfo.naturalWidth || !effectiveImageInfo.naturalHeight) {
         console.error("❌ ImageInfo inválido:", effectiveImageInfo);
-        throw new Error("Los datos de imagen no tienen las dimensiones esperadas");
+        throw new Error(
+          "Los datos de imagen no tienen las dimensiones esperadas"
+        );
       }
       const { x, y, width, height } = cropData;
       const { naturalWidth, naturalHeight } = effectiveImageInfo;
@@ -37187,7 +37228,6 @@ function CropperView({
   }, [
     canExport,
     cropData,
-    imageInfo,
     effectiveImageInfo,
     image.filename,
     image.id,
@@ -38256,7 +38296,7 @@ function useImages(apiKey, prod = false, params = {}) {
       try {
         const data = await listAssets(params);
         if (!isMounted) return;
-        const result = data.result || [];
+        const result = data.result || data.data || [];
         const paginationData = data.pagination || null;
         setImages(result);
         setPagination(paginationData);
@@ -41890,7 +41930,7 @@ const Limbo = new LimboCore();
 if (typeof window !== "undefined") {
   window.Limbo = Limbo;
 }
-const PUBLIC_KEY = "pk_9fcfdd91a14755cc68d0e11a14269554";
+const PUBLIC_KEY = "pk_e464fd744106b7a8d63d453c4bd02582";
 if (typeof window !== "undefined" && document.querySelector("#root")) {
   Limbo.configure({
     prod: false,