libreria-astro-lefebvre 0.0.49 → 0.0.51

package/src/components/Astro/Repetidor_2025_Cabra.astro

@@ -88,7 +88,7 @@ const structuredData = `<script type="application/ld+json">
                             />
                         </div>
                         <div class="w-full md:w-1/2 p-0 md:pr-2">
-                            <img src={item.image} alt="Imagen" class="w-full min-h-auto lg:min-h-full object-cover rounded-xl" />
+                            <img src={item.image} alt="Imagen" loading="lazy" class="w-full min-h-auto lg:min-h-full object-cover rounded-xl" />
                         </div>
                     </div>
 

package/src/components/Astro/Repetidor_2025_Orcasitas.astro

@@ -72,7 +72,7 @@ const structuredData = `<script type="application/ld+json">
                 {item.iframeSrc ? (
                     <div class="w-full">
                         <span class={`popup-iframe-trigger-${randomId} cursor-pointer`} data-iframesrc={item.iframeSrc}>
-                            <img src={item.imageSrc} class="w-full h-full rounded-2xl p-2 transition-transform hover:scale-105 cursor-pointer"/>
+                            <img src={item.imageSrc} loading="lazy" class="w-full h-full rounded-2xl p-2 transition-transform hover:scale-105 cursor-pointer"/>
                         </span>
                     </div>
                     <div class="p-6 flex-grow flex flex-col">
@@ -84,7 +84,7 @@ const structuredData = `<script type="application/ld+json">
                         </div>
                     </div>
                 ) : (
-                    <img src={item.image} alt={item.altImage} class="!max-w-[250px] w-fit" />
+                    <img src={item.image} alt={item.altImage} class="!max-w-[250px] w-fit" loading="lazy" />
                     <p>{item.descriptionImage}</p>
                 )}
                 </div>

package/src/components/Astro/Repetidor_2025_Oslo.astro

@@ -31,7 +31,7 @@ const structuredDataScript = `<script type="application/ld+json">${structuredDat
         {items.map(item => (
             <article class="w-full md:w-1/3 h-full mb-4 md:mb-0 relative">
                 <p class={`popup-iframe-trigger-${randomId} cursor-pointer`} data-iframesrc={item.iframeSrc}>
-                    <img src={item.imageSrc} class="w-full h-full rounded-2xl p-2 transition-transform hover:scale-105 cursor-pointer"/>
+                    <img src={item.imageSrc} class="w-full h-full rounded-2xl p-2 transition-transform hover:scale-105 cursor-pointer" loading="lazy"/>
                 </p>
                 <p set:html={item.description} class="text-[14px] text-[#363942] text-center font-semibold"></p>
             </article> 

package/src/components/Astro/Repetidor_2025_Yakarta.astro

@@ -81,7 +81,7 @@ const structuredData = `<script type="application/ld+json">
                                 <p class="text-[#363942] font-poppins font-normal text-[20px] not-italic leading-[28px]" set:html={item.description}></p>
                             </div>
                             <div class="w-full lg:w-2/2 flex items-start">
-                                {/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" /> */}
+                                {/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" loading="lazy" /> */}
                                 <video autoplay loop muted playsinline class="w-full h-auto rounded-xl">
                                     <source src={item.iframeSrc} type="video/mp4" />
                                 </video> 

package/src/components/Astro/TextImageBackground.astro

@@ -1,13 +1,18 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     title,
     description,
     image,
     orientation = 'left',
     } = Astro.props;
+
+// Extraer URL de la imagen (puede venir como JSON de Limbo o URL directa)
+const imageUrl = extractImageUrl(image);
 ---
 
-<section class={`w-full flex items-center justify-center bg-white bg-no-repeat ${orientation === 'left' ? 'bg-right' : 'bg-left'} bg-contain `} style={`background-image: url('${image}');`}>
+<section class={`w-full flex items-center justify-center bg-white bg-no-repeat ${orientation === 'left' ? 'bg-right' : 'bg-left'} bg-contain `} style={`background-image: url('${imageUrl}');`}>
     <article class={`flex ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} py-12 w-4/5 center mx-auto `}>
         <div class="basis-1/2">
             <h3 class="font-semibold mb-4 text-[2.313em]" style="line-height:47px;" set:html={title}/>

package/src/components/Astro/TextImageBlock.astro

@@ -1,4 +1,6 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     title,
     description,
@@ -7,6 +9,8 @@ const {
     image,
     orientation = 'left',
     } = Astro.props;
+
+const imageUrl = extractImageUrl(image);
 ---
 <section class="w-full flex items-center justify-center bg-gradient-to-r from-slate-50 to-slate-100 border-t border-b border-gray-300">
     <article class="w-3/5 flex flex-col items-center justify-center p-12">
@@ -22,7 +26,7 @@ const {
                 </div>
             </div>
             <div class={`w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
-                <img src={image} alt={title} class="w-4/5 h-auto rounded" />
+                <img src={imageUrl} alt={title} class="w-4/5 h-auto rounded" />
             </div>
         </div>
     </article>

package/src/components/Astro/TextImageCard.astro

@@ -1,10 +1,14 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     title,
     description,
     image,
     orientation = 'left',
     } = Astro.props;
+
+const imageUrl = extractImageUrl(image);
 ---
 <article class={`flex ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} items-center gap-4 w-full rounded-xl overflow-hidden border border-slate-300 shadow-lg bg-white`}>
     <div class="w-2/3 p-8 flex flex-col flex-wrap justify-center items-start">
@@ -17,7 +21,7 @@ const {
     <div class={`w-1/3 aspect-square flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
         <div
             class="w-full h-full bg-center bg-cover"
-            style={`background-image: url('${image}');`}
+            style={`background-image: url('${imageUrl}');`}
             aria-label={title}
             role="img"
         ></div>

package/src/components/Astro/TextImageHeader.astro

@@ -1,4 +1,6 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     image,
     pretitle,
@@ -8,9 +10,11 @@ const {
     buttonText,
     buttonUrl,
 } = Astro.props;
+
+const imageUrl = extractImageUrl(image);
 ---
 
-<div class={`bg-[100%_0] bg-cover h-[570px] w-full ${orientation === "right" ? "rotate-y-180" : ""} `} style={`background-image: url('${image}');`} >
+<div class={`bg-[100%_0] bg-cover h-[570px] w-full ${orientation === "right" ? "rotate-y-180" : ""} `} style={`background-image: url('${imageUrl}');`} >
     <div class="w-full lg:w-[70%] h-full transition duration-900 ease-in-out bg-gradient-to-r from-indigo-900 via-blue-600 to-pink-500 hover:from-pink-500 hover:via-blue-600 hover:to-indigo-900 lg:[clip-path:polygon(0_0,100%_0,88%_86%,68%_100%,0_100%)]">
         <div class="flex flex-row w-4/5 center mx-auto pt-20 sm:pt-30"> 
             <div class={`w-full ${orientation === "right" ? "rotate-y-180" : ""}`}>

package/src/components/Astro/Video_2025_Polop.astro

@@ -15,7 +15,7 @@ const {
         <p class="text-[#363942] font-inter font-normal text-base not-italic leading-[24px]" set:html={description}></p>
     </div>
     <div class="w-full lg:w-2/2 flex items-start">
-        {/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" /> */}
+        {/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" loading="lazy" /> */}
         <video autoplay loop muted playsinline class="w-full h-auto rounded-xl">
             <source src={iframeSrc} type="video/mp4" />
         </video> 

package/src/components/LimboImage.astro

@@ -0,0 +1,89 @@
+---
+/**
+ * 🎯 LimboImage - Componente wrapper para imágenes de Limbo
+ * 
+ * Este componente simplifica el uso de imágenes de Limbo en componentes Astro.
+ * Extrae automáticamente la URL del JSON de Limbo y maneja URLs relativas.
+ * 
+ * @example
+ * // Uso simple - el src puede ser URL directa o JSON de Limbo
+ * <LimboImage src={imagenDeLimbo} alt="Descripción" />
+ * 
+ * @example
+ * // Con clases personalizadas
+ * <LimboImage 
+ *   src={imagenDeLimbo} 
+ *   alt="Hero image"
+ *   class="w-full h-auto rounded-lg"
+ * />
+ * 
+ * @example
+ * // Preferir imagen original en lugar del crop
+ * <LimboImage src={imagenDeLimbo} prefer="original" />
+ * 
+ * @example
+ * // Con fallback si no hay imagen
+ * <LimboImage src={imagenDeLimbo} fallback="/default.jpg" />
+ */
+
+import { extractImageUrl } from '../lib/functions.js';
+
+interface Props {
+    /** Valor de imagen - puede ser URL directa o JSON de Limbo */
+    src: string;
+    /** Texto alternativo (requerido para accesibilidad) */
+    alt: string;
+    /** Título opcional para tooltip */
+    title?: string;
+    /** Clases CSS adicionales */
+    class?: string;
+    /** Preferir 'crop' (recorte) u 'original' */
+    prefer?: 'crop' | 'original';
+    /** Imagen fallback si src está vacío o es inválido */
+    fallback?: string;
+    /** Carga diferida (por defecto: lazy) */
+    loading?: 'lazy' | 'eager';
+    /** Decodificación (por defecto: async) */
+    decoding?: 'async' | 'sync' | 'auto';
+    /** Ancho explícito (para CLS) */
+    width?: number | string;
+    /** Alto explícito (para CLS) */
+    height?: number | string;
+    /** Usar entorno de producción para URLs relativas */
+    isProd?: boolean;
+    /** Atributos HTML adicionales */
+    [key: string]: any;
+}
+
+const { 
+    src, 
+    alt, 
+    title,
+    class: className,
+    prefer = 'crop',
+    fallback = '',
+    loading = 'lazy',
+    decoding = 'async',
+    width,
+    height,
+    isProd = false,
+    ...restProps 
+} = Astro.props;
+
+// Extraer URL usando la función centralizada
+const imageUrl = extractImageUrl(src, { prefer, isProd }) || fallback;
+---
+
+{imageUrl && (
+    <img 
+        src={imageUrl}
+        alt={alt}
+        title={title}
+        class={className}
+        loading={loading}
+        decoding={decoding}
+        width={width}
+        height={height}
+        {...restProps}
+    />
+)}

package/src/index.ts

@@ -127,3 +127,5 @@ export const components = {
   Video_2025_Valencia: Video_2025_Valencia,
   ReactButton: ReactButton
 };
+// 🆕 Exportar funciones helper adicionales
+export { extractImageUrl, parseImageData } from './lib/functions.js';

package/src/lib/functions.js

@@ -1,5 +1,176 @@
 import { components } from '../generated/componentRegistry.ts';
 
+// ============================================================================
+// 🎯 Utilidades de Imagen para Limbo
+// ============================================================================
+// NOTA: Estas funciones están copiadas de component-limbo/src/utils/helpers.js
+// para evitar problemas de dependencias en entornos sin acceso directo a limbo-component.
+// Si se actualizan en helpers.js, sincronizar aquí también.
+// ============================================================================
+
+/**
+ * URLs base de Limbo según entorno
+ */
+export const LIMBO_BASE_URL = {
+  DEV: 'https://led-dev-limbo-dev.eu.els.local',
+  PROD: 'https://limbo.lefebvre.es'
+};
+
+/**
+ * Convierte URLs relativas de Limbo a absolutas
+ */
+export function resolveUrl(url, isProd = false) {
+  if (!url) return '';
+  if (url.startsWith('/files/')) {
+    const baseUrl = isProd ? LIMBO_BASE_URL.PROD : LIMBO_BASE_URL.DEV;
+    return baseUrl + url;
+  }
+  return url;
+}
+
+/**
+ * Decodifica entidades HTML comunes en un string
+ */
+export function decodeHtmlEntities(value) {
+  if (typeof value !== 'string') return value;
+  return value
+    .replace(/"/g, '"')
+    .replace(/&/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&#39;/g, "'")
+    .replace(/&#x27;/g, "'");
+}
+
+/**
+ * Verifica si una URL es válida y usable (no blob, no vacía)
+ */
+export function isValidImageUrl(url) {
+  if (!url || typeof url !== 'string') return false;
+  if (url.startsWith('blob:')) return false;
+  return true;
+}
+
+/**
+ * 🎯 FUNCIÓN PRINCIPAL - Extrae URL de imagen de cualquier formato
+ * 
+ * @param {string} value - URL directa o JSON de Limbo
+ * @param {Object} options - { prefer: 'crop'|'original', isProd: boolean }
+ * @returns {string} URL lista para usar en <img src="">
+ */
+export function extractImageUrl(value, options = {}) {
+  if (!value) return '';
+  
+  const { prefer = 'crop', isProd = false } = options;
+  const normalizedValue = decodeHtmlEntities(value);
+  
+  try {
+    const data = JSON.parse(normalizedValue);
+    
+    const findValidCropUrl = () => {
+      if (data.images && Array.isArray(data.images)) {
+        for (const img of data.images) {
+          if (img && isValidImageUrl(img.url)) {
+            return img.url;
+          }
+        }
+      }
+      return null;
+    };
+    
+    const originalUrl = data.original?.url;
+    const cropUrl = findValidCropUrl();
+    
+    if (prefer === 'crop') {
+      if (cropUrl) return resolveUrl(cropUrl, isProd);
+      if (isValidImageUrl(originalUrl)) return resolveUrl(originalUrl, isProd);
+    } else {
+      if (isValidImageUrl(originalUrl)) return resolveUrl(originalUrl, isProd);
+      if (cropUrl) return resolveUrl(cropUrl, isProd);
+    }
+    
+    if (isValidImageUrl(data.url)) {
+      return resolveUrl(data.url, isProd);
+    }
+    
+    return '';
+    
+  } catch {
+    if (typeof normalizedValue === 'string') {
+      if (normalizedValue.startsWith('blob:')) return '';
+      if (normalizedValue.startsWith('/files/')) return resolveUrl(normalizedValue, isProd);
+      if (normalizedValue.startsWith('http') || normalizedValue.startsWith('/')) return normalizedValue;
+    }
+  }
+  
+  if (typeof value === 'string' && (value.startsWith('{') || value.startsWith('['))) {
+    return '';
+  }
+  
+  return value;
+}
+
+/**
+ * Obtiene datos completos de imagen (original + recortes)
+ */
+export function parseImageData(value, options = {}) {
+  const { isProd = false } = options;
+  
+  if (!value) return { original: null, images: [], url: '' };
+  
+  try {
+    const data = JSON.parse(decodeHtmlEntities(value));
+    
+    const resolvedOriginal = data.original ? {
+      ...data.original,
+      url: resolveUrl(data.original.url, isProd)
+    } : null;
+    
+    const resolvedImages = (data.images || []).map(img => ({
+      ...img,
+      url: resolveUrl(img.url, isProd)
+    }));
+    
+    return {
+      original: resolvedOriginal,
+      images: resolvedImages,
+      url: resolvedImages[0]?.url || resolvedOriginal?.url || resolveUrl(data.url, isProd) || ''
+    };
+    
+  } catch {
+    return {
+      original: null,
+      images: [],
+      url: resolveUrl(value, isProd)
+    };
+  }
+}
+
+/**
+ * Preprocesa campos de imagen para enviar a servidor de preview
+ */
+export function prepareImageFieldsForPreview(obj, options = {}) {
+  const { isProd = false } = options;
+  
+  if (!obj?.fields) return obj;
+  
+  const processedFields = obj.fields.map(field => {
+    if (field.type === 'image' && typeof field.example_value === 'string') {
+      const extractedUrl = extractImageUrl(field.example_value, { isProd });
+      return {
+        ...field,
+        example_value: extractedUrl || field.example_value
+      };
+    }
+    return field;
+  });
+  
+  return {
+    ...obj,
+    fields: processedFields
+  };
+}
+
 export function listComponents() {
     const metadatas = components
         .map(c => c.component.metadata)

package/src/limbo/LimboProvider.astro

@@ -30,8 +30,16 @@ interface Props {
   selector?: string;
   /** Tipo de retorno por defecto */
   defaultReturnType?: 'url' | 'assetId' | 'object' | 'json' | 'base64';
+  /** Modo UI por defecto */
+  defaultModeUI?: 'full' | 'gallery-only' | 'upload-only' | 'crop-only';
   /** Tamaño del modal (default: 'xlarge') */
   sizeModal?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
+  /** Texto del botón por defecto */
+  defaultButtonText?: string;
+  /** Permitir crops adicionales además de los obligatorios */
+  allowAdditionalCrops?: boolean;
+  /** Máximo número de crops permitidos */
+  maxCrops?: number;
   /** Versión de limbo-component a usar (default: 'latest') */
   version?: string;
   /** Usar assets locales en vez de CDN (para desarrollo con npm link) */
@@ -43,7 +51,11 @@ const {
   prod = false,
   selector = '.js-limbo',
   defaultReturnType = 'json',
+  defaultModeUI = 'full',
   sizeModal = 'xlarge',
+  defaultButtonText = 'Seleccionar imagen',
+  allowAdditionalCrops = true,
+  maxCrops = 10,
   version = 'latest',
   useLocalAssets = !prod
 } = Astro.props;
@@ -57,7 +69,11 @@ const initScript = generateLimboInitScript({
   prod,
   selector,
   defaultReturnType,
-  sizeModal
+  defaultModeUI,
+  sizeModal,
+  defaultButtonText,
+  allowAdditionalCrops,
+  maxCrops
 });
 ---