⚙️ Configuración del Component

Limbo.configure({
    publicKey: 'pk_tu_clave_publica',
    prod: true,
    authMode: 'jwt',
    tokenProvider: async () => {
        const res = await fetch('/api/limbo-token');
        return await res.json();   // string o { token, expires_in }
    }
});

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

// Más tarde, con un token nuevo
Limbo.setToken(nuevoToken);

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

Limbo.configure({
    publicKey: 'pk_tu_clave_publica',
    prod: true,
    authMode: 'jwt',
    tokenProvider: async () => (await fetch('/api/limbo-token')).json(),
    callbacks: {
        onError: (error) => console.error('Limbo:', error)
    }
});

const instance = Limbo.create({
    // Contenedor (requerido en modo embed)
    container: '#limbo-gallery',          // Selector CSS o elemento DOM

    // Modo de renderizado
    mode: 'embed',                        // 'embed' | 'modal' | 'button'

    // Modo funcional
    modeUI: 'full',                       // 'full' | 'gallery-only' | 'upload-only' | 'crop-only' | 'ia-only'

    // Pestañas visibles
    features: ['gallery', 'upload', 'cropper'],

    // Validación de ficheros
    validation: {
        accept: null,                     // 'image/*', '.pdf', 'image/*,.pdf'... (null = todo)
        maxSize: '10MB'                   // Tamaño máximo por fichero
    },

    // Galería
    gallery: {
        filters: {
            showNameFilter: true,
            showDateFilter: true,
            showTypeFilter: false,
            showUploadedByFilter: false
        },
        loading: { showPlaceholders: true, placeholderCount: 10 },
        pagination: { itemsPerPage: 20 }
    },

    // Carpetas
    folders: {
        showFolderFilter: true,           // Filtro de carpeta en la galería
        showFolderSelector: true,         // Selector de carpeta al subir
        showFolderInfo: true,             // Etiqueta de carpeta en cada tarjeta
        allowMoveFolder: true,            // Mover ficheros entre carpetas
        allowCreateFolder: false,         // Crear carpetas nuevas
        include: [],                      // Lista blanca de slugs de carpeta
        exclude: [],                      // Lista negra de slugs de carpeta
        defaultFolder: null               // Carpeta por defecto al subir
    },

    // Acciones permitidas
    allowedActions: {
        select: true, download: true, copy: true,
        delete: true, crop: true, variants: true
    },

    // Recortador
    cropper: {
        mandatoryCrops: [],               // Ver la receta de recortes obligatorios
        allowCustomCrops: true,
        maxCrops: null,
        quality: 0.9,
        format: 'webp'                    // 'webp' | 'jpg' | 'png'
    },

    // Modal (solo con mode: 'modal')
    modal: {
        size: 'fullscreen',               // 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen'
        title: 'Limbo - Gestor de Archivos',
        closeOnEscape: true,
        closeOnBackdrop: true
    },

    // Interfaz
    ui: {
        theme: 'light',                   // 'light' | 'dark'
        language: 'es',
        compactMode: false
    },

    // Callbacks
    callbacks: {
        onSelect: (data) => {},           // Selección desde la galería
        onUpload: (data) => {},           // Fichero subido
        onCropsSaved: (data) => {},       // Recortes guardados
        onCropperComplete: (data) => {},  // Cropper standalone completado
        onCropperCancelled: () => {},     // Cropper cancelado
        onCropperError: (error) => {},    // Error en el cropper
        onDelete: (assetId) => {},        // Fichero eliminado
        onClose: () => {},                // Modal cerrado
        onError: (error) => {}            // Error general
    }
});

const instance = Limbo.create({ container: '#limbo', mode: 'modal' });

instance.open();      // Abrir el modal
instance.close();     // Cerrar el modal
instance.mount();     // Montar el componente (modo embed)
instance.unmount();   // Desmontarlo
instance.destroy();   // Destruir la instancia y liberar recursos

Limbo.getInstances(); // Todas las instancias activas
Limbo.destroy();      // Destruir todas las instancias y los AutoInputs

Limbo.configureAutoInputs({
    // Qué inputs se activan (usa uno u otro)
    dataset: 'data-limbo-input-file',    // Por defecto: inputs con ese atributo
    // selector: '.js-limbo',            // Alternativa: selector CSS directo

    // Valor que se escribe en el input
    return: 'url',                       // 'url' | 'json' | 'assetId' | 'base64' | 'object' | 'fileName'

    // Modo y UI
    mode: 'modal',
    modeUI: 'full',
    modalSize: 'fullscreen',

    // Botón generado
    buttonText: 'Seleccionar archivo',
    buttonStyle: 'primary',              // 'primary' | 'secondary' | 'outline' | 'ghost'
    buttonClass: 'limbo-auto-button',

    // Comportamiento
    showPreview: true,
    autoAssign: true                     // Escribir el valor en el input automáticamente
});

<!-- Solo imágenes, devuelve la URL -->
<input type="hidden" name="avatar" data-limbo-input-file
    data-accept="image/*" data-returntype="url">

<!-- Solo galería, devuelve el ID del asset -->
<input type="hidden" name="imagen_existente" data-limbo-input-file
    data-modeui="gallery-only" data-returntype="assetId">

<!-- Solo PDF, con texto de botón propio -->
<input type="hidden" name="contrato" data-limbo-input-file
    data-accept=".pdf" data-limbo-button-text="Seleccionar PDF">

Limbo.rescan();                                              // Todo el documento
Limbo.rescan(document.getElementById('formulario-dinamico')); // Solo un contenedor
Limbo.scanAndActivate('.js-limbo-nuevo');                    // Con un selector propio

Limbo.setTheme({
    primary: '#2563eb',
    secondary: '#64748b',
    background: '#ffffff',
    surface: '#f8fafc',
    text: '#1e293b',
    border: '#e2e8f0',
    borderRadius: '8px'
});

:root {
    --lb-color-primary: #2563eb;
    --lb-color-secondary: #64748b;
    --lb-color-background: #ffffff;
    --lb-color-surface: #f8fafc;
    --lb-color-text: #1e293b;
    --lb-color-border: #e2e8f0;
    --lb-border-radius: 8px;
}