libreria-astro-lefebvre 0.0.50 → 0.0.51

package/README.md

@@ -8,6 +8,74 @@ Instrucciones:
 npm i libreria-astro-lefebvre
 ```
 
+## 🖼️ Imágenes de Limbo
+
+La librería incluye utilidades para trabajar con imágenes de Limbo de forma sencilla.
+
+### Opción 1: Componente LimboImage (Recomendado para maquetadores)
+
+El componente `<LimboImage>` extrae automáticamente la URL del JSON de Limbo:
+
+```astro
+---
+import LimboImage from 'libreria-astro-lefebvre/components/LimboImage.astro';
+
+const { imagen } = Astro.props; // Puede ser URL directa o JSON de Limbo
+---
+
+<!-- Uso básico -->
+<LimboImage src={imagen} alt="Descripción de la imagen" />
+
+<!-- Con estilos -->
+<LimboImage 
+  src={imagen} 
+  alt="Hero" 
+  class="w-full h-auto rounded-lg"
+/>
+
+<!-- Preferir imagen original en lugar del crop -->
+<LimboImage src={imagen} prefer="original" alt="Original" />
+
+<!-- Con fallback si no hay imagen -->
+<LimboImage src={imagen} fallback="/default.jpg" alt="Con fallback" />
+```
+
+### Opción 2: Función extractImageUrl
+
+Para casos donde necesitas más control:
+
+```astro
+---
+import { extractImageUrl } from 'libreria-astro-lefebvre/lib/functions';
+
+const { imagen } = Astro.props;
+
+// Extraer URL (preferir crop por defecto)
+const srcUrl = extractImageUrl(imagen);
+
+// Preferir imagen original
+const originalUrl = extractImageUrl(imagen, { prefer: 'original' });
+---
+
+<img src={srcUrl} alt="Mi imagen" />
+```
+
+### Funciones disponibles
+
+```javascript
+import { 
+  extractImageUrl,    // Extrae URL de JSON Limbo
+  parseImageData,     // Obtiene datos completos (original + crops)
+  resolveUrl,         // Convierte /files/... a URL absoluta
+  isValidImageUrl,    // Verifica si URL es válida (no blob)
+  LIMBO_BASE_URL      // { DEV: '...', PROD: '...' }
+} from 'libreria-astro-lefebvre/lib/functions';
+```
+
+---
+
+## Instalación y desarrollo
+
 
 Hacer un link en librería local: 
 ``` npm link ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",
@@ -12,7 +12,9 @@
     },
     "./list": "./src/list.ts",
     "./limbo": "./src/limbo/index.ts",
-    "./limbo/LimboProvider.astro": "./src/limbo/LimboProvider.astro"
+    "./limbo/LimboProvider.astro": "./src/limbo/LimboProvider.astro",
+    "./components/LimboImage.astro": "./src/components/LimboImage.astro",
+    "./lib/functions": "./src/lib/functions.js"
   },
   "files": [
     "src"
@@ -26,12 +28,18 @@
   ],
   "peerDependencies": {
     "astro": "^5.11.0",
-    "limbo-component": "latest"
+    "limbo-component": "latest",
+    "vue": "^3.3.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "scripts": {
     "generate:registry": "node scripts/generateRegistry.js"
   },
   "devDependencies": {
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vue": "^3.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

package/src/carbins/AstroButton.ts

@@ -27,20 +27,8 @@ export const metadata: ComponentMetadata = {
       name: 'imagen',
       type: 'image',
       label: 'Imagen de prueba',
-      mandatory: true,
-      example_value: '',
-      image_cuts: [
-        {
-          label: "mobile",
-          width: "300",
-          height: "100"
-        },
-        {
-          label: "desktop",
-          width: "400",
-          height: "400"
-        },
-      ]
+      mandatory: false,
+      example_value: ''
     },
     {
       name: 'target',

package/src/carbins/Contenido_2025_Alcorcon.ts

@@ -53,7 +53,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'src',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-3-4.png'

package/src/carbins/Contenido_2025_Malaga.ts

@@ -39,7 +39,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png'

package/src/carbins/Contenido_2025_Montevideo.ts

@@ -39,7 +39,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'

package/src/carbins/Formulario_2025_Seul.ts

@@ -25,7 +25,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'imageSrc',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-3-4.png'

package/src/carbins/Formulario_2025_Teruel.ts

@@ -97,7 +97,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'imageModal',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen modal',
       mandatory: false,
       example_value: ''
@@ -118,7 +118,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'imageSrc',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'

package/src/carbins/GeometricShapeCard.ts

@@ -33,7 +33,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'imageSrc',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'

package/src/carbins/ImageTextSimple.ts

@@ -28,7 +28,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-1-1.png'

package/src/carbins/Imagen_2025_Bogota.ts

@@ -46,7 +46,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'src',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'

package/src/carbins/Imagen_2025_Fukushima.ts

@@ -11,7 +11,7 @@ export const metadata: ComponentMetadata = {
    fields: [
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen del logo',
       mandatory: false,
       example_value: 'https://lefebvre.es/genia-l/images/genial/img-iso4.webp'

package/src/carbins/TextImageBackground.ts

@@ -29,7 +29,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-16-9.png'

package/src/carbins/TextImageBlock.ts

@@ -44,7 +44,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-4-3.png'

package/src/carbins/TextImageCard.ts

@@ -26,7 +26,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-1-1.png'

package/src/carbins/TextImageHeader.ts

@@ -50,7 +50,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-4-3.png'

package/src/components/Astro/Contenido_2025_Alcorcon.astro

@@ -1,4 +1,6 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     title,
     subtitle,
@@ -11,7 +13,7 @@ const {
     showBtn = true
     } = Astro.props;
 
-
+const srcUrl = extractImageUrl(src);
 ---
 
 <section class="w-full flex items-center justify-center pb-[36px]">
@@ -20,8 +22,8 @@ const {
 
         <div class="max-w-7xl w-full flex justify-center items-center relative md:w-4/5">
             <div class="relative w-full max-w-7xl min-h-[400px] md:min-h-[500px] lg:min-h-[auto]">
-                {src && src !== "" ? (
-                    <img src={src} alt={alt} title={title} class="object-cover object-center w-full h-full lg:max-h-[446px] min-h-[400px] md:min-h-[500px] lg:min-h-[auto] rounded-2xl" loading="lazy"> 
+                {srcUrl && srcUrl !== "" ? (
+                    <img src={srcUrl} alt={alt} title={title} class="object-cover object-center w-full h-full lg:max-h-[446px] min-h-[400px] md:min-h-[500px] lg:min-h-[auto] rounded-2xl"> 
                 ) : (
                     <video autoplay loop muted playsinline class="object-cover object-center w-full h-full lg:max-h-[446px] min-h-[400px] md:min-h-[500px] lg:min-h-[auto] rounded-2xl">
                         <source src={iframeSrc} type="video/mp4" />

package/src/components/Astro/Contenido_2025_Malaga.astro

@@ -1,4 +1,6 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     title,
     description,
@@ -17,7 +19,7 @@ const {
     alignItems = 'start',
     } = Astro.props;
 
-
+const imageUrl = extractImageUrl(image);
 ---
 
 <section class="w-full flex items-center justify-center">
@@ -94,7 +96,7 @@ const {
                 )}
                 
                 <div class={`w-full lg:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-square`}>
-                    <img src={image} alt={title} class="w-[100%] h-[100%] object-cover rounded-lg" loading="lazy" />
+                    <img src={imageUrl} alt={title} class="w-[100%] h-[100%] object-cover rounded-lg" />
                 </div>
             </div>
         </article>

package/src/components/Astro/Contenido_2025_Montevideo.astro

@@ -1,6 +1,6 @@
 ---
-
 import Titulo_2025_Santorini from './Titulo_2025_Santorini.astro';
+import { extractImageUrl } from '../../lib/functions.js';
 
 const {
     link='#',
@@ -11,14 +11,14 @@ const {
     description=''
 } = Astro.props;
 
-
+const imageUrl = extractImageUrl(image);
 ---
 
 <a href={link} class="w-full flex flex-col cursor-pointer px-4 md:px-0">
     <article class="w-full h-full flex flex-col rounded-lg border border-gray-200 items-center shadow-article hover:bg-gradient-to-r from-[#001978] via-[#2134F1] to-[#F81BBD] transition-all duration-300 p-[1px]">
         <div class="bg-white mt-[1px] rounded-tl-[7px] rounded-tr-[7px] h-full">
             <div class="w-full">
-                <img loading="lazy" class="cursor-pointer rounded-tr-lg rounded-tl-lg mx-auto h-full" src={image} alt={altImage} />
+                <img class="cursor-pointer rounded-tr-lg rounded-tl-lg mx-auto h-full" src={imageUrl} alt={altImage} />
             </div>
             <div class="p-6 flex-grow flex flex-col">
                 {tag && tag !== '' && <Titulo_2025_Santorini description={tag} />}

package/src/components/Astro/Formulario_2025_Seul.astro

@@ -1,4 +1,5 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
 
 const { 
     title, 
@@ -10,6 +11,7 @@ const {
     businessAction = false
 } = Astro.props;
 
+const imageSrcUrl = extractImageUrl(imageSrc);
 const idTargetLf2 = 'lf2-form-' + Math.random().toString(36).substring(2, 15);
 
 const structuredData = `<script type="application/ld+json">
@@ -44,7 +46,7 @@ const structuredData = `<script type="application/ld+json">
                     <div id={idTargetLf2} class="w-full flex flex-col mx-auto gap-3"></div>
                 </div>
                 <div class={`w-full p-0 md:p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
-                    <img src={imageSrc} alt={title} class="w-full md:w-4/5 min-h-auto md:min-h-[650px] object-cover rounded-lg" loading="lazy" />
+                    <img src={imageSrcUrl} alt={title} class="w-full md:w-4/5 min-h-auto md:min-h-[650px] object-cover rounded-lg" />
                 </div>
             </div>
         </article>

package/src/components/Astro/Formulario_2025_Teruel.astro

@@ -1,4 +1,5 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
 
 const {
     bottomBorder = false,
@@ -22,6 +23,8 @@ const {
 
 } = Astro.props;
 
+const imageSrcUrl = extractImageUrl(imageSrc);
+const imageModalUrl = extractImageUrl(imageModal);
 const randomId = Math.floor(Math.random() * 1000);
 
 
@@ -53,7 +56,7 @@ const randomId = Math.floor(Math.random() * 1000);
             )}
         </div>
         <div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
-            <img src={imageSrc} alt={title} class="w-full md:w-1/2 rounded-2xl" loading="lazy" />
+            <img src={imageSrcUrl} alt={title} class="w-full md:w-1/2 rounded-2xl" />
         </div>
     </div>
 
@@ -66,7 +69,7 @@ const randomId = Math.floor(Math.random() * 1000);
         </div>
         <div class="w-full h-full flex flex-col lg:flex-row items-start justify-center gap-8">
             <div class="w-full lg:w-1/3 flex justify-center items-center p-0 lg:p-4 mt-[32px] lg:mt-0">
-                <img src={imageModal} alt={altModal} class="w-fit" loading="lazy" />
+                <img src={imageModalUrl} alt={altModal} class="w-fit" />
             </div>
             <div class="w-full lg:w-2/3">
                 <h2 class="font-poppins text-[#262626] text-[28px] lg:text-[32px] font-normal text-left leading-[40px] mb-[32px]">{titleModal}</h2>

package/src/components/Astro/GeometricShape.astro

@@ -1,5 +1,8 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const { imageSrc, orientation, figure = 'Trapecio', gradiantIndex = 0 } = Astro.props;
+const imageSrcUrl = extractImageUrl(imageSrc);
 const polygons = [
     {
         name: 'Trapeze',
@@ -36,5 +39,5 @@ const selectedPolygon = polygons.find(p => p.name === figure) || polygons[0];
 ---
 <div class={`w-[400px] h-[400px] relative ${orientation === 'right' ? '' : '-scale-x-100'}`}>
     <div class={`absolute bottom-0 right-0 w-full h-full bg-cover mask-no-repeat mask-bottom-right ${gradiants[gradiantIndex]}`} style={`mask-image: url(${selectedPolygon.polygon});`}></div>
-    <img src={`${imageSrc}`} loading="lazy" class="absolute bottom-0 right-0 max-h-[400px] h-auto z-10 mask-no-repeat mask-bottom-right" style={`mask-image: url(${selectedPolygon.full});`} alt="Figura Geométrica" />
+    <img src={`${imageSrcUrl}`} loading="lazy" class="absolute bottom-0 right-0 max-h-[400px] h-auto z-10 mask-no-repeat mask-bottom-right" style={`mask-image: url(${selectedPolygon.full});`} alt="Figura Geométrica" />
 </div>

package/src/components/Astro/GeometricShapeCard.astro

@@ -1,5 +1,6 @@
 ---
 import GeometricShape from './GeometricShape.astro';
+import { extractImageUrl } from '../../lib/functions.js';
 
 
 const {
@@ -12,13 +13,15 @@ const {
     gradiantIndex = 0
 } = Astro.props;
 
+const imageSrcUrl = extractImageUrl(imageSrc);
+
 const randomId = `geo-shape-card-`+ Math.random().toString(36).substring(2, 15);
 
 ---
 
 <section class={`flex my-8 items-center justify-center relative min-h-[500px]`}>
     <div class={`absolute top-0 ${orientation === 'right' ? 'right-0' : 'left-0'}`}>
-        <GeometricShape imageSrc={imageSrc} orientation={orientation} figure={figure} gradiantIndex={gradiantIndex} />
+        <GeometricShape imageSrc={imageSrcUrl} orientation={orientation} figure={figure} gradiantIndex={gradiantIndex} />
     </div>
     <div class={`flex text-gray-800 flex-col w-3/5 mx-auto ${orientation === 'right' ? 'text-left items-start' : 'text-right items-end'}`}>
         <h2 class="text-4xl font-bold mb-5 max-w-3xl">{title}</h2>

package/src/components/Astro/ImageTextSimple.astro

@@ -1,10 +1,14 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     image,
     title,
     video ,
     description,
 } = Astro.props;
+
+const imageUrl = extractImageUrl(image);
 ---
 
 <!-- Componente que sirve para las páginas soluciones-profesionales y conocenos entre otras. Si se le pasa por parámetro una imagen, la muestra a la izquierda y el texto a la derecha. Si se le pasa un vídeo, muestra el vídeo a la izquierda y el texto a la derecha. -->
@@ -15,7 +19,7 @@ const {
                 
                 {image
                     ? (
-                            <div class="w-full lg:w-1/2 lg:mx-4 mask-add mask-[url(https://assets.lefebvre.es/media/logos-2/svg/lefebvre-iso.svg)] mask-no-repeat mask-center bg-cover" style={`background-image: url('${image}')`} id="rotating-image"></div>
+                            <div class="w-full lg:w-1/2 lg:mx-4 mask-add mask-[url(https://assets.lefebvre.es/media/logos-2/svg/lefebvre-iso.svg)] mask-no-repeat mask-center bg-cover" style={`background-image: url('${imageUrl}')`} id="rotating-image"></div>
                         )
                     : video
                         ? (

package/src/components/Astro/Imagen_2025_Bogota.astro

@@ -1,4 +1,12 @@
 ---
+/**
+ * 🎯 Imagen_2025_Bogota
+ * 
+ * Componente de imagen con overlay de texto.
+ * Usa LimboImage para simplificar el manejo de imágenes de Limbo.
+ */
+import LimboImage from '../LimboImage.astro';
+
 const {
     title,
     description,
@@ -10,19 +18,19 @@ const {
     showBtn = true,
     showDescription = true,
     color = '#ffffff',
-    } = Astro.props;
+} = Astro.props;
 
-    const structuredData = `<script type="application/ld+json">
-    {
-        "@context": "https://schema.org",
-        "@type": "ImageObject",
-        "name": "${title || ''}",
-        "description": "${description ? description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
-        "url": "${src || iframeSrc || ''}",
-        "contentUrl": "${src || iframeSrc || ''}",
-        ${src ? `"encodingFormat": "image"` : `"encodingFormat": "video/mp4"`}
-    }
-    </script>`;
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "ImageObject",
+    "name": "${title || ''}",
+    "description": "${description ? description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
+    "url": "${src || iframeSrc || ''}",
+    "contentUrl": "${src || iframeSrc || ''}",
+    ${src ? `"encodingFormat": "image"` : `"encodingFormat": "video/mp4"`}
+}
+</script>`;
 ---
 
 <section class="w-full flex items-center justify-center">
@@ -32,13 +40,19 @@ const {
         <div class="max-w-full lg:max-w-7xl h-full flex justify-center items-center aspect-auto relative md:w-4/5 lg:aspect-video">
             <div class="absolute inset-0">
 
-                {src && src !== "" ? (
-                    <img src={src} alt={alt} title={title} loading="lazy" class="object-cover object-center w-full h-full rounded-2xl shadow-lg"> 
-                ) : (
+                {src ? (
+                    <LimboImage 
+                        src={src} 
+                        alt={alt || title || ''} 
+                        title={title}
+                        class="object-cover object-center w-full h-full rounded-2xl shadow-lg"
+                        fallback={iframeSrc}
+                    />
+                ) : iframeSrc ? (
                     <video autoplay loop muted playsinline class="object-cover object-center w-full h-full rounded-2xl shadow-lg">
                         <source src={iframeSrc} type="video/mp4" />
                     </video> 
-                )}                
+                ) : null}                
             </div>
             
             <div class="w-4/5 relative z-10 flex flex-col justify-center items-center h-full text-center p-0 py-8 md:p-6">

package/src/components/Astro/Imagen_2025_Fukushima.astro

@@ -1,4 +1,6 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     link = false,
     image,
@@ -6,6 +8,7 @@ const {
     descriptionImage
     } = Astro.props;
 
+const imageUrl = extractImageUrl(image);
 ---
 
 
@@ -14,12 +17,12 @@ const {
         <div class="w-full">
             {(link && link !== '') ? (
                 <a href={link} class="w-full flex flex-col flex-1 justify-center items-center">
-                    <img class="max-w-[80px] w-fit mb-4" src={image} alt={altImage} loading="lazy" />
+                    <img class="max-w-[80px] w-fit mb-4" src={imageUrl} alt={altImage} />
                     <p class="text-[14px] text-[#363942]" set:html={descriptionImage}></p>
                 </a>
             ) : (
                 <div class="w-full flex flex-col flex-1 justify-center items-center max-h-[94px]">
-                    <img class="max-w-[80px] w-fit mb-4" src={image} alt={altImage} loading="lazy" />
+                    <img class="max-w-[80px] w-fit mb-4" src={imageUrl} alt={altImage} />
                 </div>
                 <div class="w-full flex flex-col flex-1 justify-center items-center">
                     <p class="text-[14px] text-[#363942]" set:html={descriptionImage}></p>

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" loading="lazy" />
+                <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/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
 });
 ---
 

package/src/limbo/init.ts

@@ -1,16 +1,38 @@
 /**
  * Limbo Integration Module for libreria-astro-lefebvre
  *
+ * v2.0 - Actualizado para limbo-component v2.0
+ *
  * Este módulo gestiona la inicialización y configuración de limbo-component
  * para ser usado en cualquier portal que consuma esta librería.
+ *
+ * Soporta configuración via data attributes en inputs HTML:
+ * - data-mandatorycrops: JSON array de crops obligatorios
+ * - data-modeui: full | gallery-only | upload-only | crop-only
+ * - data-returntype: url | assetId | object | json | base64
+ * - data-allowadditionalcrops: true | false
+ * - data-maxcrops: number
+ * - data-buttontext: texto personalizado del botón
  */
 
+export interface MandatoryCrop {
+  label: string;
+  width?: number;
+  height?: number;
+  required?: boolean;
+  preset_aspect?: string;
+}
+
 export interface LimboConfig {
   publicKey: string;
   prod?: boolean;
   selector?: string;
-  defaultReturnType?: 'url' | 'assetId' | 'object' | 'json' | 'base64';
-  sizeModal?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
+  defaultReturnType?: "url" | "assetId" | "object" | "json" | "base64";
+  defaultModeUI?: "full" | "gallery-only" | "upload-only" | "crop-only";
+  sizeModal?: "small" | "medium" | "large" | "xlarge" | "fullscreen";
+  defaultButtonText?: string;
+  allowAdditionalCrops?: boolean;
+  maxCrops?: number;
   onSelect?: (data: any) => void;
   onError?: (error: Error) => void;
 }
@@ -27,14 +49,18 @@ export function generateLimboInitScript(config: LimboConfig): string {
   const {
     publicKey,
     prod = false,
-    selector = '.js-limbo',
-    defaultReturnType = 'json',
-    sizeModal = 'xlarge'
+    selector = ".js-limbo",
+    defaultReturnType = "json",
+    defaultModeUI = "full",
+    sizeModal = "xlarge",
+    defaultButtonText = "Seleccionar imagen",
+    allowAdditionalCrops = true,
+    maxCrops = 10,
   } = config;
 
   // URL del proxy para evitar CORS (usa endpoint local del portal)
   // El proxy está en /api/limbo-token del portal que consume la librería
-  const tokenProxyUrl = '/api/limbo-token';
+  const tokenProxyUrl = "/api/limbo-token";
 
   return `
 (function() {
@@ -79,11 +105,41 @@ export function generateLimboInitScript(config: LimboConfig): string {
     }
   }
 
+  // Estado de inicialización
+  var initRetrys = 0;
+  var maxRetrys = 20;
+
+  // Función global para re-escanear inputs (útil después de hydration de Vue/React)
+  window.LimboRescan = function(selector) {
+    var targetSelector = selector || '${selector}';
+    var inputs = document.querySelectorAll(targetSelector);
+    var processed = 0;
+    console.log('[Limbo] Rescan manual: buscando inputs con selector', targetSelector);
+    inputs.forEach(function(input) {
+      if (input.tagName === 'INPUT' && !input.dataset.limboProcessed) {
+        try {
+          Limbo.autoInputs._processInput(input);
+          input.dataset.limboProcessed = 'true';
+          processed++;
+        } catch (e) {
+          console.error('[Limbo] Error procesando input:', e);
+        }
+      }
+    });
+    console.log('[Limbo] Rescan completado:', processed, 'inputs procesados de', inputs.length, 'encontrados');
+    return processed;
+  };
+
   // Esperamos a que Limbo esté disponible
   function initLimbo() {
     if (typeof Limbo === 'undefined') {
-      console.warn('[Limbo] Limbo no está cargado. Reintentando...');
-      setTimeout(initLimbo, 100);
+      initRetrys++;
+      if (initRetrys <= maxRetrys) {
+        console.warn('[Limbo] Limbo no está cargado. Reintentando... (' + initRetrys + '/' + maxRetrys + ')');
+        setTimeout(initLimbo, 100);
+      } else {
+        console.error('[Limbo] No se pudo cargar Limbo después de ' + maxRetrys + ' intentos.');
+      }
       return;
     }
 
@@ -104,10 +160,17 @@ export function generateLimboInitScript(config: LimboConfig): string {
     // Configurar auto-inputs para detectar elementos con el selector
     Limbo.configureAutoInputs({
       selector: '${selector}',
-      buttonText: 'Seleccionar imagen',
+      buttonText: '${defaultButtonText}',
       returnType: '${defaultReturnType}',
+      modeUI: '${defaultModeUI}',
+      allowAdditionalCrops: ${allowAdditionalCrops},
+      maxCrops: ${maxCrops},
+      // 🔧 Los recortes se guardan en Limbo para garantizar persistencia
+      // Los recortes del page-builder se pueden identificar por su nombre (contienen dimensiones)
+      localCropsOnly: false,
 
       // Parsear configuración del input desde datasets
+      // Los valores del dataset tienen prioridad sobre los defaults
       parseInputConfig: function(input) {
         var config = {};
 
@@ -130,11 +193,68 @@ export function generateLimboInitScript(config: LimboConfig): string {
           config.modeUI = input.dataset.modeui;
         }
 
+        // Parsear allowAdditionalCrops
+        if (input.dataset.allowadditionalcrops !== undefined) {
+          config.allowAdditionalCrops = input.dataset.allowadditionalcrops === 'true';
+        }
+
+        // Parsear maxCrops
+        if (input.dataset.maxcrops) {
+          config.maxCrops = parseInt(input.dataset.maxcrops, 10);
+        }
+
+        // Parsear buttonText personalizado
+        if (input.dataset.buttontext) {
+          config.buttonText = input.dataset.buttontext;
+        }
+
         return config;
       }
     });
 
     console.log('[Limbo] Integración configurada. Buscando inputs con selector: ${selector}');
+
+    // Debug: Verificar que el observer esté activo
+    console.log('[Limbo] AutoInputs stats:', Limbo.autoInputs?.getStats?.() || 'N/A');
+
+    // Debug: Escanear manualmente después de un delay para Vue/React hydration
+    setTimeout(function() {
+      console.log('[Limbo] Re-escaneando inputs después de hydration...');
+      var inputs = document.querySelectorAll('${selector}');
+      console.log('[Limbo] Encontrados ' + inputs.length + ' inputs con selector ${selector}');
+      inputs.forEach(function(input, idx) {
+        console.log('[Limbo] Input ' + idx + ':', input.tagName, input.className, input.id || input.name);
+        // Forzar procesamiento si es un input válido
+        if (input.tagName === 'INPUT' && !input.dataset.limboProcessed) {
+          try {
+            Limbo.autoInputs._processInput(input);
+            input.dataset.limboProcessed = 'true';
+            console.log('[Limbo] Input procesado manualmente:', input.id || input.name);
+          } catch (e) {
+            console.error('[Limbo] Error procesando input:', e);
+          }
+        }
+      });
+    }, 1000); // Esperar 1 segundo para Vue hydration
+
+    // Segunda pasada después de 2.5 segundos para componentes Vue más lentos
+    setTimeout(function() {
+      var inputs = document.querySelectorAll('${selector}');
+      var pendingInputs = Array.from(inputs).filter(function(input) {
+        return input.tagName === 'INPUT' && !input.dataset.limboProcessed;
+      });
+      if (pendingInputs.length > 0) {
+        console.log('[Limbo] Segunda pasada: procesando ' + pendingInputs.length + ' inputs pendientes');
+        pendingInputs.forEach(function(input) {
+          try {
+            Limbo.autoInputs._processInput(input);
+            input.dataset.limboProcessed = 'true';
+          } catch (e) {
+            console.error('[Limbo] Error procesando input:', e);
+          }
+        });
+      }
+    }, 2500);
   }
 
   // Iniciar cuando el DOM esté listo
@@ -150,25 +270,26 @@ export function generateLimboInitScript(config: LimboConfig): string {
 /**
  * Genera las URLs de los assets de Limbo (CSS y JS)
  */
-export function getLimboAssetUrls(options: { prod?: boolean; version?: string } = {}) {
-  const { prod = false, version = 'latest' } = options;
-
+export function getLimboAssetUrls(
+  options: { prod?: boolean; version?: string } = {}
+) {
+  const { prod = false, version = "latest" } = options;
   // En producción, usar CDN de npm o URL de producción
   if (prod) {
     return {
       css: `https://unpkg.com/limbo-component@${version}/dist/limbo.css`,
-      js: `https://unpkg.com/limbo-component@${version}/dist/limbo.min.js`
+      js: `https://unpkg.com/limbo-component@${version}/dist/limbo.min.js`,
     };
   }
 
-  // En desarrollo, usar el build local (npm link)
+  // En desarrollo, usar el build local desde public/limbo
   return {
-    css: '/node_modules/limbo-component/dist/limbo.css',
-    js: '/node_modules/limbo-component/dist/limbo.min.js'
+    css: "/limbo/limbo.css",
+    js: "/limbo/limbo.min.js",
   };
 }
 
 export default {
   generateLimboInitScript,
-  getLimboAssetUrls
+  getLimboAssetUrls,
 };