limbo-component 1.8.3 → 1.8.5

package/dist/limbo.es.js

@@ -12635,9 +12635,11 @@ let globalConfig = {
   token: null,
   // JWT token (opcional, generado automáticamente)
   authMode: null,
-  // "session" | "manual"
+  // "session" | "manual" | "jwt"
   tokenEndpoint: null,
   // Endpoint para obtener token (configurable)
+  tokenProvider: null,
+  // Custom function to provide JWT token
   prod: false
 };
 function configureApiClient(config) {
@@ -12663,7 +12665,17 @@ async function getHeaders({ isFormData = false, useJWT = true, customHeaders = {
   }
   let token = globalConfig.token;
   if (useJWT) {
-    if (globalConfig.authMode === "session" && !token) {
+    if (globalConfig.authMode === "jwt" && globalConfig.tokenProvider && !token) {
+      try {
+        console.log("🔑 Calling tokenProvider...");
+        token = await globalConfig.tokenProvider();
+        console.log("✅ Token obtained from tokenProvider");
+        globalConfig.token = token;
+      } catch (error) {
+        console.error("❌ tokenProvider failed:", error);
+        throw new Error("Failed to obtain token from tokenProvider: " + error.message);
+      }
+    } else if (globalConfig.authMode === "session" && !token) {
       try {
         const baseUrl = getBaseUrl(globalConfig);
         const endpoint = globalConfig.tokenEndpoint || "/auth/token";
@@ -12691,7 +12703,8 @@ async function getHeaders({ isFormData = false, useJWT = true, customHeaders = {
     } else {
       console.warn("⚠️ No JWT token available:", {
         authMode: globalConfig.authMode,
-        hasPublicKey: !!globalConfig.publicKey
+        hasPublicKey: !!globalConfig.publicKey,
+        hasTokenProvider: !!globalConfig.tokenProvider
       });
     }
   }
@@ -19331,6 +19344,9 @@ function CropperView({
   const [showImageOptions, setShowImageOptions] = useState(true);
   const [zoomInfo, setZoomInfo] = useState({ current: 1, percentage: 100 });
   const [editableFilename] = useState(() => {
+    if (!image || !image.filename) {
+      return "image";
+    }
     const [name] = image.filename.split(".");
     return name;
   });
@@ -19471,9 +19487,13 @@ function CropperView({
   const saveCurrentCropState = useCallback(() => {
     if (!cropper.manager || !state.isReady) return;
     try {
+      if (!cropper.manager.transform) {
+        console.warn("Transform manager not available");
+        return null;
+      }
       const currentCropData = cropData ? { ...cropData } : null;
-      const currentZoom = cropper.manager.transform.getZoom();
-      const currentRotation = cropper.manager.transform.getRotation();
+      const currentZoom = typeof cropper.manager.transform.getZoom === "function" ? cropper.manager.transform.getZoom() : 1;
+      const currentRotation = typeof cropper.manager.transform.getRotation === "function" ? cropper.manager.transform.getRotation() : 0;
       const savedState = {
         cropData: currentCropData,
         transforms: {
@@ -19915,9 +19935,9 @@ function CropperView({
     }
   }, [imageInfo, state.isReady, cropConfig.mandatoryCrops.length, crops]);
   useEffect(() => {
-    if (!cropper.manager || !cropper.manager.utils) return;
+    if (!cropper.manager || !cropper.manager.utils || !cropper.manager.transform) return;
     try {
-      const currentZoom = cropper.manager.transform.getZoom();
+      const currentZoom = typeof cropper.manager.transform.getZoom === "function" ? cropper.manager.transform.getZoom() : 1;
       const info = {
         current: currentZoom,
         isZoomedIn: currentZoom > 1,
@@ -20014,10 +20034,10 @@ function CropperView({
             children: "Cancelar"
           }
         ),
-        /* @__PURE__ */ jsx(
+        onDelete && /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => onDelete?.(image),
+            onClick: () => onDelete(image),
             disabled: deleting | creatingVariant,
             className: "limbo-btn limbo-btn-danger px-4 sm:py-1 h-min flex-1 sm:flex-initial",
             "aria-label": `Eliminar imagen ${image.filename}`,
@@ -20088,7 +20108,7 @@ function CropperView({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-800 truncate", children: activeCrop.label === crop.label && crop.required === false ? /* @__PURE__ */ jsx(
                     "input",
                     {
@@ -21176,15 +21196,19 @@ function useDeleteImage() {
 }
 const cache = /* @__PURE__ */ new Map();
 const CACHE_TTL = 10 * 60 * 1e3;
-function useImages(apiKey, prod = false, params = {}) {
+function useImages(apiKey, prod = false, params = {}, enabled = true) {
   const [images, setImages] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(enabled);
   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(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
     const cacheKey = `${paramsKey}`;
     const cached = cache.get(cacheKey);
     const now = Date.now();
@@ -21230,7 +21254,7 @@ function useImages(apiKey, prod = false, params = {}) {
     return () => {
       isMounted = false;
     };
-  }, [apiKey, prod, paramsKey, retryCount, params]);
+  }, [apiKey, prod, paramsKey, retryCount, params, enabled]);
   const invalidateCache = () => {
     cache.delete(`${paramsKey}`);
   };
@@ -21382,6 +21406,7 @@ function App({
     ...galleryFilters.dateFrom && { dateFrom: galleryFilters.dateFrom },
     ...galleryFilters.dateTo && { dateTo: galleryFilters.dateTo }
   };
+  const shouldFetchImages = activeFeatures.includes("gallery");
   const {
     images,
     loading: loadingImages,
@@ -21389,7 +21414,7 @@ function App({
     pagination,
     invalidateCache,
     setImages
-  } = useImages(apiKey, prod, apiParams);
+  } = useImages(apiKey, prod, apiParams, shouldFetchImages);
   const { refreshVariants } = useImageVariants();
   const handleVariantCreated = (assetId, variantData) => {
     refreshVariants(assetId);
@@ -21679,7 +21704,7 @@ function App({
         }
       )
     ] }),
-    activeTab === "cropper" && /* @__PURE__ */ jsx(
+    activeTab === "cropper" && selectedImage && /* @__PURE__ */ jsx(
       CropperView,
       {
         image: selectedImage,
@@ -21691,6 +21716,7 @@ function App({
         onVariantCreated: handleVariantCreated
       }
     ),
+    activeTab === "cropper" && !selectedImage && /* @__PURE__ */ jsx("div", { className: "limbo-empty-state", children: /* @__PURE__ */ jsx("p", { children: "Selecciona una imagen de la galería para comenzar a recortar." }) }),
     /* @__PURE__ */ jsx(
       TokenExpiredModal,
       {
@@ -22009,7 +22035,9 @@ class LimboInstance {
         ui: this.config.ui,
         callbacks: this._createCallbacks(),
         instanceId: this.id,
-        authMode: this.config.authMode || this.config.publicKey ? "session" : "manual"
+        authMode: this.config.authMode || this.config.publicKey ? "session" : "manual",
+        _externalImage: this.config._externalImage || null
+        // 🆕 Pass external image for cropper
       })
     );
   }
@@ -23207,8 +23235,8 @@ class Modal {
     const sizeClasses = {
       small: isMobile ? "width: 100%; height: 100%;" : "max-width: 400px;",
       medium: isMobile ? "width: 100%; height: 100%;" : "max-width: 600px;",
-      large: isMobile ? "width: 100%; height: 100%;" : "max-width: 800px;",
-      xlarge: isMobile ? "width: 100%; height: 100%;" : "max-width: 1200px;"
+      large: isMobile ? "width: 100%; height: 100%;" : "max-width: 1300px;",
+      xlarge: isMobile ? "width: 100%; height: 100%;" : "max-width: 90dvw;"
     };
     const baseStyles = isMobile ? `
       position: fixed;
@@ -24844,7 +24872,9 @@ class LimboCore {
       token: options.token,
       // Solo para authMode: "manual"
       authMode: options.authMode || "manual",
-      // "session" | "manual"
+      // "session" | "manual" | "jwt"
+      tokenProvider: options.tokenProvider,
+      // Custom function to provide JWT token
       prod: options.prod || false,
       mode: options.mode || "embed",
       // "embed" | "modal"