libreria-astro-lefebvre 0.1.10 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.1.10",
+  "version": "0.1.16",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",

package/src/carbins/Galeria_2026_Segorbe.ts

@@ -0,0 +1,36 @@
+import type { ComponentMetadata } from '../interfaces/types';
+
+export const metadata: ComponentMetadata = {
+  component_name: 'Galeria_2026_Segorbe',
+  category: 'Contenido con listas',
+  name: 'Galería de imágenes en masonry 2026',
+  description: 'Galería tipo masonry (estilo Pinterest): muestra una lista de imágenes en columnas con altura variable usando CSS columns. El número de columnas en escritorio es configurable (2, 3 o 4); en tablet siempre 2 y en móvil 1. Cada imagen conserva su proporción original. Incluye structured data schema.org (ItemList de ImageObject)',
+  framework: 'Astro',
+  priority: 1,
+  tags: ['galeria', 'imagenes', 'masonry', 'pinterest', 'grid'],
+  fields: [
+    {
+      name: 'columns',
+      type: 'select',
+      help: 'Número de columnas en escritorio (breakpoint lg). En tablet (md) siempre se muestran 2 columnas y en móvil 1',
+      label: 'Columnas en escritorio',
+      options: ['2', '3', '4'],
+      options_labels: ['2 columnas', '3 columnas', '4 columnas'],
+      example_value: '3'
+    },
+    {
+      name: 'items',
+      type: 'list',
+      help: 'Listado de imágenes que componen la galería. Cada imagen mantiene su proporción original; el layout las distribuye en columnas de altura variable. IMPORTANTE: para conseguir el efecto masonry (estilo Pinterest) las imágenes deben tener proporciones distintas entre sí (verticales, horizontales, cuadradas, etc.). Si todas tienen el mismo aspect-ratio (p. ej. todas 16:9) el resultado se verá como una rejilla uniforme, no como masonry',
+      label: 'Imágenes de la galería',
+      mandatory: false,
+      items: {
+        type: 'object',
+        fields: [
+          { name: 'image', type: 'image', help: 'Imagen de la galería. Acepta URL directa o JSON de Limbo', label: 'Imagen', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
+          { name: 'alt', type: 'text', help: 'Texto alternativo de la imagen para accesibilidad y SEO. Si se deja vacío se usa un texto genérico', label: 'Texto alternativo (alt)', example_value: 'Imagen de la galería' }
+        ]
+      }
+    }
+  ]
+};

package/src/components/Astro/Contenido_2026_Moraira.astro

@@ -45,10 +45,10 @@ const hasContent = title || description;
 
                 <div class="w-full max-w-7xl flex flex-col items-center justify-center text-center">
                     {showBtn && linkBtn && (
-                    <a href={linkBtn} target="_self" class="flex items-center justify-center w-fit py-3 px-6 mx-auto gap-4 shrink-0 rounded-lg border border-[#2134F1] bg-[rgba(255,255,255,0.01)] text-[#2134F1] text-center font-[Inter] text-base font-semibold leading-6 no-underline hover:underline transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
+                    <a href={linkBtn} target="_self" class="flex items-center justify-center w-fit py-3 px-6 mx-auto gap-4 shrink-0 rounded-lg border border-[#2134F1] bg-[#2134F1] text-white text-center font-inter text-base font-semibold leading-6 no-underline hover:bg-white hover:text-[#2134F1] transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
                 )}
                     {showBtnModal && (
-                    <Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#2134F1" backColor="#fffffff" borderColor="#2134F1" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} />
+                    <Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#ffffff" backColor="#2134F1" borderColor="#2134F1" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} />
                 )}
                 </div>
             </section>
@@ -66,10 +66,10 @@ const hasContent = title || description;
             )}
             <div class={`w-full max-w-7xl flex flex-col items-center justify-center text-center ${hasContent ? '' : 'my-auto'}`}>
                 {showBtn && linkBtn && (
-                    <a href={linkBtn} target="_self" class="flex items-center justify-center w-fit py-3 px-6 mx-auto gap-4 shrink-0 rounded-lg border border-[#2134F1] bg-white text-[#2134F1] text-center font-[Inter] text-base font-semibold leading-6 no-underline hover:underline transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
+                    <a href={linkBtn} target="_self" class="flex items-center justify-center w-fit py-3 px-6 mx-auto gap-4 shrink-0 rounded-lg border border-[#2134F1] bg-[#2134F1] text-white text-center font-inter text-base font-semibold leading-6 no-underline hover:bg-white hover:text-[#2134F1] transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
                 )}
                 {showBtnModal && (
-                    <Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#2134F1" backColor="#ffffff" borderColor="#2134F1" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} />
+                    <Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#ffffff" backColor="#2134F1" borderColor="#2134F1" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} />
                 )}
             </div>
         </section>

package/src/components/Astro/Contenido_2026_Mostoles.astro

@@ -37,14 +37,14 @@ const hasContent = title || description;
             <section class={`w-full flex flex-col ${hasContent ? 'justify-between' : 'justify-center'} items-center p-6 rounded-2xl bg-cover bg-center min-h-[289px] bg-white`} style={backgroundStyle}>
                 {hasContent && (
                 <div class="w-full max-w-7xl flex flex-col items-center justify-center text-left gap-4">
-                    {title && <h3 class="text-[#262626] font-[Poppins] text-2xl font-semibold leading-8" style="font-feature-settings: 'liga' off, 'clig' off;">{title}</h3>}
-                    {description && <p class="text-[#627384] font-[Inter] text-base font-normal leading-6" style="font-feature-settings: 'liga' off, 'clig' off;" set:html={description}></p>}
+                    {title && <h3 class="text-[#262626] font-[Poppins] text-2xl font-semibold leading-8">{title}</h3>}
+                    {description && <p class="text-[#627384] font-[Inter] text-base font-normal leading-6" set:html={description}></p>}
                 </div>
                 )}
                 
                 <div class="w-full max-w-7xl flex flex-col items-center justify-center text-center">
                     {showBtn && linkBtn && (
-                    <a href={linkBtn} target="_self" class="flex items-center justify-center h-12 gap-4 shrink-0 self-stretch rounded-lg border border-[#2134F1] bg-[rgba(255,255,255,0.01)] text-[#2134F1] text-center font-[Inter] text-base font-semibold leading-6 no-underline hover:underline transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
+                    <a href={linkBtn} target="_self" class="flex items-center justify-center w-fit mx-auto px-6 py-4 h-12 gap-4 shrink-0 self-stretch rounded-lg border border-[#2134F1] bg-[rgba(255,255,255,0.01)] text-[#2134F1] text-center font-[Inter] text-base font-semibold leading-6 no-underline hover:underline hover:bg-white transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
                 )}
                     {showBtnModal && (
                     <Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#2134F1" backColor="#fffffff" borderColor="#2134F1" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} />
@@ -59,8 +59,8 @@ const hasContent = title || description;
         <section class={`w-full flex flex-col items-center p-6 rounded-2xl bg-cover bg-center min-h-[289px] my-8 ${hasContent ? 'justify-between' : ''}`} style={backgroundStyle}>
             {hasContent && (
             <div class="w-full max-w-7xl flex flex-col items-center justify-center text-left gap-4">
-                {title && <h3 class="text-[#262626] font-[Poppins] text-2xl font-semibold leading-8" style="font-feature-settings: 'liga' off, 'clig' off;">{title}</h3>}
-                {description && <p class="text-[#627384] font-[Inter] text-base font-normal leading-6" style="font-feature-settings: 'liga' off, 'clig' off;" set:html={description}></p>}
+                {title && <h3 class="text-[#262626] font-[Poppins] text-2xl font-semibold leading-8">{title}</h3>}
+                {description && <p class="text-[#627384] font-[Inter] text-base font-normal leading-6" set:html={description}></p>}
             </div>
             )}
             <div class={`w-full max-w-7xl flex flex-col items-center text-center gap-6 ${hasContent ? '' : 'my-auto'}`}>
@@ -92,7 +92,7 @@ const hasContent = title || description;
 
             <div class={`w-full max-w-7xl flex flex-col items-center justify-center text-center ${hasContent ? '' : 'mt-auto'}`}>
                 {showBtn && linkBtn && (
-                    <a href={linkBtn} target="_self" class="flex items-center justify-center h-12 gap-4 shrink-0 self-stretch rounded-lg border border-[#2134F1] bg-[rgba(255,255,255,0.01)] text-[#2134F1] text-center font-[Inter] text-base font-semibold leading-6 no-underline hover:underline transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
+                    <a href={linkBtn} target="_self" class="flex items-center justify-center w-fit mx-auto px-6 py-4 h-12 gap-4 shrink-0 self-stretch rounded-lg border border-[#2134F1] bg-[rgba(255,255,255,0.01)] text-[#2134F1] text-center font-[Inter] text-base font-semibold leading-6 no-underline hover:underline hover:bg-white transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
                 )}
                 {showBtnModal && (
                     <Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#2134F1" backColor="#ffffff" borderColor="#2134F1" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} />

package/src/components/Astro/Galeria_2026_Segorbe.astro

@@ -0,0 +1,57 @@
+---
+import { extractImageUrl } from '../../lib/functions.js';
+
+interface GaleriaItem {
+    image?: string;
+    alt?: string;
+}
+
+const {
+    columns = '3',
+    items = []
+}: { columns?: string; items?: GaleriaItem[] } = Astro.props;
+
+const lgColsClass = {
+    '2': 'lg:columns-2',
+    '3': 'lg:columns-3',
+    '4': 'lg:columns-4',
+}[columns] || 'lg:columns-3';
+
+const visibleItems = items.filter((i: GaleriaItem) => !!i.image);
+
+const escapeJson = (s = '') => String(s).replace(/<[^>]*>/g, '').replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/[\n\r\t]+/g, ' ');
+
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    "numberOfItems": ${visibleItems.length},
+    "itemListElement": [${visibleItems.map((item: GaleriaItem, i: number) => `{
+        "@type": "ListItem",
+        "position": ${i + 1},
+        "item": {
+            "@type": "ImageObject",
+            "contentUrl": "${escapeJson(extractImageUrl(item.image))}"${item.alt ? `,
+            "name": "${escapeJson(item.alt)}"` : ''}
+        }
+    }`).join(',')}]
+}
+</script>`;
+---
+
+<section class="w-full px-6 md:px-0 py-10">
+    <div class={`columns-1 md:columns-2 ${lgColsClass} gap-6`}>
+        {visibleItems.map((item: GaleriaItem) => (
+            <figure class="mb-6 break-inside-avoid">
+                <img
+                    src={extractImageUrl(item.image)}
+                    alt={item.alt || 'Imagen de la galería'}
+                    loading="lazy"
+                    class="w-full h-auto rounded-xl"
+                />
+            </figure>
+        ))}
+    </div>
+</section>
+
+<Fragment set:html={structuredData} />

package/src/generated/componentRegistry.ts

@@ -42,6 +42,7 @@ import * as Formulario_2025_Seul from '../carbins/Formulario_2025_Seul.ts';
 import * as Formulario_2025_Teruel from '../carbins/Formulario_2025_Teruel.ts';
 import * as Formulario_2026_Carabanchel from '../carbins/Formulario_2026_Carabanchel.ts';
 import * as Formulario_2026_Wichita from '../carbins/Formulario_2026_Wichita.ts';
+import * as Galeria_2026_Segorbe from '../carbins/Galeria_2026_Segorbe.ts';
 import * as GeometricShapeCard from '../carbins/GeometricShapeCard.ts';
 import * as HeaderCorporativo from '../carbins/HeaderCorporativo.ts';
 import * as Hero_2025_Benidorm from '../carbins/Hero_2025_Benidorm.ts';
@@ -128,6 +129,7 @@ export const components = [
   {component: Formulario_2025_Teruel},
   {component: Formulario_2026_Carabanchel},
   {component: Formulario_2026_Wichita},
+  {component: Galeria_2026_Segorbe},
   {component: GeometricShapeCard},
   {component: HeaderCorporativo},
   {component: Hero_2025_Benidorm},

package/src/index.ts

@@ -48,6 +48,7 @@ import Formulario_2025_Seul from './components/Astro/Formulario_2025_Seul.astro'
 import Formulario_2025_Teruel from './components/Astro/Formulario_2025_Teruel.astro';
 import Formulario_2026_Carabanchel from './components/Astro/Formulario_2026_Carabanchel.astro';
 import Formulario_2026_Wichita from './components/Astro/Formulario_2026_Wichita.astro';
+import Galeria_2026_Segorbe from './components/Astro/Galeria_2026_Segorbe.astro';
 import GeometricShape from './components/Astro/GeometricShape.astro';
 import GeometricShapeCard from './components/Astro/GeometricShapeCard.astro';
 import HeaderCorporativo from './components/Astro/HeaderCorporativo.astro';
@@ -94,7 +95,7 @@ import ReactButton from './components/React/ReactButton.jsx';
 // Exporta todos los componentes uno a uno para que puedan ser usados directamente.
 
 
-export { VueButton, Author_2025_Algarve, Button, CTA_2025_Formentera, Cabecera_2025_Barcelona, Cabecera_2025_Madrid, Cabecera_2026_Bilbao, Cabecera_2026_Madrid, Card_2025_Malta, Contenido_2025_Alcorcon, Contenido_2025_Cordoba, Contenido_2025_Granada, Contenido_2025_Malaga, Contenido_2025_Montevideo, Contenido_2026_Cabra, Contenido_2026_Denia, Contenido_2026_Dubai, Contenido_2026_Estocolmo, Contenido_2026_Jaen, Contenido_2026_Leon, Contenido_2026_Mallorca, Contenido_2026_Marruecos, Contenido_2026_Menorca, Contenido_2026_Michigan, Contenido_2026_Moraira, Contenido_2026_Mostoles, Contenido_2026_Orcasitas, Contenido_2026_Oslo, Contenido_2026_Quito, Contenido_2026_Seattle, Contenido_2026_Sevilla, Contenido_2026_Tokyo, Contenido_2026_Ubeda, Contenido_2026_Yakarta, CorpFooter, CorpHero, CorpNavigation, Enlace_2025_Venecia, FAQ_2025_Hiroshima, Footer_2025_Napoles, Formulario_2025_Nara, Formulario_2025_Seul, Formulario_2025_Teruel, Formulario_2026_Carabanchel, Formulario_2026_Wichita, GeometricShape, GeometricShapeCard, HeaderCorporativo, Hero_2025_Benidorm, Hero_2026_Benidorm, ImageTextSimple, Imagen_2025_Bogota, Imagen_2025_Fukushima, Imagen_2026_Algar, Indice_2025_Taiwan, Modal_2025_Sagunto, Paginacion_2025_Paris, RRSS_2025_Pisa, SEO_Head_Section, SEO_Schema_Page, Separador_2025_Reinosa, Separador_2025_Toledo, Share_2025_Florencia, SpectrumSeparator, Sumario_2025_Beijing, Tabla_2025_Fuenlabrada, Tabla_2026_Cadiz, Tag_2025_Bolonia, TestHijo, TestPadre, Test_2026_Gaza, TextBox, TextImageBackground, TextImageBlock, TextImageCard, TextImageHeader, Texto_2025_Kyoto, Texto_2026_Alicante, Texto_2026_Castellon, Tiempo_2025_Londres, Titulo_2025_Algeciras, Titulo_2025_Santorini, VideoAutoplay, Video_2025_Polop, Video_2025_Valencia, Video_2026_Andujar, ReactButton };
+export { VueButton, Author_2025_Algarve, Button, CTA_2025_Formentera, Cabecera_2025_Barcelona, Cabecera_2025_Madrid, Cabecera_2026_Bilbao, Cabecera_2026_Madrid, Card_2025_Malta, Contenido_2025_Alcorcon, Contenido_2025_Cordoba, Contenido_2025_Granada, Contenido_2025_Malaga, Contenido_2025_Montevideo, Contenido_2026_Cabra, Contenido_2026_Denia, Contenido_2026_Dubai, Contenido_2026_Estocolmo, Contenido_2026_Jaen, Contenido_2026_Leon, Contenido_2026_Mallorca, Contenido_2026_Marruecos, Contenido_2026_Menorca, Contenido_2026_Michigan, Contenido_2026_Moraira, Contenido_2026_Mostoles, Contenido_2026_Orcasitas, Contenido_2026_Oslo, Contenido_2026_Quito, Contenido_2026_Seattle, Contenido_2026_Sevilla, Contenido_2026_Tokyo, Contenido_2026_Ubeda, Contenido_2026_Yakarta, CorpFooter, CorpHero, CorpNavigation, Enlace_2025_Venecia, FAQ_2025_Hiroshima, Footer_2025_Napoles, Formulario_2025_Nara, Formulario_2025_Seul, Formulario_2025_Teruel, Formulario_2026_Carabanchel, Formulario_2026_Wichita, Galeria_2026_Segorbe, GeometricShape, GeometricShapeCard, HeaderCorporativo, Hero_2025_Benidorm, Hero_2026_Benidorm, ImageTextSimple, Imagen_2025_Bogota, Imagen_2025_Fukushima, Imagen_2026_Algar, Indice_2025_Taiwan, Modal_2025_Sagunto, Paginacion_2025_Paris, RRSS_2025_Pisa, SEO_Head_Section, SEO_Schema_Page, Separador_2025_Reinosa, Separador_2025_Toledo, Share_2025_Florencia, SpectrumSeparator, Sumario_2025_Beijing, Tabla_2025_Fuenlabrada, Tabla_2026_Cadiz, Tag_2025_Bolonia, TestHijo, TestPadre, Test_2026_Gaza, TextBox, TextImageBackground, TextImageBlock, TextImageCard, TextImageHeader, Texto_2025_Kyoto, Texto_2026_Alicante, Texto_2026_Castellon, Tiempo_2025_Londres, Titulo_2025_Algeciras, Titulo_2025_Santorini, VideoAutoplay, Video_2025_Polop, Video_2025_Valencia, Video_2026_Andujar, ReactButton };
 
 
 // Exporta la función listComponents para que sea usado en el Pagebuilder en Vue.
@@ -154,6 +155,7 @@ export const components = {
   Formulario_2025_Teruel: Formulario_2025_Teruel,
   Formulario_2026_Carabanchel: Formulario_2026_Carabanchel,
   Formulario_2026_Wichita: Formulario_2026_Wichita,
+  Galeria_2026_Segorbe: Galeria_2026_Segorbe,
   GeometricShape: GeometricShape,
   GeometricShapeCard: GeometricShapeCard,
   HeaderCorporativo: HeaderCorporativo,