valtech-components 2.0.681 → 2.0.682

package/lib/components/molecules/image-crop/image-crop.component.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from '@angular/core';
+import { ImageCroppedEvent } from 'ngx-image-cropper';
+import * as i0 from "@angular/core";
+/**
+ * ImageCropComponent
+ *
+ * A modal-ready component for cropping images with a specified aspect ratio.
+ * Uses ngx-image-cropper internally and provides a simple interface.
+ *
+ * @example Inside an ion-modal
+ * ```html
+ * <ion-modal [isOpen]="showCropModal">
+ *   <ng-template>
+ *     <val-image-crop
+ *       [image]="selectedFile"
+ *       [aspectRatio]="1"
+ *       [roundCropper]="true"
+ *       (cropComplete)="onCropComplete($event)"
+ *       (cancel)="showCropModal = false"
+ *     />
+ *   </ng-template>
+ * </ion-modal>
+ * ```
+ */
+export declare class ImageCropComponent {
+    private i18n;
+    /** Image file to crop */
+    readonly image: import("@angular/core").InputSignal<File>;
+    /** Aspect ratio (1 for square, 16/9 for widescreen, etc.) */
+    readonly aspectRatio: import("@angular/core").InputSignal<number>;
+    /** Use round cropper (for avatars) */
+    readonly roundCropper: import("@angular/core").InputSignal<boolean>;
+    /** Resize output to specific width (0 = no resize) */
+    readonly resizeToWidth: import("@angular/core").InputSignal<number>;
+    /** i18n namespace for labels */
+    readonly i18nNamespace: import("@angular/core").InputSignal<string>;
+    /** Emitted when crop is confirmed with the cropped blob */
+    cropComplete: EventEmitter<Blob>;
+    /** Emitted when user cancels the crop */
+    cancel: EventEmitter<void>;
+    /** Emitted when image fails to load */
+    loadFailed: EventEmitter<void>;
+    /** Internal signal for cropped blob */
+    protected croppedBlob: import("@angular/core").WritableSignal<Blob>;
+    /** Computed text for cancel button */
+    protected cancelText: import("@angular/core").Signal<string>;
+    /** Computed text for confirm button */
+    protected confirmText: import("@angular/core").Signal<string>;
+    /** Computed text for title */
+    protected titleText: import("@angular/core").Signal<string>;
+    /** Handle crop event from ngx-image-cropper */
+    onImageCropped(event: ImageCroppedEvent): void;
+    /** Confirm and emit the cropped blob */
+    confirmCrop(): void;
+    /** Handle load failure */
+    onLoadFailed(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageCropComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageCropComponent, "val-image-crop", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "roundCropper": { "alias": "roundCropper"; "required": false; "isSignal": true; }; "resizeToWidth": { "alias": "resizeToWidth"; "required": false; "isSignal": true; }; "i18nNamespace": { "alias": "i18nNamespace"; "required": false; "isSignal": true; }; }, { "cropComplete": "cropComplete"; "cancel": "cancel"; "loadFailed": "loadFailed"; }, never, never, true, never>;
+}

package/lib/components/molecules/image-crop/index.d.ts

@@ -0,0 +1 @@
+export * from './image-crop.component';

package/lib/components/organisms/avatar-upload/avatar-upload.component.d.ts

@@ -0,0 +1,82 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { AvatarUploadError, AvatarUploadMetadata, AvatarUploadResult } from './types';
+import * as i0 from "@angular/core";
+/**
+ * AvatarUploadComponent
+ *
+ * A complete avatar upload solution with:
+ * - Image selection from device
+ * - Crop modal with round preview
+ * - Automatic compression and thumbnail generation
+ * - Upload to Firebase Storage
+ * - Backend sync via AuthService
+ *
+ * @example Basic usage
+ * ```html
+ * <val-avatar-upload
+ *   [props]="{
+ *     currentUrl: user()?.avatarUrl,
+ *     initials: 'JD',
+ *     size: 120
+ *   }"
+ *   (uploaded)="onAvatarUploaded($event)"
+ *   (error)="onError($event)"
+ * />
+ * ```
+ */
+export declare class AvatarUploadComponent {
+    private imageService;
+    private storageService;
+    private authService;
+    private i18n;
+    fileInput: ElementRef<HTMLInputElement>;
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<AvatarUploadMetadata>;
+    /** Emitted after successful upload and backend sync */
+    uploaded: EventEmitter<AvatarUploadResult>;
+    /** Emitted on any error during the process */
+    error: EventEmitter<AvatarUploadError>;
+    /** Emitted when upload starts */
+    uploadStart: EventEmitter<void>;
+    protected loading: import("@angular/core").WritableSignal<boolean>;
+    protected showCropModal: import("@angular/core").WritableSignal<boolean>;
+    protected selectedFile: import("@angular/core").WritableSignal<File>;
+    protected previewUrl: import("@angular/core").WritableSignal<string>;
+    protected imageLoadError: import("@angular/core").WritableSignal<boolean>;
+    /** Merged config with defaults */
+    protected config: import("@angular/core").Signal<{
+        currentUrl?: string;
+        initials?: string;
+        backgroundColor: string;
+        size: number;
+        editable: boolean;
+        storagePath: string;
+        i18nNamespace: string;
+        maxFileSize: number;
+        compressQuality: number;
+        maxWidth: number;
+        thumbnailSize: number;
+    }>;
+    /** URL to display (preview takes priority over current) */
+    protected displayUrl: import("@angular/core").Signal<string>;
+    /** Aria label for edit button */
+    protected editButtonLabel: import("@angular/core").Signal<string>;
+    /** Open file picker dialog */
+    openFilePicker(): void;
+    /** Handle file selection */
+    onFileSelected(event: Event): void;
+    /** Handle crop completion */
+    onCropComplete(croppedBlob: Blob): Promise<void>;
+    /** Handle crop cancel */
+    onCropCancel(): void;
+    /** Handle crop load failure */
+    onCropLoadFailed(): void;
+    /** Handle image load error */
+    onImageError(): void;
+    /** Process cropped image and upload */
+    private processAndUpload;
+    /** Emit error event */
+    private emitError;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarUploadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarUploadComponent, "val-avatar-upload", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "uploaded": "uploaded"; "error": "error"; "uploadStart": "uploadStart"; }, never, never, true, never>;
+}

package/lib/components/organisms/avatar-upload/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Configuration for AvatarUploadComponent
+ */
+export interface AvatarUploadMetadata {
+    /** Current avatar URL */
+    currentUrl?: string;
+    /** Initials to show when no avatar (e.g., "JD" for John Doe) */
+    initials?: string;
+    /** Background color for initials avatar */
+    backgroundColor?: string;
+    /** Avatar size in pixels (default: 100) */
+    size?: number;
+    /** Show edit button (default: true) */
+    editable?: boolean;
+    /** Storage path prefix without userId (default: 'avatars') */
+    storagePath?: string;
+    /** i18n namespace for labels (default: 'AvatarUpload') */
+    i18nNamespace?: string;
+    /** Max file size in bytes (default: 10MB) */
+    maxFileSize?: number;
+    /** Quality for compressed image 0-1 (default: 0.8) */
+    compressQuality?: number;
+    /** Max width for avatar (default: 800) */
+    maxWidth?: number;
+    /** Thumbnail size (default: 150) */
+    thumbnailSize?: number;
+}
+/**
+ * Result emitted after successful upload
+ */
+export interface AvatarUploadResult {
+    /** Full-size avatar URL */
+    avatarUrl: string;
+    /** Thumbnail URL */
+    thumbnailUrl: string;
+}
+/**
+ * Error types that can occur during upload
+ */
+export type AvatarUploadErrorType = 'invalidType' | 'fileTooLarge' | 'uploadFailed' | 'backendFailed' | 'cancelled';
+/**
+ * Error object emitted on failure
+ */
+export interface AvatarUploadError {
+    type: AvatarUploadErrorType;
+    message: string;
+    originalError?: unknown;
+}
+/**
+ * Default values
+ */
+export declare const AVATAR_UPLOAD_DEFAULTS: {
+    size: number;
+    editable: boolean;
+    storagePath: string;
+    i18nNamespace: string;
+    maxFileSize: number;
+    compressQuality: number;
+    maxWidth: number;
+    thumbnailSize: number;
+    backgroundColor: string;
+};

package/lib/components/templates/docs-page/docs-page.component.d.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, OnDestroy } from '@angular/core';
 import { DocsBreadcrumbMetadata } from '../../molecules/docs-breadcrumb/types';
 import { DocsNavLinksMetadata } from '../../molecules/docs-nav-links/types';
 import { DocsTocMetadata } from '../../organisms/docs-toc/types';
+import { ContentReactionMetadata } from '../../molecules/content-reaction/types';
 import { DocsPageMetadata } from './types';
 import * as i0 from "@angular/core";
 /**
@@ -41,6 +42,7 @@ import * as i0 from "@angular/core";
  */
 export declare class DocsPageComponent implements AfterViewInit, OnDestroy {
     private elementRef;
+    private router;
     private _props;
     set props(value: DocsPageMetadata);
     get props(): DocsPageMetadata;
@@ -53,6 +55,7 @@ export declare class DocsPageComponent implements AfterViewInit, OnDestroy {
     navLinksProps: import("@angular/core").Signal<DocsNavLinksMetadata>;
     showNavLinks: import("@angular/core").Signal<boolean>;
     breadcrumbProps: import("@angular/core").Signal<DocsBreadcrumbMetadata>;
+    feedbackProps: import("@angular/core").Signal<ContentReactionMetadata>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DocsPageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DocsPageComponent, "val-docs-page", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/lib/components/templates/docs-page/types.d.ts

@@ -66,6 +66,45 @@ export interface DocsPageMetadata {
      * Custom CSS class.
      */
     cssClass?: string;
+    /**
+     * Feedback/reaction widget configuration.
+     * When enabled, shows a "Was this page helpful?" reaction widget.
+     */
+    feedback?: DocsPageFeedbackConfig;
+}
+/**
+ * Configuration for the feedback reaction widget.
+ */
+export interface DocsPageFeedbackConfig {
+    /**
+     * Enable the feedback widget.
+     */
+    enabled: boolean;
+    /**
+     * Entity type for categorizing feedback.
+     * @default 'docs-page'
+     */
+    entityType?: string;
+    /**
+     * Entity ID for this page. If not provided, derives from current route.
+     * @example 'components-button', 'guides-theming'
+     */
+    entityId?: string;
+    /**
+     * Custom question text. If not provided, uses i18n default.
+     * @example '¿Te resultó útil esta página?'
+     */
+    question?: string;
+    /**
+     * Allow anonymous (unauthenticated) feedback.
+     * @default true
+     */
+    allowAnonymous?: boolean;
+    /**
+     * Show optional comment field after reaction.
+     * @default true
+     */
+    showComment?: boolean;
 }
 /**
  * Link to another documentation page.

package/lib/services/auth/auth.service.d.ts

@@ -6,7 +6,7 @@ import { AuthStateService } from './auth-state.service';
 import { TokenService } from './token.service';
 import { AuthStorageService } from './storage.service';
 import { AuthSyncService } from './sync.service';
-import { SigninRequest, SigninResponse, SignupRequest, SignupResponse, VerifyEmailRequest, VerifyEmailResponse, ResendCodeRequest, ResendCodeResponse, MFAVerifyResponse, RefreshResponse, GetPermissionsResponse, GetProfileResponse, UpdateProfileRequest, UpdateProfileResponse, MFASetupResponse, MFAConfirmResponse, MFADisableResponse, ForgotPasswordRequest, ForgotPasswordResponse, ResetPasswordRequest, ResetPasswordResponse, ChangePasswordResponse, DeleteAccountResponse, SwitchOrgResponse, MFAMethod, AuthError, ValtechAuthConfig, EnableNotificationsResult, NotificationPermissionState, RegisterDeviceResult, TOTPSetupResponse, TOTPVerifySetupResponse, TOTPDisableResponse, RegenerateBackupCodesResponse, BackupCodesCountResponse, OAuthProvider, LinkedProvider, HasPasswordResponse, UpdateHandleResponse, CheckHandleResponse } from './types';
+import { SigninRequest, SigninResponse, SignupRequest, SignupResponse, VerifyEmailRequest, VerifyEmailResponse, ResendCodeRequest, ResendCodeResponse, MFAVerifyResponse, RefreshResponse, GetPermissionsResponse, GetProfileResponse, UpdateProfileRequest, UpdateProfileResponse, MFASetupResponse, MFAConfirmResponse, MFADisableResponse, ForgotPasswordRequest, ForgotPasswordResponse, ResetPasswordRequest, ResetPasswordResponse, ChangePasswordResponse, DeleteAccountResponse, SwitchOrgResponse, MFAMethod, AuthError, ValtechAuthConfig, EnableNotificationsResult, NotificationPermissionState, RegisterDeviceResult, TOTPSetupResponse, TOTPVerifySetupResponse, TOTPDisableResponse, RegenerateBackupCodesResponse, BackupCodesCountResponse, OAuthProvider, LinkedProvider, HasPasswordResponse, UpdateHandleResponse, CheckHandleResponse, UpdateAvatarRequest, UpdateAvatarResponse } from './types';
 import { OAuthService } from './oauth.service';
 import { FirebaseService, MessagingService } from '../firebase';
 import { I18nService } from '../i18n';
@@ -241,6 +241,11 @@ export declare class AuthService implements OnDestroy {
      * Actualiza el perfil del usuario.
      */
     updateProfile(request: UpdateProfileRequest): Observable<UpdateProfileResponse>;
+    /**
+     * Actualiza el avatar del usuario en el backend.
+     * Nota: El estado local del avatar se maneja a través de getProfile().
+     */
+    updateAvatar(request: UpdateAvatarRequest): Observable<UpdateAvatarResponse>;
     /**
      * Inicia el proceso de recuperación de contraseña.
      * Envía un código al email del usuario.

package/lib/services/auth/types.d.ts

@@ -453,6 +453,24 @@ export interface UpdateProfileResponse {
     operationId: string;
     updated: boolean;
 }
+/**
+ * Request para actualizar avatar del usuario.
+ */
+export interface UpdateAvatarRequest {
+    /** URL del avatar en Firebase Storage */
+    avatarUrl: string;
+    /** URL del thumbnail (opcional) */
+    avatarThumbnail?: string;
+}
+/**
+ * Response de actualizar avatar.
+ */
+export interface UpdateAvatarResponse {
+    operationId: string;
+    avatarUrl: string;
+    avatarThumbnail?: string;
+    updatedAt: string;
+}
 /**
  * Request para cambiar de organización activa.
  */

package/lib/services/image/image.service.d.ts

@@ -0,0 +1,76 @@
+import { CropData, ImageCompressOptions, ImageValidateOptions, ImageValidationResult, ProcessedImage } from './types';
+import * as i0 from "@angular/core";
+/**
+ * ImageService
+ *
+ * Service for image processing including compression, thumbnails, cropping and validation.
+ * Uses HTML Canvas for all operations - no external dependencies.
+ *
+ * @example
+ * ```typescript
+ * const imageService = inject(ImageService);
+ *
+ * // Compress an image
+ * const compressed = await imageService.compress(file, { maxWidth: 800, quality: 0.8 });
+ *
+ * // Generate thumbnail
+ * const thumb = await imageService.thumbnail(file, 150);
+ *
+ * // Validate before processing
+ * const validation = imageService.validate(file, { maxSize: 5 * 1024 * 1024 });
+ * if (!validation.valid) {
+ *   console.error(validation.message);
+ * }
+ * ```
+ */
+export declare class ImageService {
+    /**
+     * Compress an image maintaining aspect ratio
+     * @param file - File or Blob to compress
+     * @param options - Compression options
+     * @returns Promise with processed image data
+     */
+    compress(file: File | Blob, options?: ImageCompressOptions): Promise<ProcessedImage>;
+    /**
+     * Generate a square thumbnail from an image
+     * @param file - File or Blob to process
+     * @param size - Thumbnail size in pixels (default: 150)
+     * @returns Promise with processed thumbnail
+     */
+    thumbnail(file: File | Blob, size?: number): Promise<ProcessedImage>;
+    /**
+     * Crop an image with specific coordinates
+     * @param file - File or Blob to crop
+     * @param cropData - Crop coordinates and dimensions
+     * @param options - Optional compression options for output
+     * @returns Promise with cropped image
+     */
+    crop(file: File | Blob, cropData: CropData, options?: ImageCompressOptions): Promise<ProcessedImage>;
+    /**
+     * Validate an image file before processing
+     * @param file - File to validate
+     * @param options - Validation options
+     * @returns Validation result with error details if invalid
+     */
+    validate(file: File, options?: ImageValidateOptions): ImageValidationResult;
+    /**
+     * Validate image dimensions (async - requires loading image)
+     * @param file - File to validate
+     * @param options - Validation options with minWidth/minHeight
+     * @returns Promise with validation result
+     */
+    validateDimensions(file: File, options: Pick<ImageValidateOptions, 'minWidth' | 'minHeight'>): Promise<ImageValidationResult>;
+    /**
+     * Convert a Blob/File to a data URL
+     */
+    toDataUrl(file: File | Blob): Promise<string>;
+    /**
+     * Convert a data URL to a Blob
+     */
+    dataUrlToBlob(dataUrl: string): Blob;
+    private loadImage;
+    private calculateDimensions;
+    private canvasToBlob;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ImageService>;
+}

package/lib/services/image/index.d.ts

@@ -0,0 +1,2 @@
+export * from './image.service';
+export * from './types';

package/lib/services/image/types.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Options for image compression
+ */
+export interface ImageCompressOptions {
+    /** Maximum width in pixels (default: 800) */
+    maxWidth?: number;
+    /** Maximum height in pixels (default: 800) */
+    maxHeight?: number;
+    /** Quality 0-1 (default: 0.8) */
+    quality?: number;
+    /** Output MIME type (default: 'image/jpeg') */
+    mimeType?: 'image/jpeg' | 'image/png' | 'image/webp';
+}
+/**
+ * Options for image validation
+ */
+export interface ImageValidateOptions {
+    /** Maximum file size in bytes (default: 10MB) */
+    maxSize?: number;
+    /** Allowed MIME types (default: ['image/jpeg', 'image/png', 'image/webp', 'image/gif']) */
+    allowedTypes?: string[];
+    /** Minimum width in pixels */
+    minWidth?: number;
+    /** Minimum height in pixels */
+    minHeight?: number;
+}
+/**
+ * Result of image validation
+ */
+export interface ImageValidationResult {
+    valid: boolean;
+    error?: 'invalidType' | 'fileTooLarge' | 'imageTooSmall';
+    message?: string;
+}
+/**
+ * Processed image result
+ */
+export interface ProcessedImage {
+    /** Processed image as Blob */
+    blob: Blob;
+    /** Data URL for preview */
+    dataUrl: string;
+    /** Final width in pixels */
+    width: number;
+    /** Final height in pixels */
+    height: number;
+    /** File size in bytes */
+    size: number;
+}
+/**
+ * Crop data for manual cropping
+ */
+export interface CropData {
+    /** X position of crop area */
+    x: number;
+    /** Y position of crop area */
+    y: number;
+    /** Width of crop area */
+    width: number;
+    /** Height of crop area */
+    height: number;
+}
+/**
+ * Default values for image processing
+ */
+export declare const IMAGE_DEFAULTS: {
+    maxWidth: number;
+    maxHeight: number;
+    quality: number;
+    mimeType: "image/jpeg";
+    maxSize: number;
+    allowedTypes: string[];
+    thumbnailSize: number;
+};

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.681";
+export declare const VERSION = "2.0.682";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.681",
+  "version": "2.0.682",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"
@@ -32,6 +32,7 @@
   "dependencies": {
     "@capacitor/browser": "^6.0.3",
     "ng-otp-input": "^1.9.3",
+    "ngx-image-cropper": "^9.0.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,

package/public-api.d.ts

@@ -169,6 +169,7 @@ export * from './lib/components/molecules/username-input/username-input.componen
 export * from './lib/components/molecules/username-input/types';
 export * from './lib/components/molecules/linked-providers/linked-providers.component';
 export * from './lib/components/molecules/linked-providers/types';
+export * from './lib/components/molecules/image-crop/image-crop.component';
 export * from './lib/components/organisms/article/article.component';
 export * from './lib/components/organisms/article/types';
 export * from './lib/components/organisms/banner/banner.component';
@@ -214,6 +215,8 @@ export * from './lib/components/organisms/terminal-404/terminal-404.component';
 export * from './lib/components/organisms/terminal-404/types';
 export * from './lib/components/organisms/bottom-nav/bottom-nav.component';
 export * from './lib/components/organisms/bottom-nav/types';
+export * from './lib/components/organisms/avatar-upload/avatar-upload.component';
+export * from './lib/components/organisms/avatar-upload/types';
 export * from './lib/components/templates/layout/layout.component';
 export * from './lib/components/templates/simple/simple.component';
 export * from './lib/components/templates/simple/types';
@@ -251,6 +254,7 @@ export * from './lib/services/app-config';
 export * from './lib/services/presets';
 export * from './lib/services/skeleton';
 export * from './lib/services/pagination';
+export * from './lib/services/image';
 export * from './lib/services/ads';
 export * from './lib/components/molecules/ad-slot/ad-slot.component';
 export * from './lib/services/feedback';

package/src/lib/services/firebase/firebase-messaging-sw.js

@@ -0,0 +1,134 @@
+/**
+ * Firebase Messaging Service Worker
+ *
+ * Service Worker estático para Firebase Cloud Messaging.
+ * Carga la configuración dinámicamente desde /firebase-config.js.
+ *
+ * CONFIGURACIÓN:
+ * 1. Crea firebase.config.json con tu configuración de Firebase
+ * 2. Ejecuta: npm run generate:firebase-config
+ *    Esto genera /firebase-config.js con: self.FIREBASE_CONFIG = {...}
+ * 3. Agrega este SW y firebase-config.js a los assets de angular.json
+ *
+ * Ver README.md para documentación completa.
+ */
+
+// Importar Firebase scripts
+importScripts('https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js');
+importScripts('https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js');
+
+// Importar configuración desde archivo externo (generado en build)
+// Este archivo define: self.FIREBASE_CONFIG = { ... }
+try {
+  importScripts('/firebase-config.js');
+} catch (e) {
+  console.error('[SW] No se pudo cargar firebase-config.js:', e);
+}
+
+// Verificar que la configuración existe
+if (!self.FIREBASE_CONFIG) {
+  console.error('[SW] FIREBASE_CONFIG no está definido.');
+  console.error('[SW] Ejecuta: npm run generate:firebase-config');
+} else {
+  // Inicializar Firebase
+  firebase.initializeApp(self.FIREBASE_CONFIG);
+
+  // Obtener instancia de messaging
+  const messaging = firebase.messaging();
+
+  /**
+   * Handler para mensajes en background.
+   */
+  messaging.onBackgroundMessage((payload) => {
+    console.log('[SW] Mensaje recibido en background:', payload);
+
+    const notificationTitle = payload.notification?.title || 'Nueva notificación';
+    const notificationOptions = {
+      body: payload.notification?.body || '',
+      icon: payload.notification?.icon || '/assets/icon/favicon.ico',
+      image: payload.notification?.image,
+      badge: '/assets/icon/badge.png',
+      tag: payload.messageId || 'default',
+      data: {
+        ...payload.data,
+        messageId: payload.messageId,
+        title: notificationTitle,
+        body: payload.notification?.body,
+      },
+      vibrate: [200, 100, 200],
+      requireInteraction: payload.data?.require_interaction === 'true',
+    };
+
+    return self.registration.showNotification(notificationTitle, notificationOptions);
+  });
+
+  /**
+   * Handler para clicks en notificaciones.
+   */
+  self.addEventListener('notificationclick', (event) => {
+    console.log('[SW] Click en notificación:', event);
+    event.notification.close();
+
+    const data = event.notification.data || {};
+    let targetUrl = '/';
+
+    if (data.route) {
+      targetUrl = data.route;
+    } else if (data.url) {
+      targetUrl = data.url;
+    }
+
+    if (data.query_params) {
+      const separator = targetUrl.includes('?') ? '&' : '?';
+      targetUrl += separator + data.query_params;
+    }
+
+    const notificationPayload = {
+      type: 'NOTIFICATION_CLICK',
+      notification: {
+        title: data.title,
+        body: data.body,
+        data: data,
+        messageId: data.messageId,
+      },
+    };
+
+    event.waitUntil(
+      clients
+        .matchAll({ type: 'window', includeUncontrolled: true })
+        .then((clientList) => {
+          // Siempre enviar postMessage para que la app pueda reaccionar
+          for (const client of clientList) {
+            client.postMessage(notificationPayload);
+          }
+
+          // Navegar si hay route o url
+          if (targetUrl !== '/') {
+            for (const client of clientList) {
+              if ('navigate' in client) {
+                return client.navigate(targetUrl).then((c) => c?.focus());
+              }
+            }
+            // Si no hay cliente abierto, abrir nueva ventana
+            if (clients.openWindow) {
+              return clients.openWindow(targetUrl);
+            }
+          }
+
+          // Solo hacer focus si no hay navegación
+          for (const client of clientList) {
+            if ('focus' in client) {
+              return client.focus();
+            }
+          }
+          if (clients.openWindow) {
+            return clients.openWindow('/');
+          }
+        })
+    );
+  });
+
+  self.addEventListener('notificationclose', (event) => {
+    console.log('[SW] Notificación cerrada:', event.notification.tag);
+  });
+}