limbo-component 1.0.1 → 1.5.0

package/dist/limbo.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import require$$2 from "react-dom";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 const DEFAULT_MESSAGES = {
@@ -30452,6 +30452,937 @@ function Tabs({ tabs, active, onChange }) {
     }
   );
 }
+const API_URLS = {
+  // DEV: "https://led-dev-limbo-dev.eu.els.local", // PREPRODUCCIÓN - Updated URL
+  DEV: "http://localhost",
+  // LOCAL - Para desarrollo local
+  PROD: "https://limbo.lefebvre.com"
+};
+let globalConfig = {
+  publicKey: null,
+  token: null,
+  // JWT token (opcional, generado automáticamente)
+  authMode: null,
+  // "session" | "manual"
+  tokenEndpoint: null,
+  // Endpoint para obtener token (configurable)
+  prod: false
+};
+function configureApiClient(config) {
+  globalConfig = {
+    ...globalConfig,
+    ...config
+  };
+  if (!globalConfig.authMode) {
+    if (globalConfig.token) {
+      globalConfig.authMode = "manual";
+    } else {
+      globalConfig.authMode = "session";
+    }
+  }
+}
+function getBaseUrl({ prod = false } = {}) {
+  return prod ? API_URLS.PROD : API_URLS.DEV;
+}
+async function getHeaders({ isFormData = false, useJWT = true, customHeaders = {} } = {}) {
+  const headers = {};
+  if (!isFormData) {
+    headers["Content-Type"] = "application/json";
+  }
+  if (useJWT) {
+    let token = globalConfig.token;
+    if (globalConfig.authMode === "session" && !token) {
+      try {
+        const baseUrl = getBaseUrl(globalConfig);
+        const endpoint = globalConfig.tokenEndpoint || "/auth/token";
+        const response = await fetch(`${baseUrl}${endpoint}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ public_key: globalConfig.publicKey }),
+          credentials: "include"
+          // Incluir cookies de sesión
+        });
+        if (response.ok) {
+          const data = await response.json();
+          token = data.token;
+          globalConfig.token = token;
+        } else {
+          throw new Error(`Session auth failed: ${response.status}`);
+        }
+      } catch (error) {
+        console.error("❌ Session authentication failed:", error);
+        throw new Error("Failed to authenticate with session. User must be logged in.");
+      }
+    }
+    if (token) {
+      headers.Authorization = `Bearer ${token}`;
+    } else {
+      console.warn("⚠️ No JWT token available:", {
+        authMode: globalConfig.authMode,
+        hasPublicKey: !!globalConfig.publicKey
+      });
+    }
+  }
+  if (isFormData) {
+    delete headers["Content-Type"];
+  }
+  return { ...headers, ...customHeaders };
+}
+function setToken(token) {
+  globalConfig.token = token;
+}
+function getConfig() {
+  return { ...globalConfig };
+}
+async function callApi({
+  endpoint,
+  method = "GET",
+  body = null,
+  prod = false,
+  basePath = "",
+  customHeaders = {},
+  isFormData = false,
+  useJWT = true
+  // New parameter to control JWT usage
+}) {
+  try {
+    const useProd = prod || globalConfig.prod;
+    const headers = await getHeaders({
+      isFormData,
+      useJWT,
+      customHeaders
+    });
+    if (method === "GET" && !body && headers["Content-Type"]) {
+      delete headers["Content-Type"];
+    }
+    const res = await fetch(`${getBaseUrl({ prod: useProd })}${basePath}${endpoint}`, {
+      method,
+      headers,
+      body: body ? isFormData ? body : JSON.stringify(body) : void 0,
+      credentials: "include"
+      // Include cookies for CORS
+    });
+    if (!res.ok) {
+      let errorMessage = `HTTP ${res.status}: ${res.statusText}`;
+      let errorData = null;
+      try {
+        const result = await res.json();
+        errorData = result;
+        if (result.error) {
+          errorMessage = `${result.error.code}: ${result.error.message}`;
+        } else if (result.message) {
+          errorMessage = result.message;
+        }
+      } catch {
+      }
+      if (res.status === 401 && errorData) {
+        if (errorData.error === "token_expired" || errorData.message && errorData.message.includes("expired") || errorData.message && errorData.message.includes("caducado") || errorData.error && errorData.error.includes("expired")) {
+          window.dispatchEvent(new CustomEvent("tokenExpiredError", {
+            detail: { error: { response: { status: 401, data: errorData } } }
+          }));
+        }
+      }
+      throw new Error(errorMessage);
+    }
+    return res.json();
+  } catch (err) {
+    throw new Error(`API Error: ${err.message}`);
+  }
+}
+function getApiBaseUrl() {
+  const config = getConfig();
+  const prod = config?.prod || false;
+  const API_URLS2 = {
+    DEV: "http://localhost",
+    PROD: "https://limbo.lefebvre.com"
+  };
+  return prod ? API_URLS2.PROD : API_URLS2.DEV;
+}
+function generateFallbackAssetUrl(asset) {
+  if (!asset?.id) return null;
+  const baseUrl = getApiBaseUrl();
+  return `${baseUrl}/api/assets/${asset.id}/download`;
+}
+function makeAbsoluteUrl(url) {
+  if (!url) return null;
+  if (url.startsWith("http://") || url.startsWith("https://")) {
+    return url;
+  }
+  if (url.startsWith("/")) {
+    const baseUrl = getApiBaseUrl();
+    return `${baseUrl}${url}`;
+  }
+  return url;
+}
+function adaptAssetsListFromV2(v2Response) {
+  if (!v2Response?.success || !Array.isArray(v2Response?.data?.data)) {
+    return { result: [] };
+  }
+  const legacyAssets = v2Response.data.data.map((asset) => {
+    return {
+      id: asset.id,
+      filename: asset.filename || asset.original_filename,
+      mime_type: asset.mime_type,
+      file_size: asset.file_size,
+      width: asset.width,
+      height: asset.height,
+      upload_date: asset.upload_date || asset.created_at,
+      processing_status: asset.processing_status || asset.status,
+      // URL principal - handle multiple URL formats from different backend responses
+      url: makeAbsoluteUrl(
+        asset.master_url || asset.master?.url_signed || asset.urls?.original || asset.url
+      ) || generateFallbackAssetUrl(asset),
+      // Generate fallback URL if none provided
+      webp_available: asset.webp_available || !!asset.webp_url,
+      // Solo metadatos básicos en listado
+      metadata: asset.metadata || {},
+      variants_count: asset.variants_count || 0
+    };
+  });
+  const response = { result: legacyAssets };
+  if (v2Response.data.pagination) {
+    response.pagination = {
+      page: v2Response.data.pagination.page,
+      limit: v2Response.data.pagination.limit,
+      total: v2Response.data.pagination.total,
+      pages: v2Response.data.pagination.pages
+    };
+  }
+  return response;
+}
+function adaptVariantsListFromV2(v2Response) {
+  if (!v2Response?.success || !Array.isArray(v2Response?.data?.variants)) {
+    return { result: [] };
+  }
+  const legacyVariants = v2Response.data.variants.map((variant) => {
+    return {
+      id: variant.id,
+      name: variant.filename || variant.name || `Variante ${variant.id}`,
+      filename: variant.filename,
+      mime_type: variant.mime_type,
+      format: variant.output_format || variant.format || (variant.mime_type ? variant.mime_type.split("/")[1] : "jpg"),
+      file_size: variant.file_size,
+      width: variant.width,
+      height: variant.height,
+      upload_date: variant.upload_date || variant.created_at,
+      processing_status: variant.processing_status || variant.status,
+      // URL principal - handle multiple URL formats from different backend responses
+      url: makeAbsoluteUrl(
+        variant.master_url || variant.master?.url_signed || variant.urls?.original || variant.url
+      ) || generateFallbackAssetUrl(variant),
+      webp_available: variant.webp_available || !!variant.webp_url,
+      // Metadatos específicos de variante
+      metadata: variant.metadata || {},
+      crop_data: variant.crop_data || {},
+      crop_params: variant.crop_params || variant.crop_data || {},
+      parent_asset_id: variant.parent_asset_id || v2Response.data.asset_id,
+      variant_type: variant.variant_type || "crop"
+    };
+  });
+  return { result: legacyVariants };
+}
+function adaptUploadFromV2(v2Response) {
+  if (!v2Response?.success || !v2Response?.data) {
+    return { result: null };
+  }
+  const asset = v2Response.data;
+  const legacyResponse = {
+    id: asset.id,
+    filename: asset.original_filename,
+    mime_type: asset.mime_type,
+    file_size: asset.file_size,
+    width: asset.width,
+    height: asset.height,
+    status: asset.status,
+    upload_date: asset.created_at,
+    // URL del master
+    url: makeAbsoluteUrl(asset.master?.url_signed),
+    master_format: asset.master?.format,
+    // Estado de procesamiento
+    processing: asset.processing || {
+      master_webp: asset.status === "processing" ? "queued" : "completed",
+      variants: asset.status === "processing" ? "queued" : "completed"
+    },
+    // Información adicional
+    checksum: asset.checksum,
+    storage_path: asset.storage_path_base,
+    metadata: asset.metadata || {}
+  };
+  return { result: legacyResponse };
+}
+function adaptVariantGenerationFromV2(v2Response) {
+  if (!v2Response?.success || !v2Response?.data) {
+    return { result: null };
+  }
+  const data = v2Response.data;
+  const legacyResponse = {
+    job_id: data.job_id,
+    asset_id: data.asset_id,
+    variants_requested: data.variants_requested || [],
+    processing_mode: data.async ? "async" : "sync",
+    estimated_completion: data.estimated_completion,
+    // Estado de cada variante
+    variant_statuses: (data.variant_statuses || []).map((status) => ({
+      name: status.name,
+      status: status.status,
+      size: status.expected_size,
+      format: status.format
+    }))
+  };
+  return { result: legacyResponse };
+}
+function adaptErrorFromV2(error) {
+  if (error.message && !error.message.includes("API Error:")) {
+    return error;
+  }
+  let errorMessage = error.message || "Unknown API error";
+  if (errorMessage.startsWith("API Error: ")) {
+    errorMessage = errorMessage.substring(11);
+  }
+  return new Error(errorMessage);
+}
+const BASE_PATH$4 = "/api";
+async function listAssets(params = {}) {
+  try {
+    const queryString = new URLSearchParams(params).toString();
+    const endpoint = queryString ? `/assets?${queryString}` : "/assets";
+    const response = await callApi({
+      endpoint,
+      method: "GET",
+      basePath: BASE_PATH$4,
+      useJWT: true
+    });
+    return adaptAssetsListFromV2(response);
+  } catch (error) {
+    throw adaptErrorFromV2(error);
+  }
+}
+async function uploadAsset(file, uploaded_by = null, store_original = false) {
+  try {
+    const formData = new FormData();
+    formData.append("file", file);
+    if (uploaded_by) formData.append("uploaded_by", uploaded_by);
+    if (store_original) formData.append("store_original", store_original.toString());
+    const response = await callApi({
+      endpoint: "/assets",
+      method: "POST",
+      body: formData,
+      basePath: BASE_PATH$4,
+      isFormData: true,
+      useJWT: true
+    });
+    return adaptUploadFromV2(response);
+  } catch (error) {
+    throw adaptErrorFromV2(error);
+  }
+}
+async function deleteAsset(assetId) {
+  try {
+    const response = await callApi({
+      endpoint: `/assets/${assetId}`,
+      method: "DELETE",
+      basePath: BASE_PATH$4,
+      useJWT: true
+    });
+    return response;
+  } catch (error) {
+    throw adaptErrorFromV2(error);
+  }
+}
+async function generateVariant(assetId, {
+  variant_name,
+  width,
+  height,
+  crop_params,
+  preset_aspect = null,
+  preset_size = null,
+  output_format = "webp"
+}) {
+  try {
+    const variants = [{
+      name: variant_name,
+      width,
+      height,
+      output_format,
+      crop_params
+    }];
+    if (preset_aspect) variants[0].preset_aspect = preset_aspect;
+    if (preset_size) variants[0].preset_size = preset_size;
+    const response = await callApi({
+      endpoint: `/assets/${assetId}/variants`,
+      method: "POST",
+      body: {
+        variants,
+        async: false
+      },
+      basePath: BASE_PATH$4,
+      useJWT: true
+    });
+    return adaptVariantGenerationFromV2(response);
+  } catch (error) {
+    throw adaptErrorFromV2(error);
+  }
+}
+async function listVariants(assetId) {
+  try {
+    const response = await callApi({
+      endpoint: `/assets/${assetId}/variants`,
+      method: "GET",
+      basePath: BASE_PATH$4,
+      useJWT: true
+    });
+    const adaptedResponse = adaptVariantsListFromV2(response);
+    return adaptedResponse;
+  } catch (error) {
+    throw adaptErrorFromV2(error);
+  }
+}
+async function deleteVariant(assetId, variantId) {
+  try {
+    const response = await callApi({
+      endpoint: `/assets/${assetId}/variants/${variantId}`,
+      method: "DELETE",
+      basePath: BASE_PATH$4,
+      useJWT: true
+    });
+    return response;
+  } catch (error) {
+    throw adaptErrorFromV2(error);
+  }
+}
+function useImageVariants() {
+  const [variants, setVariants] = useState({});
+  const [loading, setLoading] = useState({});
+  const [errors, setErrors] = useState({});
+  const loadVariants = useCallback(async (assetId) => {
+    if (!assetId) return;
+    if (loading[assetId]) return;
+    if (variants[assetId]) return variants[assetId];
+    setLoading((prev) => ({ ...prev, [assetId]: true }));
+    setErrors((prev) => ({ ...prev, [assetId]: null }));
+    try {
+      const response = await listVariants(assetId);
+      const variantsList = response?.result || [];
+      setVariants((prev) => ({ ...prev, [assetId]: variantsList }));
+      return variantsList;
+    } catch (error) {
+      console.error("Error loading variants:", error);
+      setErrors((prev) => ({ ...prev, [assetId]: error.message }));
+      return [];
+    } finally {
+      setLoading((prev) => ({ ...prev, [assetId]: false }));
+    }
+  }, [variants, loading]);
+  const getVariants = useCallback((assetId) => {
+    return variants[assetId] || [];
+  }, [variants]);
+  const isLoading = useCallback((assetId) => {
+    return loading[assetId] || false;
+  }, [loading]);
+  const getError = useCallback((assetId) => {
+    return errors[assetId] || null;
+  }, [errors]);
+  const clearVariants = useCallback((assetId) => {
+    setVariants((prev) => {
+      const newState = { ...prev };
+      delete newState[assetId];
+      return newState;
+    });
+    setLoading((prev) => {
+      const newState = { ...prev };
+      delete newState[assetId];
+      return newState;
+    });
+    setErrors((prev) => {
+      const newState = { ...prev };
+      delete newState[assetId];
+      return newState;
+    });
+  }, []);
+  const refreshVariants = useCallback(async (assetId) => {
+    clearVariants(assetId);
+    return await loadVariants(assetId);
+  }, [clearVariants, loadVariants]);
+  const removeVariant = useCallback(async (assetId, variantId) => {
+    try {
+      await deleteVariant(assetId, variantId);
+      setVariants((prev) => {
+        const assetVariants = prev[assetId] || [];
+        return {
+          ...prev,
+          [assetId]: assetVariants.filter((v) => v.id !== variantId)
+        };
+      });
+      return { success: true };
+    } catch (error) {
+      console.error("Error deleting variant:", error);
+      return { success: false, error: error.message };
+    }
+  }, []);
+  return {
+    loadVariants,
+    getVariants,
+    isLoading,
+    getError,
+    clearVariants,
+    refreshVariants,
+    removeVariant
+  };
+}
+function ImageVariantsModal({
+  image,
+  isOpen,
+  onClose,
+  onSelect,
+  onDelete,
+  onCrop,
+  onVariantDeleted,
+  // Nueva prop para notificar cuando se elimina una variante
+  allowedActions = {
+    select: true,
+    download: true,
+    copy: true,
+    delete: true,
+    crop: true
+  }
+}) {
+  const { loadVariants, getVariants, isLoading, getError, removeVariant } = useImageVariants();
+  const accessibilityManager = window.limboCore?.accessibilityManager;
+  const [deleteMessage, setDeleteMessage] = React.useState(null);
+  const [deleteMessageType, setDeleteMessageType] = React.useState(null);
+  const config = window.limboCore?.config?.getGlobal() || {};
+  const interaction = config.interaction || {
+    allowSelection: false,
+    allowCropping: true
+  };
+  const shouldShowSelectButton = interaction.allowSelection && allowedActions.select && onSelect;
+  const shouldShowCropButton = interaction.allowCropping && allowedActions.crop && onCrop;
+  const shouldShowCopyButton = allowedActions.copy;
+  const shouldShowDownloadButton = allowedActions.download;
+  const shouldShowDeleteButton = allowedActions.delete;
+  const [failedVariants, setFailedVariants] = React.useState(/* @__PURE__ */ new Set());
+  const apiVariants = React.useMemo(
+    () => image?.variants || [],
+    [image?.variants]
+  );
+  const hookVariants = getVariants(image?.id);
+  const variants = apiVariants.length > 0 ? apiVariants : hookVariants;
+  const loading = apiVariants.length === 0 ? isLoading(image?.id) : false;
+  const error = apiVariants.length === 0 ? getError(image?.id) : null;
+  useEffect(() => {
+    if (isOpen && image?.id && (!image?.variants || image.variants.length === 0)) {
+      loadVariants(image.id);
+    }
+  }, [isOpen, image?.id, image?.variants, loadVariants]);
+  React.useEffect(() => {
+    if (isOpen) {
+      setFailedVariants(/* @__PURE__ */ new Set());
+    }
+  }, [isOpen]);
+  const handleVariantImageError = (variantId) => {
+    setFailedVariants((prev) => /* @__PURE__ */ new Set([...prev, variantId]));
+  };
+  if (!isOpen) return null;
+  const handleSelectVariant = (variant) => {
+    const variantAsImage = {
+      id: variant.id,
+      filename: `${image.filename}_${variant.name}`,
+      url: variant.url,
+      width: variant.width,
+      height: variant.height,
+      mime_type: `image/${variant.format}`,
+      file_size: variant.file_size,
+      upload_date: variant.created_at,
+      processing_status: "completed",
+      is_variant: true,
+      parent_asset_id: image.id,
+      variant_info: variant
+    };
+    accessibilityManager?.announce(`Variante seleccionada: ${variant.name}`);
+    onSelect?.(variantAsImage);
+    onClose?.();
+  };
+  const handleCopyVariantUrl = async (variant) => {
+    try {
+      await navigator.clipboard.writeText(variant.url);
+      accessibilityManager?.announce(`URL de variante ${variant.name} copiada`);
+    } catch (err) {
+      console.error("Error copying variant URL:", err);
+      accessibilityManager?.announceError("Error al copiar URL de variante");
+    }
+  };
+  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);
+  };
+  const handleViewVariant = (variant) => {
+    accessibilityManager?.announce(
+      `Abriendo variante ${variant.name} en nueva pestaña`
+    );
+    window.open(variant.url, "_blank");
+  };
+  const handleViewOriginal = () => {
+    accessibilityManager?.announce(
+      `Abriendo imagen original ${image.filename} en nueva pestaña`
+    );
+    window.open(image.url, "_blank");
+  };
+  const handleCopyOriginalUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(image.url);
+      accessibilityManager?.announce(`URL de imagen original copiada`);
+    } catch (err) {
+      console.error("Error copying original URL:", err);
+      accessibilityManager?.announceError("Error al copiar URL");
+    }
+  };
+  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);
+  };
+  const handleDeleteOriginal = async () => {
+    if (!onDelete) return;
+    const confirmed = window.confirm(
+      `¿Estás seguro de que deseas eliminar "${image.filename}"? Esta acción también eliminará todas sus variantes.`
+    );
+    if (confirmed) {
+      accessibilityManager?.announce(`Eliminando imagen ${image.filename}`);
+      await onDelete(image.id);
+      onClose?.();
+    }
+  };
+  const handleCropOriginal = () => {
+    if (!onCrop) return;
+    accessibilityManager?.announce(
+      `Abriendo herramienta de recorte para ${image.filename}`
+    );
+    onCrop(image);
+    onClose?.();
+  };
+  const handleDeleteVariant = async (variant) => {
+    const confirmed = window.confirm(
+      `¿Estás seguro de que deseas eliminar la variante "${variant.name || variant.filename}"?`
+    );
+    if (confirmed) {
+      accessibilityManager?.announce(
+        `Eliminando variante ${variant.name || variant.filename}`
+      );
+      const result = await removeVariant(image.id, variant.id);
+      if (result.success) {
+        setDeleteMessage("Variante eliminada correctamente");
+        setDeleteMessageType("success");
+        accessibilityManager?.announce(`Variante eliminada correctamente`);
+        onVariantDeleted?.();
+        setTimeout(() => {
+          setDeleteMessage(null);
+          setDeleteMessageType(null);
+        }, 3e3);
+      } else {
+        setDeleteMessage(`Error al eliminar variante: ${result.error}`);
+        setDeleteMessageType("error");
+        accessibilityManager?.announceError(
+          `Error al eliminar variante: ${result.error}`
+        );
+        setTimeout(() => {
+          setDeleteMessage(null);
+          setDeleteMessageType(null);
+        }, 5e3);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "limbo-modal-overlay",
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "variants-modal-title",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "limbo-modal-content limbo-variants-modal",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "limbo-modal-header", children: [
+              /* @__PURE__ */ jsxs("h2", { id: "variants-modal-title", children: [
+                "Variantes de ",
+                image?.filename
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "limbo-modal-close",
+                  onClick: onClose,
+                  "aria-label": "Cerrar modal de variantes",
+                  children: "✕"
+                }
+              )
+            ] }),
+            deleteMessage && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `limbo-variants-message limbo-variants-message--${deleteMessageType} mt-1`,
+                role: "alert",
+                style: {
+                  padding: "12px 20px",
+                  margin: "0 20px 15px 20px",
+                  borderRadius: "4px",
+                  backgroundColor: deleteMessageType === "success" ? "#d4edda" : "#f8d7da",
+                  color: deleteMessageType === "success" ? "#155724" : "#721c24",
+                  border: `1px solid ${deleteMessageType === "success" ? "#c3e6cb" : "#f5c6cb"}`
+                },
+                children: deleteMessage
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "limbo-modal-body", children: loading ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-loading", children: [
+              /* @__PURE__ */ jsx("div", { className: "limbo-loader" }),
+              /* @__PURE__ */ jsx("p", { children: "Cargando variantes..." })
+            ] }) : error ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-error", children: [
+              /* @__PURE__ */ jsxs("p", { children: [
+                "Error al cargar variantes: ",
+                error
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => loadVariants(image.id),
+                  className: "btn btn-primary",
+                  children: "Reintentar"
+                }
+              )
+            ] }) : variants.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-empty", children: [
+              /* @__PURE__ */ jsx("p", { children: "Esta imagen no tiene variantes aún." }),
+              /* @__PURE__ */ jsx("small", { children: "Las variantes aparecerán aquí después de hacer recortes o redimensionados." })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "limbo-variant-section", children: [
+                /* @__PURE__ */ jsx("h3", { children: "Imagen original" }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    onClick: handleViewOriginal,
+                    className: "limbo-variant-card limbo-variant-original cursor-pointer",
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "limbo-variant-preview", children: /* @__PURE__ */ jsx("img", { src: image.url, alt: image.filename, loading: "lazy" }) }),
+                      /* @__PURE__ */ jsxs("div", { className: "limbo-variant-info", children: [
+                        /* @__PURE__ */ jsx("div", { className: "limbo-variant-name", children: image.filename }),
+                        /* @__PURE__ */ jsxs("div", { className: "limbo-variant-meta", children: [
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            image.width,
+                            "×",
+                            image.height
+                          ] }),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            Math.round(image.file_size / 1024),
+                            " KB"
+                          ] })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "limbo-variant-actions", children: [
+                        shouldShowSelectButton && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: "btn btn-success btn-sm",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              onSelect?.(image);
+                              onClose?.();
+                            },
+                            title: "Seleccionar original",
+                            children: "Seleccionar"
+                          }
+                        ),
+                        shouldShowCropButton && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: "btn btn-crop btn-sm",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleCropOriginal();
+                            },
+                            title: "Recortar imagen",
+                            children: /* @__PURE__ */ jsx("span", { className: "icon icon-scissors-white icon--sm" })
+                          }
+                        ),
+                        shouldShowCopyButton && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: "btn btn-secondary btn-sm",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleCopyOriginalUrl();
+                            },
+                            title: "Copiar URL",
+                            children: /* @__PURE__ */ jsx("span", { className: "icon icon-copy-white icon--sm" })
+                          }
+                        ),
+                        shouldShowDownloadButton && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: "btn btn-primary btn-sm",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleDownloadOriginal();
+                            },
+                            title: "Descargar",
+                            children: /* @__PURE__ */ jsx("span", { className: "icon icon-download-white icon--sm" })
+                          }
+                        ),
+                        shouldShowDeleteButton && onDelete && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: "btn btn-danger btn-sm",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleDeleteOriginal();
+                            },
+                            title: "Eliminar imagen",
+                            children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--sm m-[0!important]" })
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "limbo-variant-section", children: [
+                /* @__PURE__ */ jsxs("h3", { children: [
+                  "Variantes (",
+                  variants.length,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "limbo-variants-grid", children: variants.map((variant) => {
+                  const hasImageError = failedVariants.has(variant.id);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: `limbo-variant-card ${!hasImageError ? "cursor-pointer" : ""}`,
+                      onClick: !hasImageError ? () => handleViewVariant(variant) : void 0,
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "limbo-variant-preview", children: [
+                          /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: variant.url,
+                              alt: variant.name || variant.filename || `Variante ${variant.id}`,
+                              loading: "lazy",
+                              onError: () => handleVariantImageError(variant.id),
+                              style: {
+                                display: hasImageError ? "none" : "block"
+                              }
+                            }
+                          ),
+                          hasImageError && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "limbo-variant-error",
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "100px",
+                                backgroundColor: "#f5f5f5",
+                                color: "#666"
+                              },
+                              children: /* @__PURE__ */ jsx("span", { children: "Error al cargar preview" })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "limbo-variant-info", children: [
+                          /* @__PURE__ */ jsx("div", { className: "limbo-variant-name", children: variant.name || variant.filename || `Variante ${variant.id}` }),
+                          /* @__PURE__ */ jsxs("div", { className: "limbo-variant-meta", children: [
+                            /* @__PURE__ */ jsxs("span", { children: [
+                              variant.width,
+                              "×",
+                              variant.height
+                            ] }),
+                            /* @__PURE__ */ jsx("span", { children: (variant.format || "jpg").toUpperCase() }),
+                            /* @__PURE__ */ jsxs("span", { children: [
+                              Math.round((variant.file_size || 0) / 1024),
+                              " KB"
+                            ] })
+                          ] }),
+                          variant.crop_params && /* @__PURE__ */ jsxs("div", { className: "limbo-variant-crop-badge", children: [
+                            /* @__PURE__ */ jsx("span", { className: "icon icon-scissors icon--xs" }),
+                            " ",
+                            "Recortada"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "limbo-variant-actions", children: [
+                          shouldShowSelectButton && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              className: "btn btn-success btn-sm",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleSelectVariant(variant);
+                              },
+                              title: `Seleccionar variante ${variant.name || variant.filename || variant.id}`,
+                              children: "Seleccionar"
+                            }
+                          ),
+                          shouldShowCopyButton && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              className: "btn btn-secondary btn-sm",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleCopyVariantUrl(variant);
+                              },
+                              title: "Copiar URL",
+                              children: /* @__PURE__ */ jsx("span", { className: "icon icon-copy-white icon--sm" })
+                            }
+                          ),
+                          shouldShowDownloadButton && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              className: "btn btn-primary btn-sm",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleDownloadVariant(variant);
+                              },
+                              title: "Descargar",
+                              children: /* @__PURE__ */ jsx("span", { className: "icon icon-download-white icon--sm" })
+                            }
+                          ),
+                          shouldShowDeleteButton && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              className: "btn btn-danger btn-sm",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleDeleteVariant(variant);
+                              },
+                              title: "Eliminar variante",
+                              children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--sm m-[0!important]" })
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    variant.id
+                  );
+                }) })
+              ] })
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
 function ImageCard({
   image,
   onDelete,
@@ -30465,10 +31396,14 @@ function ImageCard({
     download: true,
     copy: true,
     delete: true,
-    crop: true
+    crop: true,
+    variants: true
+    // Nueva acción para ver variantes
   }
 }) {
   const [copied, setCopied] = useState(false);
+  const [showVariants, setShowVariants] = useState(false);
+  const [localVariantsCount, setLocalVariantsCount] = useState(image.variants_count || 0);
   const { isMobile, isTouch } = useMobileDetection();
   const accessibilityManager = window.limboCore?.accessibilityManager;
   const config = window.limboCore?.config?.getGlobal() || {};
@@ -30484,21 +31419,41 @@ function ImageCard({
     );
     onDelete?.(image);
   };
-  const handleCopyUrl = (e) => {
+  const handleCopyUrl = async (e) => {
     e.stopPropagation();
-    navigator.clipboard.writeText(image.path).then(() => {
+    let textToCopy = image.url || image.path;
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(textToCopy);
+      } else {
+        const textArea = document.createElement("textarea");
+        textArea.value = textToCopy;
+        textArea.style.position = "fixed";
+        textArea.style.opacity = "0";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+      }
       setCopied(true);
       accessibilityManager?.announce(
-        `URL de ${image.filename} copiada al portapapeles`
+        `URL de ${image.filename} copiada al portapapeles. Nota: La URL puede tener un tiempo de validez limitado.`
       );
       setTimeout(() => setCopied(false), 2e3);
-    });
+    } catch (err) {
+      console.error("Error al copiar URL:", err);
+      accessibilityManager?.announce(
+        `Error al copiar URL de ${image.filename}. Inténtalo de nuevo.`
+      );
+      alert(`Error al copiar URL de ${image.filename}. Por favor, inténtalo de nuevo.`);
+    }
   };
   const handleDownload = (e) => {
     e.preventDefault();
     e.stopPropagation();
     accessibilityManager?.announce(`Descargando ${image.filename}`);
-    fetch(image.path, { mode: "cors" }).then((resp) => resp.blob()).then((blob) => {
+    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;
@@ -30513,9 +31468,22 @@ function ImageCard({
   };
   const handleCrop = (e) => {
     e.stopPropagation();
-    accessibilityManager?.announce(`Abriendo editor para ${image.filename}`);
+    accessibilityManager?.announce(`Editando imagen ${image.filename}`);
     onCrop?.(image);
   };
+  const hasVariants = image.variants && image.variants.length > 0 || localVariantsCount > 0;
+  const variantsCount = localVariantsCount;
+  const handleVariantDeleted = React.useCallback(() => {
+    setLocalVariantsCount((prev) => Math.max(0, prev - 1));
+  }, []);
+  React.useEffect(() => {
+    setLocalVariantsCount(image.variants_count || 0);
+  }, [image.variants_count]);
+  const handleShowVariants = (e) => {
+    e.stopPropagation();
+    accessibilityManager?.announce(`Mostrando variantes de ${image.filename}`);
+    setShowVariants(true);
+  };
   const handleSelect = (e) => {
     e.stopPropagation();
     accessibilityManager?.announce(
@@ -30525,6 +31493,7 @@ function ImageCard({
   };
   const shouldShowSelectButton = interaction.allowSelection && allowedActions.select && onSelect;
   const shouldShowCropButton = interaction.allowCropping && allowedActions.crop && onCrop;
+  const shouldShowVariantsButton = hasVariants && allowedActions.variants !== false;
   const handleKeyDown = (e) => {
     switch (e.key) {
       case "Enter":
@@ -30560,194 +31529,274 @@ function ImageCard({
           handleCrop(e);
         }
         break;
+      case "v":
+      case "V":
+        if (allowedActions.variants) {
+          e.preventDefault();
+          handleShowVariants(e);
+        }
+        break;
     }
   };
   const handleImageClick = () => {
-    window.open(image.path, "_blank");
+    window.open(image.url || image.path, "_blank");
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      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)",
-      role: "button",
-      tabIndex: 0,
-      "aria-label": `Imagen ${image.filename}. ${image.width}x${image.height} px`,
-      style: {
-        // Optimización para touch
-        ...isTouch && {
-          touchAction: "manipulation",
-          WebkitTapHighlightColor: "transparent"
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `limbo-image-actions ${isMobile ? "limbo-image-actions--mobile" : ""}`,
-            children: [
-              allowedActions.copy && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  title: copied ? "¡Copiado!" : "Copiar URL",
-                  className: `btn btn-copy border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
-                  onClick: handleCopyUrl,
-                  tabIndex: -1,
-                  style: {
-                    ...isMobile && {
-                      width: "40px",
-                      height: "40px"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `icon ${copied ? "icon-copied-white" : "icon-copy-white"} icon--sm`,
-                      "aria-hidden": "true"
-                    }
-                  )
-                }
-              ),
-              shouldShowSelectButton && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  title: "Seleccionar imagen",
-                  className: `btn btn-success border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
-                  onClick: handleSelect,
-                  tabIndex: -1,
-                  style: {
-                    ...isMobile && {
-                      width: "40px",
-                      height: "40px"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "icon icon-tick-white icon--sm",
-                      "aria-hidden": "true"
-                    }
-                  )
-                }
-              ),
-              shouldShowCropButton && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  title: "Editar imagen",
-                  className: `btn btn-crop border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
-                  onClick: handleCrop,
-                  tabIndex: -1,
-                  style: {
-                    ...isMobile && {
-                      width: "40px",
-                      height: "40px"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "icon icon-scissors-white icon--sm",
-                      "aria-hidden": "true"
-                    }
-                  )
-                }
-              ),
-              allowedActions.download && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  title: "Descargar",
-                  className: `btn btn-download border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
-                  onClick: handleDownload,
-                  tabIndex: -1,
-                  style: {
-                    ...isMobile && {
-                      width: "40px",
-                      height: "40px"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "icon icon-download-white icon--sm",
-                      "aria-hidden": "true"
-                    }
-                  )
-                }
-              ),
-              allowedActions.delete && onDelete && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleDelete,
-                  disabled: isDeleting,
-                  className: `btn btn-delete border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
-                  title: "Eliminar imagen",
-                  tabIndex: -1,
-                  style: {
-                    ...isMobile && {
-                      width: "40px",
-                      height: "40px"
-                    }
-                  },
-                  children: isDeleting ? "…" : /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "icon icon-close-small-white icon--sm",
-                      "aria-hidden": "true"
-                    }
-                  )
-                }
-              )
-            ]
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        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)",
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `Imagen ${image.filename}. ${image.width}x${image.height} px`,
+        style: {
+          // Optimización para touch
+          ...isTouch && {
+            touchAction: "manipulation",
+            WebkitTapHighlightColor: "transparent"
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: image.path,
-            alt: image.filename,
-            className: "w-full object-cover rounded aspect-square",
-            sizes: `height: ${thumbnailSize * 6}px,width: ${thumbnailSize * 6}px`,
-            draggable: false,
-            style: {
-              // Better responsive behavior for images
-              ...isMobile && {
-                minHeight: `${Math.max(thumbnailSize * 3, 80)}px`,
-                height: "auto",
-                aspectRatio: "1 / 1",
-                objectFit: "cover"
-              }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `limbo-image-actions ${isMobile ? "limbo-image-actions--mobile" : ""}`,
+              children: [
+                allowedActions.copy && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: copied ? "¡Copiado!" : "Copiar URL",
+                    className: `btn btn-copy border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
+                    onClick: handleCopyUrl,
+                    tabIndex: -1,
+                    style: {
+                      ...isMobile && {
+                        width: "40px",
+                        height: "40px"
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `icon ${copied ? "icon-copied-white" : "icon-copy-white"} icon--sm`,
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                ),
+                shouldShowSelectButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Seleccionar imagen",
+                    className: `btn btn-success border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
+                    onClick: handleSelect,
+                    tabIndex: -1,
+                    style: {
+                      ...isMobile && {
+                        width: "40px",
+                        height: "40px"
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "icon icon-tick-white icon--sm",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                ),
+                shouldShowCropButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Editar imagen",
+                    className: `btn btn-crop border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
+                    onClick: handleCrop,
+                    tabIndex: -1,
+                    style: {
+                      ...isMobile && {
+                        width: "40px",
+                        height: "40px"
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "icon icon-scissors-white icon--sm",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                ),
+                shouldShowVariantsButton && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    title: `Ver ${variantsCount} variante${variantsCount !== 1 ? "s" : ""}`,
+                    className: `btn btn-variants border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
+                    onClick: handleShowVariants,
+                    tabIndex: -1,
+                    style: {
+                      ...isMobile && {
+                        width: "40px",
+                        height: "40px"
+                      },
+                      position: "relative"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "icon icon-album-menu-white icon--sm",
+                          "aria-hidden": "true"
+                        }
+                      ),
+                      variantsCount > 0 && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "variants-count-badge",
+                          style: {
+                            position: "absolute",
+                            top: "-8px",
+                            right: "-8px",
+                            background: "#dc2626",
+                            color: "white",
+                            borderRadius: "50%",
+                            minWidth: "20px",
+                            height: "20px",
+                            fontSize: "12px",
+                            fontWeight: "700",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            lineHeight: "1",
+                            border: "2px solid white",
+                            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.4)",
+                            zIndex: "999"
+                          },
+                          children: variantsCount
+                        }
+                      )
+                    ]
+                  }
+                ),
+                allowedActions.download && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Descargar",
+                    className: `btn btn-download border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
+                    onClick: handleDownload,
+                    tabIndex: -1,
+                    style: {
+                      ...isMobile && {
+                        width: "40px",
+                        height: "40px"
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "icon icon-download-white icon--sm",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                ),
+                allowedActions.delete && onDelete && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleDelete,
+                    disabled: isDeleting,
+                    className: `btn btn-delete border border-brand-blue-050/50 ${isMobile ? "btn--touch" : ""}`,
+                    title: "Eliminar imagen",
+                    tabIndex: -1,
+                    style: {
+                      ...isMobile && {
+                        width: "40px",
+                        height: "40px"
+                      }
+                    },
+                    children: isDeleting ? "…" : /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "icon icon-close-small-white icon--sm",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                )
+              ]
             }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `text-xs mt-1 truncate w-full text-center limbo-image-card-name ${isMobile ? "limbo-image-card-name--mobile" : ""}`,
-            style: {
-              // Better text visibility on mobile
-              ...isMobile && {
-                fontSize: "0.75rem",
-                lineHeight: "1.2",
-                maxWidth: "100%",
-                padding: "2px 4px",
-                backgroundColor: "rgba(255, 255, 255, 0.9)",
-                borderRadius: "4px",
-                color: "#333",
-                fontWeight: "500"
+          ),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image.url || image.path,
+              alt: image.filename,
+              className: "w-full object-cover rounded aspect-square",
+              sizes: `height: ${thumbnailSize * 6}px,width: ${thumbnailSize * 6}px`,
+              draggable: false,
+              style: {
+                // Better responsive behavior for images
+                ...isMobile && {
+                  minHeight: `${Math.max(thumbnailSize * 3, 80)}px`,
+                  height: "auto",
+                  aspectRatio: "1 / 1",
+                  objectFit: "cover"
+                }
               }
-            },
-            children: image.filename
-          }
-        )
-      ]
-    }
-  );
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-xs mt-1 truncate w-full text-center limbo-image-card-name ${isMobile ? "limbo-image-card-name--mobile" : ""}`,
+              style: {
+                // Better text visibility on mobile
+                ...isMobile && {
+                  fontSize: "0.75rem",
+                  lineHeight: "1.2",
+                  maxWidth: "100%",
+                  padding: "2px 4px",
+                  backgroundColor: "rgba(255, 255, 255, 0.9)",
+                  borderRadius: "4px",
+                  color: "#333",
+                  fontWeight: "500"
+                }
+              },
+              children: image.filename
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageVariantsModal,
+      {
+        image,
+        isOpen: showVariants,
+        onClose: () => setShowVariants(false),
+        onSelect,
+        onDelete,
+        onCrop,
+        onVariantDeleted: handleVariantDeleted,
+        allowedActions: {
+          select: allowedActions.select,
+          download: allowedActions.download,
+          copy: allowedActions.copy,
+          delete: allowedActions.delete,
+          crop: allowedActions.crop
+        }
+      }
+    )
+  ] });
 }
 function Loader({ text = "Cargando..." }) {
   return /* @__PURE__ */ jsxs(
@@ -30851,7 +31900,9 @@ function Gallery({
     download: true,
     copy: true,
     delete: true,
-    crop: true
+    crop: true,
+    variants: true
+    // Nueva acción para ver variantes
   }
 }) {
   const [filters, setFilters] = useState({
@@ -31110,240 +32161,21 @@ function TabUpload({ file, setFile, previewUrl, setPreviewUrl, fileInputRef, onU
     }
   );
 }
-class AuthService {
-  constructor() {
-    this.currentToken = null;
-    this.tokenExpiry = null;
-    this.refreshPromise = null;
-  }
-  /**
-   * Authenticate and get JWT token
-   * Maps to: POST /auth/token
-   */
-  async authenticate(apiKey, publicKey, prod = false) {
-    try {
-      const response = await callApi({
-        apiKey: "temp",
-        // We don't use this for auth endpoint
-        endpoint: "/token",
-        method: "POST",
-        body: {
-          api_key: apiKey,
-          public_key: publicKey
-        },
-        prod,
-        basePath: "/auth",
-        customHeaders: {
-          // Override Authorization for auth endpoint
-          Authorization: void 0
-        }
-      });
-      if (response && response.token) {
-        this.currentToken = response.token;
-        this.tokenExpiry = Date.now() + response.expires_in * 1e3 - 3e4;
-        return {
-          success: true,
-          token: response.token,
-          expires_in: response.expires_in,
-          portal: response.portal,
-          policies: response.policies
-        };
-      }
-      throw new Error("Invalid authentication response");
-    } catch (error) {
-      console.error("Authentication failed:", error);
-      return {
-        success: false,
-        error: error.message
-      };
-    }
-  }
-  /**
-   * Get current valid token (auto-refresh if needed)
-   */
-  async getValidToken(apiKey, publicKey, prod = false) {
-    if (!this.currentToken || Date.now() > this.tokenExpiry) {
-      if (!this.refreshPromise) {
-        this.refreshPromise = this.authenticate(apiKey, publicKey, prod);
-      }
-      const result = await this.refreshPromise;
-      this.refreshPromise = null;
-      if (!result.success) {
-        throw new Error(`Authentication failed: ${result.error}`);
-      }
-    }
-    return this.currentToken;
-  }
-  /**
-   * Check if current token is valid
-   */
-  isTokenValid() {
-    return this.currentToken && Date.now() < this.tokenExpiry;
-  }
-  /**
-   * Clear current token (logout)
-   */
-  clearToken() {
-    this.currentToken = null;
-    this.tokenExpiry = null;
-    this.refreshPromise = null;
-  }
-  /**
-   * Get token info
-   */
-  getTokenInfo() {
-    if (!this.currentToken) return null;
-    return {
-      hasToken: !!this.currentToken,
-      isValid: this.isTokenValid(),
-      expiresAt: new Date(this.tokenExpiry),
-      expiresIn: Math.max(0, this.tokenExpiry - Date.now())
-    };
-  }
-}
-const API_URLS = {
-  DEV: "https://led-dev-limbo-dev.eu.els.local",
-  // PREPRODUCCIÓN - Updated URL
-  // DEV: "http://localhost", // LOCAL - Para desarrollo local
-  PROD: "https://limbo.lefebvre.com"
-};
-let globalConfig = {
-  // Legacy configuration
-  apiKey: null,
-  publicKey: null,
-  prod: false,
-  // New JWT v2 configuration
-  auth: {
-    apiKey: null,
-    publicKey: null,
-    authMode: "jwt",
-    // "jwt" | "legacy"
-    portal: null,
-    tokenStorage: "memory"
-  }
-};
-let authServiceInstance = null;
-function configureApiClient(config) {
-  if (config.auth) {
-    globalConfig.auth = { ...globalConfig.auth, ...config.auth };
-    globalConfig.prod = config.prod || globalConfig.prod;
-    if (globalConfig.auth.authMode === "jwt" && globalConfig.auth.apiKey) {
-      if (!authServiceInstance) {
-        authServiceInstance = new AuthService();
-      }
-    }
-  } else {
-    globalConfig = {
-      ...globalConfig,
-      ...config,
-      auth: {
-        ...globalConfig.auth,
-        authMode: config.apiKey ? "legacy" : "jwt"
-      }
-    };
-  }
-}
-function getBaseUrl({ prod = false } = {}) {
-  return prod ? API_URLS.PROD : API_URLS.DEV;
-}
-async function getHeaders({ isFormData = false, useJWT = true, customHeaders = {} } = {}) {
-  const headers = {
-    "Content-Type": "application/json"
-  };
-  if (useJWT) {
-    const authConfig = globalConfig.auth;
-    if (authConfig.authMode === "jwt" && authConfig.apiKey) {
-      try {
-        if (!authServiceInstance) {
-          authServiceInstance = new AuthService();
-        }
-        const token = await authServiceInstance.getValidToken(
-          authConfig.apiKey,
-          authConfig.publicKey || globalConfig.publicKey,
-          globalConfig.prod
-        );
-        headers.Authorization = `Bearer ${token}`;
-      } catch (error) {
-        console.error("JWT authentication failed:", error);
-        throw new Error("Authentication required");
-      }
-    } else if (authConfig.authMode === "legacy" && globalConfig.apiKey) {
-      headers["X-API-Key"] = globalConfig.apiKey;
-    }
-  }
-  if (isFormData) {
-    delete headers["Content-Type"];
-  }
-  return { ...headers, ...customHeaders };
-}
-function configureJWTFromConfigManager(configManager) {
-  const authConfig = configManager.getAuthConfig();
-  configureApiClient({
-    auth: authConfig,
-    prod: configManager.get("prod") || false
-  });
-}
-async function callApi({
-  endpoint,
-  method = "GET",
-  body = null,
-  prod = false,
-  basePath = "",
-  customHeaders = {},
-  isFormData = false,
-  useJWT = true
-  // New parameter to control JWT usage
-}) {
-  try {
-    const useProd = prod || globalConfig.prod;
-    const headers = await getHeaders({
-      isFormData,
-      useJWT,
-      customHeaders
-    });
-    const res = await fetch(`${getBaseUrl({ prod: useProd })}${basePath}${endpoint}`, {
-      method,
-      headers,
-      body: body ? isFormData ? body : JSON.stringify(body) : void 0
-    });
-    if (!res.ok) {
-      let errorMessage = `HTTP ${res.status}: ${res.statusText}`;
-      try {
-        const result = await res.json();
-        if (result.error) {
-          errorMessage = `${result.error.code}: ${result.error.message}`;
-        } else if (result.message) {
-          errorMessage = result.message;
-        }
-      } catch {
-      }
-      throw new Error(errorMessage);
-    }
-    return res.json();
-  } catch (err) {
-    throw new Error(`API Error: ${err.message}`);
-  }
+const BASE_PATH$3 = "/api";
+function getAiServices(prod = false) {
+  return callApi({ endpoint: "/ai/services", prod, basePath: BASE_PATH$3 });
 }
-const BASE_PATH$4 = "/api/atenea";
-function getAiServices(apiKey, prod = false) {
-  return callApi({ endpoint: "/ai/services", prod, basePath: BASE_PATH$4 });
-}
-function generateAiImage(apiKey, params, prod = false) {
-  return callApi({ endpoint: "/ai/generate", method: "POST", body: params, prod, basePath: BASE_PATH$4 });
+function generateAiImage(params, prod = false) {
+  return callApi({ endpoint: "/ai/generate", method: "POST", body: params, prod, basePath: BASE_PATH$3 });
 }
 const CACHE_TTL$4 = 24 * 60 * 60 * 1e3;
 const cache$4 = /* @__PURE__ */ new Map();
-function useAiServices(apiKey, prod = false) {
+function useAiServices(prod = false) {
   const [services, setServices] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   useEffect(() => {
-    if (!apiKey) {
-      setError("API Key no proporcionada");
-      setLoading(false);
-      return;
-    }
-    const cacheKey = `${apiKey}-${prod}`;
+    const cacheKey = `ai-services-${prod}`;
     const cached = cache$4.get(cacheKey);
     const now = Date.now();
     if (cached && now - cached.timestamp < CACHE_TTL$4) {
@@ -31354,9 +32186,9 @@ function useAiServices(apiKey, prod = false) {
     let isMounted = true;
     const fetchServices = async () => {
       try {
-        const data = await getAiServices(apiKey, prod);
+        const data = await getAiServices(prod);
         if (!isMounted) return;
-        const result = data.result || [];
+        const result = data?.data?.images || [];
         setServices(result);
         cache$4.set(cacheKey, { data: result, timestamp: now });
       } catch (err) {
@@ -31369,14 +32201,14 @@ function useAiServices(apiKey, prod = false) {
     return () => {
       isMounted = false;
     };
-  }, [apiKey, prod]);
+  }, [prod]);
   const invalidateCache = () => {
-    cache$4.delete(`${apiKey}-${prod}`);
+    cache$4.delete(`ai-services-${prod}`);
   };
   return { services, loading, error, invalidateCache };
 }
-const BASE_PATH$3 = "/api/atenea";
-function getImageParams(apiKey, { services = null, form = false } = {}, prod = false) {
+const BASE_PATH$2 = "/api/atenea";
+function getImageParams({ services = null, form = false } = {}, prod = false) {
   const params = {};
   if (services) params.services = services;
   if (form !== false) params.form = form;
@@ -31385,19 +32217,19 @@ function getImageParams(apiKey, { services = null, form = false } = {}, prod = f
     endpoint: `/ai/params${queryString}`,
     method: "GET",
     prod,
-    basePath: BASE_PATH$3
+    basePath: BASE_PATH$2
   });
 }
 const CACHE_TTL$3 = 24 * 60 * 60 * 1e3;
 const cache$3 = /* @__PURE__ */ new Map();
-function useImageParams(apiKey, prod = false) {
+function useImageParams(prod = false) {
   const [params, setParams] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const fetchParams = async (service) => {
     setLoading(true);
     setError(null);
-    const cacheKey = `${apiKey}-${prod}-${service}`;
+    const cacheKey = `${prod}-${service}`;
     const now = Date.now();
     const cached = cache$3.get(cacheKey);
     if (cached && now - cached.timestamp < CACHE_TTL$3) {
@@ -31407,13 +32239,13 @@ function useImageParams(apiKey, prod = false) {
     }
     try {
       const data = await getImageParams(
-        apiKey,
         { services: service, form: false },
         prod
       );
-      setParams(data.result || data);
-      cache$3.set(cacheKey, { data: data.result || data, timestamp: now });
-      return data.result || data;
+      const result = data?.result?.data || data?.data || data?.result || data;
+      setParams(result);
+      cache$3.set(cacheKey, { data: result, timestamp: now });
+      return result;
     } catch (err) {
       setError(err.message);
       setParams(null);
@@ -31428,17 +32260,34 @@ function useImageParams(apiKey, prod = false) {
   };
   return { params, loading, error, fetchParams, reset };
 }
-function TabAI({ apiKey, prod, disabled, onGenerated }) {
-  const aiServicesHook = useAiServices(apiKey, prod);
-  const imageParamsHook = useImageParams(apiKey, prod);
+function TabAI({ prod, disabled, onSelected, onGenerated }) {
+  const aiServicesHook = useAiServices(prod);
+  const imageParamsHook = useImageParams(prod);
   const [selectedService, setSelectedService] = useState("");
   const [dynamicForm, setDynamicForm] = useState({});
   const [aiLoading, setAiLoading] = useState(false);
   const [aiError, setAiError] = useState(null);
   const [aiImage, setAiImage] = useState(null);
+  const serviceLabels = {
+    // IA Services
+    "dall-e-2": "Dalle2",
+    "dall-e-3": "Dalle3",
+    "freepik-classic": "Freepik Classic",
+    "freepik-mystic": "Freepik Mystic",
+    "freepik-google": "Freepik Google",
+    "freepik-flux": "Freepik Flux",
+    // Stock Services
+    "shutterstock": "Shutterstock",
+    "freepikstock": "Freepik"
+  };
+  const getServiceLabel = (service) => {
+    return serviceLabels[service] || service;
+  };
   React.useEffect(() => {
     if (!aiServicesHook.loading && aiServicesHook.services.length === 1) {
-      setSelectedService(aiServicesHook.services[0]);
+      const service = aiServicesHook.services[0];
+      setSelectedService(service);
+      imageParamsHook.fetchParams(service, true);
     }
   }, [aiServicesHook.loading, aiServicesHook.services]);
   const handleServiceChange = async (e) => {
@@ -31471,22 +32320,49 @@ function TabAI({ apiKey, prod, disabled, onGenerated }) {
     setAiError(null);
     setAiImage(null);
     try {
-      const data = await generateAiImage(apiKey, dynamicForm, prod);
-      const result = data.result || data;
-      if (result && onGenerated) {
-        const base64Data = result[0].replace(/^data:image\/\w+;base64,/, "");
-        const byteCharacters = atob(base64Data);
-        const byteNumbers = new Array(byteCharacters.length);
-        for (let i = 0; i < byteCharacters.length; i++) {
-          byteNumbers[i] = byteCharacters.charCodeAt(i);
-        }
-        const byteArray = new Uint8Array(byteNumbers);
-        const file = new File([byteArray], "ai-image.webp", {
-          type: "image/webp"
-        });
-        onGenerated(file);
+      const response = await generateAiImage(dynamicForm, prod);
+      let imageData = null;
+      if (response?.data?.images && Array.isArray(response.data.images) && response.data.images.length > 0) {
+        imageData = response.data.images[0];
+      } else if (response?.result?.images && Array.isArray(response.result.images) && response.result.images.length > 0) {
+        imageData = response.result.images[0];
+      } else if (Array.isArray(response) && response.length > 0) {
+        imageData = response[0];
+      } else if (typeof response === "string") {
+        imageData = response;
+      }
+      if (imageData && onGenerated) {
+        if (imageData.startsWith("http")) {
+          try {
+            const imageResponse = await fetch(imageData);
+            if (!imageResponse.ok) {
+              throw new Error(`Failed to download image: ${imageResponse.status}`);
+            }
+            const blob = await imageResponse.blob();
+            const file = new File([blob], "ai-image.png", {
+              type: blob.type || "image/png"
+            });
+            onGenerated(file);
+          } catch (downloadError) {
+            throw new Error(`Error downloading image: ${downloadError.message}`);
+          }
+        } else {
+          const cleanBase64 = imageData.replace(/^data:image\/\w+;base64,/, "");
+          const byteCharacters = atob(cleanBase64);
+          const byteNumbers = new Array(byteCharacters.length);
+          for (let i = 0; i < byteCharacters.length; i++) {
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+          }
+          const byteArray = new Uint8Array(byteNumbers);
+          const file = new File([byteArray], "ai-image.webp", {
+            type: "image/webp"
+          });
+          onGenerated(file);
+        }
+      } else {
+        throw new Error("No se pudo extraer la imagen de la respuesta");
       }
-      setAiImage(result || null);
+      setAiImage(response?.data?.images || response?.result?.images || null);
     } catch (err) {
       setAiError(err.message || "Error al generar la imagen");
     } finally {
@@ -31496,25 +32372,39 @@ function TabAI({ apiKey, prod, disabled, onGenerated }) {
   const renderDynamicForm = () => {
     const params = imageParamsHook.params?.[selectedService]?.parameters;
     if (!params) return null;
+    const visibleFields = Object.entries(params).filter(([_, config]) => !config.disabled);
+    const useGridLayout = visibleFields.length > 3;
     return /* @__PURE__ */ jsxs(
       "form",
       {
         onSubmit: handleDynamicFormSubmit,
         "data-type": "ai",
-        className: "flex flex-col gap-4 mt-4 border-t-1 pt-5 border-brand-blue-200",
+        className: "flex flex-col gap-3 mt-4 border-t-1 pt-4 border-brand-blue-200",
         "aria-label": "Formulario generación IA",
         children: [
-          Object.entries(params).map(([key, config]) => {
-            if (config.disabled) {
-              return null;
+          /* @__PURE__ */ jsx("div", { className: useGridLayout ? "grid grid-cols-1 md:grid-cols-2 gap-3" : "flex flex-col gap-3", children: visibleFields.map(([key, config]) => {
+            let placeholder = config.placeholder || "";
+            if (!placeholder) {
+              if (config.type === "integer") {
+                placeholder = config.minValue && config.maxValue ? `Entre ${config.minValue} y ${config.maxValue}` : config.minValue ? `Mínimo ${config.minValue}` : config.maxValue ? `Máximo ${config.maxValue}` : "Introduce un número";
+              } else if (key.toLowerCase().includes("prompt")) {
+                placeholder = "Describe la imagen que deseas generar...";
+              } else if (key.toLowerCase().includes("negative")) {
+                placeholder = "Elementos a evitar en la imagen...";
+              } else {
+                placeholder = `Introduce ${(config.label || key).toLowerCase()}`;
+              }
             }
             return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "label",
                 {
                   htmlFor: `ai-${key}`,
-                  className: "text-sm font-medium text-brand-blue-1000",
-                  children: config.label || key
+                  className: "text-xs font-medium text-brand-blue-900",
+                  children: [
+                    config.label || key,
+                    config.required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+                  ]
                 }
               ),
               config.options ? /* @__PURE__ */ jsx(
@@ -31526,6 +32416,7 @@ function TabAI({ apiKey, prod, disabled, onGenerated }) {
                   onChange: handleDynamicFormChange,
                   className: "limbo-input",
                   disabled,
+                  title: config.label || key,
                   children: config.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
                 }
               ) : /* @__PURE__ */ jsx(
@@ -31540,11 +32431,13 @@ function TabAI({ apiKey, prod, disabled, onGenerated }) {
                   disabled,
                   required: config.required,
                   min: config.minValue,
-                  max: config.maxValue
+                  max: config.maxValue,
+                  placeholder,
+                  title: config.label || key
                 }
               )
             ] }, key);
-          }),
+          }) }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -31575,7 +32468,7 @@ function TabAI({ apiKey, prod, disabled, onGenerated }) {
       {
         id: "aiSelectDescription",
         className: "text-lg font-semibold text-brand-blue-1000",
-        children: "Selecciona el modelo IA"
+        children: aiServicesHook.services.length === 1 ? `Generación con ${getServiceLabel(selectedService)}` : "Selecciona el modelo IA"
       }
     ),
     aiServicesHook.services.length > 1 && /* @__PURE__ */ jsxs(
@@ -31590,7 +32483,7 @@ function TabAI({ apiKey, prod, disabled, onGenerated }) {
         className: "limbo-input",
         children: [
           /* @__PURE__ */ jsx("option", { value: "", children: "-- Selecciona --" }),
-          aiServicesHook.services.map((service) => /* @__PURE__ */ jsx("option", { value: service, children: service }, service))
+          aiServicesHook.services.map((service) => /* @__PURE__ */ jsx("option", { value: service, children: getServiceLabel(service) }, service))
         ]
       }
     ),
@@ -31612,26 +32505,24 @@ function TabAI({ apiKey, prod, disabled, onGenerated }) {
     ] }, "img-" + index))
   ] });
 }
-const BASE_PATH$2 = "/api/atenea";
-function getStockServices(apiKey, prod = false) {
-  return callApi({ endpoint: "/stock/services", prod, basePath: BASE_PATH$2 });
+const BASE_PATH$1 = "/api";
+function getStockServices(prod = false) {
+  return callApi({ endpoint: "/stock/services", prod, basePath: BASE_PATH$1 });
 }
-function searchStockImages(apiKey, params, prod = false) {
-  return callApi({ endpoint: "/stock/search", method: "POST", body: params, prod, basePath: BASE_PATH$2 });
+function searchStockImages(params, prod = false) {
+  return callApi({ endpoint: "/stock/search", method: "POST", body: params, prod, basePath: BASE_PATH$1 });
+}
+function downloadStockImage(params, prod = false) {
+  return callApi({ endpoint: "/stock/download", method: "POST", body: params, prod, basePath: BASE_PATH$1 });
 }
 const CACHE_TTL$2 = 24 * 60 * 60 * 1e3;
 const cache$2 = /* @__PURE__ */ new Map();
-function useStockServices(apiKey, prod = false) {
+function useStockServices(prod = false) {
   const [services, setServices] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   useEffect(() => {
-    if (!apiKey) {
-      setError("API Key no proporcionada");
-      setLoading(false);
-      return;
-    }
-    const cacheKey = `${apiKey}-${prod}`;
+    const cacheKey = `stock-services-${prod}`;
     const cached = cache$2.get(cacheKey);
     const now = Date.now();
     if (cached && now - cached.timestamp < CACHE_TTL$2) {
@@ -31642,9 +32533,9 @@ function useStockServices(apiKey, prod = false) {
     let isMounted = true;
     const fetchServices = async () => {
       try {
-        const data = await getStockServices(apiKey, prod);
+        const data = await getStockServices(prod);
         if (!isMounted) return;
-        const result = data.result || [];
+        const result = data?.data?.images || [];
         setServices(result);
         cache$2.set(cacheKey, { data: result, timestamp: now });
       } catch (err) {
@@ -31657,23 +32548,34 @@ function useStockServices(apiKey, prod = false) {
     return () => {
       isMounted = false;
     };
-  }, [apiKey, prod]);
+  }, [prod]);
   const invalidateCache = () => {
-    cache$2.delete(`${apiKey}-${prod}`);
+    cache$2.delete(`stock-services-${prod}`);
   };
   return { services, loading, error, invalidateCache };
 }
-function TabStock({ apiKey, prod, disabled, onSelected }) {
-  const stockServicesHook = useStockServices(apiKey, prod);
-  const imageParamsHook = useImageParams(apiKey, prod);
+function TabStock({ prod, disabled, onSelected }) {
+  const stockServicesHook = useStockServices(prod);
+  const imageParamsHook = useImageParams(prod);
   const [selectedService, setSelectedService] = useState("");
   const [dynamicForm, setDynamicForm] = useState({});
   const [stockLoading, setStockLoading] = useState(false);
   const [stockError, setStockError] = useState(null);
   const [stockImages, setStockImages] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [downloadingId, setDownloadingId] = useState(null);
+  const serviceLabels = {
+    shutterstock: "Shutterstock",
+    freepikstock: "Freepik"
+  };
+  const getServiceLabel = (service) => {
+    return serviceLabels[service] || service;
+  };
   React.useEffect(() => {
     if (!stockServicesHook.loading && stockServicesHook.services.length === 1) {
-      setSelectedService(stockServicesHook.services[0]);
+      const service = stockServicesHook.services[0];
+      setSelectedService(service);
+      imageParamsHook.fetchParams(service, true);
     }
   }, [stockServicesHook.loading, stockServicesHook.services]);
   const handleServiceChange = async (e) => {
@@ -31681,6 +32583,7 @@ function TabStock({ apiKey, prod, disabled, onSelected }) {
     setSelectedService(service);
     setDynamicForm({});
     setStockImages([]);
+    setCurrentPage(1);
     if (service) {
       await imageParamsHook.fetchParams(service, true);
     }
@@ -31700,11 +32603,10 @@ function TabStock({ apiKey, prod, disabled, onSelected }) {
     const { name, value } = e.target;
     setDynamicForm((prev) => ({ ...prev, [name]: value }));
   };
-  const handleDynamicFormSubmit = async (e) => {
-    e.preventDefault();
+  const performSearch = async (page = 1) => {
     setStockLoading(true);
     setStockError(null);
-    setStockImages([]);
+    if (page === 1) setStockImages([]);
     try {
       const params = imageParamsHook.params?.[selectedService]?.parameters;
       const formData = { ...dynamicForm };
@@ -31712,52 +32614,93 @@ function TabStock({ apiKey, prod, disabled, onSelected }) {
         if (!(key in formData)) formData[key] = cfg.default ?? "";
       });
       formData.service = selectedService;
-      const data = await searchStockImages(apiKey, formData, prod);
-      const result = data.result || [];
+      formData.page = page;
+      const data = await searchStockImages(formData, prod);
+      const result = data?.result?.data || [];
       setStockImages(Array.isArray(result) ? result : []);
+      setCurrentPage(page);
     } catch (err) {
       setStockError(err.message || "Error al buscar imágenes");
     } finally {
       setStockLoading(false);
     }
   };
+  const handleDynamicFormSubmit = async (e) => {
+    e.preventDefault();
+    const query = dynamicForm.query || dynamicForm.search || dynamicForm.term || "";
+    if (query.trim().length < 5) {
+      setStockError("La búsqueda debe tener al menos 5 caracteres");
+      return;
+    }
+    await performSearch(1);
+  };
+  const handlePageChange = (newPage) => {
+    if (newPage < 1) return;
+    performSearch(newPage);
+  };
   const handleImageSelect = async (img) => {
-    setStockLoading(true);
+    setDownloadingId(img.id);
     setStockError(null);
     try {
-      let imageUrl = img.url || img;
-      let response = await fetch(imageUrl);
-      let blob = await response.blob();
-      let file = new File([blob], "stock-image.jpg", { type: blob.type });
-      if (onSelected) onSelected(file);
+      const downloadParams = {
+        service: selectedService,
+        image_id: img.id
+      };
+      const downloadData = await downloadStockImage(downloadParams, prod);
+      if (downloadData?.result?.url || downloadData?.result?.download_url) {
+        const imageUrl = downloadData.result.url || downloadData.result.download_url;
+        const response = await fetch(imageUrl);
+        const blob = await response.blob();
+        const filename = downloadData.result.filename || `stock-${img.id}.jpg`;
+        const file = new File([blob], filename, {
+          type: blob.type || "image/jpeg"
+        });
+        if (onSelected) onSelected(file);
+      } else {
+        throw new Error("No se pudo obtener la URL de descarga");
+      }
     } catch (err) {
       setStockError(
         err.message || "No se pudo recuperar la imagen seleccionada"
       );
     } finally {
-      setStockLoading(false);
+      setDownloadingId(null);
     }
   };
   const renderDynamicForm = () => {
     const params = imageParamsHook.params?.[selectedService]?.parameters;
     if (!params) return null;
+    const visibleFields = Object.entries(params).filter(([_, config]) => !config.disabled);
+    const useGridLayout = visibleFields.length > 3;
     return /* @__PURE__ */ jsxs(
       "form",
       {
         onSubmit: handleDynamicFormSubmit,
         "data-type": "stock",
-        className: "flex flex-col gap-4 mt-4 border-t-1 pt-5 border-brand-blue-200",
+        className: "flex flex-col gap-3 mt-4 border-t-1 pt-4 border-brand-blue-200",
         "aria-label": "Formulario búsqueda de imágenes de Stock",
         children: [
-          Object.entries(params).map(([key, config]) => {
-            if (config.disabled) return null;
+          /* @__PURE__ */ jsx("div", { className: useGridLayout ? "grid grid-cols-1 md:grid-cols-2 gap-3" : "flex flex-col gap-3", children: visibleFields.map(([key, config]) => {
+            let placeholder = config.placeholder || "";
+            if (!placeholder) {
+              if (config.type === "integer") {
+                placeholder = config.minValue && config.maxValue ? `Entre ${config.minValue} y ${config.maxValue}` : config.minValue ? `Mínimo ${config.minValue}` : config.maxValue ? `Máximo ${config.maxValue}` : "Introduce un número";
+              } else if (key.toLowerCase().includes("query") || key.toLowerCase().includes("search") || key.toLowerCase().includes("term")) {
+                placeholder = "Buscar imágenes...";
+              } else {
+                placeholder = `Introduce ${(config.label || key).toLowerCase()}`;
+              }
+            }
             return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "label",
                 {
                   htmlFor: `stock-${key}`,
-                  className: "text-sm font-medium text-brand-blue-1000",
-                  children: config.label || key
+                  className: "text-xs font-medium text-brand-blue-900",
+                  children: [
+                    config.label || key,
+                    config.required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+                  ]
                 }
               ),
               config.options ? /* @__PURE__ */ jsx(
@@ -31769,6 +32712,7 @@ function TabStock({ apiKey, prod, disabled, onSelected }) {
                   onChange: handleDynamicFormChange,
                   className: "limbo-input",
                   disabled,
+                  title: config.label || key,
                   children: config.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
                 }
               ) : /* @__PURE__ */ jsx(
@@ -31783,11 +32727,13 @@ function TabStock({ apiKey, prod, disabled, onSelected }) {
                   disabled,
                   required: config.required,
                   min: config.minValue,
-                  max: config.maxValue
+                  max: config.maxValue,
+                  placeholder,
+                  title: config.label || key
                 }
               )
             ] }, key);
-          }),
+          }) }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -31812,7 +32758,7 @@ function TabStock({ apiKey, prod, disabled, onSelected }) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay servicios de Stock disponibles." });
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000", children: "Selecciona el servicio de Stock" }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000", children: stockServicesHook.services.length === 1 ? `Búsqueda en ${getServiceLabel(selectedService)}` : "Selecciona el servicio de Stock" }),
     stockServicesHook.services.length > 1 && /* @__PURE__ */ jsxs(
       "select",
       {
@@ -31822,7 +32768,7 @@ function TabStock({ apiKey, prod, disabled, onSelected }) {
         className: "limbo-input",
         children: [
           /* @__PURE__ */ jsx("option", { value: "", children: "-- Selecciona --" }),
-          stockServicesHook.services.map((service) => /* @__PURE__ */ jsx("option", { value: service, children: service }, service))
+          stockServicesHook.services.map((service) => /* @__PURE__ */ jsx("option", { value: service, children: getServiceLabel(service) }, service))
         ]
       }
     ),
@@ -31831,62 +32777,117 @@ function TabStock({ apiKey, prod, disabled, onSelected }) {
     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__ */ jsx(
-      "div",
-      {
-        className: "mt-6 grid grid-cols-2 md:grid-cols-4 gap-4",
-        "aria-live": "polite",
-        children: stockImages.map((img, idx) => /* @__PURE__ */ jsxs(
-          "div",
+    stockImages.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",
+          "aria-live": "polite",
+          children: stockImages.map((img, idx) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "border border-brand-blue-200 rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative aspect-video bg-neutral-100", children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: img.preview || img.thumbnail || img.url,
+                      alt: img.title || `Resultado ${idx + 1}`,
+                      className: "object-cover w-full h-full",
+                      loading: "lazy"
+                    }
+                  ),
+                  img.id && /* @__PURE__ */ jsxs("span", { className: "absolute bottom-1 right-1 bg-black/60 text-white text-xs px-2 py-1 rounded", children: [
+                    "ID: ",
+                    img.id
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: `limbo-btn w-full text-sm ${downloadingId === img.id ? "limbo-btn-disabled cursor-not-allowed" : "limbo-btn-primary"}`,
+                    onClick: () => handleImageSelect(img),
+                    disabled: stockLoading || disabled || downloadingId === img.id,
+                    children: downloadingId === img.id ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "limbo-loader limbo-loader--sm mr-1" }),
+                      "Descargando..."
+                    ] }) : "Seleccionar"
+                  }
+                ) })
+              ]
+            },
+            img.id || idx
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
           {
-            className: "border border-brand-blue-200 rounded-lg overflow-hidden bg-white shadow-sm flex flex-col items-center",
+            onClick: () => handlePageChange(currentPage - 1),
+            disabled: currentPage === 1 || stockLoading,
+            className: "limbo-btn limbo-btn-secondary px-4 py-2 disabled:opacity-50",
             children: [
-              /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: img.url || img,
-                  alt: `Resultado ${idx + 1}`,
-                  className: "object-cover w-full h-40"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  className: "limbo-btn limbo-btn-primary mt-2",
-                  onClick: () => handleImageSelect(img),
-                  disabled: stockLoading || disabled,
-                  children: "Seleccionar"
-                }
-              )
+              /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-white icon--sm" }),
+              " Anterior"
             ]
-          },
-          idx
-        ))
-      }
-    )
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "px-4 py-2 text-sm text-neutral-700", children: [
+          "Página ",
+          currentPage
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handlePageChange(currentPage + 1),
+            disabled: stockLoading || stockImages.length === 0,
+            className: "limbo-btn limbo-btn-secondary px-4 py-2 disabled:opacity-50",
+            children: [
+              "Siguiente ",
+              /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-white icon--sm" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    !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: [
+      /* @__PURE__ */ jsx("span", { className: "icon icon-search icon--lg mb-2" }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        'No se encontraron imágenes para "',
+        dynamicForm.query,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Intenta con otros términos de búsqueda" })
+    ] })
   ] });
 }
-const BASE_PATH$1 = "/api/atenea";
-function getExternalImageSources(apiKey, prod = false) {
+const BASE_PATH = "/api";
+function getExternalImageSources(prod = false) {
+  return callApi({
+    endpoint: "/external/sources",
+    prod,
+    basePath: BASE_PATH
+  });
+}
+function getExternalImages(params, prod = false) {
   return callApi({
-    endpoint: "/portals/list",
+    endpoint: `/external/search`,
+    method: "POST",
+    body: params,
     prod,
-    basePath: BASE_PATH$1
+    basePath: BASE_PATH
   });
 }
 const CACHE_TTL$1 = 24 * 60 * 60 * 1e3;
 const cache$1 = /* @__PURE__ */ new Map();
-function usePortalSources(apiKey, prod = false) {
+function usePortalSources(prod = false) {
   const [sources, setSources] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   useEffect(() => {
-    if (!apiKey) {
-      setError("API Key no proporcionada");
-      setLoading(false);
-      return;
-    }
-    const cacheKey = `${apiKey}-${prod}`;
+    const cacheKey = `portal-sources-${prod}`;
     const cached = cache$1.get(cacheKey);
     const now = Date.now();
     if (cached && now - cached.timestamp < CACHE_TTL$1) {
@@ -31897,11 +32898,15 @@ function usePortalSources(apiKey, prod = false) {
     let isMounted = true;
     const fetchSources = async () => {
       try {
-        const data = await getExternalImageSources(apiKey, prod);
+        const data = await getExternalImageSources(prod);
         if (!isMounted) return;
-        const result = data.result || [];
-        setSources(result);
-        cache$1.set(cacheKey, { data: result, timestamp: now });
+        const result = data?.data?.sources || {};
+        const sourcesArray = Object.entries(result).map(([id, source]) => ({
+          id,
+          ...source
+        }));
+        setSources(sourcesArray);
+        cache$1.set(cacheKey, { data: sourcesArray, timestamp: now });
       } catch (err) {
         if (isMounted) setError(err.message);
       } finally {
@@ -31912,31 +32917,475 @@ function usePortalSources(apiKey, prod = false) {
     return () => {
       isMounted = false;
     };
-  }, [apiKey, prod]);
+  }, [prod]);
   const invalidateCache = () => {
-    cache$1.delete(`${apiKey}-${prod}`);
+    cache$1.delete(`portal-sources-${prod}`);
   };
   return { sources, loading, error, invalidateCache };
 }
-function TabPortals({ apiKey, prod, disabled }) {
-  const portalSourcesHook = usePortalSources(apiKey, prod);
-  const [portalSelected, setPortalSelected] = useState("");
-  const handlePortalSelect = (e) => {
-    setPortalSelected(e.target.value);
+const ValidatedImage = ({ src, alt, className, onError }) => {
+  const [imageStatus, setImageStatus] = React.useState("loading");
+  const handleImageLoad = () => {
+    setImageStatus("loaded");
+  };
+  const handleImageError = () => {
+    setImageStatus("error");
+    if (onError) onError();
+  };
+  if (imageStatus === "error") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className,
+      loading: "lazy",
+      onLoad: handleImageLoad,
+      onError: handleImageError
+    }
+  );
+};
+function TabPortals({ prod, disabled, onSelected }) {
+  const portalSourcesHook = usePortalSources(prod);
+  const loadSavedState = (key, defaultValue) => {
+    try {
+      const saved = sessionStorage.getItem(`limbo_portals_${key}`);
+      return saved ? JSON.parse(saved) : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  };
+  const [selectedPortals, setSelectedPortals] = useState(() => loadSavedState("selectedPortals", []));
+  const [searchName, setSearchName] = useState(() => loadSavedState("searchName", ""));
+  const [limit, setLimit] = useState(() => loadSavedState("limit", 20));
+  const [currentPage, setCurrentPage] = useState(() => loadSavedState("currentPage", 1));
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [images, setImages] = useState(() => loadSavedState("images", []));
+  const [portalResults, setPortalResults] = useState(() => loadSavedState("portalResults", {}));
+  const [paginationInfo, setPaginationInfo] = useState(() => loadSavedState("paginationInfo", null));
+  const [downloadingUrl, setDownloadingUrl] = useState(null);
+  const searchCacheRef = useRef({});
+  const [failedImages, setFailedImages] = useState(/* @__PURE__ */ new Set());
+  React.useEffect(() => {
+    sessionStorage.setItem("limbo_portals_selectedPortals", JSON.stringify(selectedPortals));
+  }, [selectedPortals]);
+  React.useEffect(() => {
+    sessionStorage.setItem("limbo_portals_searchName", JSON.stringify(searchName));
+  }, [searchName]);
+  React.useEffect(() => {
+    sessionStorage.setItem("limbo_portals_limit", JSON.stringify(limit));
+  }, [limit]);
+  React.useEffect(() => {
+    sessionStorage.setItem("limbo_portals_currentPage", JSON.stringify(currentPage));
+  }, [currentPage]);
+  React.useEffect(() => {
+    sessionStorage.setItem("limbo_portals_images", JSON.stringify(images));
+  }, [images]);
+  React.useEffect(() => {
+    sessionStorage.setItem("limbo_portals_portalResults", JSON.stringify(portalResults));
+  }, [portalResults]);
+  React.useEffect(() => {
+    sessionStorage.setItem("limbo_portals_paginationInfo", JSON.stringify(paginationInfo));
+  }, [paginationInfo]);
+  const getCacheKey = (portals, name, limitVal, page) => {
+    return `${portals.sort().join(",")}_${name}_${limitVal}_${page}`;
+  };
+  const handlePortalToggle = (portalKey) => {
+    setSelectedPortals(
+      (prev) => prev.includes(portalKey) ? prev.filter((p) => p !== portalKey) : [...prev, portalKey]
+    );
+  };
+  const handleSelectAll = () => {
+    if (selectedPortals.length === portalSourcesHook.sources.length) {
+      setSelectedPortals([]);
+    } else {
+      setSelectedPortals(portalSourcesHook.sources.map((s) => s.id));
+    }
+  };
+  const performSearch = async (page = 1) => {
+    if (selectedPortals.length === 0) {
+      setError("Selecciona al menos un portal");
+      return;
+    }
+    const cacheKey = getCacheKey(
+      selectedPortals,
+      searchName.trim(),
+      limit,
+      page
+    );
+    const cachedData = searchCacheRef.current[cacheKey];
+    if (cachedData) {
+      setImages(cachedData.images);
+      setPortalResults(cachedData.portalResults);
+      setPaginationInfo(cachedData.paginationInfo);
+      setCurrentPage(page);
+      setError(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    if (page === 1) {
+      setImages([]);
+      setPortalResults({});
+      setPaginationInfo(null);
+    }
+    try {
+      const params = {
+        sources: selectedPortals,
+        // Ya son strings de IDs
+        limit,
+        page,
+        name: searchName.trim()
+      };
+      const data = await getExternalImages(params, prod);
+      const sources = data?.data?.sources || {};
+      const allImages = [];
+      const newPortalResults = {};
+      const seenUrls = /* @__PURE__ */ new Set();
+      let paginationInfo2 = null;
+      Object.entries(sources).forEach(([portalId, portalData]) => {
+        newPortalResults[portalId] = {
+          title: portalData.meta?.title || portalId,
+          status: 200,
+          // Si está en sources, es exitoso
+          response: "OK",
+          count: portalData.images?.length || 0
+        };
+        if (Array.isArray(portalData.images)) {
+          portalData.images.forEach((img) => {
+            const imageUrl = img.url || img.thumbnail;
+            if (!imageUrl || seenUrls.has(imageUrl)) {
+              return;
+            }
+            seenUrls.add(imageUrl);
+            allImages.push({
+              ...img,
+              source: portalId,
+              sourceTitle: portalData.meta?.title || portalId,
+              preview: img.thumbnail || img.url,
+              full: img.url
+            });
+          });
+          if (!paginationInfo2 && portalData.pagination) {
+            paginationInfo2 = portalData.pagination;
+          }
+        }
+      });
+      searchCacheRef.current[cacheKey] = {
+        images: allImages,
+        portalResults: newPortalResults,
+        paginationInfo: paginationInfo2
+      };
+      setImages(allImages);
+      setPortalResults(newPortalResults);
+      setPaginationInfo(paginationInfo2);
+      setCurrentPage(page);
+      setFailedImages(/* @__PURE__ */ new Set());
+      if (allImages.length === 0 && !data?.result?.success) {
+        setError(data?.result?.message || "No se encontraron imágenes");
+      }
+    } catch (err) {
+      setError(err.message || "Error al buscar imágenes en portales");
+    } finally {
+      setLoading(false);
+    }
   };
   const handleSearch = (e) => {
     e.preventDefault();
-    if (!portalSelected) return;
-    alert("Aquí se buscaría en el portal: " + portalSelected);
+    performSearch(1);
+  };
+  const handlePageChange = (newPage) => {
+    if (newPage < 1) return;
+    performSearch(newPage);
+  };
+  const handleImageSelect = async (img) => {
+    setDownloadingUrl(img.url || img.full);
+    setError(null);
+    try {
+      const imageUrl = img.full || img.url || img.preview;
+      if (!imageUrl) {
+        throw new Error("No se encontró URL de la imagen");
+      }
+      const apiBaseUrl = getBaseUrl({ prod });
+      const proxyUrl = `${apiBaseUrl}/api/atenea/proxy?url=${encodeURIComponent(imageUrl)}`;
+      const response = await fetch(proxyUrl);
+      if (!response.ok) {
+        throw new Error(`Error al descargar: ${response.status}`);
+      }
+      const blob = await response.blob();
+      const filename = img.filename || img.title || `portal-${img.id || Date.now()}.jpg`;
+      const file = new File([blob], filename, {
+        type: blob.type || "image/jpeg"
+      });
+      if (onSelected) onSelected(file);
+    } catch (err) {
+      setError(err.message || "No se pudo recuperar la imagen del portal");
+    } finally {
+      setDownloadingUrl(null);
+    }
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h3", { className: "mb-2", children: "Selecciona un portal externo" }),
-    /* @__PURE__ */ jsxs("select", { value: portalSelected, onChange: handlePortalSelect, disabled: portalSourcesHook.loading || disabled, children: [
-      /* @__PURE__ */ jsx("option", { value: "", children: "-- Selecciona --" }),
-      Object.entries(portalSourcesHook.sources).map(([key, portal]) => /* @__PURE__ */ jsx("option", { value: key, children: portal.title }, key))
+  if (portalSourcesHook.loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
+      /* @__PURE__ */ jsx("span", { className: "limbo-loader mr-2" }),
+      " Cargando portales disponibles..."
+    ] });
+  }
+  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: [
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000", children: "Buscar en Portales Externos" }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: handleSearch,
+        className: "flex flex-col gap-4 border-t-1 pt-4 border-brand-blue-200",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-brand-blue-1000", children: [
+                "Portales (",
+                selectedPortals.length,
+                " seleccionados)"
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleSelectAll,
+                  className: "text-xs text-brand-blue-800 hover:underline",
+                  children: selectedPortals.length === portalSourcesHook.sources.length ? "Deseleccionar todos" : "Seleccionar todos"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2", children: portalSourcesHook.sources.map((portal) => /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: "flex items-center gap-2 p-2 border border-brand-blue-200 rounded cursor-pointer hover:bg-brand-blue-050 transition",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: selectedPortals.includes(portal.id),
+                      onChange: () => handlePortalToggle(portal.id),
+                      disabled,
+                      className: "w-4 h-4"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: portal.title })
+                ]
+              },
+              portal.id
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "portal-search-name",
+                className: "text-sm font-medium text-brand-blue-1000",
+                children: "Buscar por nombre (opcional)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "portal-search-name",
+                type: "text",
+                value: searchName,
+                onChange: (e) => setSearchName(e.target.value),
+                className: "limbo-input",
+                placeholder: "Deja vacío para ver todas las imágenes",
+                disabled
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "portal-limit",
+                className: "text-sm font-medium text-brand-blue-1000",
+                children: "Imágenes por página"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                id: "portal-limit",
+                value: limit,
+                onChange: (e) => setLimit(Number(e.target.value)),
+                className: "limbo-input",
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: 10, children: "10" }),
+                  /* @__PURE__ */ jsx("option", { value: 20, children: "20" }),
+                  /* @__PURE__ */ jsx("option", { value: 50, children: "50" }),
+                  /* @__PURE__ */ jsx("option", { value: 100, children: "100" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: loading || disabled || selectedPortals.length === 0,
+              className: `limbo-btn w-full ${loading || selectedPortals.length === 0 ? "cursor-not-allowed limbo-btn-disabled" : "limbo-btn-primary"}`,
+              style: { minHeight: 44 },
+              children: loading ? "Buscando..." : "Buscar imágenes"
+            }
+          )
+        ]
+      }
+    ),
+    portalSourcesHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: portalSourcesHook.error }),
+    error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: error }),
+    Object.keys(portalResults).length > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-neutral-50 rounded-lg p-3", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold mb-2", children: "Resultados por portal:" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2 text-sm", children: Object.entries(portalResults).map(([portalId, result]) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          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 }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: result.status === 200 ? "text-green-700" : "text-red-700",
+                children: result.status === 200 ? `${result.count} imágenes` : result.response
+              }
+            )
+          ]
+        },
+        portalId
+      )) })
+    ] }),
+    (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__ */ jsx(
+          "div",
+          {
+            className: `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 ${loading ? "opacity-50" : ""}`,
+            children: images.map((img, idx) => {
+              const imageKey = `${img.source}-${img.id || idx}`;
+              const imageUrl = img.preview || img.thumbnail || img.url || img.full;
+              if (failedImages.has(imageKey)) {
+                return null;
+              }
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "border border-brand-blue-200 rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "relative aspect-video bg-neutral-100", children: [
+                      /* @__PURE__ */ jsx(
+                        ValidatedImage,
+                        {
+                          src: imageUrl,
+                          alt: img.title || img.filename || `Imagen ${idx + 1}`,
+                          className: "object-cover w-full h-full",
+                          onError: () => {
+                            setFailedImages((prev) => {
+                              const newSet = new Set(prev);
+                              newSet.add(imageKey);
+                              return newSet;
+                            });
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded", children: img.sourceTitle }),
+                      img.id && /* @__PURE__ */ jsxs("span", { className: "absolute bottom-1 right-1 bg-black/60 text-white text-xs px-2 py-1 rounded", children: [
+                        "ID: ",
+                        img.id
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
+                      img.title && /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "text-xs text-neutral-700 mb-1 truncate",
+                          title: img.title,
+                          children: img.title
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: `limbo-btn w-full text-sm ${downloadingUrl === (img.url || img.full) ? "limbo-btn-disabled cursor-not-allowed" : "limbo-btn-primary"}`,
+                          onClick: () => handleImageSelect(img),
+                          disabled: loading || disabled || downloadingUrl === (img.url || img.full),
+                          children: downloadingUrl === (img.url || img.full) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx("span", { className: "limbo-loader limbo-loader--sm mr-1" }),
+                            "Descargando..."
+                          ] }) : "Seleccionar"
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                imageKey
+              );
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handlePageChange(currentPage - 1),
+            disabled: currentPage === 1 || loading,
+            className: "limbo-btn limbo-btn-secondary px-4 py-2 disabled:opacity-50" + (currentPage === 1 || loading ? " pointer-events-none cursor-default" : " limbo-btn-primary"),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-white icon--sm" }),
+              " ",
+              "Anterior"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "px-4 py-2 text-sm text-neutral-700", children: [
+          "Página ",
+          currentPage,
+          paginationInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " ",
+            "de ",
+            paginationInfo.pages,
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-neutral-500 block", children: [
+              "(",
+              paginationInfo.total,
+              " imágenes totales)"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handlePageChange(currentPage + 1),
+            disabled: loading || paginationInfo && currentPage >= paginationInfo.pages,
+            className: "limbo-btn limbo-btn-secondary px-4 py-2 disabled:opacity-50" + (loading || paginationInfo && currentPage >= paginationInfo.pages ? " pointer-events-none cursor-default" : " limbo-btn-primary"),
+            children: [
+              "Siguiente",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-white icon--sm" })
+            ]
+          }
+        )
+      ] })
     ] }),
-    portalSourcesHook.error && /* @__PURE__ */ jsx("div", { className: "text-red-500", children: portalSourcesHook.error }),
-    /* @__PURE__ */ jsx("button", { className: "mt-2", onClick: handleSearch, disabled: !portalSelected || disabled, children: "Buscar en portal" })
+    !loading && images.length === 0 && Object.keys(portalResults).length > 0 && /* @__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__ */ jsx("p", { children: "No se encontraron imágenes en los portales seleccionados" }),
+      searchName && /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Intenta con otros términos o sin filtro de nombre" })
+    ] })
   ] });
 }
 const TABS = [
@@ -32047,8 +33496,32 @@ function UploadForm({
           }
         }
       ),
-      activeTab === "stock" && /* @__PURE__ */ jsx(TabStock, { apiKey, prod, disabled }),
-      activeTab === "portals" && /* @__PURE__ */ jsx(TabPortals, { apiKey, prod, disabled })
+      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));
+          }
+        }
+      )
     ] })
   ] });
 }
@@ -34551,150 +36024,69 @@ CropperImage.$define();
 CropperSelection.$define();
 CropperShade.$define();
 CropperViewer.$define();
-function adaptAssetsListFromV2(v2Response) {
-  if (!v2Response?.success || !Array.isArray(v2Response?.data)) {
-    return { result: [] };
-  }
-  const legacyAssets = v2Response.data.map((asset) => {
-    return {
-      id: asset.id,
-      filename: asset.filename || asset.original_filename,
-      mime_type: asset.mime_type,
-      file_size: asset.file_size,
-      width: asset.width,
-      height: asset.height,
-      upload_date: asset.upload_date || asset.created_at,
-      processing_status: asset.processing_status || asset.status,
-      // URL principal
-      url: asset.master_url || asset.master?.url_signed,
-      webp_available: asset.webp_available || !!asset.webp_url,
-      // Solo metadatos básicos en listado
-      metadata: asset.metadata || {},
-      variants_count: asset.variants_count || 0
-    };
-  });
-  return { result: legacyAssets };
-}
-function adaptUploadFromV2(v2Response) {
-  if (!v2Response?.success || !v2Response?.data) {
-    return { result: null };
-  }
-  const asset = v2Response.data;
-  const legacyResponse = {
-    id: asset.id,
-    filename: asset.original_filename,
-    mime_type: asset.mime_type,
-    file_size: asset.file_size,
-    width: asset.width,
-    height: asset.height,
-    status: asset.status,
-    upload_date: asset.created_at,
-    // URL del master
-    url: asset.master?.url_signed,
-    master_format: asset.master?.format,
-    // Estado de procesamiento
-    processing: asset.processing || {
-      master_webp: asset.status === "processing" ? "queued" : "completed",
-      variants: asset.status === "processing" ? "queued" : "completed"
-    },
-    // Información adicional
-    checksum: asset.checksum,
-    storage_path: asset.storage_path_base,
-    metadata: asset.metadata || {}
-  };
-  return { result: legacyResponse };
-}
-function adaptErrorFromV2(error) {
-  if (error.message && !error.message.includes("API Error:")) {
-    return error;
-  }
-  let errorMessage = error.message || "Unknown API error";
-  if (errorMessage.startsWith("API Error: ")) {
-    errorMessage = errorMessage.substring(11);
-  }
-  return new Error(errorMessage);
-}
-const BASE_PATH = "/api/v2";
-async function listAssets(params = {}) {
-  try {
-    const queryString = new URLSearchParams(params).toString();
-    const endpoint = queryString ? `/assets?${queryString}` : "/assets";
-    const response = await callApi({
-      endpoint,
-      method: "GET",
-      basePath: BASE_PATH,
-      useJWT: true
-    });
-    return adaptAssetsListFromV2(response);
-  } catch (error) {
-    throw adaptErrorFromV2(error);
-  }
-}
-async function uploadAsset(file, uploaded_by = null, store_original = false) {
-  try {
-    const formData = new FormData();
-    formData.append("file", file);
-    if (uploaded_by) formData.append("uploaded_by", uploaded_by);
-    if (store_original) formData.append("store_original", store_original.toString());
-    const response = await callApi({
-      endpoint: "/assets",
-      method: "POST",
-      body: formData,
-      basePath: BASE_PATH,
-      isFormData: true,
-      useJWT: true
-    });
-    return adaptUploadFromV2(response);
-  } catch (error) {
-    throw adaptErrorFromV2(error);
-  }
-}
-async function deleteAsset(assetId) {
-  try {
-    const response = await callApi({
-      endpoint: `/assets/${assetId}`,
-      method: "DELETE",
-      basePath: BASE_PATH,
-      useJWT: true
-    });
-    return response;
-  } catch (error) {
-    throw adaptErrorFromV2(error);
-  }
-}
-function useUploadImage() {
+function useCreateVariant() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [uploadedImage, setUploadedImage] = useState(null);
-  const upload = async (file, uploadedBy = null) => {
-    if (!file) {
-      setError("No se ha proporcionado ningún archivo");
+  const [createdVariant, setCreatedVariant] = useState(null);
+  const createVariant = async (assetId, variantConfig) => {
+    if (!assetId || !variantConfig) {
+      setError("ID de asset y configuración de variante son requeridos");
       return null;
     }
     setLoading(true);
     setError(null);
-    setUploadedImage(null);
+    setCreatedVariant(null);
     try {
-      const data = await uploadAsset(file, uploadedBy, false);
-      const result = data.result || data;
-      setUploadedImage(result);
-      return result;
+      const response = await generateVariant(assetId, {
+        variant_name: variantConfig.name,
+        width: variantConfig.width,
+        height: variantConfig.height,
+        crop_params: variantConfig.crop_params,
+        preset_aspect: variantConfig.preset_aspect,
+        preset_size: variantConfig.preset_size,
+        output_format: variantConfig.output_format
+      });
+      if (response?.result) {
+        setCreatedVariant(response.result);
+        return response.result;
+      } else {
+        throw new Error("No se pudo crear la variante");
+      }
     } catch (err) {
-      setError(err.message);
+      console.error("Error creating variant:", err);
+      setError(err.message || "Error desconocido al crear variante");
       return null;
     } finally {
       setLoading(false);
     }
   };
+  const createCropVariant = async (assetId, cropData, options = {}) => {
+    const variantConfig = {
+      name: options.name || `crop_${Date.now()}`,
+      width: options.width || 800,
+      // Usar las dimensiones calculadas de options
+      height: options.height || 600,
+      // Usar las dimensiones calculadas de options
+      output_format: options.format || "webp",
+      crop_params: {
+        x: cropData.x || 0,
+        y: cropData.y || 0,
+        width: cropData.width || 1,
+        height: cropData.height || 1
+      }
+    };
+    return await createVariant(assetId, variantConfig);
+  };
   const reset = () => {
     setError(null);
-    setUploadedImage(null);
+    setCreatedVariant(null);
   };
   return {
-    upload,
+    createVariant,
+    createCropVariant,
     loading,
     error,
-    uploadedImage,
+    createdVariant,
     reset
   };
 }
@@ -35406,8 +36798,8 @@ function CropperView({
   onCancel,
   onDelete,
   deleting = false,
-  apiKey,
-  prod = false
+  onVariantCreated = null
+  // Callback cuando se crea una variante
 }) {
   const [showPreview, setShowPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState(null);
@@ -35435,10 +36827,10 @@ function CropperView({
     ];
   }, []);
   const {
-    upload,
-    loading: uploading,
-    error: uploadError
-  } = useUploadImage();
+    createCropVariant,
+    loading: creatingVariant,
+    error: variantError
+  } = useCreateVariant();
   const cropper = useCropper(image, {
     aspectRatio,
     showGrid,
@@ -35449,6 +36841,13 @@ 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 toggleGrid = useCallback(() => setShowGrid((v) => !v), []);
   const toggleShade = useCallback(() => setShade((v) => !v), []);
   const toggleTips = useCallback(() => setShowTips((v) => !v), []);
@@ -35550,50 +36949,79 @@ function CropperView({
       alert(errorMsg);
       return;
     }
-    accessibilityManager?.announce("Guardando imagen recortada");
+    if (!state.isReady) {
+      const errorMsg = "El cropper aún no está inicializado. Espera un momento e inténtalo de nuevo.";
+      accessibilityManager?.announceError(errorMsg);
+      alert(errorMsg);
+      return;
+    }
+    accessibilityManager?.announce("Creando variante recortada de la imagen");
     try {
-      const canvas = await selection.toCanvas({
-        width: 800,
-        height: 600,
-        imageSmoothingEnabled: true,
-        imageSmoothingQuality: "high"
+      if (!cropData || !effectiveImageInfo) {
+        console.error("❌ Datos faltantes:", { cropData, 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");
+      }
+      if (!effectiveImageInfo.naturalWidth || !effectiveImageInfo.naturalHeight) {
+        console.error("❌ ImageInfo inválido:", effectiveImageInfo);
+        throw new Error("Los datos de imagen no tienen las dimensiones esperadas");
+      }
+      const { x, y, width, height } = cropData;
+      const { naturalWidth, naturalHeight } = effectiveImageInfo;
+      const cropParams = {
+        x: x / naturalWidth,
+        y: y / naturalHeight,
+        width: width / naturalWidth,
+        height: height / naturalHeight
+      };
+      const cropAspectRatio = width / height;
+      let variantWidth, variantHeight;
+      const maxDimension = 1200;
+      if (cropAspectRatio > 1) {
+        variantWidth = Math.min(width, maxDimension);
+        variantHeight = Math.round(variantWidth / cropAspectRatio);
+      } else {
+        variantHeight = Math.min(height, maxDimension);
+        variantWidth = Math.round(variantHeight * cropAspectRatio);
+      }
+      const ts = Date.now();
+      const [name] = image.filename.split(".");
+      const variantName = `${name}_crop_${ts}`;
+      const result = await createCropVariant(image.id, cropParams, {
+        name: variantName,
+        width: variantWidth,
+        height: variantHeight,
+        format: "webp",
+        quality: 90
       });
-      if (!canvas) return;
-      canvas.toBlob(
-        async (blob) => {
-          if (!blob) return;
-          const ts = Date.now();
-          const [name, ...rest] = image.filename.split(".");
-          const ext = rest.pop() || "jpg";
-          const newName = `${name}_cropped_${ts}.${ext}`;
-          const file = new File([blob], newName, {
-            type: blob.type || "image/jpeg"
-          });
-          const result = await upload(file, `cropped_from_${image.id}`);
-          if (result) {
-            accessibilityManager?.announceSuccess(
-              `Imagen recortada guardada como ${newName}`
-            );
-            onSave(result);
-          }
-        },
-        "image/jpeg",
-        0.9
-      );
+      if (result) {
+        accessibilityManager?.announceSuccess(
+          `Variante recortada creada: ${variantName}`
+        );
+        onVariantCreated?.(image.id, result);
+        onSave(result);
+      }
     } catch (error) {
-      console.warn("Error saving crop:", error);
-      const errorMsg = "No se puede exportar el recorte por restricciones de CORS en la imagen original.";
+      console.warn("Error creating crop variant:", error);
+      const errorMsg = "No se pudo crear la variante recortada. Inténtalo de nuevo.";
       accessibilityManager?.announceError(errorMsg);
       alert(errorMsg);
     }
   }, [
     canExport,
+    cropData,
+    imageInfo,
+    effectiveImageInfo,
     image.filename,
     image.id,
-    upload,
+    createCropVariant,
     onSave,
-    selection,
-    accessibilityManager
+    onVariantCreated,
+    accessibilityManager,
+    state.isReady
   ]);
   useEffect(() => {
     setShowPreview(false);
@@ -35691,7 +37119,7 @@ function CropperView({
           "button",
           {
             onClick: onCancel,
-            disabled: uploading,
+            disabled: creatingVariant,
             className: "limbo-btn limbo-btn-secondary px-4 py-2 flex-1 sm:flex-initial",
             children: "Cancelar"
           }
@@ -35700,7 +37128,7 @@ function CropperView({
           "button",
           {
             onClick: () => onDelete?.(image),
-            disabled: deleting | uploading,
+            disabled: deleting | creatingVariant,
             className: "limbo-btn limbo-btn-danger px-4 py-2 flex-1 sm:flex-initial",
             "aria-label": `Eliminar imagen ${image.filename}`,
             children: deleting ? "Eliminando..." : "Eliminar"
@@ -35709,10 +37137,10 @@ function CropperView({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-status bg-white border-gray-100 px-4 sm:px-6 py-2 pb-0 flex-shrink-0", children: [
-      uploadError && /* @__PURE__ */ jsxs("div", { className: "alert alert-danger mb-2 text-sm", role: "alert", children: [
+      variantError && /* @__PURE__ */ jsxs("div", { className: "alert alert-danger mb-2 text-sm", role: "alert", children: [
         /* @__PURE__ */ jsx("strong", { children: "Error:" }),
         " ",
-        uploadError
+        variantError
       ] }),
       cropData && cropData.width > 0 && /* @__PURE__ */ jsxs("div", { className: "alert alert-info mb-2 text-sm", role: "status", children: [
         /* @__PURE__ */ jsx("strong", { children: "Área:" }),
@@ -35798,7 +37226,7 @@ function CropperView({
                 "cropper-image",
                 {
                   ref: imageRef,
-                  src: image.path,
+                  src: image.url || image.path,
                   alt: image.filename,
                   id: "limbo-cropperjs-image",
                   action: "move",
@@ -35869,7 +37297,7 @@ function CropperView({
               "button",
               {
                 onClick: preview,
-                disabled: uploading || !canExport,
+                disabled: creatingVariant || !canExport,
                 className: `w-full min-h-10 transition-colors ${showPreview ? "limbo-btn limbo-btn-danger" : "limbo-btn limbo-btn-primary"}`,
                 "aria-label": "Generar vista previa del recorte",
                 children: [
@@ -35887,10 +37315,10 @@ function CropperView({
               "button",
               {
                 onClick: saveCrop,
-                disabled: uploading || !cropData || !canExport,
+                disabled: creatingVariant || !cropData || !effectiveImageInfo || !canExport || !state.isReady,
                 className: "w-full limbo-btn limbo-btn-success min-h-10",
                 "aria-label": "Guardar imagen recortada",
-                children: uploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                children: creatingVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("span", { className: "icon icon-save-white" }),
                   " ",
                   "Guardando..."
@@ -35904,7 +37332,7 @@ function CropperView({
               "button",
               {
                 onClick: resetAll,
-                disabled: uploading,
+                disabled: creatingVariant,
                 className: "w-full limbo-btn limbo-btn-secondary min-h-10",
                 "aria-label": "Reiniciar todas las configuraciones",
                 children: [
@@ -36057,7 +37485,7 @@ function CropperView({
             {
               onClick: () => handleAspectRatio(ratio.value),
               className: `p-2 text-xs rounded border transition-colors cursor-pointer ${aspectRatio === ratio.value ? "bg-blue-100 border-blue-300 text-blue-800" : "bg-gray-100 border-gray-300 text-gray-700"}`,
-              disabled: uploading,
+              disabled: creatingVariant,
               title: `Cambiar a proporción ${ratio.label}`,
               children: ratio.label
             },
@@ -36069,7 +37497,7 @@ function CropperView({
               value: aspectRatio,
               onChange: (e) => handleAspectRatio(e.target.value),
               className: "w-full form-control hidden md:block",
-              disabled: uploading,
+              disabled: creatingVariant,
               "aria-label": "Seleccionar proporción de aspecto",
               children: allowedAspectRatios.map((ratio) => /* @__PURE__ */ jsx("option", { value: ratio.value, children: ratio.label }, ratio.value))
             }
@@ -36083,7 +37511,7 @@ function CropperView({
               {
                 onClick: toggleGrid,
                 className: `w-full flex cursor-pointer items-center justify-between p-2 rounded transition-colors ${showGrid ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                disabled: uploading,
+                disabled: creatingVariant,
                 "aria-pressed": showGrid,
                 "aria-label": "Activar/desactivar grid",
                 children: [
@@ -36104,7 +37532,7 @@ function CropperView({
               {
                 onClick: toggleShade,
                 className: `w-full flex cursor-pointer items-center justify-between p-2 rounded transition-colors ${shade ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                disabled: uploading,
+                disabled: creatingVariant,
                 "aria-pressed": shade,
                 "aria-label": "Activar/desactivar sombreado",
                 children: [
@@ -36132,7 +37560,7 @@ function CropperView({
                 onClick: centerSelection,
                 className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                 title: "Centrar selección",
-                disabled: uploading,
+                disabled: creatingVariant,
                 "aria-label": "Centrar área de selección",
                 children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
                   /* @__PURE__ */ jsx("span", { className: "icon icon-radio-button icon--sm align-[middle!important] " }),
@@ -36147,7 +37575,7 @@ function CropperView({
                 onClick: resetSelection,
                 className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                 title: "Reiniciar selección",
-                disabled: uploading,
+                disabled: creatingVariant,
                 "aria-label": "Reiniciar área de selección",
                 children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
                   /* @__PURE__ */ jsx("span", { className: "icon icon-refresh icon--sm lign-[middle!important] " }),
@@ -36165,7 +37593,7 @@ function CropperView({
                 {
                   onClick: () => setSelectionCoverage(0.5),
                   className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Selección 50%",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "50%" }) })
                 }
@@ -36175,7 +37603,7 @@ function CropperView({
                 {
                   onClick: () => setSelectionCoverage(0.7),
                   className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Selección 70%",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "70%" }) })
                 }
@@ -36185,7 +37613,7 @@ function CropperView({
                 {
                   onClick: () => setSelectionCoverage(0.9),
                   className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Selección 90%",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "90%" }) })
                 }
@@ -36195,7 +37623,7 @@ function CropperView({
                 {
                   onClick: () => setSelectionCoverage(1),
                   className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Selección completa",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "100%" }) })
                 }
@@ -36215,7 +37643,7 @@ function CropperView({
                   onClick: () => move(0, -10),
                   className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Mover arriba",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Mover imagen hacia arriba",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue" }) })
                 }
@@ -36227,7 +37655,7 @@ function CropperView({
                   onClick: () => move(-10, 0),
                   className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Mover izquierda",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Mover imagen hacia la izquierda",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-blue" }) })
                 }
@@ -36238,7 +37666,7 @@ function CropperView({
                   onClick: centerImage,
                   className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Centrar y ajustar imagen",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Centrar y ajustar imagen",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-radio-button-blue icon-md" }) })
                 }
@@ -36249,7 +37677,7 @@ function CropperView({
                   onClick: () => move(10, 0),
                   className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Mover derecha",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Mover imagen hacia la derecha",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-blue" }) })
                 }
@@ -36261,7 +37689,7 @@ function CropperView({
                   onClick: () => move(0, 10),
                   className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Mover abajo",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Mover imagen hacia abajo",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-down-blue" }) })
                 }
@@ -36281,7 +37709,7 @@ function CropperView({
                   onClick: () => zoom(-0.2),
                   className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Alejar 20%",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Alejar imagen",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-out-blue" }) })
                 }
@@ -36292,7 +37720,7 @@ function CropperView({
                   onClick: resetZoomOnly,
                   className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Restablecer zoom original",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Restablecer el zoom para que la imagen se vea con su resolución original",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-screenshot-blue" }) })
                 }
@@ -36303,7 +37731,7 @@ function CropperView({
                   onClick: () => zoom(0.2),
                   className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Acercar 20%",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Acercar imagen",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-in-blue" }) })
                 }
@@ -36319,7 +37747,7 @@ function CropperView({
                   onClick: () => rotate(-90),
                   className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Rotar -90°",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Rotar imagen 90 grados a la izquierda",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-reply-blue" }) })
                 }
@@ -36330,7 +37758,7 @@ function CropperView({
                   onClick: () => rotate(-45),
                   className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Rotar -45°",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Rotar imagen 45 grados a la izquierda",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "-45°" }) })
                 }
@@ -36341,7 +37769,7 @@ function CropperView({
                   onClick: () => rotate(45),
                   className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Rotar +45°",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Rotar imagen 45 grados a la derecha",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "+45°" }) })
                 }
@@ -36352,7 +37780,7 @@ function CropperView({
                   onClick: () => rotate(90),
                   className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
                   title: "Rotar +90°",
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Rotar imagen 90 grados a la derecha",
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-send-arrow-blue" }) })
                 }
@@ -36368,7 +37796,7 @@ function CropperView({
                   onClick: flipHorizontal,
                   className: `flex-1 p-2 rounded cursor-pointer transition-colors text-sm ${flipStates.horizontal ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
                   title: `Voltear horizontalmente ${flipStates.horizontal ? "(activo)" : ""}`,
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Voltear imagen horizontalmente",
                   "aria-pressed": flipStates.horizontal,
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-right-blue border border-brand-blue-1000 rounded" }) })
@@ -36380,7 +37808,7 @@ function CropperView({
                   onClick: flipVertical,
                   className: `flex-1 p-2 cursor-pointer rounded transition-colors text-sm ${flipStates.vertical ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
                   title: `Voltear verticalmente ${flipStates.vertical ? "(activo)" : ""}`,
-                  disabled: uploading,
+                  disabled: creatingVariant,
                   "aria-label": "Voltear imagen verticalmente",
                   "aria-pressed": flipStates.vertical,
                   children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-down-blue border border-brand-blue-1000 rounded" }) })
@@ -36397,7 +37825,7 @@ function CropperView({
               },
               className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
               title: "Reiniciar transformaciones",
-              disabled: uploading,
+              disabled: creatingVariant,
               "aria-label": "Reiniciar todas las transformaciones de la imagen",
               children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
                 /* @__PURE__ */ jsx("span", { className: "icon icon-refresh-blue icon--sm align-[middle!important] " }),
@@ -36411,6 +37839,187 @@ function CropperView({
     ] })
   ] });
 }
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  disabled = false
+}) {
+  if (!totalPages || totalPages <= 1) {
+    return null;
+  }
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  const handlePageClick = (page) => {
+    if (page !== currentPage) {
+      onPageChange(page);
+    }
+  };
+  const getVisiblePages = () => {
+    const delta = 2;
+    const range = [];
+    const rangeWithDots = [];
+    const start = Math.max(1, currentPage - delta);
+    const end = Math.min(totalPages, currentPage + delta);
+    for (let i = start; i <= end; i++) {
+      range.push(i);
+    }
+    if (start > 1) {
+      rangeWithDots.push(1);
+      if (start > 2) {
+        rangeWithDots.push("...");
+      }
+    }
+    rangeWithDots.push(...range);
+    if (end < totalPages) {
+      if (end < totalPages - 1) {
+        rangeWithDots.push("...");
+      }
+      rangeWithDots.push(totalPages);
+    }
+    return rangeWithDots;
+  };
+  const visiblePages = getVisiblePages();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2 py-4", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handlePrevious,
+        disabled: disabled || currentPage <= 1,
+        className: `
+          px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer
+          ${disabled || currentPage <= 1 ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"}
+        `,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-white icon--sm" }),
+          " Anterior"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex space-x-1", children: visiblePages.map((page, index) => /* @__PURE__ */ jsx(React.Fragment, { children: page === "..." ? /* @__PURE__ */ jsx("span", { className: "px-3 py-2 text-sm text-gray-500", children: "..." }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => handlePageClick(page),
+        disabled,
+        className: `
+                  px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer
+                  ${page === currentPage ? "bg-blue-600 text-white border border-blue-600" : disabled ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"}
+                `,
+        children: page
+      }
+    ) }, `page-${page}-${index}`)) }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleNext,
+        disabled: disabled || currentPage >= totalPages,
+        className: `
+          px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer
+          ${disabled || currentPage >= totalPages ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"}
+        `,
+        children: [
+          "Siguiente ",
+          /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-white icon--sm" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-500 ml-4", children: [
+      "Página ",
+      currentPage,
+      " de ",
+      totalPages
+    ] })
+  ] });
+}
+function TokenExpiredModal({ isOpen, onClose }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",
+      style: { zIndex: 9999 },
+      children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg p-6 max-w-md mx-4 shadow-xl", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center mb-4", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-6 h-6 text-red-600 mr-3",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Sesión Expirada" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-2", children: "Su sesión ha expirado por seguridad." }),
+          /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "Es necesario recargar la página para obtener un nuevo token de acceso." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end space-x-3", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
+            children: "Recargar Página"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function useUploadImage() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [uploadedImage, setUploadedImage] = useState(null);
+  const upload = async (file, uploadedBy = null) => {
+    if (!file) {
+      setError("No se ha proporcionado ningún archivo");
+      return null;
+    }
+    setLoading(true);
+    setError(null);
+    setUploadedImage(null);
+    try {
+      const data = await uploadAsset(file, uploadedBy, false);
+      const result = data.result || data;
+      setUploadedImage(result);
+      return result;
+    } catch (err) {
+      setError(err.message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+  const reset = () => {
+    setError(null);
+    setUploadedImage(null);
+  };
+  return {
+    upload,
+    loading,
+    error,
+    uploadedImage,
+    reset
+  };
+}
 function useDeleteImage() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -36447,29 +38056,48 @@ function useImages(apiKey, prod = false, params = {}) {
   const [images, setImages] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [pagination, setPagination] = useState(null);
+  const [retryCount, setRetryCount] = useState(0);
+  const MAX_RETRIES = 3;
+  const paramsKey = useMemo(() => JSON.stringify(params), [params]);
   useEffect(() => {
-    const paramsKey = JSON.stringify(params);
     const cacheKey = `${paramsKey}`;
     const cached = cache.get(cacheKey);
     const now = Date.now();
     if (cached && now - cached.timestamp < CACHE_TTL) {
       setImages(cached.data);
+      setPagination(cached.pagination || null);
       setLoading(false);
       return;
     }
     let isMounted = true;
     const fetchImages = async () => {
+      if (retryCount >= MAX_RETRIES) {
+        if (isMounted) {
+          setError(`Error de autenticación: Verifica tus credenciales API`);
+          setLoading(false);
+        }
+        return;
+      }
       try {
         const data = await listAssets(params);
         if (!isMounted) return;
         const result = data.result || [];
+        const paginationData = data.pagination || null;
         setImages(result);
+        setPagination(paginationData);
+        setError(null);
+        setRetryCount(0);
         cache.set(cacheKey, {
           data: result,
+          pagination: paginationData,
           timestamp: now
         });
       } catch (err) {
-        if (isMounted) setError(err.message);
+        if (isMounted) {
+          setError(err.message);
+          setRetryCount((prev) => prev + 1);
+        }
       } finally {
         if (isMounted) setLoading(false);
       }
@@ -36478,12 +38106,45 @@ function useImages(apiKey, prod = false, params = {}) {
     return () => {
       isMounted = false;
     };
-  }, [apiKey, prod, params]);
+  }, [apiKey, prod, paramsKey, retryCount, params]);
   const invalidateCache = () => {
-    const paramsKey = JSON.stringify(params);
     cache.delete(`${paramsKey}`);
   };
-  return { images, loading, error, setImages, invalidateCache };
+  return { images, loading, error, pagination, setImages, invalidateCache };
+}
+function useTokenExpiration() {
+  const [isTokenExpired, setIsTokenExpired] = useState(false);
+  const checkTokenExpiration = useCallback((error) => {
+    if (error?.response?.status === 401) {
+      const errorData = error.response.data;
+      if (errorData?.error === "token_expired" || errorData?.message?.includes("expired") || errorData?.message?.includes("caducado") || errorData?.error?.includes("expired")) {
+        setIsTokenExpired(true);
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const handleTokenExpiredClose = useCallback(() => {
+    setIsTokenExpired(false);
+    alert("El token ha expirado. La página se recargará para obtener un nuevo token.");
+    window.location.reload();
+  }, []);
+  useEffect(() => {
+    const handleGlobalError = (event) => {
+      if (event.detail && event.detail.error) {
+        checkTokenExpiration(event.detail.error);
+      }
+    };
+    window.addEventListener("tokenExpiredError", handleGlobalError);
+    return () => {
+      window.removeEventListener("tokenExpiredError", handleGlobalError);
+    };
+  }, [checkTokenExpiration]);
+  return {
+    isTokenExpired,
+    checkTokenExpiration,
+    handleTokenExpiredClose
+  };
 }
 function App({
   apiKey,
@@ -36494,7 +38155,7 @@ function App({
   modeUI = "full",
   // full | gallery-only | upload-only | crop-only | ia-only
   ui = {
-    showActions: ["select", "download", "copy", "delete", "crop"],
+    showActions: ["select", "download", "copy", "delete", "crop", "variants"],
     hideActions: [],
     theme: "light",
     language: "es",
@@ -36502,7 +38163,9 @@ function App({
     showTabs: true
   },
   callbacks = {},
-  instanceId = null
+  instanceId = null,
+  itemsPerPage = 10
+  // Número de elementos por página
 }) {
   const getFilteredFeatures = () => {
     switch (modeUI) {
@@ -36529,6 +38192,14 @@ function App({
   };
   const [activeTab, setActiveTab] = useState(getInitialTab());
   const [selectedImage, setSelectedImage] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const {
+    isTokenExpired,
+    handleTokenExpiredClose
+  } = useTokenExpiration();
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+  };
   const {
     upload,
     loading: uploading,
@@ -36546,9 +38217,14 @@ function App({
     images,
     loading: loadingImages,
     error: imagesError,
+    pagination,
     invalidateCache,
     setImages
-  } = useImages(apiKey, prod);
+  } = useImages(apiKey, prod, { limit: itemsPerPage, page: currentPage });
+  const { refreshVariants } = useImageVariants();
+  const handleVariantCreated = (assetId, variantData) => {
+    refreshVariants(assetId);
+  };
   const isActionAllowed = (action) => {
     if (ui.hideActions?.includes(action)) return false;
     if (ui.showActions?.includes(action)) return true;
@@ -36569,6 +38245,7 @@ function App({
     const result = await upload(file);
     if (result) {
       invalidateCache();
+      setCurrentPage(1);
       setImages((prev) => [result, ...prev]);
       setActiveTab("gallery");
       if (callbacks.onUpload) {
@@ -36591,6 +38268,7 @@ function App({
     const success = await deleteImg(imageId);
     if (success) {
       invalidateCache();
+      setCurrentPage(1);
       setImages((prev) => prev.filter((img) => img.id !== imageId));
       if (selectedImage && selectedImage.id === imageId) {
         setSelectedImage(null);
@@ -36654,6 +38332,15 @@ function App({
             crop: isActionAllowed("crop")
           }
         }
+      ),
+      pagination && !loadingImages && /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          currentPage: pagination.page || currentPage,
+          totalPages: pagination.pages || 1,
+          onPageChange: handlePageChange,
+          disabled: loadingImages || deleting
+        }
       )
     ] }),
     activeTab === "upload" && /* @__PURE__ */ jsxs("div", { children: [
@@ -36680,11 +38367,8 @@ function App({
       CropperView,
       {
         image: selectedImage,
-        apiKey,
-        prod,
-        onSave: (newImage) => {
+        onSave: () => {
           invalidateCache();
-          setImages((prev) => [newImage, ...prev]);
           setSelectedImage(null);
           setActiveTab("gallery");
         },
@@ -36693,7 +38377,15 @@ function App({
           setActiveTab("gallery");
         },
         onDelete: () => handleDelete(selectedImage?.id),
-        deleting
+        deleting,
+        onVariantCreated: handleVariantCreated
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TokenExpiredModal,
+      {
+        isOpen: isTokenExpired,
+        onClose: handleTokenExpiredClose
       }
     )
   ] });
@@ -37104,8 +38796,16 @@ class LimboInstance {
    * Validar configuración
    */
   _validateConfig() {
-    if (!this.config.apiKey) {
-      throw new Error(`LimboInstance ${this.id}: apiKey is required`);
+    const hasAuth = this.config.auth?.apiKey || this.config.auth?.publicKey || this.config.apiKey || this.config.publicKey;
+    if (!hasAuth) {
+      throw new Error(`LimboInstance ${this.id}: Authentication is required. Provide either auth.publicKey (recommended) or auth.apiKey (for server-side only)`);
+    }
+    if ((this.config.auth?.apiKey || this.config.apiKey) && typeof window !== "undefined") {
+      console.warn(
+        `⚠️ SECURITY WARNING: API Key detected in client-side code.
+This is a security risk! Use publicKey instead for client applications.
+API Keys should only be used in server-side environments.`
+      );
     }
     if (!["embed", "modal", "button"].includes(this.config.mode)) {
       throw new Error(`LimboInstance ${this.id}: invalid mode ${this.config.mode}`);
@@ -39819,15 +41519,25 @@ class LimboCore {
    */
   configure(options) {
     this.config.setGlobal(options);
-    if (options.auth || options.apiKey) {
-      try {
-        configureJWTFromConfigManager(this.config);
-      } catch (error) {
-        console.warn("Failed to configure JWT authentication:", error);
-      }
-    }
+    configureApiClient({
+      publicKey: options.publicKey,
+      apiKey: options.apiKey,
+      // Solo para authMode: "dev"
+      token: options.token,
+      // Solo para authMode: "manual"
+      authMode: options.authMode,
+      // "session" | "dev" | "manual"
+      prod: options.prod || false
+    });
     return this.config;
   }
+  /**
+   * Establecer token JWT (generado por backend)
+   */
+  setToken(token) {
+    setToken(token);
+    return this;
+  }
   /**
    * Crear instancia manual
    */
@@ -39990,18 +41700,21 @@ const Limbo = new LimboCore();
 if (typeof window !== "undefined") {
   window.Limbo = Limbo;
 }
-const PUBLIC_KEY = "pk_b23851734fb7601883bf4301b129a82f";
+const PUBLIC_KEY = "pk_9fcfdd91a14755cc68d0e11a14269554";
 if (typeof window !== "undefined" && document.querySelector("#root")) {
   Limbo.configure({
-    apiKey: PUBLIC_KEY,
-    prod: false
+    prod: false,
+    publicKey: PUBLIC_KEY,
+    authMode: "session",
+    tokenEndpoint: "/auth/token"
+    // Endpoint que acepta solo public_key
   });
   Limbo.create({
     container: "#root",
     mode: "embed",
     modeUI: "full",
     features: ["gallery", "upload", "cropper"],
-    title: "Limbo Image Manager - Desarrollo",
+    title: "Limbo Image Manager - Development",
     url: true
   });
   Limbo.configureAutoInputs({