📦 Instalación del Component

🌐 Instalación por CDN

La forma más rápida de empezar es el CDN de Limbo, que sirve los ficheros compilados del componente. Hay dos canales y cada uno habla con una API distinta; elige el que corresponda a tu clave y a tus scopes:

Para pasar de uno a otro sigue la guía de migración a la 5.0. Este es el snippet mínimo del canal legacy, con la versión fijada; el del canal v1 está en Requisitos de la versión 5.0.0:

<!-- Estilos del componente -->
<link rel="stylesheet" href="https://limbo.lefebvre.es/cdn/component-limbo/v4.8.10/limbo.css">

<!-- Componente (UMD con React incluido) -->
<script src="https://limbo.lefebvre.es/cdn/component-limbo/v4.8.10/limbo.min.js"></script>

limbo.min.js es un build UMD con React incluido: no necesitas cargar React aparte y expone el objeto global window.Limbo.

Ficheros servidos

limbo.min.css es un alias de limbo.css. También se sirven los source maps limbo.umd.js.map, limbo.min.js.map, limbo.es.map y limbo.cjs.map.

Versiones y caché

Los ficheros de cada canal siguen su patrón (/cdn/component-limbo/{version}/{file} en el legacy, /cdnv1/component-limbo/{version}/{file} en el v1). El valor de {version} puede ser:

• latest: la última versión del canal.
• El alias de major, v4 o 4 (legacy) y v5 o 5 (v1): la última versión de esa major.
• Una versión exacta, con o sin v: v4.8.10 o 4.8.10 en el legacy; v5.0.0 o 5.0.0 en el v1.

Una versión no publicada en ese canal responde 404: el v1 no sirve versiones 4.x ni el legacy versiones 5.x.

https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.min.js

La cabecera de caché depende de la versión pedida, en los dos canales:

Los ficheros se sirven con CORS (el origen de la petición se refleja en Access-Control-Allow-Origin), Cross-Origin-Resource-Policy: cross-origin y la cabecera X-CDN-Version, que indica la versión concreta a la que se ha resuelto la petición.

Versiones disponibles

Para consultar qué versiones hay publicadas, haz un GET a:

https://limbo.lefebvre.es/cdn/component-limbo/info

La respuesta es un JSON con estas claves de primer nivel:

• base_url: plantilla de la URL de los ficheros.
• versions: la versión que resuelve latest y las versiones disponibles.
• files: los ficheros JavaScript y CSS servidos.
• usage: ejemplos de uso básicos.

Alternativa: jsDelivr

El paquete también está publicado en npm, así que puedes cargarlo desde jsDelivr. Es una alternativa: el CDN de Limbo es el recomendado. Fija igualmente la versión.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/limbo-component@4.8.10/dist/limbo.css">
<script src="https://cdn.jsdelivr.net/npm/limbo-component@4.8.10/dist/limbo.min.js"></script>

📦 Instalación por NPM

Para proyectos con bundler (Vite, Webpack, etc.):

npm install limbo-component
# o
yarn add limbo-component
# o
pnpm add limbo-component

Esto instala la 4.x, la de la API legacy: limbo-component no recibirá la 5.x. Para la 5.x, sobre /api/v1, instala el paquete limbo-component-v5 (ver Requisitos de la versión 5.0.0).

Luego importa el componente y sus estilos en tu código:

import Limbo from 'limbo-component';
import 'limbo-component/css';

⚙️ Configuración Básica

Una vez instalado, esta página mínima configura el componente y lo monta en un contenedor:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://limbo.lefebvre.es/cdn/component-limbo/v4.8.10/limbo.css">
  </head>
  <body>
    <div id="limbo-app"></div>

    <script src="https://limbo.lefebvre.es/cdn/component-limbo/v4.8.10/limbo.min.js"></script>
    <script>
      Limbo.configure({
        publicKey: 'pk_tu_clave_publica',
        prod: true,
        authMode: 'session'
      });

      Limbo.create({
        container: '#limbo-app',
        mode: 'embed',   // 'embed', 'modal' o 'button'
        modeUI: 'full'   // 'full', 'gallery-only', 'upload-only', 'crop-only'
      });
    </script>
  </body>
</html>

Para producción se recomienda el modo jwt con tokenProvider, que evita exponer claves en el navegador. Lo tienes explicado en Configuración.

🔧 Integración con Frameworks

Con un framework usa el paquete npm (ESM). Llama a Limbo.configure una sola vez, fuera del componente; crea la instancia al montar y destrúyela al desmontar con instance.destroy().

React

import { useEffect, useRef } from 'react';
import Limbo from 'limbo-component';
import 'limbo-component/css';

Limbo.configure({
  publicKey: 'pk_tu_clave_publica',
  prod: true,
  authMode: 'session'
});

export function LimboGallery({ onSelect }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const instance = Limbo.create({
      container: containerRef.current,
      mode: 'embed',
      modeUI: 'full',
      callbacks: { onSelect }
    });

    return () => instance.destroy();
  }, [onSelect]);

  return <div ref={containerRef} />;
}

Vue 3

<template>
  <div ref="limboContainer"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import Limbo from 'limbo-component';
import 'limbo-component/css';

const emit = defineEmits(['select']);
const limboContainer = ref(null);
let instance = null;

onMounted(() => {
  instance = Limbo.create({
    container: limboContainer.value,
    mode: 'embed',
    modeUI: 'full',
    callbacks: { onSelect: (data) => emit('select', data) }
  });
});

onBeforeUnmount(() => instance?.destroy());
</script>

Antes, en el punto de entrada de la aplicación, llama una vez a Limbo.configure({ publicKey, prod, authMode }).

🧩 Formatos de distribución

📋 Requisitos

Requisitos de la versión 5.0.0

Desde la 5.0.0 el componente usa solo /api/v1. Limbo.configure() no cambia, pero actualizar exige tres cosas del lado del integrador:

• La pk_ de una API key. La clave pública del portal ya no vale en v1 (401 invalid_credentials). Con el modo session el componente reintenta una vez contra la legacy y avisa por consola; con un tokenProvider o un backend propio, cambia la petición a POST /api/v1/auth/token (ver la receta).
• Scopes en esa key. La legacy no exigía folder:* ni external:read; v1 sí. Sin el scope de una pestaña, esa pestaña recibe 403 Missing required scope: …. Un administrador los concede con limbo:grant-scope.
• Proxies firmados. Las miniaturas de portales externos, stock e IA ya no pasan por /api/external/proxy ni /api/atenea/proxy: el componente firma las URLs con POST /api/v1/proxy/sign y las pide a GET /api/v1/proxy, y los fetch van sin credenciales. No hay que configurar nada más que el scope.

Pide solo los de las pestañas que uses. Los 403 de scopes y de firma se explican en Migrar a v1.

Cómo cargar la 5.0.0

<link rel="stylesheet" href="https://limbo.lefebvre.es/cdnv1/component-limbo/v5.0.0/limbo.css">
<script src="https://limbo.lefebvre.es/cdnv1/component-limbo/v5.0.0/limbo.min.js"></script>

Con v5 en lugar de v5.0.0 recibes siempre la última 5.x (https://limbo.lefebvre.es/cdnv1/component-limbo/v5/limbo.min.js), con la caché de 5 minutos descrita en Versiones y caché; en producción fija la versión exacta. El catálogo del canal está en https://limbo.lefebvre.es/cdnv1/component-limbo/info.

npm install limbo-component-v5
# o, fijando el rango en package.json
"limbo-component-v5": "^5.0.0"

La 5.x vive en su propio paquete, limbo-component-v5: limbo-component se queda en la 4.x, así que un portal que aún use la API legacy no cambia de versión por actualizar sus dependencias. Los imports llevan el nombre nuevo (import Limbo from 'limbo-component-v5', limbo-component-v5/css, /umd, /min). En jsDelivr usa siempre la versión exacta (limbo-component-v5@5.0.0). Con ESM o CommonJS, el componente no empaqueta React, React DOM ni cropperjs: los dos primeros los pone tu aplicación y cropperjs lo instala npm como dependencia.

Para apuntar el componente a otra instancia de la API (un entorno de pruebas) pasa su URL absoluta, sin barra final, en Limbo.configure({ apiBaseUrl: 'https://…' }); manda sobre prod. El paso a paso de la actualización está en la guía de migración a la 5.0.

👉 Próximos Pasos