libreria-astro-lefebvre 0.0.56 → 0.0.57

package/package.json

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

package/src/components/Astro/Contenido_2025_Malaga.astro

@@ -1,5 +1,5 @@
 ---
-import { extractImageUrl } from '../../lib/functions.js';
+import { extractImageUrl, extractAllCrops } from '../../lib/functions.js';
 
 const {
     title,
@@ -19,7 +19,18 @@ const {
     alignItems = 'start',
     } = Astro.props;
 
-const imageUrl = extractImageUrl(image);
+// Extraer todos los crops definidos en el carbin (base, skyscraper)
+// Funciona igual con JSON de PageBuilder o con objeto simple { base: "url", skyscraper: "url" }
+const crops = extractAllCrops(image) as Record<string, string>;
+const imageBase = crops['base'] || crops['original'] || crops['default'] || '';
+const imageSkyscraper = crops['skyscraper'] || ''; // Disponible para uso en el template
+
+// También se podría usar getCropByName si se quiere lógica más compleja
+// const baseUrl = getCropByName(image, 'base');
+// const skyUrl = getCropByName(image, 'skyscraper', { fallback: baseUrl });
+
+// Fallback: si solo viene una URL directa, usar extractImageUrl
+const imageUrl = imageBase || extractImageUrl(image);
 ---
 
 <section class="w-full flex items-center justify-center">
@@ -96,8 +107,12 @@ const imageUrl = extractImageUrl(image);
                 )}
                 
                 <div class={`w-full lg:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-auto`}>
-                    <img src={image} alt={title} class="max-w-xl w-[75%] h-auto object-cover rounded-lg m-auto" loading="lazy" />
+                    <img src={imageUrl} alt={title} class="max-w-xl w-[75%] h-auto object-cover rounded-lg m-auto" loading="lazy" />
                 </div>
+                
+                {/* <div class={`w-full lg:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-square`}>
+                    <img src={imageSkyscraper} alt={title} class="w-[100%] h-[100%] object-cover rounded-lg" loading="lazy"/>
+                </div> */}
             </div>
         </article>
     ) : (

package/src/index.ts

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

package/src/lib/functions.js

@@ -115,28 +115,28 @@ export function extractImageUrl(value, options = {}) {
  */
 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,
@@ -146,6 +146,161 @@ export function parseImageData(value, options = {}) {
   }
 }
 
+// ============================================================================
+// 🎯 Funciones para múltiples recortes (Multi-crop support)
+// ============================================================================
+
+/**
+ * Extrae todos los recortes de una imagen en formato key-value
+ *
+ * Soporta dos formatos de entrada:
+ * 1. JSON de Limbo (desde PageBuilder):
+ *    {"original":{"url":"..."}, "images":[{"name":"base","url":"..."},{"name":"sky","url":"..."}]}
+ * 2. Objeto simple (uso estático sin PageBuilder):
+ *    { base: "https://...", skyscraper: "https://..." }
+ *
+ * @param {string|object} value - JSON de Limbo, URL directa, u objeto {cropName: url}
+ * @param {Object} options - { isProd: boolean, includeOriginal: boolean }
+ * @returns {Object} Objeto con crops: { base: "url", skyscraper: "url", original?: "url" }
+ *
+ * @example
+ * // Desde PageBuilder (JSON de Limbo)
+ * const crops = extractAllCrops(image);
+ * const baseUrl = crops.base;
+ * const skyUrl = crops.skyscraper;
+ *
+ * @example
+ * // Uso estático (objeto simple)
+ * <Componente image={{ base: "url1", skyscraper: "url2" }} />
+ * const crops = extractAllCrops(image); // Devuelve { base: "url1", skyscraper: "url2" }
+ */
+export function extractAllCrops(value, options = {}) {
+  const { isProd = false, includeOriginal = true } = options;
+
+  if (!value) return {};
+
+  // Caso 1: Ya es un objeto simple {key: url} - uso estático sin PageBuilder
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+    // Verificar si es un objeto simple (todas las propiedades son strings URL)
+    const keys = Object.keys(value);
+    const isSimpleObject = keys.length > 0 && keys.every(key =>
+      typeof value[key] === 'string' || value[key] === null || value[key] === undefined
+    );
+
+    if (isSimpleObject) {
+      // Resolver URLs relativas si es necesario
+      const result = {};
+      for (const key of keys) {
+        if (value[key]) {
+          result[key] = resolveUrl(value[key], isProd);
+        }
+      }
+      return result;
+    }
+  }
+
+  // Caso 2: Es un string - puede ser JSON de Limbo o URL directa
+  if (typeof value === 'string') {
+    const normalizedValue = decodeHtmlEntities(value);
+
+    try {
+      const data = JSON.parse(normalizedValue);
+      const result = {};
+
+      // Extraer todos los crops del array images
+      if (data.images && Array.isArray(data.images)) {
+        for (const img of data.images) {
+          if (img && img.name && isValidImageUrl(img.url)) {
+            result[img.name] = resolveUrl(img.url, isProd);
+          }
+        }
+      }
+
+      // Incluir original si se solicita
+      if (includeOriginal && data.original?.url && isValidImageUrl(data.original.url)) {
+        result.original = resolveUrl(data.original.url, isProd);
+      }
+
+      // Si no hay crops pero hay URL directa en el JSON
+      if (Object.keys(result).length === 0 && data.url && isValidImageUrl(data.url)) {
+        result.default = resolveUrl(data.url, isProd);
+      }
+
+      return result;
+
+    } catch {
+      // No es JSON válido - tratar como URL directa
+      if (isValidImageUrl(normalizedValue)) {
+        return { default: resolveUrl(normalizedValue, isProd) };
+      }
+    }
+  }
+
+  return {};
+}
+
+/**
+ * Crea el objeto de props de imagen para uso estático (sin PageBuilder)
+ *
+ * Útil cuando se usa un componente directamente desde la librería
+ * y se quiere pasar múltiples crops de forma estructurada.
+ *
+ * @param {Object} crops - Objeto con los crops: { base: "url", skyscraper: "url" }
+ * @param {string} originalUrl - URL de la imagen original (opcional)
+ * @returns {string} JSON string compatible con el formato de Limbo
+ *
+ * @example
+ * // En un archivo .astro
+ * import { createImageProps } from 'libreria-astro-lefebvre/lib/functions';
+ *
+ * <Componente
+ *   image={createImageProps({
+ *     base: "https://example.com/base.jpg",
+ *     skyscraper: "https://example.com/sky.jpg"
+ *   })}
+ * />
+ *
+ * // También se puede pasar el objeto directamente (más simple):
+ * <Componente image={{ base: "url1", skyscraper: "url2" }} />
+ */
+export function createImageProps(crops, originalUrl = null) {
+  if (!crops || typeof crops !== 'object') return '';
+
+  const images = Object.entries(crops).map(([name, url]) => ({
+    name,
+    url,
+    width: null,
+    height: null
+  }));
+
+  const result = {
+    original: originalUrl ? { url: originalUrl } : null,
+    images
+  };
+
+  return JSON.stringify(result);
+}
+
+/**
+ * Obtiene un crop específico por nombre, con fallback
+ *
+ * @param {string|object} value - JSON de Limbo u objeto simple
+ * @param {string} cropName - Nombre del crop a buscar
+ * @param {Object} options - { isProd: boolean, fallback: string }
+ * @returns {string} URL del crop o fallback
+ *
+ * @example
+ * const baseUrl = getCropByName(image, 'base');
+ * const skyUrl = getCropByName(image, 'skyscraper', { fallback: baseUrl });
+ */
+export function getCropByName(value, cropName, options = {}) {
+  const { isProd = false, fallback = '' } = options;
+
+  const allCrops = extractAllCrops(value, { isProd });
+
+  return allCrops[cropName] || allCrops.original || allCrops.default || fallback;
+}
+
 /**
  * Preprocesa campos de imagen para enviar a servidor de preview
  */

package/src/limbo/index.ts

@@ -12,5 +12,13 @@ export {
   type LimboInitOptions
 } from './init';
 
+// Exportar handler para API endpoint de token
+export {
+  createLimboTokenHandler,
+  type LimboTokenConfig,
+  type LimboTokenResponse,
+  LIMBO_ENV_VARS
+} from './tokenHandler';
+
 // El componente Astro se importa directamente:
 // import LimboProvider from 'libreria-astro-lefebvre/limbo/LimboProvider.astro';

package/src/limbo/init.ts

@@ -114,7 +114,6 @@ export function generateLimboInitScript(config: LimboConfig): string {
     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 {
@@ -126,7 +125,6 @@ export function generateLimboInitScript(config: LimboConfig): string {
         }
       }
     });
-    console.log('[Limbo] Rescan completado:', processed, 'inputs procesados de', inputs.length, 'encontrados');
     return processed;
   };
 
@@ -219,17 +217,13 @@ export function generateLimboInitScript(config: LimboConfig): string {
 
     // 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);
           }
@@ -244,7 +238,6 @@ export function generateLimboInitScript(config: LimboConfig): string {
         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);

package/src/limbo/tokenHandler.ts

@@ -0,0 +1,207 @@
+/**
+ * Limbo Token Handler
+ *
+ * Handler genérico para obtener tokens JWT de Limbo.
+ * Framework-agnostic: funciona en Astro, Next.js, Express, etc.
+ *
+ * La URL de la API de Limbo se determina automáticamente según `isProduction`:
+ * - Producción: https://limbo.lefebvre.es
+ * - Desarrollo: https://led-dev-limbo-dev.eu.els.local
+ * - Local: http://localhost:8000
+ *
+ * @example Astro
+ * ```ts
+ * // src/pages/api/limbo-token.ts
+ * import { createLimboTokenHandler } from 'libreria-astro-lefebvre/limbo';
+ *
+ * export const POST = createLimboTokenHandler({
+ *   publicKey: import.meta.env.PUBLIC_LIMBO_PUBLIC_KEY,
+ *   isProduction: import.meta.env.IS_PROD === 'TRUE'
+ * });
+ * ```
+ *
+ * @example Next.js App Router
+ * ```ts
+ * // app/api/limbo-token/route.ts
+ * import { createLimboTokenHandler } from 'libreria-astro-lefebvre/limbo';
+ *
+ * export const POST = createLimboTokenHandler({
+ *   publicKey: process.env.PUBLIC_LIMBO_PUBLIC_KEY!,
+ *   isProduction: process.env.NODE_ENV === 'production'
+ * });
+ * ```
+ */
+
+/** URLs por defecto de la API de Limbo */
+const LIMBO_API_URLS = {
+  production: 'https://limbo.lefebvre.es',
+  development: 'https://led-dev-limbo-dev.eu.els.local',
+} as const;
+
+export interface LimboTokenConfig {
+  /** Public Key del portal de Limbo (pk_xxx) */
+  publicKey: string;
+  /** ¿Usar API de producción? (default: false = desarrollo) */
+  isProduction?: boolean;
+  /** URL base de la API de Limbo (opcional, se determina por isProduction si no se especifica) */
+  limboApiUrl?: string;
+  /** Permitir override de publicKey desde el body de la request (default: true) */
+  allowPublicKeyOverride?: boolean;
+}
+
+export interface LimboTokenResponse {
+  success: boolean;
+  token?: string;
+  expires_in?: number;
+  error?: string;
+  details?: string;
+  hint?: string;
+}
+
+/**
+ * Crea un handler para obtener tokens JWT de Limbo.
+ *
+ * Este handler actúa como proxy para evitar problemas de CORS,
+ * haciendo la petición a Limbo desde el servidor.
+ *
+ * @param config - Configuración con publicKey e isProduction
+ * @returns Handler compatible con Astro, Next.js, y otros frameworks
+ */
+export function createLimboTokenHandler(config: LimboTokenConfig) {
+  const {
+    publicKey: defaultPublicKey,
+    isProduction = false,
+    limboApiUrl: customApiUrl,
+    allowPublicKeyOverride = true,
+  } = config;
+
+  // Determinar URL de la API (custom > isProduction > desarrollo)
+  const limboApiUrl = customApiUrl || (isProduction ? LIMBO_API_URLS.production : LIMBO_API_URLS.development);
+
+  // Validar configuración al crear el handler
+  if (!defaultPublicKey) {
+    console.error('[Limbo Token Handler] PUBLIC_LIMBO_PUBLIC_KEY no está configurada');
+  }
+
+  console.log(`[Limbo Token Handler] Configurado para ${isProduction ? 'PRODUCCIÓN' : 'DESARROLLO'}: ${limboApiUrl}`);
+
+  /**
+   * Handler que procesa la petición de token
+   */
+  return async function handler({ request }: { request: Request }): Promise<Response> {
+    try {
+      // Determinar qué publicKey usar
+      let publicKey = defaultPublicKey;
+
+      // Permitir override desde el body si está habilitado
+      if (allowPublicKeyOverride) {
+        try {
+          const body = await request.json();
+          if (body.public_key) {
+            publicKey = body.public_key;
+          }
+        } catch {
+          // Si no hay body válido, usar la del entorno
+        }
+      }
+
+      // Validar que tenemos publicKey
+      if (!publicKey) {
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: 'PUBLIC_LIMBO_PUBLIC_KEY no configurada',
+          } satisfies LimboTokenResponse),
+          {
+            status: 400,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+      }
+
+      // Construir URL del endpoint de token
+      const tokenUrl = `${limboApiUrl}/auth/token`;
+      console.log('[Limbo Proxy] Requesting token from:', tokenUrl);
+      console.log('[Limbo Proxy] Using public_key:', publicKey.substring(0, 10) + '...');
+
+      // Hacer petición a Limbo
+      const response = await fetch(tokenUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          public_key: publicKey,
+        }),
+      });
+
+      // Manejar errores de la API
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('[Limbo Proxy] Error response:', response.status, errorText);
+
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: `API error: ${response.status}`,
+            details: errorText,
+          } satisfies LimboTokenResponse),
+          {
+            status: response.status,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+      }
+
+      // Respuesta exitosa
+      const data = await response.json();
+      console.log('[Limbo Proxy] Token obtained successfully');
+
+      return new Response(JSON.stringify(data), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    } catch (error) {
+      console.error('[Limbo Proxy] Error completo:', error);
+
+      // Mensaje descriptivo para debug
+      let errorMsg = 'Unknown error';
+      if (error instanceof Error) {
+        errorMsg = error.message;
+        if (error.cause) {
+          errorMsg += ` (cause: ${JSON.stringify(error.cause)})`;
+        }
+      }
+
+      return new Response(
+        JSON.stringify({
+          success: false,
+          error: errorMsg,
+          hint: 'Verifica que la API de Limbo sea accesible desde el servidor',
+        } satisfies LimboTokenResponse),
+        {
+          status: 500,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+    }
+  };
+}
+
+/**
+ * URLs por defecto de la API de Limbo (exportadas para referencia).
+ */
+export { LIMBO_API_URLS };
+
+/**
+ * Helper para crear configuración desde variables de entorno comunes.
+ * Útil para documentación y ejemplos.
+ */
+export const LIMBO_ENV_VARS = {
+  /** Variable de entorno para la Public Key (con prefijo PUBLIC_ para cliente) */
+  PUBLIC_KEY: 'PUBLIC_LIMBO_PUBLIC_KEY',
+  /** Variable de entorno para indicar si es producción */
+  IS_PROD: 'IS_PROD',
+} as const;
+
+export default createLimboTokenHandler;