webs-sdk 0.18.90 → 0.18.91

package/dist/components/GifsIa.js

@@ -26,6 +26,23 @@ const GIFSÍA_CSS = `
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
   background-color: #2a2a3a;
 }
+.gifsía-gallery-scroll {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.gifsía-gallery-scroll::-webkit-scrollbar {
+  display: none;
+}
+.gifsía-gallery-item {
+  scroll-snap-align: start;
+  flex: 0 0 calc(25% - 9px);
+  min-width: 80px;
+}
 @keyframes gifsía-scan {
   0% { top: 0%; }
   100% { top: 100%; }
@@ -55,26 +72,27 @@ const defaultTheme = {
     textSecondaryColor: '#A0A0C0',
     createButtonColor: '#6C63FF',
     disabledColor: '#4A4A6A',
+    gifPanelBackground: '#252540',
 };
 const defaultTexts = {
-    galleryTitle: 'Galería De GIFs',
-    photoSectionTitle: 'Foto',
+    galleryTitle: 'GIF Gallery',
+    photoSectionTitle: 'Photo',
     gifSectionTitle: 'GIF',
-    uploadButton: 'Subir imagen',
-    createGifButton: 'Crear GIF',
-    creatingGifButton: 'Creando GIF...',
-    copyLinkButton: 'Copiar enlace',
-    downloadButton: 'Descargar',
-    emptyPhotoText: 'Sube una foto para crear tu GIF',
-    emptyGifText: 'Tu GIF aparecerá aquí',
-    loadingGalleryText: 'Cargando galería...',
-    errorText: 'Ha ocurrido un error. Inténtalo de nuevo.',
-    fileTooLargeText: 'El archivo es demasiado grande. Máximo {size}MB.',
-    invalidFormatText: 'Formato de archivo no válido. Por favor, sube una imagen.',
-    linkCopiedText: '¡Enlace copiado!',
-    queueText: 'En cola',
-    pasteImageTooltip: 'Pegar imagen del portapapeles',
-    resetTooltip: 'Limpiar y empezar de nuevo',
+    uploadButton: 'Upload image',
+    createGifButton: 'Create GIF',
+    creatingGifButton: 'Creating GIF...',
+    copyLinkButton: 'Copy link',
+    downloadButton: 'Download',
+    emptyPhotoText: 'Upload a photo to create your GIF',
+    emptyGifText: 'Your GIF will appear here',
+    loadingGalleryText: 'Loading gallery...',
+    errorText: 'An error occurred. Please try again.',
+    fileTooLargeText: 'File is too large. Max {size}MB.',
+    invalidFormatText: 'Invalid format. Please upload an image.',
+    linkCopiedText: 'Link copied!',
+    queueText: 'In queue',
+    pasteImageTooltip: 'Paste image from clipboard',
+    resetTooltip: 'Clear and start over',
 };
 function GifBadge({ color = '#6C63FF' }) {
     return ((0, jsx_runtime_1.jsxs)("svg", { width: "28", height: "20", viewBox: "0 0 28 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("rect", { width: "28", height: "20", rx: "4", fill: color }), (0, jsx_runtime_1.jsx)("text", { x: "4", y: "14", fill: "white", fontSize: "10", fontWeight: "700", fontFamily: "monospace", children: "GIF" })] }));
@@ -87,6 +105,7 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
     const t = Object.assign(Object.assign({}, defaultTexts), texts);
     const th = Object.assign(Object.assign({}, defaultTheme), theme);
     const createBtnColor = th.createButtonColor || th.primaryColor;
+    const gifBg = th.gifPanelBackground || th.cardBackground;
     const maxFileMB = (_a = config.maxFileSizeMB) !== null && _a !== void 0 ? _a : 10;
     (0, react_1.useEffect)(() => {
         const id = 'gifsía-styles';
@@ -118,15 +137,16 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
                     apiBaseUrl: config.apiBaseUrl,
                     tags,
                     contents: config.galleryContents,
-                    locale: config.locale || 'es',
+                    locale: config.locale || 'en',
                     website_id: config.website_id,
                 });
                 const mapped = items
                     .map((item, idx) => {
-                    var _a, _b;
+                    var _a, _b, _c, _d, _e;
                     return ({
                         id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
-                        imageUrl: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img1) || item.imageUrl || '',
+                        imageUrl: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img3) || ((_c = item.images) === null || _c === void 0 ? void 0 : _c.img1) || item.imageUrl || '',
+                        gifUrl: ((_d = item.metadata) === null || _d === void 0 ? void 0 : _d.gif) || ((_e = item.metadata) === null || _e === void 0 ? void 0 : _e.gif_light) || item.gifUrl || item.gif_url || undefined,
                         title: item.title || '',
                     });
                 })
@@ -134,7 +154,7 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
                 setDynamicGallery(mapped);
             }
             catch (err) {
-                console.error('[GifsIa] Error cargando galería:', err);
+                console.error('[GifsIa] Error loading gallery:', err);
             }
             finally {
                 setLoadingGallery(false);
@@ -143,7 +163,6 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
         load();
     }, [config.apiUrl, config.apiBaseUrl, config.galleryTags]);
     const gallery = galleryProp && galleryProp.length > 0 ? galleryProp : dynamicGallery;
-    const [carouselIndex, setCarouselIndex] = (0, react_1.useState)(0);
     const [selectedGalleryId, setSelectedGalleryId] = (0, react_1.useState)(null);
     const [uploadedImageBase64, setUploadedImageBase64] = (0, react_1.useState)(null);
     const [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
@@ -155,11 +174,25 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
     const fileInputRef = (0, react_1.useRef)(null);
     const pollRef = (0, react_1.useRef)(null);
     const timeoutRef = (0, react_1.useRef)(null);
+    const galleryScrollRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (gallery.length > 0 && selectedGalleryId === null) {
             setSelectedGalleryId(gallery[0].id);
         }
     }, [gallery, selectedGalleryId]);
+    (0, react_1.useEffect)(() => {
+        const el = galleryScrollRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            if (Math.abs(e.deltaX) > Math.abs(e.deltaY))
+                return;
+            e.preventDefault();
+            el.scrollLeft += e.deltaY;
+        };
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, []);
     const clearPolls = (0, react_1.useCallback)(() => {
         if (pollRef.current) {
             clearInterval(pollRef.current);
@@ -171,9 +204,6 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
         }
     }, []);
     (0, react_1.useEffect)(() => () => clearPolls(), [clearPolls]);
-    const visibleCount = 4;
-    const handlePrev = () => setCarouselIndex(prev => Math.max(0, prev - 1));
-    const handleNext = () => setCarouselIndex(prev => Math.min(Math.max(0, gallery.length - visibleCount), prev + 1));
     const processFile = (file) => {
         if (!file.type.startsWith('image/')) {
             alert(t.invalidFormatText);
@@ -214,7 +244,7 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
             }
         }
         catch (_a) {
-            console.warn('[GifsIa] No hay imagen en el portapapeles o permiso denegado');
+            console.warn('[GifsIa] No clipboard image or permission denied');
         }
     };
     const handleReset = () => {
@@ -229,7 +259,7 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
             fileInputRef.current.value = '';
     };
     const handleCreateGif = async () => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!uploadedImageBase64 || isGenerating)
             return;
         clearPolls();
@@ -238,74 +268,121 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
         setProgressPercent(0);
         setQueuePosition(null);
         setGenError(null);
-        const base = config.generateBaseUrl.replace(/\/$/, '');
         const pollInterval = (_a = config.pollInterval) !== null && _a !== void 0 ? _a : 3000;
         const maxPollTime = (_b = config.maxPollTime) !== null && _b !== void 0 ? _b : 120000;
         const selectedItem = gallery.find(g => g.id === selectedGalleryId);
+        const generateUrl = (_c = config.generateApiUrl) !== null && _c !== void 0 ? _c : (config.generateBaseUrl ? `${config.generateBaseUrl.replace(/\/$/, '')}/get_art_generation` : null);
+        if (!generateUrl) {
+            setGenError(t.errorText);
+            setIsGenerating(false);
+            return;
+        }
         try {
-            const genRes = await fetch(`${base}/get_art_generation`, {
+            const genRes = await fetch(generateUrl, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(Object.assign(Object.assign(Object.assign(Object.assign({ image: uploadedImageBase64 }, (selectedItem && { reference_image: selectedItem.imageUrl })), (config.userId && { us_id: config.userId })), (config.userLogin && { us_login: config.userLogin })), (config.wid && { wid: config.wid }))),
+                body: JSON.stringify(Object.assign(Object.assign(Object.assign(Object.assign({ image: uploadedImageBase64 }, (selectedItem && { reference_image: selectedItem.gifUrl || selectedItem.imageUrl })), (config.userId && { us_id: config.userId })), (config.userLogin && { us_login: config.userLogin })), (config.wid && { wid: config.wid }))),
             });
             if (!genRes.ok)
-                throw new Error(`Error en generación: ${genRes.status}`);
+                throw new Error(`Generation error: ${genRes.status}`);
             const genData = await genRes.json();
-            console.log('[GifsIa] gen response:', genData);
-            const jobId = ((_c = genData === null || genData === void 0 ? void 0 : genData.data) === null || _c === void 0 ? void 0 : _c.md5) || (genData === null || genData === void 0 ? void 0 : genData.md5) || (genData === null || genData === void 0 ? void 0 : genData.job_id) || (genData === null || genData === void 0 ? void 0 : genData.id);
+            console.log('[GifsIa] generate response:', JSON.stringify(genData));
+            if ((genData === null || genData === void 0 ? void 0 : genData.success) === 0 || (genData === null || genData === void 0 ? void 0 : genData.success) === false) {
+                throw new Error((genData === null || genData === void 0 ? void 0 : genData.msg) || (genData === null || genData === void 0 ? void 0 : genData.error) || 'Generation failed');
+            }
+            const jobId = ((_d = genData === null || genData === void 0 ? void 0 : genData.data) === null || _d === void 0 ? void 0 : _d.md5) ||
+                ((_e = genData === null || genData === void 0 ? void 0 : genData.data) === null || _e === void 0 ? void 0 : _e.request_id) ||
+                ((_f = genData === null || genData === void 0 ? void 0 : genData.data) === null || _f === void 0 ? void 0 : _f.job_id) ||
+                ((_g = genData === null || genData === void 0 ? void 0 : genData.data) === null || _g === void 0 ? void 0 : _g.id) ||
+                (genData === null || genData === void 0 ? void 0 : genData.md5) ||
+                (genData === null || genData === void 0 ? void 0 : genData.request_id) ||
+                (genData === null || genData === void 0 ? void 0 : genData.job_id) ||
+                (genData === null || genData === void 0 ? void 0 : genData.id);
+            console.log('[GifsIa] jobId extracted:', jobId);
             if (!jobId)
-                throw new Error('No se recibió job ID');
+                throw new Error(`No job ID received. Response: ${JSON.stringify(genData)}`);
             timeoutRef.current = setTimeout(() => {
                 clearPolls();
                 setIsGenerating(false);
                 setGenError(t.errorText);
                 onError === null || onError === void 0 ? void 0 : onError(t.errorText);
             }, maxPollTime);
+            const base = (_j = (_h = config.generateBaseUrl) === null || _h === void 0 ? void 0 : _h.replace(/\/$/, '')) !== null && _j !== void 0 ? _j : '';
             const poll = async () => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
                 try {
-                    const queueRes = await fetch(`${base}/get_queue_position`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
-                    });
-                    if (queueRes.ok) {
-                        const queueData = await queueRes.json();
-                        const pos = (_c = (_b = (_a = queueData === null || queueData === void 0 ? void 0 : queueData.data) === null || _a === void 0 ? void 0 : _a.position) !== null && _b !== void 0 ? _b : queueData === null || queueData === void 0 ? void 0 : queueData.position) !== null && _c !== void 0 ? _c : null;
-                        setQueuePosition(pos);
-                    }
-                    const pctRes = await fetch(`${base}/get_arg_pct`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
-                    });
-                    if (!pctRes.ok)
-                        return;
-                    const pctData = await pctRes.json();
-                    const pct = (_f = (_e = (_d = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _d === void 0 ? void 0 : _d.pct) !== null && _e !== void 0 ? _e : pctData === null || pctData === void 0 ? void 0 : pctData.pct) !== null && _f !== void 0 ? _f : 0;
-                    setProgressPercent(pct);
-                    if (pct >= 100) {
-                        clearPolls();
-                        const jobRes = await fetch(`${base}/get_art_job`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
-                        });
-                        if (!jobRes.ok)
-                            throw new Error('Error obteniendo GIF final');
-                        const jobData = await jobRes.json();
-                        console.log('[GifsIa] job data:', jobData);
-                        const gifUrl = ((_g = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _g === void 0 ? void 0 : _g.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.gif) || ((_h = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _h === void 0 ? void 0 : _h.gif);
-                        if (!gifUrl)
-                            throw new Error('No se recibió URL del GIF');
-                        setGeneratedGifUrl(gifUrl);
-                        setProgressPercent(100);
-                        setIsGenerating(false);
-                        onGifCreated === null || onGifCreated === void 0 ? void 0 : onGifCreated(gifUrl);
+                    const progressUrl = (_a = config.progressApiUrl) !== null && _a !== void 0 ? _a : (base ? `${base}/get_arg_pct` : null);
+                    if (progressUrl) {
+                        const isProxy = !!config.progressApiUrl;
+                        if (isProxy) {
+                            const pctRes = await fetch(progressUrl, {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
+                            });
+                            if (pctRes.ok) {
+                                const pctData = await pctRes.json();
+                                const pct = (_d = (_c = (_b = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _b === void 0 ? void 0 : _b.pct) !== null && _c !== void 0 ? _c : pctData === null || pctData === void 0 ? void 0 : pctData.pct) !== null && _d !== void 0 ? _d : 0;
+                                const pos = (_f = (_e = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : null;
+                                const gifUrl = (_h = (_g = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _g === void 0 ? void 0 : _g.gifUrl) !== null && _h !== void 0 ? _h : null;
+                                setProgressPercent(pct);
+                                if (pos !== null)
+                                    setQueuePosition(pos);
+                                if (gifUrl) {
+                                    clearPolls();
+                                    setGeneratedGifUrl(gifUrl);
+                                    setProgressPercent(100);
+                                    setIsGenerating(false);
+                                    onGifCreated === null || onGifCreated === void 0 ? void 0 : onGifCreated(gifUrl);
+                                    return;
+                                }
+                                return;
+                            }
+                        }
+                        else {
+                            const queueUrl = `${base}/get_queue_position`;
+                            const queueRes = await fetch(queueUrl, {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
+                            });
+                            if (queueRes.ok) {
+                                const qd = await queueRes.json();
+                                setQueuePosition((_l = (_k = (_j = qd === null || qd === void 0 ? void 0 : qd.data) === null || _j === void 0 ? void 0 : _j.position) !== null && _k !== void 0 ? _k : qd === null || qd === void 0 ? void 0 : qd.position) !== null && _l !== void 0 ? _l : null);
+                            }
+                            const pctRes = await fetch(progressUrl, {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
+                            });
+                            if (!pctRes.ok)
+                                return;
+                            const pctData = await pctRes.json();
+                            const pct = (_p = (_o = (_m = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _m === void 0 ? void 0 : _m.pct) !== null && _o !== void 0 ? _o : pctData === null || pctData === void 0 ? void 0 : pctData.pct) !== null && _p !== void 0 ? _p : 0;
+                            setProgressPercent(pct);
+                            if (pct >= 100) {
+                                clearPolls();
+                                const jobRes = await fetch(`${base}/get_art_job`, {
+                                    method: 'POST',
+                                    headers: { 'Content-Type': 'application/json' },
+                                    body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
+                                });
+                                if (!jobRes.ok)
+                                    throw new Error('Error fetching GIF');
+                                const jobData = await jobRes.json();
+                                const gifUrl = ((_q = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _q === void 0 ? void 0 : _q.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.gif) || ((_r = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _r === void 0 ? void 0 : _r.gif);
+                                if (!gifUrl)
+                                    throw new Error('No GIF URL received');
+                                setGeneratedGifUrl(gifUrl);
+                                setProgressPercent(100);
+                                setIsGenerating(false);
+                                onGifCreated === null || onGifCreated === void 0 ? void 0 : onGifCreated(gifUrl);
+                            }
+                        }
                     }
                 }
                 catch (err) {
-                    console.error('[GifsIa] Error en polling:', err);
+                    console.error('[GifsIa] Polling error:', err);
                 }
             };
             poll();
@@ -332,7 +409,7 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
             setTimeout(() => setCopySuccess(false), 2000);
         }
         catch (_a) {
-            console.warn('[GifsIa] No se pudo copiar al portapapeles');
+            console.warn('[GifsIa] Could not copy to clipboard');
         }
     };
     const handleDownload = async () => {
@@ -371,25 +448,49 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
         @keyframes gifsía-scan { 0% { top: 0%; } 100% { top: 100%; } }
         @keyframes gifsía-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
         .gifsía-scan-line { position: absolute; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, ${th.primaryColor}, transparent); animation: gifsía-scan 1.8s linear infinite; z-index: 10; box-shadow: 0 0 8px 2px ${th.primaryColor}80; }
-      ` }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: config.acceptedFormats || 'image/*', onChange: handleFileChange, style: { display: 'none' } }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '24px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)(GifBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("h3", { style: { margin: 0, fontSize: '18px', fontWeight: 700, color: th.textColor }, children: t.galleryTitle })] }), loadingGallery ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.loadingGalleryText })) : gallery.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: handlePrev, disabled: carouselIndex === 0, style: {
-                                    width: '36px', height: '36px', borderRadius: '50%', border: `1px solid ${th.borderColor}`,
-                                    backgroundColor: th.cardBackground, color: th.textColor, cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
-                                    opacity: carouselIndex === 0 ? 0.3 : 1, flexShrink: 0,
+      ` }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: config.acceptedFormats || 'image/*', onChange: handleFileChange, style: { display: 'none' } }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '24px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)(GifBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("h3", { style: { margin: 0, fontSize: '18px', fontWeight: 700, color: th.textColor }, children: t.galleryTitle })] }), loadingGallery ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.loadingGalleryText })) : gallery.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => { if (galleryScrollRef.current)
+                                    galleryScrollRef.current.scrollBy({ left: -300, behavior: 'smooth' }); }, style: {
+                                    position: 'absolute', left: '4px', top: '50%', transform: 'translateY(-50%)',
+                                    zIndex: 10, width: '32px', height: '32px', borderRadius: '50%', border: 'none',
+                                    backgroundColor: `${th.primaryColor}dd`, color: '#FFFFFF',
                                     display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                }, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '12px', flex: 1, overflow: 'hidden' }, children: gallery.slice(carouselIndex, carouselIndex + visibleCount).map((item) => {
+                                    cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
+                                    transition: 'background-color 0.2s',
+                                }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = `${th.primaryColor}dd`; }, children: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }), (0, jsx_runtime_1.jsx)("div", { ref: galleryScrollRef, style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: '12px',
+                                    overflowX: 'auto',
+                                    overflowY: 'hidden',
+                                    scrollSnapType: 'x mandatory',
+                                    WebkitOverflowScrolling: 'touch',
+                                    scrollbarWidth: 'none',
+                                    msOverflowStyle: 'none',
+                                    width: '100%',
+                                }, children: gallery.map((item) => {
                                     const isSelected = selectedGalleryId === item.id;
                                     return ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedGalleryId(item.id), style: {
-                                            flex: '1', padding: 0, border: `3px solid ${isSelected ? th.primaryColor : 'transparent'}`,
-                                            borderRadius: '10px', overflow: 'hidden', cursor: 'pointer', backgroundColor: 'transparent',
-                                            outline: 'none', minWidth: 0,
-                                        }, children: (0, jsx_runtime_1.jsx)("img", { src: item.imageUrl, alt: item.title || '', style: { width: '100%', aspectRatio: '4/3', objectFit: 'cover', display: 'block' } }) }, item.id));
-                                }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleNext, disabled: carouselIndex >= gallery.length - visibleCount, style: {
-                                    width: '36px', height: '36px', borderRadius: '50%', border: `1px solid ${th.borderColor}`,
-                                    backgroundColor: th.cardBackground, color: th.textColor,
-                                    cursor: carouselIndex >= gallery.length - visibleCount ? 'not-allowed' : 'pointer',
-                                    opacity: carouselIndex >= gallery.length - visibleCount ? 0.3 : 1, flexShrink: 0,
+                                            flexShrink: 0,
+                                            width: 'calc(25% - 9px)',
+                                            minWidth: '120px',
+                                            scrollSnapAlign: 'start',
+                                            padding: 0,
+                                            border: `3px solid ${isSelected ? th.primaryColor : 'transparent'}`,
+                                            borderRadius: '10px',
+                                            overflow: 'hidden',
+                                            cursor: 'pointer',
+                                            backgroundColor: 'transparent',
+                                            outline: 'none',
+                                        }, children: (0, jsx_runtime_1.jsx)("img", { src: item.gifUrl || item.imageUrl, alt: item.title || '', style: { width: '100%', aspectRatio: '4/3', objectFit: 'cover', display: 'block' } }) }, item.id));
+                                }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => { if (galleryScrollRef.current)
+                                    galleryScrollRef.current.scrollBy({ left: 300, behavior: 'smooth' }); }, style: {
+                                    position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)',
+                                    zIndex: 10, width: '32px', height: '32px', borderRadius: '50%', border: 'none',
+                                    backgroundColor: `${th.primaryColor}dd`, color: '#FFFFFF',
                                     display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                }, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polyline", { points: "9 18 15 12 9 6" }) }) })] })) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: "gifs\u00EDa-layout", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)(CameraBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '16px', fontWeight: 700, color: th.primaryColor }, children: t.photoSectionTitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: "gifs\u00EDa-checker", onDrop: handleDrop, onDragOver: handleDragOver, style: {
+                                    cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
+                                    transition: 'background-color 0.2s',
+                                }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = `${th.primaryColor}dd`; }, children: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "9 18 15 12 9 6" }) }) })] })) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: "gifs\u00EDa-layout", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)(CameraBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '16px', fontWeight: 700, color: th.primaryColor }, children: t.photoSectionTitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: "gifs\u00EDa-checker", onDrop: handleDrop, onDragOver: handleDragOver, style: {
                                     position: 'relative', borderRadius: '10px', border: `2px dashed ${th.borderColor}`,
                                     minHeight: '320px', display: 'flex', alignItems: 'center', justifyContent: 'center',
                                     overflow: 'hidden', cursor: uploadedImageBase64 ? 'default' : 'pointer',
@@ -399,7 +500,7 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
                                             backgroundColor: th.primaryColor, color: '#FFFFFF',
                                             display: 'flex', alignItems: 'center', justifyContent: 'center',
                                             cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-                                        }, children: uploadedImageBase64 ? ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "1 4 1 10 7 10" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.51 15a9 9 0 1 0 .49-3" })] })) : ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), (0, jsx_runtime_1.jsx)("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" })] })) }), uploadedImageBase64 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: uploadedImageBase64, alt: "Foto subida", style: { width: '100%', height: '100%', objectFit: 'contain', position: 'absolute', inset: 0 } }), isGenerating && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 9 } }), (0, jsx_runtime_1.jsx)("div", { className: "gifs\u00EDa-scan-line" })] }))] })) : ((0, jsx_runtime_1.jsxs)("button", { onClick: handleUploadClick, style: {
+                                        }, children: uploadedImageBase64 ? ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "1 4 1 10 7 10" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.51 15a9 9 0 1 0 .49-3" })] })) : ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), (0, jsx_runtime_1.jsx)("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" })] })) }), uploadedImageBase64 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: uploadedImageBase64, alt: "Uploaded photo", style: { width: '100%', height: '100%', objectFit: 'contain', position: 'absolute', inset: 0 } }), isGenerating && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 9 } }), (0, jsx_runtime_1.jsx)("div", { className: "gifs\u00EDa-scan-line" })] }))] })) : ((0, jsx_runtime_1.jsxs)("button", { onClick: handleUploadClick, style: {
                                             padding: '12px 24px', borderRadius: '24px', border: 'none',
                                             backgroundColor: th.primaryColor, color: '#FFFFFF',
                                             fontSize: '14px', fontWeight: 600, cursor: 'pointer',
@@ -413,17 +514,18 @@ function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, ima
                                     transition: 'background-color 0.2s',
                                 }, onMouseEnter: (e) => { if (uploadedImageBase64 && !isGenerating)
                                     e.currentTarget.style.backgroundColor = th.primaryHoverColor; }, onMouseLeave: (e) => { if (uploadedImageBase64 && !isGenerating)
-                                    e.currentTarget.style.backgroundColor = createBtnColor; }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '16px', height: '16px', border: '2px solid rgba(255,255,255,0.3)', borderTop: '2px solid #FFFFFF', borderRadius: '50%', animation: 'gifsía-spin 1s linear infinite' } }), t.creatingGifButton] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) }), t.createGifButton] })) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)(GifBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '16px', fontWeight: 700, color: th.primaryColor }, children: t.gifSectionTitle })] }), (0, jsx_runtime_1.jsx)("div", { className: "gifs\u00EDa-checker", style: {
+                                    e.currentTarget.style.backgroundColor = createBtnColor; }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '16px', height: '16px', border: '2px solid rgba(255,255,255,0.3)', borderTop: '2px solid #FFFFFF', borderRadius: '50%', animation: 'gifsía-spin 1s linear infinite' } }), t.creatingGifButton] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) }), t.createGifButton] })) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)(GifBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '16px', fontWeight: 700, color: th.primaryColor }, children: t.gifSectionTitle })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                                     position: 'relative', borderRadius: '10px', border: `2px dashed ${th.borderColor}`,
                                     minHeight: '320px', display: 'flex', alignItems: 'center', justifyContent: 'center',
                                     overflow: 'hidden', flex: 1,
-                                }, children: genError ? ((0, jsx_runtime_1.jsx)("p", { style: { color: '#F87171', fontSize: '14px', textAlign: 'center', padding: '24px' }, children: genError })) : generatedGifUrl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: generatedGifUrl, alt: "GIF generado", style: { width: '100%', height: '100%', objectFit: 'contain', position: 'absolute', inset: 0 } }), (0, jsx_runtime_1.jsx)("button", { onClick: () => window.open(generatedGifUrl, '_blank'), style: {
+                                    backgroundColor: gifBg,
+                                }, children: genError ? ((0, jsx_runtime_1.jsx)("p", { style: { color: '#F87171', fontSize: '14px', textAlign: 'center', padding: '24px' }, children: genError })) : generatedGifUrl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: generatedGifUrl, alt: "Generated GIF", style: { width: '100%', height: '100%', objectFit: 'contain', position: 'absolute', inset: 0 }, unselectable: "on" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => window.open(generatedGifUrl, '_blank'), style: {
                                                 position: 'absolute', bottom: '12px', right: '12px', zIndex: 20,
                                                 width: '40px', height: '40px', borderRadius: '50%', border: 'none',
                                                 backgroundColor: th.primaryColor, color: '#FFFFFF',
                                                 display: 'flex', alignItems: 'center', justifyContent: 'center',
                                                 cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-                                            }, children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }) }) })] })) : isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedGalleryId !== null && gallery.find(g => g.id === selectedGalleryId) && ((0, jsx_runtime_1.jsx)("img", { src: gallery.find(g => g.id === selectedGalleryId).imageUrl, alt: "", style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'blur(4px)', opacity: 0.5 } })), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', zIndex: 10, width: '80%', textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: 'rgba(0,0,0,0.6)', borderRadius: '8px', padding: '4px 12px', marginBottom: '8px' }, children: (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '14px', color: '#FFFFFF', fontWeight: 600 }, children: queuePosition !== null && queuePosition > 0
+                                            }, children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }) }) })] })) : isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedGalleryId !== null && gallery.find(g => g.id === selectedGalleryId) && ((0, jsx_runtime_1.jsx)("img", { src: gallery.find(g => g.id === selectedGalleryId).imageUrl, alt: "", style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'blur(4px)', opacity: 0.3 } })), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', zIndex: 10, width: '80%', textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: 'rgba(0,0,0,0.6)', borderRadius: '8px', padding: '4px 12px', marginBottom: '8px' }, children: (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '14px', color: '#FFFFFF', fontWeight: 600 }, children: queuePosition !== null && queuePosition > 0
                                                             ? `${t.queueText} #${queuePosition}`
                                                             : `${progressPercent !== null && progressPercent !== void 0 ? progressPercent : 0}%` }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: '8px', backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: '4px', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                                             height: '100%', width: `${progressPercent !== null && progressPercent !== void 0 ? progressPercent : 0}%`,