feat(carousel): add size probe for responsive layout and optimize item width calculation

src/app/shared/components/carousel/carousel.component.html

@@ -1,4 +1,10 @@
 <section class="carousel" role="region" [attr.aria-label]="ariaLabel()">
+  <span
+    #sizeProbe
+    class="carousel__size-probe"
+    aria-hidden="true"
+    [style.width]="itemBasis()"
+  ></span>
   <div class="carousel__frame" [class.carousel__frame--with-controls]="hasMultipleItems()">
     <div
       #viewport

src/app/shared/components/carousel/carousel.component.scss

@@ -4,8 +4,17 @@
 }
 
 .carousel {
+  position: relative;
   width: 100%;
 
+  &__size-probe {
+    position: absolute;
+    height: 0;
+    visibility: hidden;
+    pointer-events: none;
+    contain: strict;
+  }
+
   &__frame {
     position: relative;
     display: grid;

src/app/shared/components/carousel/carousel.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, signal, TemplateRef, viewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { CarouselComponent, CarouselItemContext } from './carousel.component';
 
 interface TestItem {
@@ -16,7 +16,7 @@ interface TestItem {
     </ng-template>
 
     <app-carousel
-      [items]="items"
+      [items]="items()"
       [itemTemplate]="itemTemplate"
       [scrollStep]="120"
       [gap]="16"
@@ -28,11 +28,11 @@ interface TestItem {
 class TestHostComponent {
   readonly circular = signal(false);
 
-  readonly items: TestItem[] = [
+  readonly items = signal<TestItem[]>([
     { id: 1, label: 'Primero' },
     { id: 2, label: 'Segundo' },
     { id: 3, label: 'Tercero' },
-  ];
+  ]);
 
   readonly carousel = viewChild.required(CarouselComponent<TestItem>);
   readonly itemTemplate =
@@ -41,8 +41,47 @@ class TestHostComponent {
 
 describe('CarouselComponent', () => {
   let fixture: ComponentFixture<TestHostComponent>;
+  let frames: Map<number, FrameRequestCallback>;
+  let resize: () => void;
+  let disconnect: ReturnType<typeof vi.fn>;
+  const flushLayout = () => {
+    const pending = [...frames.values()];
+    frames.clear();
+    pending.forEach((callback) => callback(0));
+    fixture.detectChanges();
+  };
+  const setDimensions = (width: number, basis: number) => {
+    const host = fixture.nativeElement.querySelector('app-carousel');
+    Object.defineProperty(host, 'clientWidth', { configurable: true, value: width });
+    const probe = fixture.nativeElement.querySelector('.carousel__size-probe');
+    probe.getBoundingClientRect = () => ({ width: basis }) as DOMRect;
+  };
 
   beforeEach(async () => {
+    frames = new Map();
+    let frameId = 0;
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn((callback: FrameRequestCallback) => {
+        frames.set(++frameId, callback);
+        return frameId;
+      }),
+    );
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((id: number) => frames.delete(id)),
+    );
+    disconnect = vi.fn();
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        constructor(callback: () => void) {
+          resize = callback;
+        }
+        observe() {}
+        disconnect = disconnect;
+      },
+    );
     await TestBed.configureTestingModule({
       imports: [TestHostComponent],
     }).compileComponents();
@@ -51,6 +90,75 @@ describe('CarouselComponent', () => {
     fixture.detectChanges();
   });
 
+  afterEach(() => {
+    fixture.destroy();
+    vi.unstubAllGlobals();
+  });
+
+  it('agrupa las mediciones y no se realimenta al renderizar o navegar', async () => {
+    fixture.componentInstance.circular.set(true);
+    setDimensions(650, 200);
+    fixture.detectChanges();
+    resize();
+    resize();
+    expect(frames.size).toBe(1);
+    flushLayout();
+    await Promise.resolve();
+    expect(frames.size).toBe(0);
+    const carousel = fixture.componentInstance.carousel();
+    expect(carousel['itemsPerPage']()).toBe(2);
+    carousel.next();
+    fixture.detectChanges();
+    const track = fixture.nativeElement.querySelector('.carousel__track');
+    track.dispatchEvent(new TransitionEvent('transitionend', { propertyName: 'transform' }));
+    fixture.detectChanges();
+    await Promise.resolve();
+    resize(); // Same width, even if the new cards have a different height.
+    expect(frames.size).toBe(0);
+    expect(carousel['currentPage']()).toBe(1);
+    expect(carousel['itemWidth']()).toBe(269);
+  });
+
+  it('recalcula al cambiar el ancho y la base responsive de las tarjetas', () => {
+    setDimensions(650, 200);
+    resize();
+    flushLayout();
+    setDimensions(350, 200);
+    resize();
+    flushLayout();
+    expect(fixture.componentInstance.carousel()['itemsPerPage']()).toBe(1);
+    setDimensions(350, 100);
+    resize();
+    flushLayout();
+    expect(fixture.componentInstance.carousel()['itemsPerPage']()).toBe(2);
+    expect(frames.size).toBe(0);
+  });
+
+  it('actualiza productos y admite una lista vacía sin anchos inválidos', () => {
+    setDimensions(650, 200);
+    flushLayout();
+    fixture.componentInstance.items.set([]);
+    fixture.detectChanges();
+    expect(frames.size).toBe(1);
+    flushLayout();
+    const carousel = fixture.componentInstance.carousel();
+    expect(carousel['itemWidth']()).toBeNull();
+    expect(carousel['hasOverflow']()).toBe(false);
+    fixture.componentInstance.items.set([{ id: 4, label: 'Nuevo' }]);
+    fixture.detectChanges();
+    flushLayout();
+    expect(carousel['itemWidth']()).toBe(650);
+    expect(fixture.nativeElement.querySelectorAll('article')).toHaveLength(1);
+    expect(frames.size).toBe(0);
+  });
+
+  it('cancela mediciones pendientes y desconecta el observador al destruirse', () => {
+    expect(frames.size).toBe(1);
+    fixture.destroy();
+    expect(frames.size).toBe(0);
+    expect(disconnect).toHaveBeenCalledOnce();
+  });
+
   it('renderiza el template provisto para cada elemento', () => {
     const articles = fixture.nativeElement.querySelectorAll('article');
 
@@ -65,8 +173,9 @@ describe('CarouselComponent', () => {
     carousel['itemsPerPage'].set(Number.MAX_SAFE_INTEGER);
 
     expect(carousel['circularPages']()).toEqual([]);
-    expect(carousel['createPage']('current', 0).items.map((entry) => entry.item.id))
+    expect(carousel['createPage']('current', 0).items.map((entry) => entry.item.id)).toEqual([
-      .toEqual([1, 2, 3]);
+      1, 2, 3,
+    ]);
   });
 
   it('expone una región accesible y controles con etiquetas', () => {
@@ -109,7 +218,7 @@ describe('CarouselComponent', () => {
 
   it('usa todo el ancho y distribuye el espacio sobrante entre elementos completos', () => {
     const host = fixture.nativeElement.querySelector('app-carousel') as HTMLElement;
-    const firstItem = fixture.nativeElement.querySelector('.carousel__item') as HTMLElement;
+    const firstItem = fixture.nativeElement.querySelector('.carousel__size-probe') as HTMLElement;
 
     Object.defineProperty(host, 'clientWidth', {
       configurable: true,
@@ -122,7 +231,7 @@ describe('CarouselComponent', () => {
         }) as DOMRect,
     );
 
-    fixture.componentInstance.carousel().ngAfterViewInit();
+    flushLayout();
     fixture.detectChanges();
 
     const frame = fixture.nativeElement.querySelector('.carousel__frame') as HTMLElement;
@@ -138,7 +247,7 @@ describe('CarouselComponent', () => {
     fixture.detectChanges();
 
     const host = fixture.nativeElement.querySelector('app-carousel') as HTMLElement;
-    const firstItem = fixture.nativeElement.querySelector('.carousel__item') as HTMLElement;
+    const firstItem = fixture.nativeElement.querySelector('.carousel__size-probe') as HTMLElement;
 
     Object.defineProperty(host, 'clientWidth', {
       configurable: true,
@@ -151,7 +260,7 @@ describe('CarouselComponent', () => {
         }) as DOMRect,
     );
 
-    fixture.componentInstance.carousel().ngAfterViewInit();
+    flushLayout();
     fixture.detectChanges();
 
     const pages = fixture.nativeElement.querySelectorAll('.carousel__page');

src/app/shared/components/carousel/carousel.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  afterRenderEffect,
   ChangeDetectionStrategy,
   Component,
   DestroyRef,
@@ -10,6 +11,7 @@ import {
   inject,
   input,
   signal,
+  untracked,
   viewChild,
 } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
@@ -45,12 +47,15 @@ export class CarouselComponent<T> implements AfterViewInit {
   private readonly platformId = inject(PLATFORM_ID);
   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
   private readonly viewport = viewChild.required<ElementRef<HTMLElement>>('viewport');
+  private readonly sizeProbe = viewChild.required<ElementRef<HTMLElement>>('sizeProbe');
+  private layoutFrame: number | null = null;
 
   readonly items = input.required<readonly T[]>();
   readonly itemTemplate = input.required<TemplateRef<CarouselItemContext<T>>>();
   readonly trackBy = input<CarouselTrackBy<T>>((index) => index);
   readonly scrollStep = input<number | null>(null);
   readonly gap = input(0);
+  readonly itemBasis = input('16rem');
   readonly circular = input(false);
   readonly ariaLabel = input('Carrusel');
   readonly previousLabel = input('Mostrar elementos anteriores');
@@ -90,27 +95,51 @@ export class CarouselComponent<T> implements AfterViewInit {
     () => !this.hasOverflow() || (!this.circular() && !this.canScrollNext()),
   );
 
+  constructor() {
+    afterRenderEffect(() => {
+      this.items();
+      this.gap();
+      this.circular();
+      this.itemBasis();
+      this.itemTemplate();
+      // Layout outputs must never become dependencies of this effect.
+      untracked(() => this.scheduleLayout());
+    });
+  }
+
+  private scheduleLayout(): void {
+    if (this.destroyRef.destroyed || this.layoutFrame !== null) return;
+    this.layoutFrame = requestAnimationFrame(() => {
+      this.layoutFrame = null;
+      this.refreshLayout();
+    });
+  }
+
   ngAfterViewInit(): void {
     if (!isPlatformBrowser(this.platformId)) {
       return;
     }
 
-    const viewport = this.viewport().nativeElement;
+    let previousWidth = -1;
-    this.refreshLayout();
+    let previousBasis = -1;
-
     const resizeObserver =
-      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => this.refreshLayout());
+      typeof ResizeObserver === 'undefined'
-    resizeObserver?.observe(this.host.nativeElement);
-
-    const mutationObserver =
-      typeof MutationObserver === 'undefined'
         ? null
-        : new MutationObserver(() => this.refreshLayout());
+        : new ResizeObserver(() => {
-    mutationObserver?.observe(viewport, { childList: true, subtree: true });
+            const width = this.host.nativeElement.clientWidth;
+            const basis = this.sizeProbe().nativeElement.getBoundingClientRect().width;
+            // Image loads and page rotation can change height, but not the layout inputs.
+            if (width === previousWidth && basis === previousBasis) return;
+            previousWidth = width;
+            previousBasis = basis;
+            this.scheduleLayout();
+          });
+    resizeObserver?.observe(this.host.nativeElement);
+    resizeObserver?.observe(this.sizeProbe().nativeElement);
 
     this.destroyRef.onDestroy(() => {
       resizeObserver?.disconnect();
-      mutationObserver?.disconnect();
+      if (this.layoutFrame !== null) cancelAnimationFrame(this.layoutFrame);
     });
   }
 
@@ -222,24 +251,32 @@ export class CarouselComponent<T> implements AfterViewInit {
   }
 
   private refreshLayout(): void {
-    const viewport = this.viewport().nativeElement;
+    const itemCount = this.items().length;
-    const firstItem = viewport.querySelector<HTMLElement>('.carousel__item');
     const availableWidth = this.host.nativeElement.clientWidth;
     const availableViewportWidth = Math.max(
       availableWidth - (this.hasMultipleItems() ? CarouselComponent.CONTROL_SLOT_WIDTH * 2 : 0),
       0,
     );
 
-    if (!firstItem || availableViewportWidth <= 0) {
+    if (itemCount === 0) {
+      this.itemsPerPage.set(1);
+      this.currentPage.set(0);
+      this.transitionDirection.set(0);
+      this.itemWidth.set(null);
+      this.hasOverflow.set(false);
+      this.canScrollPrevious.set(false);
+      this.canScrollNext.set(false);
+      return;
+    }
+
+    if (availableViewportWidth <= 0) {
       this.itemWidth.set(null);
       this.refreshNavigation();
       return;
     }
 
-    const assignedWidth = firstItem.style.width;
+    // Measure a stable CSS basis, never a card whose content/width we just changed.
-    firstItem.style.width = '';
+    const naturalItemWidth = this.sizeProbe().nativeElement.getBoundingClientRect().width;
-    const naturalItemWidth = firstItem.getBoundingClientRect().width;
-    firstItem.style.width = assignedWidth;
 
     if (naturalItemWidth <= 0) {
       this.itemWidth.set(null);
@@ -248,9 +285,9 @@ export class CarouselComponent<T> implements AfterViewInit {
     }
 
     const gap = this.resolvedGap();
-    const fittingItems = Math.max(
+    const fittingItems = Math.min(
-      1,
+      itemCount,
-      Math.floor((availableViewportWidth + gap) / (naturalItemWidth + gap)),
+      Math.max(1, Math.floor((availableViewportWidth + gap) / (naturalItemWidth + gap))),
     );
     const visibleItems = Math.min(fittingItems, this.items().length);
     const distributedItemWidth =
@@ -262,7 +299,12 @@ export class CarouselComponent<T> implements AfterViewInit {
       this.transitionDirection.set(0);
     }
 
-    this.itemWidth.set(distributedItemWidth);
+    if (this.itemWidth() !== distributedItemWidth) this.itemWidth.set(distributedItemWidth);
+    const normalizedPage = this.normalizePage(this.currentPage(), this.pageCount());
+    if (normalizedPage !== this.currentPage()) {
+      this.currentPage.set(normalizedPage);
+      this.transitionDirection.set(0);
+    }
     if (this.circular()) {
       const hasOverflow = this.items().length > fittingItems;
       this.hasOverflow.set(hasOverflow);

src/app/shared/components/product-list/product-list.component.html

@@ -67,6 +67,9 @@
     [itemTemplate]="productItem"
     [trackBy]="trackProduct"
     [gap]="24"
+    [itemBasis]="
+      effectiveLayout() === 'row' ? 'clamp(18rem, 70vw, 32rem)' : 'clamp(15rem, 30vw, 18rem)'
+    "
     [circular]="true"
     ariaLabel="Productos destacados"
   />