limbo-component 1.9.1 → 2.0.0

package/dist/limbo.es.js

@@ -14322,13 +14322,257 @@ function Gallery({
     )
   ] });
 }
+function ImagePreview({
+  image,
+  onDiscard,
+  onRetry,
+  onDownload,
+  onSelect,
+  showRetry = false,
+  disabled = false
+}) {
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [imageInfo, setImageInfo] = useState({
+    name: "",
+    size: "",
+    type: ""
+  });
+  const [showLightbox, setShowLightbox] = useState(false);
+  const handleEditName = (e) => {
+    const newName = e.target.value;
+    const originalName = imageInfo.name;
+    const lastDotIndex = originalName.lastIndexOf(".");
+    const extension = lastDotIndex !== -1 ? originalName.substring(lastDotIndex) : ".webp";
+    setImageInfo((prev) => ({
+      ...prev,
+      name: newName + extension
+    }));
+  };
+  useEffect(() => {
+    if (!image) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(image);
+    setPreviewUrl(url);
+    setImageInfo({
+      name: image.name || "imagen.webp",
+      size: formatFileSize(image.size || 0),
+      type: image.type || "image/webp"
+    });
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [image]);
+  useEffect(() => {
+    if (!showLightbox) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") {
+        setShowLightbox(false);
+      }
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [showLightbox]);
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  };
+  const handleDownload = () => {
+    if (!previewUrl || disabled) return;
+    const link = document.createElement("a");
+    link.href = previewUrl;
+    link.download = imageInfo.name;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    if (onDownload) onDownload();
+  };
+  if (!image || !previewUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-fit md:w-full bg-white border border-gray-200 rounded-lg px-1 sm:px-3 py-2 m-0 shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-700", children: "Vista previa de imagen" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onDiscard,
+          disabled,
+          className: "p-1.5 text-gray-400 cursor-pointer hover:text-gray-600 hover:bg-red-300 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          "aria-label": "Descartar imagen",
+          title: "Descartar imagen",
+          children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small icon--md" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center md:flex-row gap-2 md:gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 md:flex-[0.4] flex flex-col items-center justify-center", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative w-full max-w-md aspect-video bg-gray-100 rounded-lg overflow-hidden cursor-zoom-in hover:ring-2 hover:ring-brand-blue-800 transition-all",
+            onClick: () => setShowLightbox(true),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setShowLightbox(true);
+              }
+            },
+            "aria-label": "Click para ver imagen en tamaño completo",
+            title: "Click para ver en tamaño completo",
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: previewUrl,
+                  alt: "Vista previa",
+                  className: "absolute inset-0 w-full h-full object-contain"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-xs flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--xs" }),
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Ampliar" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 text-center space-y-1 w-full", children: /* @__PURE__ */ jsxs("div", { className: "rounded-sm w-fit gap-0.5 p-0.5 min-w-fit mx-auto", children: [
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: "uploadImageId",
+              className: "flex items-center w-fit",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "rounded-full bg-brand-blue-1000 min-w-6 min-h-6 flex items-center align-middle content-center justify-center me-1", children: /* @__PURE__ */ jsx("span", { className: "icon icon-edit-white icon--sm" }) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: "uploadImageId",
+                    onChange: (e) => handleEditName(e),
+                    className: "w-fit px-1 text-sm font-medium text-gray-800 border border-gray-300 rounded truncate focus:outline focus:outline-neutral-gray-100 focus:transform-none focus:shadow-none focus:opacity-100",
+                    defaultValue: imageInfo.name.split(".")[0],
+                    title: "Renombra la imagen a tu gusto"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 text-xs text-gray-500", children: [
+            /* @__PURE__ */ jsx("span", { children: imageInfo.size }),
+            /* @__PURE__ */ jsx("span", { children: "•" }),
+            /* @__PURE__ */ jsx("span", { children: imageInfo.type.split("/")[1]?.toUpperCase() || "IMAGE" })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row md:flex-col gap-2 justify-items-stretch justify-center md:justify-start items-stretch md:min-w-[140px]", children: [
+        showRetry && onRetry && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            disabled,
+            className: "flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 cursor-pointer hover:border-gray-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium",
+            "aria-label": "Intentarlo de nuevo",
+            title: "Generar de nuevo con el mismo prompt",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-refresh icon--sm" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Reintentar" }),
+              /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "Retry" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleDownload,
+            disabled,
+            className: "flex-1 cursor-pointer md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium",
+            "aria-label": "Descargar imagen",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-download icon--sm" }),
+              /* @__PURE__ */ jsx("span", { children: "Descargar" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect && onSelect(imageInfo.name),
+            disabled,
+            className: "flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-brand-blue-800 border border-brand-blue-800 text-white rounded-lg hover:bg-brand-blue-1000 cursor-pointer hover:border-brand-blue-1000 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium shadow-sm",
+            "aria-label": "Seleccionar imagen para recortar",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-tick-white icon--sm" }),
+              /* @__PURE__ */ jsx("span", { children: "Seleccionar" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    showLightbox && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/90 z-[10000] flex items-center justify-center p-4",
+        onClick: () => setShowLightbox(false),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Vista de imagen en tamaño completo",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setShowLightbox(false),
+              className: "absolute top-4 right-4 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors cursor-pointer z-10",
+              "aria-label": "Cerrar vista ampliada",
+              title: "Cerrar (Esc)",
+              children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--lg" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-4 left-4 bg-black/50 text-white px-4 py-2 rounded-lg text-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: imageInfo.name }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-300 mt-1", children: [
+              imageInfo.size,
+              " • ",
+              imageInfo.type.split("/")[1]?.toUpperCase()
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "relative max-w-7xl max-h-[90vh] w-full h-full flex items-center justify-center",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: previewUrl,
+                  alt: "Vista completa",
+                  className: "max-w-full max-h-full object-contain rounded-lg shadow-2xl"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 text-white px-4 py-2 rounded-lg text-xs text-center", children: "Click fuera de la imagen o presiona ESC para cerrar" })
+        ]
+      }
+    )
+  ] });
+}
 function TabUpload({
   file,
   setFile,
   previewUrl,
   setPreviewUrl,
   fileInputRef,
-  onUpload,
+  onSelect,
   disabled
 }) {
   const handleFileChange = (e) => {
@@ -14341,36 +14585,32 @@ function TabUpload({
       setPreviewUrl(null);
     }
   };
-  const handleClearFile = () => {
-    const confirmClear = window.confirm(
-      "¿Estás seguro de que deseas descartar la imagen seleccionada?"
-    );
-    if (!confirmClear) return;
+  const handleDiscard = () => {
     setFile(null);
     setPreviewUrl(null);
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (file && !disabled) {
-      onUpload(file);
-      setFile(null);
-      setPreviewUrl(null);
-      if (fileInputRef.current) fileInputRef.current.value = "";
+  const handleSelect = (editedName) => {
+    if (file && !disabled && onSelect) {
+      if (editedName && editedName !== file.name) {
+        const newFile = new File([file], editedName, { type: file.type });
+        onSelect(newFile);
+      } else {
+        onSelect(file);
+      }
     }
   };
   return /* @__PURE__ */ jsxs(
-    "form",
+    "div",
     {
-      onSubmit: handleSubmit,
       className: "flex flex-col items-center gap-6",
       "aria-label": "Subir imagen desde dispositivo",
       children: [
-        !previewUrl && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs(
           "label",
           {
             htmlFor: "file-input",
-            className: "w-full flex flex-col items-center justify-center border-2 border-dashed border-brand-blue-200 rounded-xl p-8 cursor-pointer hover:border-brand-blue-1000 hover:to-bright-blue-200 hover:from-brand-blue-050 focus-within:border-brand-blue-800 from-bright-blue-050 to-brand-blue-050 bg-linear-to-br transition",
+            className: "w-fit md:w-full flex flex-col items-center justify-center border-2 border-dashed border-brand-blue-200 rounded-xl p-8 cursor-pointer hover:border-brand-blue-1000 hover:to-bright-blue-200 hover:from-brand-blue-050 focus-within:border-brand-blue-800 from-bright-blue-050 to-brand-blue-050 bg-linear-to-br transition",
             tabIndex: 0,
             style: { outline: "none" },
             children: [
@@ -14393,71 +14633,16 @@ function TabUpload({
             ]
           }
         ),
-        previewUrl && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative w-fit", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: previewUrl,
-                alt: file?.name || "Previsualización",
-                className: "rounded-lg max-h-64 object-contain bg-white w-fit mx-auto",
-                style: { maxWidth: "100%" }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleClearFile,
-                disabled,
-                className: "absolute cursor-pointer top-2 right-2 bg-red-600 hover:bg-red-700 text-white rounded-full p-2 shadow-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed",
-                title: "Descartar imagen",
-                "aria-label": "Descartar imagen seleccionada",
-                children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--md m-0 p-0" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-neutral-800 bg-brand-blue-050 p-3 rounded-lg w-full", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2 text-center", children: [
-            /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Archivo:" }),
-              " ",
-              file?.name
-            ] }),
-            /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Tamaño:" }),
-              " ",
-              file ? (file.size / 1024 / 1024).toFixed(2) : "--",
-              " MB"
-            ] }),
-            /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Tipo:" }),
-              " ",
-              file?.type
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "submit",
-              disabled: !file || disabled,
-              title: !file ? "Proporcione una imagen antes de continuar" : "Subir imagen a la galeria",
-              className: `limbo-btn w-full ${!file ? "cursor-not-allowed limbo-btn-disabled" : "limbo-btn-primary"}`,
-              style: { minHeight: 44 },
-              children: disabled ? "Subiendo..." : "Subir imagen"
-            }
-          )
-        ] }),
-        previewUrl && /* @__PURE__ */ jsx(
-          "input",
+        file && /* @__PURE__ */ jsx(
+          ImagePreview,
           {
-            id: "file-input",
-            ref: fileInputRef,
-            type: "file",
-            accept: "image/jpeg,image/png,image/svg,image/webp,image/gif",
-            onChange: handleFileChange,
-            disabled,
-            className: "sr-only",
-            "aria-label": "Seleccionar imagen"
+            image: file,
+            onDiscard: handleDiscard,
+            onDownload: () => {
+            },
+            onSelect: handleSelect,
+            showRetry: false,
+            disabled
           }
         )
       ]
@@ -14600,16 +14785,23 @@ function LoadingOverlay({
     }
   );
 }
-function TabAI({ prod, disabled, onGenerated }) {
+function TabAI({ prod, disabled, onSelect, onServiceChange }) {
   const aiServicesHook = useAiServices(prod);
   const imageParamsHook = useImageParams(prod);
+  const [lastPrompt, setLastPrompt] = useState("");
   const [selectedService, setSelectedService] = useState("");
   const [dynamicForm, setDynamicForm] = useState({});
   const [aiLoading, setAiLoading] = useState(false);
   const [aiError, setAiError] = useState(null);
   const [aiImage, setAiImage] = useState(null);
+  const [generatedFile, setGeneratedFile] = useState(null);
   const [showServiceSelection, setShowServiceSelection] = useState(true);
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+  React.useEffect(() => {
+    if (onServiceChange && selectedService) {
+      onServiceChange(selectedService);
+    }
+  }, [selectedService]);
   React.useEffect(() => {
     if (!aiServicesHook.loading && aiServicesHook.services.length === 1) {
       const service = aiServicesHook.services[0];
@@ -14633,12 +14825,17 @@ function TabAI({ prod, disabled, onGenerated }) {
     const { name, value } = e.target;
     setDynamicForm((prev) => ({ ...prev, [name]: value }));
   };
-  const handleDynamicFormSubmit = async (e) => {
+  const handleDynamicFormSubmit = async (e, retry = false) => {
     e.preventDefault();
     setAiLoading(true);
     setAiError(null);
     setAiImage(null);
     try {
+      if (retry) {
+        dynamicForm.prompt = lastPrompt;
+      } else {
+        setLastPrompt(dynamicForm.prompt || "");
+      }
       const response = await generateAiImage(dynamicForm, prod);
       let imageData = null;
       if (response?.data?.images && Array.isArray(response.data.images) && response.data.images.length > 0) {
@@ -14650,7 +14847,7 @@ function TabAI({ prod, disabled, onGenerated }) {
       } else if (typeof response === "string") {
         imageData = response;
       }
-      if (imageData && onGenerated) {
+      if (imageData) {
         if (imageData.startsWith("http")) {
           try {
             const apiBaseUrl = window.limboCore?.config?.getGlobal()?.prod ? "https://limbo.lefebvre.com" : "http://localhost";
@@ -14669,10 +14866,10 @@ function TabAI({ prod, disabled, onGenerated }) {
               );
             }
             const blob = await imageResponse.blob();
-            const file = new File([blob], "ai-image.png", {
-              type: blob.type || "image/png"
+            const file = new File([blob], "ai-image.webp", {
+              type: blob.type || "image/webp"
             });
-            onGenerated(file);
+            setGeneratedFile(file);
           } catch (downloadError) {
             throw new Error(
               `Error downloading image via proxy: ${downloadError.message}`
@@ -14689,7 +14886,7 @@ function TabAI({ prod, disabled, onGenerated }) {
           const file = new File([byteArray], "ai-image.webp", {
             type: "image/webp"
           });
-          onGenerated(file);
+          setGeneratedFile(file);
         }
       } else {
         throw new Error("No se pudo extraer la imagen de la respuesta");
@@ -14704,7 +14901,9 @@ function TabAI({ prod, disabled, onGenerated }) {
   const renderDynamicForm = () => {
     const params = imageParamsHook.params?.[selectedService]?.parameters;
     if (!params) return null;
-    const allFields = Object.entries(params).filter(([_, config]) => !config.hidden);
+    const allFields = Object.entries(params).filter(
+      ([_, config]) => !config.hidden
+    );
     const promptFields = allFields.filter(
       ([key]) => key.toLowerCase().includes("prompt") || key.toLowerCase().includes("query")
     );
@@ -14792,7 +14991,7 @@ function TabAI({ prod, disabled, onGenerated }) {
         )
       ] }, key);
     };
-    return /* @__PURE__ */ jsxs("div", { children: [
+    return /* @__PURE__ */ jsxs("div", { className: "h-fit w-full", children: [
       aiServicesHook.services.length > 1 && /* @__PURE__ */ jsxs(
         "button",
         {
@@ -14803,6 +15002,7 @@ function TabAI({ prod, disabled, onGenerated }) {
             setDynamicForm({});
             setAiImage(null);
             setAiError(null);
+            setGeneratedFile(null);
           },
           className: "flex cursor-pointer items-center gap-2 text-brand-blue-600 hover:text-brand-blue-700 mb-4 font-medium",
           children: [
@@ -14856,17 +15056,19 @@ function TabAI({ prod, disabled, onGenerated }) {
                     ]
                   }
                 ),
-                showAdvancedOptions && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 animate-fadeIn", children: advancedFields.map(([key, config]) => renderField(key, config)) })
+                showAdvancedOptions && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 animate-fadeIn", children: advancedFields.map(
+                  ([key, config]) => renderField(key, config)
+                ) })
               ] }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "submit",
                   disabled: aiLoading || disabled,
-                  title: aiLoading ? "Generando imagen..." : "Generar imagen",
+                  title: aiLoading ? "Generando imagen..." : generatedFile ? "Generar otra imagen" : "Generar imagen",
                   className: `limbo-btn w-full mt-2 ${aiLoading ? "cursor-not-allowed limbo-btn-disabled" : "limbo-btn-primary"}`,
                   style: { minHeight: 44 },
-                  children: aiLoading ? "Generando..." : "Generar imagen"
+                  children: aiLoading ? "Generando imagen..." : generatedFile ? "Generar otra imagen" : "Generar imagen"
                 }
               )
             ]
@@ -14891,12 +15093,12 @@ function TabAI({ prod, disabled, onGenerated }) {
   if (!aiServicesHook.services.length) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay servicios IA disponibles." });
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "h3",
       {
         id: "aiSelectDescription",
-        className: "text-lg font-semibold text-brand-blue-1000 mb-3",
+        className: "text-2xl font-semibold text-brand-blue-1000",
         children: "Selecciona el modelo IA"
       }
     ),
@@ -14911,6 +15113,7 @@ function TabAI({ prod, disabled, onGenerated }) {
           setDynamicForm({});
           setAiImage(null);
           setAiError(null);
+          setGeneratedFile(null);
           imageParamsHook.fetchParams(service.slug, true);
         },
         disabled: aiServicesHook.loading || disabled,
@@ -14936,7 +15139,7 @@ function TabAI({ prod, disabled, onGenerated }) {
           ),
           /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center justify-center gap-2 text-center", children: [
             /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-800", children: service.label }),
-            service.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 line-clamp-2", children: service.description })
+            service.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-neutral-gray-800 line-clamp-2 drop-shadow drop-shadow-neutral-white-000", children: service.description })
           ] })
         ]
       },
@@ -14945,22 +15148,38 @@ function TabAI({ prod, disabled, onGenerated }) {
   ] }) : (
     /* Vista del formulario del servicio seleccionado */
     /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000 mb-3", children: aiServicesHook.services.find((s) => s.slug === selectedService)?.label || "Generación IA" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold text-brand-blue-1000", children: aiServicesHook.services.find((s) => s.slug === selectedService)?.label || "Generación IA" }),
       imageParamsHook.loading && /* @__PURE__ */ jsx("div", { children: "Cargando parámetros..." }),
       imageParamsHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: imageParamsHook.error }),
       selectedService && renderDynamicForm(),
-      aiError && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: aiError }),
-      aiImage && aiImage.map((img, index) => /* @__PURE__ */ jsxs("div", { className: "mt-6 text-center", children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: img.contains("http") ? img : `data:image/png;base64, ${img}`,
-            alt: "Imagen generada con IA",
-            className: "rounded-lg shadow-md border border-brand-blue-200 max-h-72 mx-auto"
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { className: "limbo-btn limbo-btn-primary mt-4", children: "Aceptar y subir" })
-      ] }, "img-" + index))
+      aiError && /* @__PURE__ */ jsx("div", { className: "alert alert-danger mt-4", children: aiError }),
+      generatedFile && /* @__PURE__ */ jsx("div", { className: "mt-6 md:w-full mx-auto", children: /* @__PURE__ */ jsx(
+        ImagePreview,
+        {
+          image: generatedFile,
+          onDiscard: () => {
+            setGeneratedFile(null);
+            setAiImage(null);
+            setAiError(null);
+          },
+          onRetry: (e) => handleDynamicFormSubmit(e, true),
+          onDownload: () => {
+          },
+          onSelect: (editedName) => {
+            if (onSelect) {
+              const fileToSelect = generatedFile || aiImage;
+              if (editedName && fileToSelect && editedName !== fileToSelect.name) {
+                const newFile = new File([fileToSelect], editedName, { type: fileToSelect.type });
+                onSelect(newFile);
+              } else {
+                onSelect(fileToSelect);
+              }
+            }
+          },
+          showRetry: true,
+          disabled: aiLoading || disabled
+        }
+      ) })
     ] })
   ) });
 }
@@ -15033,7 +15252,7 @@ function useStockServices(prod = false) {
   };
   return { services, loading, error, invalidateCache };
 }
-function TabStock({ prod, disabled, onSelected }) {
+function TabStock({ prod, disabled, onSelect, onServiceChange }) {
   const lastSearchPayloadRef = React.useRef(null);
   const stockServicesHook = useStockServices(prod);
   const loadSavedState = (key, defaultValue) => {
@@ -15059,12 +15278,14 @@ function TabStock({ prod, disabled, onSelected }) {
   const [paginationInfo, setPaginationInfo] = useState(
     () => loadSavedState("paginationInfo", null)
   );
+  const [lastQuery, setLastQuery] = useState(null);
   const imageParamsHook = useImageParams(prod);
   const [stockLoading, setStockLoading] = useState(false);
   const [stockError, setStockError] = useState(null);
   const [downloadingId, setDownloadingId] = useState(null);
   const [showServiceSelection, setShowServiceSelection] = useState(true);
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+  const [selectedFile, setSelectedFile] = useState(null);
   React.useEffect(() => {
     sessionStorage.setItem(
       "limbo_stock_selectedService",
@@ -15114,6 +15335,11 @@ function TabStock({ prod, disabled, onSelected }) {
       setDynamicForm(initialValues);
     }
   }, [selectedService, imageParamsHook.params]);
+  React.useEffect(() => {
+    if (onServiceChange && selectedService) {
+      onServiceChange(selectedService);
+    }
+  }, [selectedService]);
   const handleDynamicFormChange = (e) => {
     const { name, value } = e.target;
     setDynamicForm((prev) => ({ ...prev, [name]: value }));
@@ -15184,6 +15410,7 @@ function TabStock({ prod, disabled, onSelected }) {
       setStockError("La búsqueda debe tener al menos 5 caracteres");
       return;
     }
+    setLastQuery(query);
     await performSearch(1);
   };
   const handlePageChange = (newPage) => {
@@ -15207,7 +15434,7 @@ function TabStock({ prod, disabled, onSelected }) {
         const file = new File([blob], filename, {
           type: blob.type || "image/jpeg"
         });
-        if (onSelected) onSelected(file);
+        setSelectedFile(file);
       } else {
         throw new Error("No se pudo obtener la URL de descarga");
       }
@@ -15434,8 +15661,8 @@ function TabStock({ prod, disabled, onSelected }) {
   if (!stockServicesHook.services.length) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay servicios de Stock disponibles." });
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000 mb-3", children: "Selecciona el servicio de Stock" }),
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold text-brand-blue-1000", children: "Selecciona el servicio de Stock" }),
     stockServicesHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: stockServicesHook.error }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3", children: stockServicesHook.services.map((service) => /* @__PURE__ */ jsxs(
       "button",
@@ -15483,12 +15710,36 @@ function TabStock({ prod, disabled, onSelected }) {
   ] }) : (
     /* Vista del formulario del servicio seleccionado */
     /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000 mb-3", children: stockServicesHook.services.find((s) => s.slug === selectedService)?.label || "Búsqueda Stock" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold text-brand-blue-1000", children: stockServicesHook.services.find((s) => s.slug === selectedService)?.label || "Búsqueda Stock" }),
       imageParamsHook.loading && /* @__PURE__ */ jsx("div", { children: "Cargando parámetros..." }),
       imageParamsHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: imageParamsHook.error }),
       selectedService && renderDynamicForm(),
-      stockError && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: stockError }),
-      stockImages.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      stockError && /* @__PURE__ */ jsx("div", { className: "alert alert-danger mt-4", children: stockError }),
+      selectedFile && /* @__PURE__ */ jsx("div", { className: "mt-6 md:w-full mx-auto", children: /* @__PURE__ */ jsx(
+        ImagePreview,
+        {
+          image: selectedFile,
+          onDiscard: () => {
+            setSelectedFile(null);
+            setStockError(null);
+          },
+          onDownload: () => {
+          },
+          onSelect: (editedName) => {
+            if (onSelect) {
+              if (editedName && selectedFile && editedName !== selectedFile.name) {
+                const newFile = new File([selectedFile], editedName, { type: selectedFile.type });
+                onSelect(newFile);
+              } else {
+                onSelect(selectedFile);
+              }
+            }
+          },
+          showRetry: false,
+          disabled
+        }
+      ) }),
+      !selectedFile && stockImages.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -15524,7 +15775,19 @@ function TabStock({ prod, disabled, onSelected }) {
                         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-4 border-brand-blue-600 rounded-full border-t-transparent animate-spin" })
                       ] }),
                       /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-brand-blue-900", children: "Descargando..." })
-                    ] }) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-brand-blue-800/0 group-hover:bg-brand-blue-800/50 transition-colors duration-200 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-round-check-filled icon--2xl max-w-full max-h-full opacity-0 group-hover:opacity-100 transition-opacity duration-200" }) })
+                    ] }) : /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-brand-blue-800/0 group-hover:bg-brand-blue-800/50 transition-colors duration-200 flex items-center justify-center flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "icon icon-round-check-filled icon--2xl max-w-full max-h-full opacity-0 group-hover:opacity-100 transition-opacity duration-200" }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            textShadow: "1px 0 #0d542b, -1px 0 #0d542b, 0 1px #0d542b, 0 -0.5px #0d542b, 0.5px 0.5px #0d542b, -1px -1px #0d542b, 1px -1px #0d542b, -1px 1px #0d542b"
+                          },
+                          className: "max-w-full max-h-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-neutral-white-000",
+                          children: "Seleccionar"
+                        }
+                      )
+                    ] })
                   ] })
                 },
                 img.id || idx
@@ -15580,7 +15843,7 @@ function TabStock({ prod, disabled, onSelected }) {
           )
         ] })
       ] }),
-      !stockLoading && stockImages.length === 0 && selectedService && dynamicForm.query && /* @__PURE__ */ jsxs("div", { className: "mt-6 text-center text-neutral-600 py-8 bg-neutral-50 rounded-lg", children: [
+      !stockLoading && stockImages.length === 0 && selectedService && lastQuery && /* @__PURE__ */ jsxs("div", { className: "mt-6 text-center text-neutral-600 py-8 bg-neutral-50 rounded-lg", children: [
         /* @__PURE__ */ jsx("span", { className: "icon icon-search icon--lg mb-2" }),
         /* @__PURE__ */ jsxs("p", { children: [
           'No se encontraron imágenes para "',
@@ -15676,7 +15939,7 @@ const ValidatedImage = ({ src, alt, className, onError }) => {
     }
   );
 };
-function TabPortals({ prod, disabled, onSelected }) {
+function TabPortals({ prod, disabled, onSelect }) {
   const lastSearchPayloadRef = React.useRef(null);
   const portalSourcesHook = usePortalSources(prod);
   const loadSavedState = (key, defaultValue) => {
@@ -15707,6 +15970,7 @@ function TabPortals({ prod, disabled, onSelected }) {
     () => loadSavedState("paginationInfo", null)
   );
   const [downloadingUrl, setDownloadingUrl] = useState(null);
+  const [selectedFile, setSelectedFile] = useState(null);
   const searchCacheRef = useRef({});
   const [failedImages, setFailedImages] = useState(/* @__PURE__ */ new Set());
   React.useEffect(() => {
@@ -15882,7 +16146,7 @@ function TabPortals({ prod, disabled, onSelected }) {
       const file = new File([blob], filename, {
         type: blob.type || "image/jpeg"
       });
-      if (onSelected) onSelected(file);
+      setSelectedFile(file);
     } catch (err) {
       setError(err.message || "No se pudo recuperar la imagen del portal");
     } finally {
@@ -15898,7 +16162,7 @@ function TabPortals({ prod, disabled, onSelected }) {
   if (!portalSourcesHook.sources.length) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay portales externos disponibles." });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000", children: "Buscar en Portales Externos" }),
     /* @__PURE__ */ jsxs(
       "form",
@@ -15932,33 +16196,20 @@ function TabPortals({ prod, disabled, onSelected }) {
                   onClick: () => handlePortalToggle(portal.id),
                   disabled,
                   className: `
-                    relative p-4 rounded-lg border-2 transition-all duration-200
-                    flex flex-col items-center justify-center min-h-[100px] gap-2
-                    ${isSelected ? "border-brand-blue-600 bg-brand-blue-50" : "border-gray-200 bg-white hover:border-brand-blue-300"}
+                    relative p-4 rounded-lg border-2 transition-all duration-200 flex flex-col items-center justify-center min-h-[100px] gap-2 max-h-[110px] box-border ${isSelected ? "border-brand-blue-600 bg-brand-blue-50" : "border-gray-200 bg-white hover:border-brand-blue-300"}
                     ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
                     hover:shadow-md
                   `,
                   children: [
-                    isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 w-6 h-6 bg-brand-blue-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-round-check-filled" }) }),
+                    isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 w-6 h-6 bg-brand-blue-600 rounded-full flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx("span", { className: "icon icon-tick-white icon--sm" }) }),
                     /* @__PURE__ */ jsx(
-                      "svg",
+                      "img",
                       {
-                        className: `w-8 h-8 ${isSelected ? "text-brand-blue-600" : "text-gray-400"}`,
-                        fill: "none",
-                        stroke: "currentColor",
-                        viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ jsx(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: 2,
-                            d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                          }
-                        )
+                        className: "object-auto bg-no-repeat bg-center max-w-9/12 max-h-9/12",
+                        src: portal.image,
+                        alt: portal.title
                       }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: `text-sm font-medium text-center ${isSelected ? "text-brand-blue-900" : "text-gray-700"}`, children: portal.title })
+                    )
                   ]
                 },
                 portal.id
@@ -15987,7 +16238,7 @@ function TabPortals({ prod, disabled, onSelected }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-col gap-1 hidden", children: [
             /* @__PURE__ */ jsx(
               "label",
               {
@@ -16000,7 +16251,7 @@ function TabPortals({ prod, disabled, onSelected }) {
               "select",
               {
                 id: "portal-limit",
-                value: limit,
+                value: 10,
                 onChange: (e) => setLimit(Number(e.target.value)),
                 className: "limbo-input",
                 disabled,
@@ -16035,7 +16286,14 @@ function TabPortals({ prod, disabled, onSelected }) {
         {
           className: `flex items-center justify-between p-2 rounded ${result.status === 200 ? "bg-green-50" : "bg-red-50"}`,
           children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: result.title }),
+            result.image ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: result.image,
+                alt: result.title,
+                className: "w-10 h-10 object-cover rounded"
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "font-medium", children: result.title }),
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -16048,20 +16306,38 @@ function TabPortals({ prod, disabled, onSelected }) {
         portalId
       )) })
     ] }),
-    (images.length > 0 || loading) && /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectedFile && /* @__PURE__ */ jsx("div", { className: "mt-6 md:w-full mx-auto", children: /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        image: selectedFile,
+        onDiscard: () => {
+          setSelectedFile(null);
+          setError(null);
+        },
+        onDownload: () => {
+        },
+        onSelect: (editedName) => {
+          if (onSelect) {
+            if (editedName && selectedFile && editedName !== selectedFile.name) {
+              const newFile = new File([selectedFile], editedName, { type: selectedFile.type });
+              onSelect(newFile);
+            } else {
+              onSelect(selectedFile);
+            }
+          }
+        },
+        showRetry: false,
+        disabled
+      }
+    ) }),
+    !selectedFile && (images.length > 0 || loading) && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "mt-6 relative", "aria-live": "polite", children: [
         loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/80 z-10 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
           /* @__PURE__ */ jsx("span", { className: "limbo-loader" }),
           /* @__PURE__ */ jsx("span", { className: "text-sm text-brand-blue-800", children: "Buscando imágenes..." })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2", children: [
-          /* @__PURE__ */ jsx(
-            LoadingOverlay,
-            {
-              show: loading,
-              message: "Cargando imágenes..."
-            }
-          ),
+          /* @__PURE__ */ jsx(LoadingOverlay, { show: loading, message: "Cargando imágenes..." }),
           images.map((img, idx) => {
             const imageKey = `${img.source}-${img.id || idx}`;
             const imageUrl = img.preview || img.thumbnail || img.url || img.full;
@@ -16188,7 +16464,11 @@ const TABS = [
   { id: "portals", label: "Otros portales" }
 ];
 function UploadForm({
-  onUpload,
+  onSelect,
+  onSubTabChange = null,
+  // Callback para notificar cambio de sub-tab a App.jsx
+  onServiceChange = null,
+  // Callback para notificar cambio de servicio (modelo IA/Stock)
   disabled = false,
   apiKey,
   prod = false
@@ -16197,6 +16477,16 @@ function UploadForm({
   const [file, setFile] = useState(null);
   const [previewUrl, setPreviewUrl] = useState(null);
   const fileInputRef = useRef();
+  React.useEffect(() => {
+    if (onSubTabChange) {
+      onSubTabChange(activeTab);
+    }
+  }, [activeTab, onSubTabChange]);
+  const handleServiceChange = (serviceSlug) => {
+    if (onServiceChange && serviceSlug) {
+      onServiceChange(activeTab, serviceSlug);
+    }
+  };
   const handleTabKeyDown = (event, tabId) => {
     const currentIndex = TABS.findIndex((tab) => tab.id === tabId);
     let nextIndex = currentIndex;
@@ -16229,7 +16519,9 @@ function UploadForm({
     if (nextTab) {
       setActiveTab(nextTab.id);
       setTimeout(() => {
-        const tabButton = document.querySelector(`[data-upload-tab-id="${nextTab.id}"]`);
+        const tabButton = document.querySelector(
+          `[data-upload-tab-id="${nextTab.id}"]`
+        );
         if (tabButton) {
           tabButton.focus();
         }
@@ -16240,7 +16532,7 @@ function UploadForm({
     /* @__PURE__ */ jsx("div", { className: "limbo-tabs-container", children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: "limbo-tabs mb-6 min-w-fit",
+        className: "limbo-tabs mb-1 min-w-fit",
         role: "tablist",
         "aria-label": "Opciones de subida de imagen",
         children: TABS.map((tab) => /* @__PURE__ */ jsx(
@@ -16263,59 +16555,58 @@ function UploadForm({
         ))
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "limbo-tab-content", role: "tabpanel", id: `upload-tabpanel-${activeTab}`, "aria-labelledby": `upload-tab-${activeTab}`, children: [
-      activeTab === "upload" && /* @__PURE__ */ jsx(
-        TabUpload,
-        {
-          file,
-          setFile,
-          previewUrl,
-          setPreviewUrl,
-          fileInputRef,
-          onUpload,
-          disabled
-        }
-      ),
-      activeTab === "ai" && /* @__PURE__ */ jsx(
-        TabAI,
-        {
-          apiKey,
-          prod,
-          disabled,
-          onGenerated: (file2) => {
-            setActiveTab("upload");
-            setFile(file2);
-            setPreviewUrl(URL.createObjectURL(file2));
-          }
-        }
-      ),
-      activeTab === "stock" && /* @__PURE__ */ jsx(
-        TabStock,
-        {
-          apiKey,
-          prod,
-          disabled,
-          onSelected: (file2) => {
-            setActiveTab("upload");
-            setFile(file2);
-            setPreviewUrl(URL.createObjectURL(file2));
-          }
-        }
-      ),
-      activeTab === "portals" && /* @__PURE__ */ jsx(
-        TabPortals,
-        {
-          apiKey,
-          prod,
-          disabled,
-          onSelected: (file2) => {
-            setActiveTab("upload");
-            setFile(file2);
-            setPreviewUrl(URL.createObjectURL(file2));
-          }
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "limbo-tab-content px-2 py-2",
+        role: "tabpanel",
+        id: `upload-tabpanel-${activeTab}`,
+        "aria-labelledby": `upload-tab-${activeTab}`,
+        children: [
+          activeTab === "upload" && /* @__PURE__ */ jsx(
+            TabUpload,
+            {
+              file,
+              setFile,
+              previewUrl,
+              setPreviewUrl,
+              fileInputRef,
+              onSelect,
+              disabled
+            }
+          ),
+          activeTab === "ai" && /* @__PURE__ */ jsx(
+            TabAI,
+            {
+              apiKey,
+              prod,
+              disabled,
+              onSelect,
+              onServiceChange: handleServiceChange
+            }
+          ),
+          activeTab === "stock" && /* @__PURE__ */ jsx(
+            TabStock,
+            {
+              apiKey,
+              prod,
+              disabled,
+              onSelect,
+              onServiceChange: handleServiceChange
+            }
+          ),
+          activeTab === "portals" && /* @__PURE__ */ jsx(
+            TabPortals,
+            {
+              apiKey,
+              prod,
+              disabled,
+              onSelect
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 const IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined";
@@ -19739,14 +20030,22 @@ function CropperView({
   onError = null,
   // Callback para manejar errores
   deleting = false,
-  onVariantCreated = null
+  onVariantCreated = null,
   // Callback cuando se crea una variante
+  onUpload = null,
+  // Callback para subir imagen nueva (cuando image.file existe)
+  uploading = false
+  // Estado de carga del upload
 }) {
   const [showPreview, setShowPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState(null);
   const [previewLoading, setPreviewLoading] = useState(false);
   const [showGrid, setShowGrid] = useState(true);
   const [shade, setShade] = useState(true);
+  const [previewPosition, setPreviewPosition] = useState({ x: 20, y: 100 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [showPreviewLightbox, setShowPreviewLightbox] = useState(false);
   const [initialLoading, setInitialLoading] = useState(true);
   const [cropTransitioning, setcropTransitioning] = useState(false);
   const [flipStates, setFlipStates] = useState({
@@ -20217,8 +20516,92 @@ function CropperView({
       setPreviewLoading(false);
     }
   }, [canExport, generatePreview, showPreview]);
+  const handlePreviewMouseDown = useCallback(
+    (e) => {
+      if (!e.target.closest(".preview-modal-header")) return;
+      setIsDragging(true);
+      setDragStart({
+        x: e.clientX - previewPosition.x,
+        y: e.clientY - previewPosition.y
+      });
+    },
+    [previewPosition]
+  );
+  const handlePreviewMouseMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      setPreviewPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handlePreviewMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handlePreviewTouchStart = useCallback(
+    (e) => {
+      if (!e.target.closest(".preview-modal-header")) return;
+      const touch = e.touches[0];
+      setIsDragging(true);
+      setDragStart({
+        x: touch.clientX - previewPosition.x,
+        y: touch.clientY - previewPosition.y
+      });
+    },
+    [previewPosition]
+  );
+  const handlePreviewTouchMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      const touch = e.touches[0];
+      setPreviewPosition({
+        x: touch.clientX - dragStart.x,
+        y: touch.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handlePreviewTouchEnd = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handlePreviewMouseMove);
+      document.addEventListener("mouseup", handlePreviewMouseUp);
+      document.addEventListener("touchmove", handlePreviewTouchMove, {
+        passive: false
+      });
+      document.addEventListener("touchend", handlePreviewTouchEnd);
+      return () => {
+        document.removeEventListener("mousemove", handlePreviewMouseMove);
+        document.removeEventListener("mouseup", handlePreviewMouseUp);
+        document.removeEventListener("touchmove", handlePreviewTouchMove);
+        document.removeEventListener("touchend", handlePreviewTouchEnd);
+      };
+    }
+  }, [
+    isDragging,
+    handlePreviewMouseMove,
+    handlePreviewMouseUp,
+    handlePreviewTouchMove,
+    handlePreviewTouchEnd
+  ]);
+  useEffect(() => {
+    if (!showPreviewLightbox) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") {
+        setShowPreviewLightbox(false);
+      }
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [showPreviewLightbox]);
   const processSingleCrop = useCallback(
-    async (cropIndex) => {
+    async (cropIndex, overrideImageId = null) => {
       const crop = crops[cropIndex];
       if (!crop) {
         throw new Error(`Crop ${cropIndex} no encontrado`);
@@ -20257,9 +20640,10 @@ function CropperView({
       };
       const variantWidth = Math.min(crop.width, 5e3);
       const variantHeight = Math.min(crop.height, 5e3);
-      const ts = Date.now();
-      const variantName = `${editableFilename}_${crop.label || "crop"}_${ts}`;
-      const result = await createCropVariant(image.id, cropParams, {
+      const cropLabel = crop.label || "crop";
+      const variantName = `${cropLabel}_${variantWidth}_${variantHeight}`;
+      const imageId = overrideImageId || image.id;
+      const result = await createCropVariant(imageId, cropParams, {
         name: variantName,
         width: variantWidth,
         height: variantHeight,
@@ -20268,7 +20652,7 @@ function CropperView({
       });
       if (result) {
         accessibilityManager?.announceSuccess(`Recorte creado: ${variantName}`);
-        onVariantCreated?.(image.id, result);
+        onVariantCreated?.(imageId, result);
         return result;
       }
       throw new Error("No se pudo crear la variante");
@@ -20301,9 +20685,25 @@ function CropperView({
     saveCurrentCropState();
     accessibilityManager?.announce("Creando recorte de la imagen");
     try {
-      const result = await processSingleCrop(activeCropIndex);
+      let imageId = image.id;
+      let uploadedAsset = null;
+      if (image.file && onUpload) {
+        accessibilityManager?.announce("Subiendo imagen...");
+        const uploadResult = await onUpload(image.file);
+        if (!uploadResult || !uploadResult.id) {
+          throw new Error("No se pudo subir la imagen al servidor");
+        }
+        imageId = uploadResult.id;
+        uploadedAsset = uploadResult;
+        accessibilityManager?.announceSuccess("Imagen subida correctamente");
+      }
+      const result = await processSingleCrop(activeCropIndex, imageId);
       if (result) {
-        onSave(result);
+        if (uploadedAsset) {
+          onSave({ crops: [result], asset: uploadedAsset });
+        } else {
+          onSave(result);
+        }
       }
     } catch (error) {
       console.warn("Error creating crop variant:", error);
@@ -20320,7 +20720,10 @@ function CropperView({
     processSingleCrop,
     activeCropIndex,
     onSave,
-    onError
+    onError,
+    image.file,
+    image.id,
+    onUpload
   ]);
   const performSaveMultipleCrops = useCallback(
     async (cropIndexes) => {
@@ -20328,34 +20731,55 @@ function CropperView({
       accessibilityManager?.announce(
         `Guardando ${cropIndexes.length} recortes...`
       );
-      const results = [];
-      const errors = [];
-      for (const index of cropIndexes) {
-        try {
-          const result = await processSingleCrop(index);
-          if (result) {
-            results.push(result);
+      try {
+        let imageId = image.id;
+        let uploadedAsset = null;
+        if (image.file && onUpload) {
+          accessibilityManager?.announce("Subiendo imagen...");
+          const uploadResult = await onUpload(image.file);
+          if (!uploadResult || !uploadResult.id) {
+            throw new Error("No se pudo subir la imagen al servidor");
           }
-        } catch (error) {
-          errors.push({
-            crop: crops[index]?.label || `Crop ${index}`,
-            error: error.message
-          });
+          imageId = uploadResult.id;
+          uploadedAsset = uploadResult;
+          accessibilityManager?.announceSuccess("Imagen subida correctamente");
         }
-      }
-      if (results.length > 0) {
-        accessibilityManager?.announceSuccess(
-          `${results.length} recorte(s) guardado(s) correctamente`
-        );
-        if (results[0]) {
-          onSave(results[0]);
+        const results = [];
+        const errors = [];
+        for (const index of cropIndexes) {
+          try {
+            const result = await processSingleCrop(index, imageId);
+            if (result) {
+              results.push(result);
+            }
+          } catch (error) {
+            errors.push({
+              crop: crops[index]?.label || `Crop ${index}`,
+              error: error.message
+            });
+          }
         }
-      }
-      if (errors.length > 0) {
-        const errorMsg = `Errores al guardar algunos recortes:
+        if (results.length > 0) {
+          accessibilityManager?.announceSuccess(
+            `${results.length} recorte(s) guardado(s) correctamente`
+          );
+          if (uploadedAsset) {
+            onSave({ crops: results, asset: uploadedAsset });
+          } else {
+            onSave(results);
+          }
+        }
+        if (errors.length > 0) {
+          const errorMsg = `Errores al guardar algunos recortes:
 ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
+          accessibilityManager?.announceError(errorMsg);
+          alert(errorMsg);
+        }
+      } catch (error) {
+        const errorMsg = error.message || "Error al procesar los recortes";
         accessibilityManager?.announceError(errorMsg);
         alert(errorMsg);
+        onError?.(error);
       }
     },
     [
@@ -20363,7 +20787,11 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
       processSingleCrop,
       crops,
       accessibilityManager,
-      onSave
+      onSave,
+      image.file,
+      image.id,
+      onUpload,
+      onError
     ]
   );
   const saveCrop = useCallback(async () => {
@@ -20440,8 +20868,8 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           `image/${globalThis.downloadFormat || image.mime_type.split("/")[1] || "webp"}`,
           0.9
         );
-        const cropName = crop.label.replace(/\.[^/.]+$/, "").replace(/\s+/g, "-").trim();
-        const filename = `${editableFilename}_${cropName || "crop"}`;
+        const cropName = (crop.label || "crop").replace(/\.[^/.]+$/, "").replace(/\s+/g, "-").trim();
+        const filename = `${cropName}_${crop.width}_${crop.height}`;
         await downloadImage(downloadUrl, filename, {
           accessibilityManager,
           onSuccess: (finalFilename) => {
@@ -20564,6 +20992,27 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
     }
     await performDownload();
   }, [validateCropNames, crops, performDownload, activeCropIndex]);
+  const handleKeepOriginal = useCallback(async () => {
+    if (!image.file || !onUpload) {
+      onCancel();
+      return;
+    }
+    try {
+      accessibilityManager?.announce("Subiendo imagen original...");
+      const uploadResult = await onUpload(image.file);
+      if (!uploadResult || !uploadResult.id) {
+        throw new Error("No se pudo subir la imagen al servidor");
+      }
+      accessibilityManager?.announceSuccess("Imagen guardada correctamente");
+      onSave({ asset: uploadResult, crops: [] });
+    } catch (error) {
+      console.error("Error guardando imagen original:", error);
+      const errorMsg = error.message || "No se pudo guardar la imagen. Inténtalo de nuevo.";
+      accessibilityManager?.announceError(errorMsg);
+      alert(errorMsg);
+      onError?.(error);
+    }
+  }, [image.file, onUpload, onCancel, onSave, onError, accessibilityManager]);
   useEffect(() => {
     setShowPreview(false);
     setPreviewUrl(null);
@@ -20694,7 +21143,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           /* @__PURE__ */ jsx("div", { className: "", children: editableFilename + "." + (globalThis.downloadFormat || image.mime_type.split("/")[1] || "webp") })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-row self-end gap-2 w-full max-w-fit sm:w-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row self-end gap-2 w-full max-w-fit sm:w-auto flex-wrap", children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -20868,37 +21317,6 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row flex-1 w-full overflow-hidden lg:max-h-130 mx-2 py-1", children: [
       /* @__PURE__ */ jsx("div", { className: "relative flex-1 lg:flex-[2] h-full flex-shrink-0 flex-grow-1 order-0 min-h-100 lg:min-h-130", children: /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-white rounded-lg border-2 border-gray-200 overflow-hidden", children: [
-        showPreview && /* @__PURE__ */ jsxs("div", { className: "absolute lg: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" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => {
-                  setShowPreview(false);
-                  setPreviewUrl(null);
-                },
-                className: "text-gray-400 hover:text-gray-600 p-1 -m-1",
-                "aria-label": "Cerrar vista previa",
-                children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small text-xs" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded p-2 flex justify-center items-center min-h-[80px] relative", children: !previewUrl ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "animate-spin w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full mb-2" }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "Generando..." })
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full flex justify-center items-center", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: previewUrl,
-                alt: "Vista previa del recorte",
-                className: "max-w-full max-h-80 object-contain rounded shadow-sm"
-              }
-            ),
-            previewLoading && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 bg-blue-500 rounded-full p-1", children: /* @__PURE__ */ jsx("div", { className: "animate-spin w-3 h-3 border border-white border-t-transparent rounded-full" }) })
-          ] }) })
-        ] }),
         /* @__PURE__ */ jsx(
           LoadingOverlay,
           {
@@ -21403,7 +21821,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between flex-shrink-0 border-t border-gray-200 bg-white mx-2 mt-1 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between flex-shrink-0 border-t border-gray-200 bg-white mx-2 mt-1 py-2 lg:gap-0", children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
@@ -21417,32 +21835,46 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center justify-end", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: preview,
+          disabled: creatingVariant || !canExport,
+          className: `px-3 cursor-pointer py-1.5 text-sm rounded transition-colors ${showPreview ? "bg-red-600 hover:bg-red-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"} disabled:opacity-50 disabled:cursor-not-allowed`,
+          "aria-label": "Vista previa",
+          title: "Mostrar/Ocultar vista previa",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--sm" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline whitespace-nowrap", children: showPreview ? "Cerrar previa" : "Vista previa" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-1 lg:gap-2 items-center justify-end", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: preview,
+            onClick: handleDownload,
             disabled: creatingVariant || !canExport,
-            className: `px-3 cursor-pointer py-1.5 text-sm rounded transition-colors ${showPreview ? "bg-red-600 hover:bg-red-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"} disabled:opacity-50 disabled:cursor-not-allowed`,
-            "aria-label": "Vista previa",
-            title: "Mostrar/Ocultar vista previa",
+            className: "cursor-pointer px-3 py-1.5 text-sm rounded bg-brand-blue-800 hover:bg-brand-blue-1000 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "Descargar",
+            title: "Descargar recorte sin guardar",
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--sm" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline whitespace-nowrap", children: showPreview ? "Cerrar previa" : "Vista previa" })
+              /* @__PURE__ */ jsx("span", { className: "icon icon-download-white icon--sm" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Descargar" })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx(
+        image.file && /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: handleDownload,
-            disabled: creatingVariant || !canExport,
-            className: "cursor-pointer px-3 py-1.5 text-sm rounded bg-brand-blue-800 hover:bg-brand-blue-1000 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-            "aria-label": "Descargar",
-            title: "Descargar recorte sin guardar",
+            onClick: handleKeepOriginal,
+            disabled: creatingVariant || uploading,
+            className: `px-3 cursor-pointer py-1.5 text-sm rounded bg-teal-600 hover:bg-teal-700 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed`,
+            "aria-label": "Conservar solo imagen original sin crear recortes",
+            title: "Subir y guardar la imagen original sin crear recortes",
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "icon icon-download-white icon--sm" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline whitespace-nowrap", children: "Descargar" })
+              /* @__PURE__ */ jsx("span", { className: "icon icon-tick-white icon--sm" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Conservar original" })
             ] })
           }
         ),
@@ -21452,7 +21884,6 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
             onClick: saveCrop,
             disabled: creatingVariant || !cropData || !effectiveImageInfo || !canExport || !state.isReady,
             className: "px-3 cursor-pointer py-1.5 text-sm rounded bg-green-600 hover:bg-green-700 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-            "aria-label": "Guardar",
             title: "Guardar imagen recortada",
             children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: creatingVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "icon icon-save-white icon--sm" }),
@@ -21774,7 +22205,165 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           children: "Entendido"
         }
       ) })
-    ] }) })
+    ] }) }),
+    showPreview && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "min-w-[90%] fixed md:absolute inset-0 md:inset-auto bg-black/50 md:bg-transparent flex items-center justify-center md:block z-[9999] md:z-50 pointer-events-none",
+        onClick: (e) => {
+          if (e.target === e.currentTarget && window.innerWidth < 768) {
+            setShowPreview(false);
+            setPreviewUrl(null);
+          }
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "pointer-events-auto bg-white rounded-lg shadow-2xl border-2 border-brand-blue-800 overflow-hidden flex flex-col max-w-md w-full mx-4 md:mx-0 max-h-[80vh] md:max-h-[600px]",
+            style: {
+              // En desktop: posicionamiento absoluto con drag y width fijo
+              // En móvil: centrado con flexbox (sin drag)
+              ...window.innerWidth >= 768 ? {
+                position: "absolute",
+                left: `${previewPosition.x}px`,
+                top: `${previewPosition.y}px`,
+                width: "420px",
+                cursor: isDragging ? "grabbing" : "default"
+              } : {}
+            },
+            onMouseDown: handlePreviewMouseDown,
+            onTouchStart: handlePreviewTouchStart,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "preview-modal-header px-4 py-3 bg-gradient-to-r from-brand-blue-800 to-brand-blue-1000 text-white flex items-center justify-between cursor-grab active:cursor-grabbing select-none",
+                  style: { cursor: isDragging ? "grabbing" : "grab" },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--sm" }),
+                      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Vista previa" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => {
+                          setShowPreview(false);
+                          setPreviewUrl(null);
+                        },
+                        className: "flex p-1 hover:bg-white/20 rounded transition-colors cursor-pointer aspect-square min-w-fit min-h-fit",
+                        "aria-label": "Cerrar vista previa",
+                        title: "Cerrar vista previa",
+                        children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--sm p-0 m-0 py-auto my-auto mx-auto" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto bg-gray-50 p-4", children: previewLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-3" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Generando vista previa..." })
+              ] }) }) : previewUrl ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "relative w-full bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm cursor-zoom-in hover:ring-2 hover:ring-brand-blue-800 transition-all",
+                    onClick: () => setShowPreviewLightbox(true),
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setShowPreviewLightbox(true);
+                      }
+                    },
+                    "aria-label": "Click para ver recorte en tamaño completo",
+                    title: "Click para ampliar",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: previewUrl,
+                          alt: "Vista previa del recorte",
+                          className: "w-full h-auto object-contain max-h-[400px]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 bg-black/60 text-white px-2 py-1 rounded text-xs flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--xs" }),
+                        /* @__PURE__ */ jsx("span", { children: "Ampliar" })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-center text-xs text-gray-500", children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-700 mb-1", children: activeCrop?.label || "Recorte" }),
+                  /* @__PURE__ */ jsxs("p", { children: [
+                    activeCrop?.width,
+                    " × ",
+                    activeCrop?.height,
+                    " px"
+                  ] })
+                ] })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "No se pudo generar la vista previa" }) }) }),
+              /* @__PURE__ */ jsx("div", { className: "px-4 py-2 bg-gray-100 border-t border-gray-200", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 text-center", children: [
+                /* @__PURE__ */ jsxs("span", { className: "hidden md:inline", children: [
+                  "Arrastra desde el título para mover •",
+                  " "
+                ] }),
+                "Actualización automática al editar"
+              ] }) })
+            ]
+          }
+        )
+      }
+    ),
+    showPreviewLightbox && previewUrl && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/95 z-[10001] flex items-center justify-center p-4",
+        onClick: () => setShowPreviewLightbox(false),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Vista de recorte en tamaño completo",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setShowPreviewLightbox(false),
+              className: "absolute top-4 right-4 p-3 bg-white/10 hover:bg-white/20 rounded-full transition-colors cursor-pointer z-10",
+              "aria-label": "Cerrar vista ampliada",
+              title: "Cerrar (Esc)",
+              children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--lg" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-4 left-4 bg-black/60 text-white px-4 py-3 rounded-lg text-sm backdrop-blur-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold text-base mb-1", children: activeCrop?.label || "Recorte" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-300", children: [
+              activeCrop?.width,
+              " × ",
+              activeCrop?.height,
+              " px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "relative max-w-[95vw] max-h-[95vh] w-full h-full flex items-center justify-center",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: previewUrl,
+                  alt: "Vista completa del recorte",
+                  className: "max-w-full max-h-full object-contain rounded-lg shadow-2xl"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg text-xs text-center backdrop-blur-sm", children: "Click fuera de la imagen o presiona ESC para cerrar" })
+        ]
+      }
+    )
   ] });
 }
 function Pagination({
@@ -21922,6 +22511,27 @@ function TokenExpiredModal({ isOpen, onClose }) {
     }
   );
 }
+function Breadcrumb({ items = [], currentLabel }) {
+  if (!items.length && !currentLabel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-4", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center gap-2 text-sm flex-wrap px-4 pt-2 pb-0", children: [
+    items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: item.onClick,
+          className: "text-brand-blue-800 hover:text-brand-blue-1000 hover:underline cursor-pointer transition-colors font-medium",
+          "aria-label": `Ir a ${item.label}`,
+          children: item.label
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-gray-400", "aria-hidden": "true", children: "/" })
+    ] }, index)),
+    currentLabel && /* @__PURE__ */ jsx("li", { className: "text-gray-700 font-medium", "aria-current": "page", children: currentLabel })
+  ] }) });
+}
 function useUploadImage() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -22158,6 +22768,29 @@ function App({
     }
   };
   const activeFeatures = getFilteredFeatures();
+  const getTabLabel = (tabName) => {
+    const labels = {
+      gallery: "Galería",
+      upload: "Subir",
+      cropper: "Recortar",
+      // Sub-tabs de Upload
+      "upload:upload": "Subir archivo",
+      "upload:ai": "Generar con IA",
+      "upload:stock": "Buscar en Stock",
+      "upload:portals": "Otros portales"
+    };
+    if (tabName && tabName.includes(":") && tabName.split(":").length === 3) {
+      const serviceName = tabName.split(":")[2];
+      return serviceName.charAt(0).toUpperCase() + serviceName.slice(1);
+    }
+    return labels[tabName] || tabName;
+  };
+  const isUploadSubTab = (tabName) => {
+    return tabName && tabName.startsWith("upload:") && tabName.split(":").length === 2;
+  };
+  const isUploadServiceTab = (tabName) => {
+    return tabName && tabName.startsWith("upload:") && tabName.split(":").length === 3;
+  };
   const getInitialTab = () => {
     if (activeFeatures.includes("gallery")) return "gallery";
     if (activeFeatures.includes("upload")) return "upload";
@@ -22167,6 +22800,79 @@ function App({
   };
   const [activeTab, setActiveTab] = useState(getInitialTab());
   const [selectedImage, setSelectedImage] = useState(null);
+  const [navigationHistory, setNavigationHistory] = useState([
+    { tab: getInitialTab(), label: getTabLabel(getInitialTab()) }
+  ]);
+  const addToNavigationHistory = (newTab) => {
+    setNavigationHistory((prev) => {
+      const existingIndex = prev.findIndex((item) => item.tab === newTab);
+      if (existingIndex !== -1) {
+        if (existingIndex === prev.length - 1) {
+          return prev;
+        }
+        return prev.slice(0, existingIndex + 1);
+      }
+      if (isUploadServiceTab(newTab)) {
+        const parts = newTab.split(":");
+        const subTab = `${parts[0]}:${parts[1]}`;
+        const subTabIndex = prev.findIndex((item) => item.tab === subTab);
+        let newHistory2;
+        if (subTabIndex === -1) {
+          const uploadIndex = prev.findIndex((item) => item.tab === "upload");
+          if (uploadIndex === -1) {
+            newHistory2 = [
+              ...prev,
+              { tab: "upload", label: getTabLabel("upload") },
+              { tab: subTab, label: getTabLabel(subTab) }
+            ];
+          } else {
+            newHistory2 = [
+              ...prev.slice(0, uploadIndex + 1),
+              { tab: subTab, label: getTabLabel(subTab) }
+            ];
+          }
+        } else {
+          newHistory2 = prev.slice(0, subTabIndex + 1);
+        }
+        newHistory2.push({ tab: newTab, label: getTabLabel(newTab) });
+        const MAX_HISTORY2 = 5;
+        if (newHistory2.length > MAX_HISTORY2) {
+          return newHistory2.slice(newHistory2.length - MAX_HISTORY2);
+        }
+        return newHistory2;
+      }
+      if (isUploadSubTab(newTab)) {
+        const uploadIndex = prev.findIndex((item) => item.tab === "upload");
+        let newHistory2;
+        if (uploadIndex === -1) {
+          newHistory2 = [
+            ...prev,
+            { tab: "upload", label: getTabLabel("upload") }
+          ];
+        } else {
+          newHistory2 = prev.slice(0, uploadIndex + 1);
+        }
+        newHistory2.push({ tab: newTab, label: getTabLabel(newTab) });
+        const MAX_HISTORY2 = 5;
+        if (newHistory2.length > MAX_HISTORY2) {
+          return newHistory2.slice(newHistory2.length - MAX_HISTORY2);
+        }
+        return newHistory2;
+      }
+      if (newTab === "upload") {
+        const uploadIndex = prev.findIndex((item) => item.tab === "upload");
+        if (uploadIndex !== -1) {
+          return prev.slice(0, uploadIndex + 1);
+        }
+      }
+      const newHistory = [...prev, { tab: newTab, label: getTabLabel(newTab) }];
+      const MAX_HISTORY = 5;
+      if (newHistory.length > MAX_HISTORY) {
+        return newHistory.slice(newHistory.length - MAX_HISTORY);
+      }
+      return newHistory;
+    });
+  };
   useEffect(() => {
     if (_externalImage) {
       console.log("📸 Imagen externa detectada:", _externalImage);
@@ -22231,28 +22937,62 @@ function App({
   const tabs = availableTabs.filter(
     (tab) => activeFeatures.includes(tab.feature)
   );
-  const handleUpload = async (file) => {
-    const result = await upload(file);
-    if (result) {
-      invalidateCache();
-      setCurrentPage(1);
-      setImages((prev) => [result, ...prev]);
-      setActiveTab("gallery");
-      if (callbacks.onUpload) {
-        callbacks.onUpload({
-          assetId: result.id,
-          url: result.url,
-          fileName: result.filename,
-          mime: result.mime_type,
-          width: result.width,
-          height: result.height,
-          instanceId
-        });
+  const handleUploadAndCrop = async (file) => {
+    const url2 = URL.createObjectURL(file);
+    const dimensions = await new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        URL.revokeObjectURL(url2);
+      };
+      img.onerror = () => {
+        resolve({ width: 1920, height: 1080 });
+        URL.revokeObjectURL(url2);
+      };
+      img.src = url2;
+    });
+    const tempImage = {
+      file,
+      // File object (indica que es imagen nueva sin confirmar)
+      filename: file.name,
+      mime_type: file.type,
+      url: URL.createObjectURL(file),
+      // Nueva URL temporal para preview
+      width: dimensions.width,
+      // Dimensiones reales
+      height: dimensions.height
+      // Dimensiones reales
+      // NO tiene id - el cropper lo generará al subir
+    };
+    setSelectedImage(tempImage);
+    if (activeFeatures.includes("cropper")) {
+      setActiveTab("cropper");
+      addToNavigationHistory("cropper");
+    } else {
+      const result = await upload(file);
+      if (result) {
+        invalidateCache();
+        setCurrentPage(1);
+        setImages((prev) => [result, ...prev]);
+        setActiveTab("gallery");
+        if (callbacks.onUpload) {
+          callbacks.onUpload({
+            assetId: result.id,
+            url: result.url,
+            fileName: result.filename,
+            mime: result.mime_type,
+            width: result.width,
+            height: result.height,
+            instanceId
+          });
+        }
       }
     }
   };
   const handleDelete = async (imageId) => {
-    if (!confirm("¿Estás seguro de que deseas eliminar esta imagen? Esta acción también eliminará todos sus recortes.")) {
+    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);
@@ -22283,12 +23023,14 @@ function App({
     setSelectedImage(img);
     if (activeFeatures.includes("cropper")) {
       setActiveTab("cropper");
+      addToNavigationHistory("cropper");
     }
   };
   const handleTabChange = (tabId) => {
     setActiveTab(tabId);
     if (tabId !== "upload") resetUpload();
     if (tabId !== "gallery") resetDelete();
+    addToNavigationHistory(tabId);
   };
   const determineScenario = () => {
     if (modeUI === "crop-only" || activeFeatures.length === 1 && activeFeatures[0] === "cropper") {
@@ -22307,21 +23049,45 @@ function App({
     const globalConfig2 = window.limboCore?.config?.getGlobal() || {};
     const mode = globalConfig2.mode || "embed";
     const autoHide = globalConfig2.autoHideOnComplete || false;
-    const crops = Array.isArray(result) ? result : [result];
+    let crops = [];
+    let uploadedAsset = null;
+    if (result.crops && result.asset) {
+      crops = result.crops;
+      uploadedAsset = result.asset;
+    } else if (Array.isArray(result)) {
+      crops = result;
+    } else {
+      crops = [result];
+    }
+    if (uploadedAsset && scenario === "with-gallery") {
+      setImages((prev) => [uploadedAsset, ...prev]);
+      setCurrentPage(1);
+      if (callbacks.onUpload) {
+        callbacks.onUpload({
+          assetId: uploadedAsset.id,
+          url: uploadedAsset.url,
+          fileName: uploadedAsset.filename,
+          mime: uploadedAsset.mime_type,
+          width: uploadedAsset.width,
+          height: uploadedAsset.height,
+          instanceId
+        });
+      }
+    }
     if (scenario === "with-gallery") {
       invalidateCache();
     }
     if (callbacks.onCropsSaved) {
       callbacks.onCropsSaved({
         crops,
-        assetId: selectedImage?.id,
+        assetId: uploadedAsset?.id || selectedImage?.id,
         instanceId
       });
     }
     if (window.limboCore?.events) {
       window.limboCore.events.emit("cropsSaved", {
         crops,
-        assetId: selectedImage?.id,
+        assetId: uploadedAsset?.id || selectedImage?.id,
         instanceId
       });
     }
@@ -22367,7 +23133,9 @@ function App({
             });
           }
           if (autoHide) {
-            const container = document.querySelector(`#limbo-instance-${instanceId}`);
+            const container = document.querySelector(
+              `#limbo-instance-${instanceId}`
+            );
             if (container) container.style.display = "none";
           }
         }
@@ -22430,7 +23198,37 @@ function App({
     }
     console.error("Cropper error:", error);
   };
+  const navigateToHistoryPoint = (index) => {
+    const historyPoint = navigationHistory[index];
+    if (!historyPoint) return;
+    if (historyPoint.tab !== "cropper") {
+      setSelectedImage(null);
+    }
+    setActiveTab(historyPoint.tab);
+    setNavigationHistory((prev) => prev.slice(0, index + 1));
+  };
+  const getBreadcrumbs = () => {
+    if (navigationHistory.length <= 1) {
+      return null;
+    }
+    const items = navigationHistory.slice(0, -1).map((item, index) => {
+      return {
+        label: item.label,
+        onClick: item.tab !== "subir" || item.tab !== "upload" ? () => navigateToHistoryPoint(index) : void 0
+      };
+    });
+    const current = navigationHistory[navigationHistory.length - 1].label;
+    return { items, current };
+  };
+  const breadcrumbData = getBreadcrumbs();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    breadcrumbData && /* @__PURE__ */ jsx(
+      Breadcrumb,
+      {
+        items: breadcrumbData.items,
+        currentLabel: breadcrumbData.current
+      }
+    ),
     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: ",
@@ -22484,14 +23282,20 @@ function App({
         "Error al subir imagen: ",
         uploadError
       ] }),
-      uploadedImage && /* @__PURE__ */ jsxs("div", { className: "alert alert-success", children: [
+      uploadedImage && /* @__PURE__ */ jsxs("div", { className: "alert alert-success absolute top-0 right-0 m-4", children: [
         "✅ Imagen subida correctamente: ",
         uploadedImage.filename
       ] }),
       /* @__PURE__ */ jsx(
         UploadForm,
         {
-          onUpload: handleUpload,
+          onSelect: handleUploadAndCrop,
+          onSubTabChange: (subTabId) => {
+            addToNavigationHistory(`upload:${subTabId}`);
+          },
+          onServiceChange: (subTabId, serviceSlug) => {
+            addToNavigationHistory(`upload:${subTabId}:${serviceSlug}`);
+          },
           disabled: uploading,
           apiKey,
           prod
@@ -22504,10 +23308,12 @@ function App({
         image: selectedImage,
         onSave: handleCropSave,
         onCancel: handleCropCancel,
-        onDelete: () => handleDelete(selectedImage?.id),
+        onDelete: selectedImage?.id ? () => handleDelete(selectedImage.id) : null,
         onError: handleCropError,
         deleting,
-        onVariantCreated: handleVariantCreated
+        onVariantCreated: handleVariantCreated,
+        onUpload: upload,
+        uploading
       }
     ),
     activeTab === "cropper" && !selectedImage && /* @__PURE__ */ jsx("div", { className: "limbo-empty-state", children: /* @__PURE__ */ jsx("p", { children: "Selecciona una imagen de la galería para comenzar a recortar." }) }),