lf-pagebuilder-vue 0.0.68 → 0.0.70

package/README.md

@@ -1,537 +1,529 @@
-# lf-pagebuilder-vue
-
-Editor visual para construir páginas HTML usando los componentes de `libreria-astro-lefebvre`.
-
----
-
-## ⚡ Referencia rápida — Todas las opciones
-
-### Modo 1 — Componente Vue
-
-```bash
-npm install lf-pagebuilder-vue
-```
-
-```vue
-<template>
-  <Pagebuilder
-    :isProduction="false"
-    :debugMode="false"
-    :submitForm="false"
-    inputId="mi-input-hidden"
-    :excludeComponentTypes="['SEO', 'Footer']"
-    :visibleSections="['Header', 'Body', 'Footer']"
-    allowRenderMode="open"
-    limboToken="eyJ..."
-    client:only="vue"
-  />
-</template>
-
-<script setup>
-import { Pagebuilder } from 'lf-pagebuilder-vue';
-import 'lf-pagebuilder-vue/styles';
-</script>
-```
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `isProduction` | `boolean` | `false` | `true` = API producción · `false` = API desarrollo |
-| `debugMode` | `boolean` | `false` | Muestra panel de import/export JSON y botón de carga desde localStorage |
-| `submitForm` | `boolean` | `false` | Al guardar, busca el `<form>` padre y hace `.submit()` automáticamente |
-| `inputId` | `string \| null` | `null` | ID del `<input hidden>` donde se vuelca el JSON de configuración al guardar |
-| `excludeComponentTypes` | `string[]` | `[]` | Categorías de componentes que NO aparecerán en el selector. "Repetidor" siempre se excluye. |
-| `visibleSections` | `string[]` | — | Secciones visibles. Si no se indica, se muestran todas. Valores posibles: `Header`, `Body`, `Footer`, `Sidebar` |
-| `allowRenderMode` | `'open' \| 'fullpage' \| 'onlybody'` | `'open'` | Controla el modo de renderizado. `open` = el usuario elige · `fullpage` = forzado página completa · `onlybody` = forzado solo body |
-| `limboToken` | `string` | — | Token JWT para el gestor de imágenes Limbo. Obtenerlo server-side con `fetchLimboToken()` |
-
-> **Categorías disponibles para `excludeComponentTypes`:**
-> `Call to Action`, `Contenido`, `Separador`, `Texto`, `Cabecera`, `Footer`, `Imagen`, `Repetidor`, `Formulario`, `Título`, `SEO`
-
----
-
-### Modo 2 — Script IIFE (Symfony / Twig / cualquier backend)
-
-```html
-<link rel="stylesheet" href="/build/lf-pagebuilder-iife.css">
-<script src="/build/lf-pagebuilder-iife.iife.js"></script>
-
-<input
-  type="hidden"
-  class="js-lf-pagebuilder-vue-input"
-  name="page_config"
-  id="mi-input"
-  data-is-production="false"
-  data-debug-mode="false"
-  data-submit-form="false"
-  data-exclude-component-types="SEO,Footer,Cabecera"
-  data-visible-sections="Header,Body,Footer"
-  data-allow-render-mode="open"
-/>
-```
-
-| Atributo `data-*` | Valores | Default | Descripción |
-|-------------------|---------|---------|-------------|
-| `data-is-production` | `"true"` \| `"false"` | `"false"` | Entorno de la API de renderizado |
-| `data-debug-mode` | `"true"` \| `"false"` | `"false"` | Muestra panel de import/export JSON y botón de carga desde localStorage |
-| `data-submit-form` | `"true"` \| `"false"` | `"false"` | Al guardar, busca el `<form>` padre y hace `.submit()` automáticamente |
-| `data-exclude-component-types` | `string` (separado por comas) | — | Categorías de componentes a excluir. Ej: `"SEO,Footer,Cabecera"` |
-| `data-visible-sections` | `string` (separado por comas) | — | Secciones visibles. Si no se indica, se muestran todas. Ej: `"Header,Body"` |
-| `data-allow-render-mode` | `"open"` \| `"fullpage"` \| `"onlybody"` | `"open"` | Controla el modo de renderizado. `open` = el usuario elige · `fullpage` = forzado página completa · `onlybody` = forzado solo body |
-
-> El `id` del input se usa como clave de localStorage y como referencia interna. Si no tiene `id`, se genera uno automáticamente.
-
----
-
-## Instalación
-
-```bash
-npm i lf-pagebuilder-vue
-```
-
-Luego en tu `package.json`, cambia la versión a `latest` para tener siempre la última:
-
-```json
-{
-  "dependencies": {
-    "lf-pagebuilder-vue": "latest"
-  }
-}
-```
-
-## ¿Qué es?
-
-El Pagebuilder permite al usuario arrastrar y configurar componentes de la librería de componentes Astro de Lefebvre para diseñar páginas de forma visual. 
-
-**El Pagebuilder NO renderiza la página final.** Genera un JSON de configuración que se envía a una API externa renderizadora, que es la encargada de generar el HTML final.
-
-## Formas de uso
-
-### 1. Como script IIFE (Symfony u otros backends)
-
-En la carpeta `dist-symfony/` están los archivos compilados:
-- `lf-pagebuilder-iife.iife.js`
-- `lf-pagebuilder-iife.css`
-
-**Instalación:**
-
-Copiar estos archivos a la carpeta pública del proyecto. En Symfony, puedes configurar el build para que los copie automáticamente a `public/build/` o copiarlos manualmente.
-
-**Uso:**
-
-```html
-<link rel="stylesheet" href="/build/lf-pagebuilder-iife.css">
-<script src="/build/lf-pagebuilder-iife.iife.js"></script>
-
-<!-- El Pagebuilder se monta automáticamente en elementos con el selector: -->
-<div class="XXXXXXXX" data-is-production="false"></div>
-```
-
-El atributo `data-is-production` indica el entorno:
-- `"true"` → Usa API de producción (`https://render-api.lefebvre.es`)
-- `"false"` → Usa API de desarrollo (`https://led-dev-astro-render-api-dev.eu.els.local`)
-
-#### Data attributes disponibles
-
-Se pueden pasar opciones de configuración al Pagebuilder mediante atributos `data-*` en el input:
-
-| Atributo | Tipo | Default | Descripción |
-|----------|------|---------|-------------|
-| `data-is-production` | `"true"` \| `"false"` | `"false"` | Entorno de la API de renderizado |
-| `data-debug-mode` | `"true"` \| `"false"` | `"false"` | Activa el modo debug |
-| `data-submit-form` | `"true"` \| `"false"` | `"false"` | Envía el formulario automáticamente |
-| `data-exclude-component-types` | `string` | - | Categorías de componentes a excluir, separadas por coma |
-
-**Ejemplo completo:**
-
-```html
-<input 
-  type="hidden" 
-  class="js-lf-pagebuilder-vue-input" 
-  name="page_config"
-  data-is-production="true"
-  data-debug-mode="false"
-  data-submit-form="true"
-  data-exclude-component-types="SEO, Footer, Cabecera"
-/>
-```
-
-> **Nota sobre `data-exclude-component-types`:** La categoría "Repetidor" siempre se excluye automáticamente. Las categorías adicionales que pases se suman a esta exclusión. Las categorías disponibles son: `Call to Action`, `Contenido`, `Separador`, `Texto`, `Cabecera`, `Footer`, `Imagen`, `Repetidor`, `Formulario`, `Título`, `SEO`.
-
----
-
-### 2. Como componente Vue
-
-```bash
-npm install lf-pagebuilder-vue
-```
-
-```vue
-<template>
-  <Pagebuilder :isProduction="false" />
-</template>
-
-<script setup>
-import { Pagebuilder } from 'lf-pagebuilder-vue';
-</script>
-```
-
-**Props:**
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `limboToken` | `string` | - | Token JWT de Limbo, obtenido server-side con `fetchLimboToken()` |
-| `isProduction` | `boolean` | `false` | `true` = API producción, `false` = API desarrollo |
-| `debugMode` | `boolean` | `false` | Activa el modo debug |
-| `submitForm` | `boolean` | `false` | Envía el formulario automáticamente |
-| `inputId` | `string \| null` | `null` | ID del input hidden donde guardar la configuración |
-| `excludeComponentTypes` | `string[]` | `[]` | Categorías de componentes a excluir (además de "Repetidor" que siempre se excluye) |
-
-**Ejemplo con exclusión de componentes:**
-
-```vue
-<template>
-  <Pagebuilder 
-    :isProduction="false"
-    :excludeComponentTypes="['SEO', 'Footer', 'Cabecera']"
-  />
-</template>
-
-<script setup>
-import { Pagebuilder } from 'lf-pagebuilder-vue';
-</script>
-```
-
----
-
-## Instalación y dependencias
-
-### Dependencias requeridas en el proyecto padre
-
-El proyecto que use este Pagebuilder solo necesita instalar `lf-pagebuilder-vue`. La librería de componentes (`libreria-astro-lefebvre`) se instala automáticamente como dependencia transitiva:
-
-```bash
-npm install lf-pagebuilder-vue@latest vue@^3.3.0 vuedraggable@^4.1.0 @vueup/vue-quill@^1.2.0
-```
-
-| Dependencia | Tipo | Descripción |
-|-------------|------|-------------|
-| `lf-pagebuilder-vue` | directa | Page Builder (incluye `libreria-astro-lefebvre` como dep) |
-| `vue` | peerDep | Framework Vue 3 |
-| `vuedraggable` | peerDep | Drag & drop para Vue 3 |
-| `@vueup/vue-quill` | peerDep | Editor de texto enriquecido |
-
-### Configuración en proyectos Astro
-
-El proyecto debe tener las integraciones de Vue y Tailwind:
-
-```bash
-npm install @astrojs/vue tailwindcss @tailwindcss/vite
-```
-
-En `astro.config.mjs`:
-
-```js
-import { defineConfig } from 'astro/config';
-import vue from '@astrojs/vue';
-import tailwindcss from '@tailwindcss/vite';
-
-export default defineConfig({
-  integrations: [vue()],
-
-  vite: {
-    plugins: [tailwindcss()],
-    ssr: {
-      noExternal: ['libreria-astro-lefebvre', 'lf-pagebuilder-vue'],
-    },
-  },
-});
-```
-
-### Integración con Limbo (gestión de imágenes)
-
-Si se quiere usar el sistema de imágenes Limbo desde el Pagebuilder:
-
-**1. Variables de entorno** (`.env`):
-
-```env
-PUBLIC_LIMBO_PUBLIC_KEY=pk_tu_public_key
-IS_PROD=FALSE
-```
-
-**2. Obtener token server-side y pasarlo al componente:**
-
-```astro
----
-import { Pagebuilder } from 'lf-pagebuilder-vue';
-import { fetchLimboToken } from 'lf-pagebuilder-vue/limbo';
-
-let limboToken = '';
-try {
-  const result = await fetchLimboToken({
-    publicKey: import.meta.env.PUBLIC_LIMBO_PUBLIC_KEY || '',
-    isProduction: import.meta.env.IS_PROD === 'TRUE'
-  });
-  limboToken = result.token;
-} catch (e) {
-  console.error('[Pagebuilder] Error obteniendo token de Limbo:', e);
-}
----
-
-<Pagebuilder
-  limboToken={limboToken}
-  isProduction={import.meta.env.IS_PROD === 'TRUE'}
-  inputId="mi-input"
-  client:only="vue"
-/>
-```
-
-El token se obtiene en el frontmatter (server-side), evitando exponer la Public Key al cliente. La URL de la API de Limbo se determina automáticamente según `isProduction`. Los assets de `limbo-component` se cargan internamente desde el paquete npm (no se usa CDN externo).
-
-Para más detalles, consulta [README_LIMBO.md](README_LIMBO.md).
-
----
-
-## Build
-
-El proyecto tiene dos builds diferentes:
-
-### Build estándar (librería npm)
-
-```bash
-npm run build
-```
-
-Genera en `dist/`:
-- `index.js` - ES Module
-- `index.cjs` - CommonJS
-- `index.d.ts` - Tipos TypeScript
-- `styles.css` - Estilos
-
-Este es el build que se publica en npm.
-
-### Build Symfony (IIFE)
-
-```bash
-npm run build:symfony
-```
-
-Genera en `dist-symfony/`:
-- `lf-pagebuilder-iife.iife.js` - Script autocontenido
-- `lf-pagebuilder-iife.css` - Estilos
-
-Este build incluye Vue y todas las dependencias empaquetadas. Se puede usar directamente con `<script>` sin necesidad de bundler.
-
-### Build completo
-
-```bash
-npm run build:all
-```
-
-Ejecuta ambos builds.
-
----
-
-## ⚠️ Desarrollo local
-
-> **IMPORTANTE**: Lee esta sección completa antes de trabajar con este proyecto localmente.
-
-### El problema del `package.json`
-
-Este proyecto tiene **dos configuraciones de `package.json`** porque durante el desarrollo local NO queremos compilar constantemente:
-
-| Archivo | Apunta a | Uso |
-|---------|----------|-----|
-| `package.dev.json` | `./src/` (código fuente) | Desarrollo local |
-| `package.prod.json` | `./dist/` (compilado) | Publicar en npm |
-
-**Durante el desarrollo**, el `package.json` debe apuntar a los archivos fuente para que los cambios se reflejen inmediatamente sin hacer build.
-
-**Para publicar en npm**, debe apuntar a los archivos compilados.
-
-#### Cambiar entre modos
-
-Puedes copiar el archivo o copiar y pegar el contenido manualmente:
-
-```bash
-# Para DESARROLLO: copiar configuración de desarrollo
-cp package.dev.json package.json
-
-# Para PRODUCCIÓN/PUBLICAR: copiar configuración de producción
-cp package.prod.json package.json
-npm run build
-npm publish
-```
-
-> ⚠️ **NUNCA publiques con la configuración de desarrollo.** El paquete no funcionará porque `./src/` no se incluye en el paquete publicado.
-
-#### ⚠️ MUY IMPORTANTE: Mantener sincronizados los 3 archivos
-
-Los archivos `package.json`, `package.dev.json` y `package.prod.json` deben estar sincronizados:
-
-- **Nueva dependencia**: Si añades una dependencia, añádela también en `package.dev.json` y `package.prod.json`
-- **Cambio de versión**: Cuando subas la versión del paquete, actualízala en los 3 archivos
-- **Cualquier otro cambio**: Scripts, keywords, etc. deben reflejarse en los 3
-
-```bash
-# Ejemplo: después de añadir una dependencia
-npm install nueva-dependencia
-
-# Ahora editar manualmente package.dev.json y package.prod.json
-# para añadir "nueva-dependencia" en las mismas secciones
-```
-
----
-
-### Trabajar con `npm link`
-
-Para probar cambios localmente en otro proyecto sin publicar:
-
-#### Paso 1: Crear el enlace en esta librería
-
-```bash
-cd /ruta/a/lf-pagebuilder-vue
-npm link
-```
-
-#### Paso 2: Usar el enlace en tu proyecto
-
-```bash
-cd /ruta/a/tu-proyecto
-npm link lf-pagebuilder-vue
-```
-
----
-
-### ⚠️ CRÍTICO: Múltiples librerías con `npm link`
-
-**Este proyecto depende de `libreria-astro-lefebvre`.** Si necesitas trabajar con ambas librerías localmente (muy común), hay una trampa importante:
-
-```bash
-# ❌ INCORRECTO - El segundo comando ROMPE el primero
-npm link lf-pagebuilder-vue
-npm link libreria-astro-lefebvre
-
-# ✅ CORRECTO - Linkear TODAS las librerías en UN SOLO comando
-npm link lf-pagebuilder-vue libreria-astro-lefebvre
-```
-
-#### Flujo completo para trabajar con ambas librerías
-
-```bash
-# 1. En lf-pagebuilder-vue
-cd /ruta/a/lf-pagebuilder-vue
-cp package.dev.json package.json  # Modo desarrollo
-npm link
-
-# 2. En libreria-astro-lefebvre
-cd /ruta/a/libreria-astro-lefebvre
-npm link
-
-# 3. En tu proyecto consumidor - AMBAS EN UN SOLO COMANDO
-cd /ruta/a/tu-proyecto
-npm link lf-pagebuilder-vue libreria-astro-lefebvre
-```
-
-#### Deshacer los enlaces
-
-```bash
-cd /ruta/a/tu-proyecto
-npm unlink lf-pagebuilder-vue libreria-astro-lefebvre
-npm install
-```
-
-#### Si algo no funciona
-
-```bash
-# Nuclear option: borrar todo y reinstalar
-cd /ruta/a/tu-proyecto
-rm -rf node_modules package-lock.json
-npm install
-npm link lf-pagebuilder-vue libreria-astro-lefebvre
-```
-
----
-
-### Watch mode
-
-Para que los cambios se reflejen automáticamente mientras desarrollas:
-
-```bash
-npm run dev
-```
-
-Esto ejecuta `vite build --watch` y recompila automáticamente cuando hay cambios.
-
-> **Nota**: Si usas `package.dev.json` (apuntando a `./src/`), no necesitas watch mode porque los cambios en el código fuente se reflejan directamente.
-
----
-
-### 📘 Nota para los no familiarizados con npm
-
-Este proyecto tiene **dos lugares separados**:
-
-#### 1. GitHub (código fuente)
-
-```
-https://github.com/Lefebvre-El-Derecho-SA/lf-pagebuilder-vue
-```
-
-Aquí es donde se **edita el código**. Los cambios que hagas aquí NO se reflejan automáticamente en los proyectos que usan el paquete.
-
-#### 2. npm (paquete distribuido)
-
-```
-https://www.npmjs.com/package/lf-pagebuilder-vue
-```
-
-Aquí es donde las webs **descargan el paquete** cuando hacen `npm install`. Esta versión va **separada de GitHub**.
-
-#### ¿Cómo actualizar el paquete en npm?
-
-Para que los cambios en GitHub lleguen a npm, hay que **publicar una nueva versión**:
-
-1. **Subir la versión** en `package.json` (y en `package.dev.json` y `package.prod.json`)
-   
-   > ⚠️ Si no subes la versión, npm rechazará la publicación.
-
-2. **Asegurarte de usar la configuración de producción**:
-   ```bash
-   cp package.prod.json package.json
-   ```
-
-3. **Compilar y publicar**:
-   ```bash
-   npm run build
-   npm publish --access public
-   ```
-
-#### Configurar acceso a npm (primera vez)
-
-Para poder publicar, necesitas pertenecer a la organización de npm:
-
-1. **Solicitar acceso** al equipo `desarrollowebteamlef` en:
-   ```
-   https://www.npmjs.com/settings/desarrollowebteamlef/packages
-   ```
-
-2. **Crear un token de acceso** en npm:
-   - Ve a tu perfil de npm → Access Tokens → Generate New Token
-   - Selecciona "Bypass 2FA" (si aplica)
-   - Pon expiración de 90 días
-   - Copia el token generado
-
-3. **Configurar el token** en tu máquina:
-   
-   Edita (o crea) el archivo `~/.npmrc`:
-   ```bash
-   # Linux/Mac
-   nano ~/.npmrc
-   
-   # Añadir esta línea con tu token:
-   //registry.npmjs.org/:_authToken=TU_TOKEN_AQUI
-   ```
-
-4. **Ya puedes publicar**:
-   ```bash
-   npm publish --access public
-   ```
+# lf-pagebuilder-vue
+
+Editor visual para construir páginas HTML usando los componentes de `libreria-astro-lefebvre`.
+
+---
+
+## ⚡ Referencia rápida — Todas las opciones
+
+### Modo 1 — Componente Vue
+
+```bash
+npm install lf-pagebuilder-vue
+```
+
+```vue
+<template>
+  <Pagebuilder
+    :isProduction="false"
+    :debugMode="false"
+    :submitForm="false"
+    inputId="mi-input-hidden"
+    :excludeComponentTypes="['SEO', 'Footer']"
+    :excludeComponentTags="['boton', 'destacado']"
+    :includeOnlyComponentTags="['articulo']"
+    :visibleSections="['Header', 'Body', 'Footer']"
+    allowRenderMode="open"
+    limboToken="eyJ..."
+    ateneaToken="eyJ..."
+    :ledithorAiTools="['improve', 'improve-stream']"
+    client:only="vue"
+  />
+</template>
+
+<script setup>
+import { Pagebuilder } from 'lf-pagebuilder-vue';
+import 'lf-pagebuilder-vue/styles';
+</script>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `isProduction` | `boolean` | `false` | `true` = API producción · `false` = API desarrollo |
+| `debugMode` | `boolean` | `false` | Muestra panel de import/export JSON y botón de carga desde localStorage |
+| `submitForm` | `boolean` | `false` | Al guardar, busca el `<form>` padre y hace `.submit()` automáticamente |
+| `inputId` | `string \| null` | `null` | ID del `<input hidden>` donde se vuelca el JSON al guardar y del que se lee el estado inicial |
+| `excludeComponentTypes` | `string[]` | `[]` | Categorías de componentes que NO aparecerán en el selector. "Repetidor" siempre se excluye. |
+| `excludeComponentTags` | `string[]` | `[]` | Tags de componentes a excluir (lista negra). Un componente con cualquiera de estos tags no aparecerá. |
+| `includeOnlyComponentTags` | `string[]` | `[]` | Solo muestra componentes que tengan al menos uno de estos tags (lista blanca). La exclusión tiene prioridad. |
+| `visibleSections` | `string[]` | — | Secciones visibles. Si no se indica, se muestran todas. Valores: `Header`, `Body`, `Footer`, `Sidebar` |
+| `allowRenderMode` | `'open' \| 'fullpage' \| 'onlybody'` | `'open'` | `open` = el usuario elige · `fullpage` = forzado página completa · `onlybody` = forzado solo body |
+| `limboToken` | `string` | — | Token JWT para el gestor de imágenes Limbo. Obtenerlo server-side con `fetchLimboToken()` |
+| `ateneaToken` | `string` | — | Token JWT de Atenea para las funcionalidades de IA en el editor de texto (LedithorEditor). Obtenerlo server-side con `fetchAteneaToken()`. Sin este token el botón de IA no aparece. |
+| `ledithorAiTools` | `string[]` | — | Herramientas de IA a habilitar en el editor de texto. Solo se aplican si también se proporciona `ateneaToken`. Ej: `['improve', 'improve-stream']` |
+| `viewOnly` | `boolean` | `false` | Modo solo visualización: oculta toda la UI de edición (toolbar, panel de componentes). Usar para la vista pública. |
+
+> **Categorías disponibles para `excludeComponentTypes`:**
+> `Call to Action`, `Contenido`, `Separador`, `Texto`, `Cabecera`, `Footer`, `Imagen`, `Repetidor`, `Formulario`, `Título`, `SEO`
+
+---
+
+### Modo 2 — Script IIFE (Symfony / Twig / cualquier backend)
+
+```html
+<link rel="stylesheet" href="/build/lf-pagebuilder-iife.css">
+<script src="/build/lf-pagebuilder-iife.iife.js"></script>
+
+<!-- EDITOR (crear) -->
+<input
+  type="hidden"
+  class="js-lf-pagebuilder-vue-input"
+  name="pagebuilder[pageConfig]"
+  id="pagebuilder-new"
+  value=""
+  data-is-production="false"
+  data-debug-mode="true"
+  data-submit-form="true"
+  data-allow-render-mode="open"
+  data-limbo-token="eyJ..."
+  data-atenea-token="eyJ..."
+  data-ledithor-ai-tools='["improve","improve-stream"]'
+/>
+
+<!-- EDITOR (editar) -->
+<input
+  type="hidden"
+  class="js-lf-pagebuilder-vue-input"
+  name="pagebuilder[pageConfig]"
+  id="pagebuilder-123"
+  value="{JSON existente del pageConfig}"
+  data-is-production="false"
+  data-submit-form="true"
+  data-exclude-component-types="SEO,Footer,Cabecera"
+  data-limbo-token="eyJ..."
+/>
+
+<!-- VISTA PÚBLICA (solo lectura) -->
+<div id="lf-pagebuilder-render"></div>
+<script>
+  window.LfPagebuilder.render({
+    el: '#lf-pagebuilder-render',
+    pageConfig: {{ pageConfig|raw }},  {# string JSON o objeto #}
+    isProduction: true
+  });
+</script>
+```
+
+| Atributo `data-*` | Valores | Default | Descripción |
+|-------------------|---------|---------|-------------|
+| `data-is-production` | `"true"` \| `"false"` | `"false"` | Entorno de la API de renderizado |
+| `data-debug-mode` | `"true"` \| `"false"` | `"false"` | Muestra panel de import/export JSON y botón de carga desde localStorage |
+| `data-submit-form` | `"true"` \| `"false"` | `"false"` | Al guardar, busca el `<form>` padre y hace `.submit()` automáticamente |
+| `data-exclude-component-types` | `string` (comas) | — | Categorías de componentes a excluir. Ej: `"SEO,Footer,Cabecera"` |
+| `data-exclude-component-tags` | `string` (comas) | — | Tags de componentes a excluir (lista negra). Ej: `"boton,destacado"` |
+| `data-include-only-component-tags` | `string` (comas) | — | Solo muestra componentes con estos tags (lista blanca). La exclusión tiene prioridad. |
+| `data-visible-sections` | `string` (comas) | — | Secciones visibles. Ej: `"Header,Body"` |
+| `data-allow-render-mode` | `"open"` \| `"fullpage"` \| `"onlybody"` | `"open"` | Controla el modo de renderizado |
+| `data-limbo-token` | `string` | — | Token JWT de Limbo para el gestor de imágenes |
+| `data-atenea-token` | `string` | — | Token JWT de Atenea para las funcionalidades de IA. Sin este token el botón de IA no aparece. |
+| `data-ledithor-ai-tools` | `string` (JSON array) | — | Herramientas de IA a habilitar. Solo se aplican si hay `data-atenea-token`. Ej: `'["improve","improve-stream"]'` |
+
+> El `id` del input se usa como clave de localStorage y como referencia interna. Si no tiene `id`, se genera uno automáticamente.
+
+> **Compatibilidad de atributos:** El componente acepta también los tokens como atributos planos (sin prefijo `data-`): `limboToken="..."`, `ateneaToken="..."`, `ledithorAiTools='[...]'`. La forma recomendada es siempre `data-*`.
+
+---
+
+### API global `window.LfPagebuilder`
+
+| Método | Descripción |
+|--------|-------------|
+| `LfPagebuilder.init(config?)` | Inicializa el editor en todos los elementos `.js-lf-pagebuilder-vue-input` de la página |
+| `LfPagebuilder.render({ el, pageConfig, isProduction? })` | Renderiza la página en modo solo visualización (sin UI de edición) |
+| `LfPagebuilder.destroyAll()` | Destruye todas las instancias activas |
+| `LfPagebuilder.getInstances()` | Devuelve todas las instancias activas |
+| `LfPagebuilder.setComponents(components)` | Reemplaza la lista de componentes disponibles |
+| `LfPagebuilder.addComponent(component)` | Añade un componente a la lista disponible |
+
+El IIFE se auto-inicializa en `DOMContentLoaded` si hay elementos con el selector `.js-lf-pagebuilder-vue-input` en el DOM. No es necesario llamar a `init()` manualmente.
+
+---
+
+## Integración con Symfony/Twig — Contrato completo
+
+### Cómo funciona el intercambio de datos con el formulario
+
+El componente actúa como un **"enhanced textarea"**:
+
+1. **Lee su valor inicial de `input.value`** — en `onMounted`, el editor lee el JSON del `value` del input y lo carga como estado inicial del canvas. Si está vacío, el editor empieza en blanco (modo crear). Si contiene JSON, lo inicializa con esa configuración (modo editar).
+
+2. **Escribe en `input.value` al guardar** — cuando el usuario pulsa "Guardar" dentro del editor, el JSON actualizado se escribe en `input.value`.
+
+3. **Envía el formulario si `data-submit-form="true"`** — después de escribir en `input.value`, busca el `<form>` padre y llama a `.submit()`. Esto permite que Symfony valide y persista el `pageConfig`.
+
+```twig
+{# Crear #}
+<form method="post" action="{{ path('landing_create') }}">
+  <input type="hidden"
+         id="pagebuilder-new"
+         name="pagebuilder[pageConfig]"
+         class="js-lf-pagebuilder-vue-input"
+         value=""
+         data-is-production="{{ app.environment == 'prod' ? 'true' : 'false' }}"
+         data-submit-form="true"
+         data-limbo-token="{{ limboToken }}"
+         data-atenea-token="{{ ateneaToken }}"
+         data-ledithor-ai-tools='["improve","improve-stream"]'
+  />
+  {# El CSRF token y otros campos del formulario van aquí #}
+</form>
+
+{# Editar #}
+<form method="post" action="{{ path('landing_edit', {id: landing.id}) }}">
+  <input type="hidden"
+         id="pagebuilder-{{ landing.id }}"
+         name="pagebuilder[pageConfig]"
+         class="js-lf-pagebuilder-vue-input"
+         value="{{ landing.pageConfig|json_encode }}"
+         data-is-production="{{ app.environment == 'prod' ? 'true' : 'false' }}"
+         data-submit-form="true"
+         data-exclude-component-types="SEO,Footer,Cabecera"
+         data-limbo-token="{{ limboToken }}"
+  />
+</form>
+
+{# Vista pública #}
+<div id="lf-pagebuilder-render"></div>
+<script>
+  window.LfPagebuilder.render({
+    el: '#lf-pagebuilder-render',
+    pageConfig: {{ landing.pageConfig|raw }},
+    isProduction: {{ app.environment == 'prod' ? 'true' : 'false' }}
+  });
+</script>
+```
+
+---
+
+## Instalación
+
+```bash
+npm i lf-pagebuilder-vue
+```
+
+Luego en tu `package.json`, cambia la versión a `latest` para tener siempre la última:
+
+```json
+{
+  "dependencies": {
+    "lf-pagebuilder-vue": "latest"
+  }
+}
+```
+
+## ¿Qué es?
+
+El Pagebuilder permite al usuario arrastrar y configurar componentes de la librería de componentes Astro de Lefebvre para diseñar páginas de forma visual.
+
+**El Pagebuilder NO renderiza la página final.** Genera un JSON de configuración que se envía a una API externa renderizadora, que es la encargada de generar el HTML final.
+
+---
+
+## Integración con Limbo (gestión de imágenes)
+
+Si se quiere usar el sistema de imágenes Limbo desde el Pagebuilder:
+
+**Variables de entorno** (`.env`):
+
+```env
+PUBLIC_LIMBO_PUBLIC_KEY=pk_tu_public_key
+IS_PROD=FALSE
+```
+
+**Obtener token server-side y pasarlo al componente:**
+
+```astro
+---
+import { Pagebuilder } from 'lf-pagebuilder-vue';
+import { fetchLimboToken } from 'lf-pagebuilder-vue/limbo';
+
+let limboToken = '';
+try {
+  const result = await fetchLimboToken({
+    publicKey: import.meta.env.PUBLIC_LIMBO_PUBLIC_KEY || '',
+    isProduction: import.meta.env.IS_PROD === 'TRUE'
+  });
+  limboToken = result.token;
+} catch (e) {
+  console.error('[Pagebuilder] Error obteniendo token de Limbo:', e);
+}
+---
+
+<Pagebuilder
+  limboToken={limboToken}
+  isProduction={import.meta.env.IS_PROD === 'TRUE'}
+  inputId="mi-input"
+  client:only="vue"
+/>
+```
+
+El token se obtiene en el frontmatter (server-side), evitando exponer la Public Key al cliente.
+
+### `fetchLimboToken` — opciones
+
+```ts
+import { fetchLimboToken } from 'lf-pagebuilder-vue/limbo';
+
+const { token, expires_in } = await fetchLimboToken({
+  publicKey: 'pk_xxx',       // requerido
+  isProduction: false,        // opcional, default: false
+  limboApiUrl: 'https://...' // opcional, sobreescribe isProduction
+});
+```
+
+---
+
+## Integración con Atenea (IA en el editor de texto)
+
+Si se quiere usar las funcionalidades de IA de LedithorEditor (botón "Improve", etc.):
+
+**Variables de entorno** (`.env`):
+
+```env
+ATENEA_USERNAME=ledithor
+ATENEA_APIKEY=tu_apikey_aqui
+IS_PROD=FALSE
+```
+
+**Obtener token server-side y pasarlo al componente:**
+
+```astro
+---
+import { Pagebuilder } from 'lf-pagebuilder-vue';
+import { fetchAteneaToken } from 'lf-pagebuilder-vue/atenea';
+
+let ateneaToken = '';
+try {
+  const result = await fetchAteneaToken({
+    username: import.meta.env.ATENEA_USERNAME || '',
+    apiKey:   import.meta.env.ATENEA_APIKEY || '',
+    isProduction: import.meta.env.IS_PROD === 'TRUE'
+  });
+  ateneaToken = result.token;
+} catch (e) {
+  console.error('[Pagebuilder] Error obteniendo token de Atenea:', e);
+}
+---
+
+<Pagebuilder
+  ateneaToken={ateneaToken}
+  :ledithorAiTools="['improve', 'improve-stream']"
+  client:only="vue"
+/>
+```
+
+> Si `ateneaToken` no se proporciona (o está vacío), el botón de IA no aparece en el editor de texto. `ledithorAiTools` solo tiene efecto si hay token.
+
+### `fetchAteneaToken` — opciones
+
+```ts
+import { fetchAteneaToken } from 'lf-pagebuilder-vue/atenea';
+
+const { token, expiresAt } = await fetchAteneaToken({
+  username: 'ledithor',       // requerido
+  apiKey: 'tu_apikey',        // requerido
+  isProduction: false,         // opcional, default: false
+  ateneaApiUrl: 'https://...' // opcional, sobreescribe isProduction
+});
+// expiresAt: Unix timestamp (segundos) del claim `exp` del JWT
+```
+
+| Parámetro | Tipo | Default | Descripción |
+|-----------|------|---------|-------------|
+| `username` | `string` | — | Usuario de Atenea |
+| `apiKey` | `string` | — | API Key del usuario |
+| `isProduction` | `boolean` | `false` | `true` → `https://atenea.lefebvre.es` · `false` → URL de desarrollo |
+| `ateneaApiUrl` | `string` | — | URL base personalizada (sobreescribe `isProduction`) |
+
+---
+
+## Funcionalidades del editor
+
+### Color de fondo en filas y columnas
+
+Cada fila y cada columna del editor puede tener un color de fondo personalizado con soporte de canal alpha (opacidad). El color se configura desde el panel de configuración de la fila o columna y se exporta junto al resto de la configuración del layout.
+
+El color se almacena en el JSON de configuración como un valor `rgba(r, g, b, a)` dentro de la propiedad `backgroundColor`:
+
+```json
+{
+  "rows": [
+    {
+      "config": {
+        "backgroundColor": "rgba(255, 200, 100, 0.75)"
+      },
+      "columns": [
+        {
+          "config": {
+            "backgroundColor": "rgba(240, 240, 240, 1)"
+          },
+          "components": []
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Resaltado de elemento en edición
+
+Cuando se abre el panel de configuración de una fila, columna o componente, el elemento correspondiente se resalta visualmente con un borde ámbar y un halo de sombra. El resaltado desaparece al cerrar el panel.
+
+---
+
+## Build
+
+El proyecto tiene dos builds:
+
+### Build estándar (librería npm)
+
+```bash
+npm run build
+```
+
+Genera en `dist/`:
+- `index.js` — ES Module
+- `index.cjs` — CommonJS
+- `index.d.ts` — Tipos TypeScript
+- `limbo.js` / `limbo.cjs` — Utilidades de Limbo (server-side)
+- `atenea.js` / `atenea.cjs` — Utilidades de Atenea (server-side)
+- `styles.css` — Estilos
+
+### Build Symfony (IIFE)
+
+```bash
+npm run build:symfony
+```
+
+Genera en `dist-symfony/`:
+- `lf-pagebuilder-iife.iife.js` — Script autocontenido (incluye Vue y todas las dependencias)
+- `lf-pagebuilder-iife.css` — Estilos con utilidades Tailwind prefijadas (`mecano:`)
+
+### Build completo
+
+```bash
+npm run build:all
+```
+
+Ejecuta ambos builds.
+
+---
+
+## ⚠️ Desarrollo local
+
+> **IMPORTANTE**: Lee esta sección completa antes de trabajar con este proyecto localmente.
+
+### Trabajar con `npm link`
+
+Para probar cambios localmente en otro proyecto sin publicar:
+
+```bash
+# 1. En lf-pagebuilder-vue
+cd /ruta/a/lf-pagebuilder-vue
+npm link
+
+# 2. En tu proyecto consumidor
+cd /ruta/a/tu-proyecto
+npm link lf-pagebuilder-vue
+```
+
+### ⚠️ CRÍTICO: Múltiples librerías con `npm link`
+
+**Este proyecto depende de `libreria-astro-lefebvre`.** Si necesitas trabajar con ambas librerías localmente:
+
+```bash
+# ❌ INCORRECTO - El segundo comando ROMPE el primero
+npm link lf-pagebuilder-vue
+npm link libreria-astro-lefebvre
+
+# ✅ CORRECTO - Linkear TODAS en UN SOLO comando
+npm link lf-pagebuilder-vue libreria-astro-lefebvre
+```
+
+#### Flujo completo para trabajar con ambas librerías
+
+```bash
+# 1. En lf-pagebuilder-vue
+cd /ruta/a/lf-pagebuilder-vue
+npm link
+
+# 2. En libreria-astro-lefebvre
+cd /ruta/a/libreria-astro-lefebvre
+npm link
+
+# 3. En tu proyecto consumidor — AMBAS EN UN SOLO COMANDO
+cd /ruta/a/tu-proyecto
+npm link lf-pagebuilder-vue libreria-astro-lefebvre
+```
+
+#### Deshacer los enlaces
+
+```bash
+cd /ruta/a/tu-proyecto
+npm unlink lf-pagebuilder-vue libreria-astro-lefebvre
+npm install
+```
+
+### Watch mode
+
+```bash
+npm run dev
+```
+
+Ejecuta `vite build --watch` y recompila automáticamente cuando hay cambios.
+
+---
+
+### 📘 Publicar en npm
+
+Para publicar una nueva versión:
+
+1. **Subir la versión** en `package.json`
+2. **Compilar y publicar**:
+   ```bash
+   npm run build:all
+   npm publish --access public
+   ```
+
+#### Configurar acceso a npm (primera vez)
+
+1. Solicitar acceso al equipo `desarrollowebteamlef` en npm
+2. Crear un token de acceso en tu perfil de npm → Access Tokens
+3. Añadir el token en `~/.npmrc`:
+   ```
+   //registry.npmjs.org/:_authToken=TU_TOKEN_AQUI
+   ```
+
+---
+
+## Instalación y dependencias
+
+### Dependencias requeridas en el proyecto padre
+
+```bash
+npm install lf-pagebuilder-vue@latest vue@^3.3.0 vuedraggable@^4.1.0
+```
+
+### Configuración en proyectos Astro
+
+```bash
+npm install @astrojs/vue tailwindcss @tailwindcss/vite
+```
+
+En `astro.config.mjs`:
+
+```js
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  integrations: [vue()],
+  vite: {
+    plugins: [tailwindcss()],
+    ssr: {
+      noExternal: ['libreria-astro-lefebvre', 'lf-pagebuilder-vue'],
+    },
+  },
+});
+```