webs-sdk 0.17.3 → 0.17.5

package/README.md

@@ -1,6 +1,8 @@
-# WebsSDK
+# webs-sdk
 
-SDK completo para aplicaciones web que proporciona funcionalidades esenciales para el desarrollo de aplicaciones modernas.
+SDK interno npm para portales Nexum. Encapsula toda la lógica común: autenticación, sesiones, comunicación con la API, tracking, internacionalización y componentes React reutilizables.
+
+**Versión actual:** 0.17.4
 
 ## Instalación
 
@@ -8,391 +10,442 @@ SDK completo para aplicaciones web que proporciona funcionalidades esenciales pa
 npm install webs-sdk
 ```
 
-## Uso Básico
+## Uso básico
 
-```javascript
+```typescript
 import WebsSDK from 'webs-sdk';
 
-// Inicializar el SDK
+// Inicializar sesión
 await WebsSDK.Session.init();
 
-// Realizar una petición de red
-const response = await WebsSDK.Networking.request('https://api.example.com/data');
-
-// Almacenar datos
-await WebsSDK.Storage.storeData('user_preferences', { theme: 'dark' });
+// Petición HTTP
+const data = await WebsSDK.Networking.request('/api/endpoint', { param: 'value' });
 
-// Obtener datos
-const preferences = await WebsSDK.Storage.getData('user_preferences');
+// Almacenamiento local
+WebsSDK.Storage.set('key', 'value');
+const value = WebsSDK.Storage.get('key');
 ```
 
-## Librerías Disponibles
-
-### 🌐 Networking
-Manejo avanzado de peticiones HTTP y comunicación con APIs.
+## Librerías disponibles
 
-```javascript
-// Petición básica
-const data = await WebsSDK.Networking.request('/api/endpoint', { param: 'value' });
+### Networking
 
-// Inicialización del SDK
-await WebsSDK.Networking.executeInit();
+```typescript
+// Petición HTTP (inyecta sessionData automáticamente)
+await WebsSDK.Networking.request(url, data);
 
-// Envío de eventos
+// Eventos de tracking
 await WebsSDK.Networking.sendEvent('action', 'button_click', { button_id: 'submit' });
 
-// Verificar conectividad
-const isOnline = await WebsSDK.Networking.checkConnection();
-
-// Gestión de suscripciones
-const subscription = await WebsSDK.Networking.createSubscription(subscriptionData);
-const isActive = await WebsSDK.Networking.checkSubscription();
+// Suscripciones
+await WebsSDK.Networking.createSubscription(subscriptionData);
+const { success, subscription_active } = await WebsSDK.Networking.checkSubscription();
 ```
 
-### 💾 Storage
-Almacenamiento local avanzado con soporte para datos complejos.
+### Storage
 
-```javascript
-// Métodos básicos
+```typescript
 WebsSDK.Storage.set('key', 'value');
 const value = WebsSDK.Storage.get('key');
 
-// Almacenamiento de datos complejos
-await WebsSDK.Storage.storeData('complex_data', { user: 'john', age: 30 });
-const data = await WebsSDK.Storage.getData('complex_data');
+// Compresión de imágenes (0.8 ratio, 1024px max)
+const compressed = await WebsSDK.Storage.compressImage(imageFile, 2); // 2MB max
 
-// Manejo de creaciones (imágenes, archivos)
-await WebsSDK.Storage.handleDownloadImageToCreations(base64Image, 'creation_1', metadata);
+// Creaciones (imágenes generadas por el usuario)
+await WebsSDK.Storage.handleDownloadImageToCreations(base64, 'id', metadata);
 const creations = await WebsSDK.Storage.getCreations();
-
-// Compresión de imágenes
-const compressedImage = await WebsSDK.Storage.compressImage(imageUri, 2); // 2MB max
-
-// Descarga de archivos
-await WebsSDK.Storage.handleDownloadImage(base64, 'imagen');
-
-// Compartir archivos
-await WebsSDK.Storage.handleShareFile(fileUrl);
+await WebsSDK.Storage.deleteCreation('id');
 ```
 
-### 👤 Session
-Gestión completa de sesiones de usuario y datos del dispositivo.
+### Session
 
-```javascript
-// Inicializar sesión
+```typescript
 await WebsSDK.Session.init();
 
-// Obtener datos de sesión
 const sessionData = WebsSDK.Session.getSessionData();
-const userID = WebsSDK.Session.getUserID();
-const sessionID = WebsSDK.Session.getSessionID();
-
-// Gestión de suscripciones
-await WebsSDK.Session.setIsSubscribed(true);
+const userId = WebsSDK.Session.getUserID();
+const lang = WebsSDK.Session.getDeviceLanguage();
 const isSubscribed = WebsSDK.Session.getIsSubscribed();
+```
+
+### Utils
+
+```typescript
+const id = WebsSDK.Utils.generateId();
+const isValidEmail = WebsSDK.Utils.isValidEmail('user@example.com');
+const isMobile = WebsSDK.Utils.isMobile();
+const deviceInfo = WebsSDK.Utils.getDeviceInfo();
+const truncated = WebsSDK.Utils.truncateText('Long text...', 10);
+```
 
-// Información del dispositivo y usuario
-const language = WebsSDK.Session.getDeviceLanguage();
-const languageRegion = WebsSDK.Session.getDeviceLanguageAndRegion();
-const isFirstOpen = WebsSDK.Session.getIsFirstOpen();
+### MixPanel
 
-// Gestión de usuarios
-WebsSDK.Session.setUserID('user_123');
-await WebsSDK.Session.setIsDevUser(true);
+```typescript
+await WebsSDK.MixPanel.initialize(token, false, false, false);
+await WebsSDK.MixPanel.trackEvent('page_view', { page: 'home' });
+await WebsSDK.MixPanel.identifyUser('user_123');
+await WebsSDK.MixPanel.setUserProperties({ plan: 'premium' });
 ```
 
-### 🔧 Utils
-Amplia colección de utilidades para desarrollo web.
+### AuthManager
 
-```javascript
-// Utilidades de fecha y ID
-const id = WebsSDK.Utils.generateId();
-const formattedDate = WebsSDK.Utils.formatDate(new Date(), 'DD/MM/YYYY');
+```typescript
+// Login estándar
+await WebsSDK.AuthManager.authUser({ login, password, website_id });
 
-// Validaciones
-const isValidEmail = WebsSDK.Utils.isValidEmail('user@example.com');
-const isValidUrl = WebsSDK.Utils.isValidUrl('https://example.com');
+// Login sin password (MSISDN)
+await WebsSDK.AuthManager.authOnlyUser({ login, website_id });
 
-// Manipulación de strings
-const truncated = WebsSDK.Utils.truncateText('Long text...', 10);
-const capitalized = WebsSDK.Utils.capitalizeFirst('hello world');
+// Login con OTP
+await WebsSDK.AuthManager.authOnlyUserOTP({ login, website_id, pincode });
 
-// Funciones de tiempo
-await WebsSDK.Utils.sleep(1000); // Esperar 1 segundo
-const randomNum = WebsSDK.Utils.getRandomInt(1, 100);
+// Registro
+await WebsSDK.AuthManager.createUser({ login, password, website_id });
 
-// Manipulación de arrays y objetos
-const chunks = WebsSDK.Utils.arrayChunk([1,2,3,4,5], 2);
-const unique = WebsSDK.Utils.arrayUnique([1,1,2,3,3]);
-const picked = WebsSDK.Utils.objectPick(obj, ['key1', 'key2']);
+// Auto-login post-pago (usado en el proxy de next_template)
+await WebsSDK.AuthManager.auto_login(cfg_sessionid, websiteData, requestUrl);
 
-// Funciones específicas para web
-const deviceInfo = WebsSDK.Utils.getDeviceInfo();
-const isMobile = WebsSDK.Utils.isMobile();
-const isTablet = WebsSDK.Utils.isTablet();
-const isDesktop = WebsSDK.Utils.isDesktop();
-const browserInfo = WebsSDK.Utils.getBrowserInfo();
+// Baja/cancelación
+await WebsSDK.AuthManager.unsubscribeUser({ user_id, callback_url?, org? });
+
+// Gestión de perfil
+await WebsSDK.AuthManager.setUserMetadata(params);
+await WebsSDK.AuthManager.uploadProfilePhoto(params); // JPG/PNG/WEBP, max 5MB
+await WebsSDK.AuthManager.changePassword(params);
+```
 
-// Manejo de archivos y datos
-const isBase64 = WebsSDK.Utils.isBase64(string);
-const isBase64Image = WebsSDK.Utils.isBase64Image(dataUri);
-WebsSDK.Utils.downloadFile(data, 'filename.txt', 'text/plain');
-await WebsSDK.Utils.copyToClipboard('texto a copiar');
+### Andromeda — Portales
 
-// Utilidades de formato
-const formattedBytes = WebsSDK.Utils.formatBytes(1024); // "1 KB"
-const queryParams = WebsSDK.Utils.parseQueryString('?a=1&b=2');
-const queryString = WebsSDK.Utils.buildQueryString({a: 1, b: 2});
+```typescript
+// Metadata del portal (optimizado con cookie websiteDataFlag)
+await WebsSDK.Andromeda.getWebsiteMetadatabyHostname('portal.com');
+
+// Configuración del producto (langs, login_type, logo, favicon, theme)
+await WebsSDK.Andromeda.getWebsiteConfig('portal-corp-web');
 ```
 
-### 📊 MixPanel
-Sistema completo de análisis y tracking de eventos.
+### ContentManager
 
-```javascript
-// Inicializar MixPanel
-await WebsSDK.MixPanel.initialize('your_token', false, false, false);
+```typescript
+// Contenido por preset
+await WebsSDK.ContentManager.getContentByPreset('homepage', { lang: 'es' });
 
-// Tracking de eventos
-await WebsSDK.MixPanel.trackEvent('page_view', { page: 'home' });
-await WebsSDK.MixPanel.trackEventIfExist('special_event', { data: 'value' });
+// Colección filtrada por tags
+await WebsSDK.ContentManager.getCollection(['tag1', 'tag2'], 'es', false);
+```
 
-// Gestión de usuarios
-await WebsSDK.MixPanel.identifyUser('user_123');
-await WebsSDK.MixPanel.setUserProperties({ plan: 'premium' });
-await WebsSDK.MixPanel.resetUserID();
+### User
+
+```typescript
+await WebsSDK.User.checkSession(token);            // Valida token (usado en middleware)
+await WebsSDK.User.getUserData(user_id, website_id);
+await WebsSDK.User.getCredits(user_id, website_id);
+```
 
-// Super propiedades
-await WebsSDK.MixPanel.superProperties({ app_version: '1.0.0' });
-await WebsSDK.MixPanel.superPropertiesAppend({ session_id: 'abc123' });
+### CorporateAuthManager
 
-// Control de tracking
-WebsSDK.MixPanel.disableTracking();
-WebsSDK.MixPanel.enableTracking();
-const isInitialized = WebsSDK.MixPanel.isMixpanelInitialized();
+```typescript
+// Server-side (middleware Next.js)
+const result = await WebsSDK.CorporateAuthManager.validateCorporateAuthServerSide(request);
+if (!result.authenticated) return result.redirectResponse;
+
+// Client-side
+await WebsSDK.CorporateAuthManager.checkCorporateLogin();
+await WebsSDK.CorporateAuthManager.validateUser(autoRedirect?);
+await WebsSDK.CorporateAuthManager.login(returnTo?);
+await WebsSDK.CorporateAuthManager.logout(redirectTo?);
+await WebsSDK.CorporateAuthManager.isAdmin(userData?);
+```
+
+### Legal
+
+```typescript
+await WebsSDK.Legal.getLegalText('tos' | 'privacy' | 'faq', web_id, lang);
+```
+
+### Namespace `pre` — Pre-producción
+
+```typescript
+// Lazy-loaded, apunta a bc1742-pre.gways.org
+await WebsSDK.pre.AuthManager.authUser(params);
+await WebsSDK.pre.Andromeda.getWebsiteMetadatabyHostname(hostname);
 ```
 
-### 🔐 AuthManager
-Gestión de autenticación (en desarrollo).
+---
+
+## Componentes React
+
+### CookieConsent — Banner GDPR
+
+```typescript
+import { CookieConsent, getCookieConsentTexts } from 'webs-sdk';
+import type { CookieConsentProps, CookieConsentTheme, CookieConsentPreferences } from 'webs-sdk';
+
+<CookieConsent
+  locale="es"                        // en | es | fr | nl | ar | de | fi | ro | tr
+  privacyPolicyUrl="/privacy"
+  theme={{
+    backgroundColor: '#1a1a2e',
+    accentColor: '#6c63ff',           // aplica a botón Accept, borde Reject, links y glow
+    acceptButtonBg: 'linear-gradient(90deg, #6c63ff, #a855f7)', // soporta gradients CSS
+    textColor: '#ffffff',
+  }}
+  onAccept={() => updateGAConsent('granted')}
+  onReject={() => updateGAConsent('denied')}
+  onSaveSettings={(prefs: CookieConsentPreferences) => handlePrefs(prefs)}
+/>
+```
+
+**Storage:**
+- Cookie `cookieConsent`: `accepted | rejected | custom` (1 año)
+- `localStorage.TRACKING_PERMISSION`: `granted | denied`
+- `localStorage.FUNCTIONAL_PERMISSION`: `granted | denied`
+
+### Google Analytics — GA4
 
-### 🌍 I18nManager
-Sistema de internacionalización (en desarrollo).
+```typescript
+import { initGoogleAnalytics, updateGAConsent, trackGAEvent, trackGAPageView, isGALoaded } from 'webs-sdk';
 
-### 🚀 Andromeda
-Funcionalidades avanzadas (en desarrollo).
+// Registra el GA ID. Carga el script SOLO si hay consentimiento previo.
+await initGoogleAnalytics('G-XXXXXXXXXX', { sendPageView: true, debug: false });
 
-### 📝 ContentManager
-Gestión y obtención de contenido dinámico.
+// Llamar tras decisión del usuario en CookieConsent
+updateGAConsent('granted');  // carga GA si había pendingTrackingId
+updateGAConsent('denied');   // GA nunca se carga
 
-```javascript
-const content = await WebsSDK.ContentManager.getContentByPreset('homepage', { lang: 'es' });
+// Tracking
+trackGAEvent('purchase', { value: 9.99, currency: 'EUR' });
+trackGAPageView('/home', 'Inicio');
+isGALoaded(); // boolean
 ```
 
-## Configuración
+> **GDPR estricto:** GA no usa Consent Mode v2. Si no hay consentimiento, el script `gtag.js` nunca se inyecta en el DOM.
 
-El SDK incluye configuración completa que puede ser personalizada según tus necesidades:
+### CDN Proxy
 
-```javascript
-// Acceder a la configuración
-const config = WebsSDK.Config;
+```typescript
+import { handleCDNRequest } from 'webs-sdk';
+import type { CDNOptions } from 'webs-sdk';
 
-// Configurar endpoints de API
-config.endpoints.CONFIG = 'https://mi-api.com/config';
-config.endpoints.USER_CREATE_ID = 'https://mi-api.com/user/create';
+// Usar en un route handler de Next.js (compatible con Edge Runtime)
+async function handleCDNRequest(
+  pathname: string,        // '/cdn/apariencias/33702/image.png'
+  options?: {
+    cdnBaseUrl?: string;   // Default: 'https://dy822md8ge77v.cloudfront.net'
+    cacheSeconds?: number; // Default: 300 (5 min)
+  }
+): Promise<Response | null>  // null si pathname no empieza por /cdn/
+```
+
+### Componentes "For You" — Creación de contenido AI
+
+```typescript
+import {
+  AvatarAI, AvatarAIPage, AvatarAIForYouCard,
+  CreativeFaceSwap, CreativeFaceSwapPage, CreativeFaceSwapForYouCard,
+  MemeGenerator, MemeGeneratorPage, MemeGeneratorForYouCard,
+  WallpapersName, WallpapersNamePage, WallpapersNameForYouCard,
+  Wallpapers,
+  Ringtone,
+} from 'webs-sdk';
+```
+
+Todos aceptan `websiteId?: string` para tracking multi-portal.
+
+### ARFilters — Filtros AR con DeepAR
+
+```typescript
+import { ARFilters, ARFiltersForYouCard } from 'webs-sdk';
+import type { DeepARProps, DeepARFilter, DeepARTexts } from 'webs-sdk';
+
+<ARFilters
+  licenseKey="deepar-license-key"
+  websiteId="portal-web-id"
+  apiBaseUrl="https://api.fluver-ai.com"
+  downloadProxyUrl="/cdn"            // Proxy CORS para descarga de efectos
+  filterTag="ar-filters-tag"         // Obtiene filtros del CMS por tag
+  // O bien: filters={[{ file: 'beauty', thumbUrl: '/thumb.jpg' }]}
+  locale="es"
+  texts={getARFiltersTexts('es')}    // requerido
+  onPhotoTaken={(url) => share(url)}
+  onVideoRecorded={(url) => share(url)}
+/>
+```
 
-// Configurar MixPanel
-config.MIXPANEL.TOKEN = 'tu_token_mixpanel';
+Soporta fullscreen en mobile (vendor-prefixed API para iOS Safari).
 
-// Configuración de desarrollo
-config.DEBUG_MODE = true;
+### SpinningWheel — Ruleta
 
-// Configuración de eventos especiales
-config.SPECIAL_EVENTS = ['first_open', 'subscription_purchased'];
+```typescript
+import { SpinningWheel, wheelThemes } from 'webs-sdk';
 
-// Configuración de compresión de imágenes
-config.IMAGE_COMPRESSION.COMPRESSION = 0.8;
-config.IMAGE_COMPRESSION.WIDTH = 1024;
-config.IMAGE_COMPRESSION.ACTIVE = true;
+// Temas: vodacom | totalgym | womantoday | afristream | efc
+<SpinningWheel
+  userId={userId}
+  websiteId={websiteId}
+  theme="vodacom"
+  onResult={(segment) => handleWin(segment)}
+  canSpin={true}
+  alreadySpunToday={false}
+/>
 ```
 
-## Funcionalidades Avanzadas
+### Quiz y Stickers
 
-### Gestión de Eventos
-```javascript
-// Configurar y enviar eventos personalizados
-await WebsSDK.Networking.sendEvent('user_action', 'button_click', {
-    button_id: 'cta_primary',
-    page: 'landing',
-    timestamp: Date.now()
-});
+```typescript
+import { Quiz, Stickers } from 'webs-sdk';
+```
 
-// Eventos pendientes (para cuando no hay conexión)
-WebsSDK.Networking.addPendingEvent({
-    eventType: 'action',
-    eventKeyword: 'offline_action',
-    eventData: { action: 'save_draft' }
-});
+### Esports — Noticias, Vídeos y Partidas en Directo
 
-// Enviar eventos pendientes cuando se restaure la conexión
-await WebsSDK.Networking.sendPendingEvents();
+```typescript
+import { EsportsNews, EsportsVideos, EsportsLive } from 'webs-sdk';
 ```
 
-### Gestión de Archivos e Imágenes
-```javascript
-// Comprimir y guardar imágenes
-const compressedImage = await WebsSDK.Storage.compressImage(imageFile, 2);
-await WebsSDK.Storage.handleDownloadImageToCreations(compressedImage, 'photo_1', {
-    timestamp: Date.now(),
-    location: 'homepage'
-});
+#### EsportsNews
+
+```typescript
+<EsportsNews
+  config={{
+    key: 'api-key',
+    contents: [{ preset: 'esports_news', apiProviderId: 'id', category: [], tags: [], limit: 10 }]
+  }}
+  language="es"
+  onNewsClick={(item) => router.push(`/news/${item.id}`)}
+  theme={theme}                    // CSS classes para container, cards, badges, etc.
+  categoryStyles={{ gaming: { badge: 'bg-blue-500', badgeText: 'text-white' } }}
+  // Modo detalle (renderiza EsportsNewsDetail):
+  newsId="article-id"
+  newsData={item}                  // opcional si ya tienes los datos
+  onBack={() => router.back()}
+/>
+```
 
-// Obtener todas las creaciones guardadas
-const allCreations = await WebsSDK.Storage.getCreations();
+#### EsportsVideos
 
-// Eliminar creaciones específicas
-await WebsSDK.Storage.deleteCreation('photo_1');
+```typescript
+<EsportsVideos
+  config={{ key: 'api-key', contents: [...] }}
+  language="es"
+  onVideoClick={(item) => openPlayer(item.video_url)}
+  theme={theme}                    // incluye clases para duration overlay
+/>
 ```
 
-### Información del Dispositivo
-```javascript
-// Obtener información completa del dispositivo
-const deviceInfo = WebsSDK.Utils.getDeviceInfo();
-console.log(deviceInfo);
-// {
-//   userAgent: "Mozilla/5.0...",
-//   platform: "MacIntel",
-//   language: "es-ES",
-//   screenWidth: 1920,
-//   screenHeight: 1080,
-//   timezone: "Europe/Madrid"
-// }
+#### EsportsLive
+
+```typescript
+<EsportsLive
+  language="es"
+  timezone="Europe/Madrid"
+  onLiveClick={(item) => openStream(item.streamUrl)}
+  onMatchClick={(match) => openMatchDetail(match)}
+  onGameClick={(gameId) => filterByGame(gameId)}
+  website_id="portal-web-id"
+  theme={theme}
+  // Modo detalle de partida:
+  matchId="serie-id"
+  matchData={calendarMatch}
+  onBack={() => setMatchId(null)}
+/>
+```
+
+---
 
-// Detectar tipo de dispositivo
-if (WebsSDK.Utils.isMobile()) {
-    // Lógica específica para móviles
-} else if (WebsSDK.Utils.isTablet()) {
-    // Lógica específica para tablets
-} else {
-    // Lógica para desktop
-}
+## Utilidades de validación de vídeo
+
+```typescript
+import { validateVideoUrl, validateVideoBatch, clearValidationCache } from 'webs-sdk';
+import { useValidateVideoOnMount, useLazyVideoValidation } from 'webs-sdk';
+
+// Función pura (sin React)
+const state = await validateVideoUrl('https://stream.example.com/live.m3u8');
+// 'valid' | 'invalid' | 'unknown'
+
+// Batch con concurrencia 3
+const results = await validateVideoBatch([url1, url2, url3]);
+
+// React: validar al montar (evita renderizar streams rotos)
+const { isValid, isInvalid, isValidating } = useValidateVideoOnMount(videoUrl);
+
+// React: validación manual
+const { validate, isValid, isInvalid } = useLazyVideoValidation();
+await validate(videoUrl);
 ```
 
-## Estructura del Proyecto
+Soporta HLS, DASH, MP4. Cache en memoria con TTL de 5 minutos.
+
+---
+
+## Estructura del proyecto
 
 ```
 src/
-├── config.ts              # Configuración central del SDK
-├── index.ts               # Punto de entrada principal
+├── config.ts              # Configuración central (URLs, endpoints, constantes)
+├── index.ts               # Barrel export principal
 ├── libraries/
-│   ├── networking.ts      # Peticiones HTTP y comunicación
-│   ├── storage.ts         # Almacenamiento local avanzado
-│   ├── session.ts         # Gestión de sesiones
+│   ├── networking.ts      # HTTP + events
+│   ├── auth.ts            # Autenticación, login, baja
+│   ├── session.ts         # Sesiones y dispositivo
+│   ├── storage.ts         # LocalStorage + compresión de imágenes
 │   ├── utils.ts           # Utilidades generales
-│   ├── mixpanel.ts        # Analytics y tracking
-│   ├── auth.ts            # Autenticación
-│   ├── i18n.ts            # Internacionalización
-│   ├── andromeda.ts       # Funcionalidades avanzadas
-│   ├── content.ts         # Gestión de contenido
-│   └── index.ts           # Exports de librerías
-└── types/
-    └── index.d.ts         # Definiciones de tipos TypeScript
+│   ├── andromeda.ts       # Metadata y config de portales
+│   ├── corp_auth.ts       # Auth corporativa (JWT)
+│   ├── user.ts            # Datos de usuario
+│   ├── mixpanel.ts        # Analytics
+│   ├── audio.ts           # Text-to-speech
+│   ├── calypso.ts         # Event tracking interno
+│   ├── legal.ts           # Textos legales
+│   ├── content.ts         # Contenido dinámico + colecciones por tags
+│   ├── cdn.ts             # CDN Proxy (Edge Runtime compatible)
+│   └── googleAnalytics.ts # GA4 con carga diferida por consentimiento
+├── utils/
+│   ├── videoValidation.ts  # Validación de URLs de streaming
+│   ├── useVideoValidation.ts # React hooks para validación
+│   └── timeUtils.ts        # getTimeAgo — tiempo relativo i18n
+└── components/
+    ├── AvatarAI.tsx
+    ├── CreativeFaceSwap.tsx
+    ├── Wallpapers.tsx
+    ├── WallpapersName.tsx
+    ├── Ringtone.tsx
+    ├── MemeGenerator.tsx
+    ├── Quiz.tsx
+    ├── Stickers.tsx
+    ├── VideoPlayer.tsx
+    ├── ARFilters/
+    ├── SpinningWheel/
+    ├── CookieConsent/
+    └── esports/
+        ├── news/
+        ├── videos/
+        └── live/
 ```
 
 ## Desarrollo
 
 ```bash
-# Instalar dependencias
 npm install
-
-# Compilar en modo desarrollo con watch
-npm run build:watch
-
-# Compilar para producción
-npm run build
-
-# Ejecutar linting
+npm run build          # tsc → dist/
+npm run build:watch    # watch mode
 npm run lint
-
-# Ejecutar servidor de desarrollo
-npm run dev
 ```
 
 ## Publicación
 
-El proyecto está configurado para ser publicado como módulo npm:
-
 ```bash
-# Compilar y preparar para publicación
-npm run prepublishOnly
-
-# Publicar en npm
-npm publish
+# Incluir [ROAD-361723] en el commit para auto-publish en CI
+git commit -m "feat: descripción [ROAD-361723]"
+git push
 ```
 
-## Compatibilidad
-
-- **Navegadores**: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
-- **Node.js**: 16+ (para desarrollo)
-- **TypeScript**: 5+
-- **Frameworks**: Compatible con React, Vue, Angular, Vanilla JS
-
-## Ejemplos de Uso
-
-### Aplicación Básica
-```javascript
-import WebsSDK from 'webs-sdk';
+Tras publicar, actualizar en los portales:
+```bash
+npm install webs-sdk@<nueva-version>
+```
 
-async function initApp() {
-    // Inicializar el SDK
-    await WebsSDK.Session.init();
-    
-    // Configurar tracking
-    await WebsSDK.MixPanel.initialize(process.env.MIXPANEL_TOKEN);
-    
-    // Obtener configuración del servidor
-    const config = await WebsSDK.Networking.request('/api/config');
-    
-    // Guardar preferencias del usuario
-    await WebsSDK.Storage.storeData('app_config', config);
-    
-    console.log('App inicializada correctamente');
-}
-
-initApp();
-```
-
-### E-commerce
-```javascript
-// Tracking de eventos de e-commerce
-await WebsSDK.MixPanel.trackEvent('product_viewed', {
-    product_id: 'ABC123',
-    category: 'electronics',
-    price: 299.99
-});
-
-// Gestión de carrito
-await WebsSDK.Storage.storeData('cart_items', cartItems);
-const savedCart = await WebsSDK.Storage.getData('cart_items');
-```
-
-### Aplicación con Suscripciones
-```javascript
-// Verificar estado de suscripción
-const isSubscribed = await WebsSDK.Session.getIsSubscribed();
-
-if (!isSubscribed) {
-    // Mostrar paywall
-    await WebsSDK.MixPanel.trackEvent('paywall_shown', {
-        source: 'premium_feature'
-    });
-}
-
-// Crear nueva suscripción
-const subscription = await WebsSDK.Networking.createSubscription({
-    plan: 'premium_monthly',
-    user_id: WebsSDK.Session.getUserID()
-});
-```
-
-## Licencia
-
-MIT License
+**Nota importante — `index.js` raíz:** es el barrel CommonJS mantenido manualmente. Cada export nuevo en `src/index.ts` debe añadirse también en `index.js`:
+```js
+const { nuevaFuncion } = require('./dist/index.js');
+module.exports.nuevaFuncion = nuevaFuncion;
+```