ImageGallery

Galería horizontal con scroll, drag y flechas

stable v1.0.0

Preview

En uso real sangra a 100vw (rompe la columna de contenido). En desktop aquí se acota al recuadro para no taparse con la barra lateral (el scroll y las flechas son los reales); en móvil sangra a ancho completo como en producción, por eso el siguiente slide asoma.

Comportamiento

Contexto	Comportamiento
Móvil (≤767px)	Scroll táctil, snap al inicio, slides de 90vw con peek. Flechas ocultas.
Desktop (≥768px)	Drag con el ratón, flechas, altura fija de 400px.
El grupo cabe en pantalla	`is-fit`: scroll desactivado, track centrado, flechas ocultas.
Al inicio / al final	La flecha correspondiente se oculta (`is-hidden`).
Carga de imagen	Cada imagen aparece con fade; el fit se re-mide según cargan.
Drag > 5px	Se suprime el click final: arrastrar no dispara un enlace.

Lenis (opcional, por sitio)

Lenis no es dependencia del sistema. La galería usa solo APIs de scroll nativas. El contenedor lleva data-lenis-prevent-touch: si el sitio usa Lenis, le devuelve el scroll táctil horizontal al navegador; si no lo usa, el atributo es inerte y el componente se comporta igual. Degrada limpio sin configuración.

Props

Prop	Tipo	Default
images	{ src, alt }[]	n/a
label	string	'Galería de imágenes'
prevLabel	string	'Imagen anterior'
nextLabel	string	'Imagen siguiente'

Restricciones

Sangra a 100vw: rompe cualquier columna de contenido, a propósito.
Altura desktop fija (400px, object-fit: cover): retrato y paisaje se recortan a esa banda.
Asume ratio de aspecto consistente entre las imágenes de un grupo. En móvil los slides usan height: auto y el track align-items: stretch: todos igualan al más alto, así que una imagen de otro ratio deja un hueco debajo. Alimenta cada galería con imágenes del mismo ratio.
Scrollbar oculta por diseño; las flechas y el drag son la affordance en desktop.
Labels en español por defecto; otros idiomas pasan label / prevLabel / nextLabel.

Decisiones

Decisión	Por qué
Flechas SVG, no Unicode ← / →	Las flechas Unicode se pintan como emoji a color en algunas plataformas: el mismo bug que LinkArrow evita. SVG con currentColor se mantiene tipográfico. Dos componentes del sistema no pueden contradecirse.
Lenis como hook inerte, no dependencia	Quitarlo rompería el scroll táctil en sitios con Lenis; exigirlo impondría una dependencia que el sistema no posee. Inerte-cuando-ausente cumple ambas.
Labels como prop, default español	El sitio de referencia y el workbench son español; el default deja a los consumidores actuales idénticos. Otros idiomas lo sobreescriben.
Re-medir al cargar imágenes	El ancho del track depende de las imágenes; medir antes de cargar da mal resultado y un ResizeObserver no lo recupera una vez is-fit fija el ancho.
Suprimir click tras drag	Sin eso, arrastrar sobre una imagen enlazada navegaría al soltar. El umbral de 5px separa la intención.