@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/hover-card/hover-card.css

@@ -1,13 +1,25 @@
 .mk-hover-card, mk-hover-card { position: relative; display: inline-flex; }
 .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] {
-  position: absolute; z-index: 10; bottom: calc(100% + .75rem); left: 0;
-  width: min(19rem, calc(100vw - 3rem)); padding: 1.25rem; border-radius: var(--mk-radius-lg);
-  color: var(--mk-text); background: var(--mk-surface-3); border: 1px solid var(--mk-outline-soft);
-  box-shadow: 0 12px 40px color-mix(in srgb, var(--mk-shadow-color) 20%, transparent);
-  animation: mk-hover-card-in .28s cubic-bezier(.2,.8,.2,1) both;
+  /* It grows from, and folds back into, the trigger's centre (the engine measures it). */
+  transform-origin: var(--mk-hover-origin-x, 50%) 100%;
+  position: absolute; z-index: 10; bottom: calc(100% + .75rem); left: var(--mk-hover-shift, 0);
+  width: min(19rem, calc(100vw - 1.5rem)); padding: 1.25rem; border-radius: var(--mk-radius-lg);
+  color: var(--mk-on-glass-inverse); background: var(--mk-glass-inverse); border: 0; border-radius: var(--mk-radius-lg, 24px);
+  box-shadow: var(--mk-glass-bevel); backdrop-filter: blur(16px);
+  /* Melonmind animation-general-in-2: blur 32 → 0, scale .7 → 1, 300 ms. */
+  animation: mk-hover-card-in .3s cubic-bezier(.1,.8,0,1.1) both;
 }
+/* Bridge over the gap so the pointer can travel into the panel. */
 .mk-hover-card [data-mk-hover-panel]::after, mk-hover-card [data-mk-hover-panel]::after { content: ''; position: absolute; inset: -1rem 0; z-index: -1; }
-.mk-hover-card[data-mk-placement=bottom] [data-mk-hover-panel], mk-hover-card[data-mk-placement=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; }
+:is(.mk-hover-card, mk-hover-card)[data-mk-side=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; transform-origin: var(--mk-hover-origin-x, 50%) 0; animation-name: mk-hover-card-down; }
+/* Leaving: it shrinks back into the trigger out of a blur, then the engine hides it. */
+:is(.mk-hover-card, mk-hover-card)[data-mk-closing] [data-mk-hover-panel] { pointer-events: none; animation: mk-hover-card-out .22s cubic-bezier(.4,0,1,1) both; }
+:is(.mk-hover-card, mk-hover-card)[data-mk-closing][data-mk-side=bottom] [data-mk-hover-panel] { animation-name: mk-hover-card-out-up; }
+/* Opened from the keyboard: no entrance. */
+:is(.mk-hover-card, mk-hover-card)[data-mk-input=keyboard] [data-mk-hover-panel] { animation: none; }
 .mk-hover-card [hidden], mk-hover-card [hidden] { display: none !important; }
-@keyframes mk-hover-card-in { from { opacity: 0; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: none; } }
+@keyframes mk-hover-card-in { from { opacity: 0; filter: blur(32px); transform: translateY(8px) scale(.7); } to { opacity: 1; filter: none; transform: none; } }
+@keyframes mk-hover-card-out { to { opacity: 0; filter: blur(12px); transform: translateY(10px) scale(.3); } }
+@keyframes mk-hover-card-out-up { to { opacity: 0; filter: blur(12px); transform: translateY(-10px) scale(.3); } }
+@keyframes mk-hover-card-down { from { opacity: 0; filter: blur(32px); transform: translateY(-8px) scale(.7); } to { opacity: 1; filter: none; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] { animation: none; } }

package/src/components/image-preview/README.md

@@ -0,0 +1,16 @@
+# image-preview
+
+Visor de imágenes tipo diálogo: las miniaturas `[data-mk-image]` abren un `<dialog>` modal donde la imagen crece desde su miniatura (0.7 s, curva firma; el radio de la miniatura pasa a 24 px) sobre un fondo oscuro desenfocado. Anterior/siguiente (botones, flechas o deslizar) entran con desplazamiento y blur, y el contador rueda. Doble clic o doble toque hace zoom ×2 donde apuntas y arrastrar lo mueve. Arrastrar hacia abajo, Escape o cerrar devuelven la imagen a su miniatura y el foco a ella.
+
+```html
+<mk-image-preview class="mk-image-preview">
+  <button data-mk-image data-mk-src="/big/1.jpg" data-mk-caption="Atardecer"><img src="/thumb/1.jpg" alt="Atardecer en la sierra"></button>
+  <button data-mk-image data-mk-src="/big/2.jpg"><img src="/thumb/2.jpg" alt="Lago"></button>
+</mk-image-preview>
+```
+
+`defineElements()`, `createImagePreview(root, options)` o `<ImagePreview images={[{ src, thumb, alt, caption }]} />`. La imagen grande sale de `data-mk-src`, el `href` o el `src` de la miniatura; el pie, de `data-mk-caption`.
+
+Opciones: `labels {close, prev, next, dialog}`, `loop=true`, `onChange(index)`, `onOpenChange(open)`. API: `open(index)`, `close()`, `next()`, `prev()`, `isOpen`, `index`, `destroy()`. Eventos `mk:open`, `mk:change` `{index, previous}` y `mk:close`. Miniaturas que no son botones reciben `tabindex` y `role="button"` (Enter o Espacio abren).
+
+Movimiento reducido: abre, cambia y cierra sin crecimiento ni deslizamientos.

package/src/components/image-preview/element.ts

@@ -0,0 +1,26 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createImagePreview, type ImagePreviewInstance } from './engine';
+
+/**
+ * <mk-image-preview class="mk-image-preview">
+ *   <button data-mk-image data-mk-src="/big/1.jpg" data-mk-caption="Atardecer"><img src="/thumb/1.jpg" alt="Atardecer en la sierra"></button>
+ * </mk-image-preview>
+ * Emits mk:open, mk:change ({index, previous}) and mk:close.
+ */
+export class MkImagePreviewElement extends MkElement<ImagePreviewInstance> {
+  static options: Record<string, OptionType> = { loop: 'boolean', strip: 'boolean', labels: 'json' };
+
+  protected create(options: Record<string, unknown>) {
+    return createImagePreview(this, options);
+  }
+
+  open(index?: number) {
+    this.instance?.open(index);
+  }
+
+  close() {
+    this.instance?.close();
+  }
+}
+
+export const defineImagePreview = () => defineElement('mk-image-preview', MkImagePreviewElement);

package/src/components/image-preview/engine.ts

@@ -0,0 +1,405 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { rollDigits } from '../../motion/micro';
+
+/*
+ * Image preview: thumbnails ([data-mk-image]) open a modal <dialog> where the
+ * picture grows out of its thumbnail (0.7 s on the signature curve, the
+ * thumbnail's radius easing to 24 px) over a blurred backdrop. Previous/next
+ * (buttons, arrow keys, a swipe, the strip of thumbnails) move both pictures at
+ * once: the old one leaves as a copy that slides away, shrinking into a blur,
+ * while the new one (decoded first) comes in from the side it goes to; a ring
+ * glides along the strip to the current thumbnail; the
+ * counter rolls. A double click or tap zooms ×2 where you point and a drag pans
+ * it. Dragging down, Escape or the close button send the picture back to its
+ * thumbnail, and focus returns to it.
+ */
+
+export interface ImagePreviewOptions {
+  labels?: { close?: string; prev?: string; next?: string; dialog?: string; strip?: string; picture?: string };
+  /** A strip of thumbnails under the picture (default true; hidden on phones and with one picture). */
+  strip?: boolean;
+  /** Loop from the last picture to the first (default true). */
+  loop?: boolean;
+  onChange?: (index: number) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface ImagePreviewInstance extends Instance {
+  open(index?: number): void;
+  close(): void;
+  next(): void;
+  prev(): void;
+  readonly isOpen: boolean;
+  readonly index: number;
+}
+
+interface Picture {
+  thumb: HTMLElement;
+  src: string;
+  alt: string;
+  caption: string;
+}
+
+const button = (part: string, label: string, path: string) => {
+  const element = document.createElement('button');
+  element.type = 'button';
+  element.dataset.mkLightbox = part;
+  element.setAttribute('aria-label', label);
+  element.innerHTML = `<svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${path}"/></svg>`;
+  return element;
+};
+
+export function createImagePreview(root: HTMLElement | null, options: ImagePreviewOptions = {}): ImagePreviewInstance {
+  if (!root) return inert({ open() {}, close() {}, next() {}, prev() {}, isOpen: false, index: -1 });
+  registerMotion();
+  const scope = createScope();
+  const loop = options.loop ?? true;
+  const labels = { close: 'Cerrar', prev: 'Imagen anterior', next: 'Imagen siguiente', dialog: 'Vista de imagen', strip: 'Miniaturas', picture: 'Imagen', ...options.labels };
+
+  const pictures = (): Picture[] =>
+    [...root.querySelectorAll<HTMLElement>('[data-mk-image]')].map((thumb) => {
+      const img = thumb.matches('img') ? (thumb as HTMLImageElement) : thumb.querySelector('img');
+      return {
+        thumb,
+        src: thumb.dataset.mkSrc || thumb.getAttribute('href') || img?.getAttribute('src') || img?.currentSrc || '',
+        alt: img?.alt ?? thumb.getAttribute('aria-label') ?? '',
+        caption: thumb.dataset.mkCaption ?? '',
+      };
+    });
+
+  const dialog = document.createElement('dialog');
+  dialog.dataset.mkLightboxDialog = '';
+  dialog.setAttribute('aria-label', labels.dialog);
+  const backdrop = document.createElement('div');
+  backdrop.dataset.mkLightbox = 'backdrop';
+  const stage = document.createElement('figure');
+  stage.dataset.mkLightbox = 'stage';
+  const image = document.createElement('img');
+  image.dataset.mkLightbox = 'image';
+  image.draggable = false;
+  const caption = document.createElement('figcaption');
+  caption.dataset.mkLightbox = 'caption';
+  stage.append(image, caption);
+  const close = button('close', labels.close, 'M6 6l12 12M18 6L6 18');
+  const prev = button('prev', labels.prev, 'M15 5l-7 7 7 7');
+  const next = button('next', labels.next, 'M9 5l7 7-7 7');
+  const counter = document.createElement('span');
+  counter.dataset.mkLightbox = 'count';
+  counter.setAttribute('aria-live', 'polite');
+  const strip = document.createElement('div');
+  strip.dataset.mkLightbox = 'strip';
+  strip.setAttribute('role', 'group');
+  strip.setAttribute('aria-label', labels.strip);
+  strip.hidden = true;
+  const ring = document.createElement('span');
+  ring.dataset.mkLightboxRing = '';
+  ring.setAttribute('aria-hidden', 'true');
+  dialog.append(backdrop, stage, prev, next, close, counter, strip);
+  root.append(dialog);
+  scope.add(() => dialog.remove());
+  scope.attr(root, 'data-mk-ready', '');
+  for (const { thumb } of pictures()) {
+    if (thumb.matches('button, a[href]') || thumb.tabIndex >= 0) continue;
+    scope.attr(thumb, 'tabindex', '0');
+    scope.attr(thumb, 'role', 'button');
+  }
+
+  let isOpen = false;
+  let index = -1;
+  let zoomed = false;
+  let list: Picture[] = [];
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  const thumbImg = (picture?: Picture) => (picture ? (picture.thumb.matches('img') ? picture.thumb : picture.thumb.querySelector('img') ?? picture.thumb) : null);
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    gsap.killTweensOf([image, backdrop, stage]);
+    for (const picture of list) thumbImg(picture)?.style.removeProperty('visibility');
+    if (dialog.open) dialog.close();
+  });
+
+  const write = (i: number) => {
+    const picture = list[i]!;
+    image.src = picture.src;
+    image.alt = picture.alt;
+    caption.textContent = picture.caption;
+    caption.hidden = !picture.caption;
+    const text = `${i + 1} / ${list.length}`;
+    if (counter.textContent && !reduced()) keep(rollDigits(counter, text, i >= index ? 1 : -1, 0.35));
+    else counter.textContent = text;
+    prev.disabled = !loop && i === 0;
+    next.disabled = !loop && i === list.length - 1;
+    prev.hidden = next.hidden = list.length < 2;
+  };
+
+  let ringShown = false;
+  const buildStrip = () => {
+    const show = options.strip !== false && list.length > 1;
+    strip.hidden = !show;
+    dialog.toggleAttribute('data-mk-strip', show);
+    ringShown = false;
+    if (!show) return strip.replaceChildren();
+    strip.replaceChildren(
+      ring,
+      ...list.map((picture, i) => {
+        const thumb = document.createElement('button');
+        thumb.type = 'button';
+        thumb.dataset.mkLightboxThumb = String(i);
+        thumb.setAttribute('aria-label', `${labels.picture} ${i + 1} de ${list.length}`);
+        const small = thumbImg(picture);
+        const img = document.createElement('img');
+        img.src = (small instanceof HTMLImageElement ? small.getAttribute('src') || small.currentSrc : '') || picture.src;
+        img.alt = '';
+        img.draggable = false;
+        thumb.append(img);
+        return thumb;
+      }),
+    );
+  };
+  const paintStrip = () => {
+    if (strip.hidden) return;
+    const thumbs = [...strip.querySelectorAll<HTMLElement>('[data-mk-lightbox-thumb]')];
+    thumbs.forEach((thumb, i) => (i === index ? thumb.setAttribute('aria-current', 'true') : thumb.removeAttribute('aria-current')));
+    const active = thumbs[index];
+    if (!active) return;
+    const box = { x: active.offsetLeft, y: active.offsetTop, width: active.offsetWidth, height: active.offsetHeight };
+    if (!ringShown || reduced()) gsap.set(ring, box);
+    else keep(gsap.to(ring, { ...box, duration: 0.35, ease: EASE.swatch }));
+    ringShown = true;
+    // A long strip keeps the current thumbnail in its middle (the page behind never scrolls).
+    if (typeof strip.scrollTo === 'function') strip.scrollTo({ left: active.offsetLeft + active.offsetWidth / 2 - strip.clientWidth / 2, behavior: reduced() ? 'auto' : 'smooth' });
+  };
+
+  /** Transform that puts the big image over the thumbnail. */
+  const fromThumb = (picture: Picture) => {
+    const small = thumbImg(picture)!.getBoundingClientRect();
+    const big = image.getBoundingClientRect();
+    if (!small.width || !big.width) return null;
+    const radius = parseFloat(getComputedStyle(thumbImg(picture)!).borderRadius) || 0;
+    return {
+      x: small.left + small.width / 2 - (big.left + big.width / 2),
+      y: small.top + small.height / 2 - (big.top + big.height / 2),
+      scaleX: small.width / big.width,
+      scaleY: small.height / big.height,
+      borderRadius: radius / (small.width / big.width),
+    };
+  };
+
+  const unzoom = () => {
+    zoomed = false;
+    dialog.removeAttribute('data-mk-zoomed');
+    keep(gsap.to(image, { scale: 1, x: 0, y: 0, duration: reduced() ? 0 : 0.4, ease: EASE.signature }));
+  };
+
+  const open = (at = 0) => {
+    if (scope.disposed) return;
+    list = pictures();
+    if (!list.length) return;
+    const target = Math.max(0, Math.min(list.length - 1, Math.round(at)));
+    if (isOpen) return go(target);
+    isOpen = true;
+    index = target;
+    counter.textContent = '';
+    buildStrip();
+    write(target);
+    if (typeof dialog.showModal === 'function') dialog.showModal();
+    else dialog.setAttribute('open', '');
+    paintStrip();
+    close.focus({ preventScroll: true });
+    const picture = list[target]!;
+    options.onOpenChange?.(true);
+    root.dispatchEvent(new CustomEvent('mk:open', { bubbles: true, detail: { index } }));
+    if (reduced()) return;
+    keep(gsap.fromTo(backdrop, { opacity: 0 }, { opacity: 1, duration: 0.4, ease: 'power2.out', clearProps: 'opacity' }));
+    keep(gsap.fromTo([prev, next, close, counter, caption, strip], { opacity: 0 }, { opacity: 1, duration: 0.3, delay: 0.3, clearProps: 'opacity' }));
+    const grow = () => {
+      const start = fromThumb(picture);
+      if (!start) return void keep(gsap.fromTo(image, { opacity: 0, scale: 0.92 }, { opacity: 1, scale: 1, duration: 0.35, ease: EASE.pop, clearProps: 'opacity,scale,transform' }));
+      thumbImg(picture)!.style.visibility = 'hidden';
+      keep(gsap.fromTo(image, start, { x: 0, y: 0, scaleX: 1, scaleY: 1, borderRadius: 24, duration: 0.7, ease: EASE.signature, clearProps: 'transform,borderRadius', onComplete: () => {
+        thumbImg(picture)?.style.removeProperty('visibility');
+      } }));
+    };
+    if (image.complete && image.naturalWidth) grow();
+    else image.addEventListener('load', grow, { once: true });
+  };
+
+  const finish = () => {
+    if (dialog.open) dialog.close();
+    gsap.set([image, backdrop], { clearProps: 'all' });
+    const picture = list[index];
+    if (picture) thumbImg(picture)?.style.removeProperty('visibility');
+    isOpen = false;
+    zoomed = false;
+    dialog.removeAttribute('data-mk-zoomed');
+    options.onOpenChange?.(false);
+    root.dispatchEvent(new CustomEvent('mk:close', { bubbles: true, detail: { index } }));
+    picture?.thumb.focus({ preventScroll: true });
+  };
+
+  const shut = () => {
+    if (!isOpen) return;
+    const picture = list[index];
+    if (reduced() || !picture) return finish();
+    gsap.killTweensOf(image);
+    gsap.set(image, { scale: 1, x: 0, y: 0 });
+    const end = fromThumb(picture);
+    keep(gsap.to(backdrop, { opacity: 0, duration: 0.35, ease: 'power2.in' }));
+    keep(gsap.to([prev, next, close, counter, caption, strip], { opacity: 0, duration: 0.15 }));
+    if (!end) return void keep(gsap.to(image, { opacity: 0, scale: 0.92, duration: 0.25, ease: 'power2.in', onComplete: finish }));
+    thumbImg(picture)!.style.visibility = 'hidden';
+    keep(gsap.to(image, { ...end, duration: 0.5, ease: EASE.signature, onComplete: () => {
+      gsap.set([prev, next, close, counter, caption, strip], { clearProps: 'opacity' });
+      finish();
+    } }));
+  };
+
+  function go(to: number) {
+    if (!isOpen || list.length < 2) return;
+    let target = to;
+    if (loop) target = (to + list.length) % list.length;
+    else if (to < 0 || to >= list.length) return;
+    if (target === index) return;
+    const direction = to > index ? 1 : -1;
+    if (zoomed) unzoom();
+    const before = index;
+    index = target;
+    options.onChange?.(index);
+    root!.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { index, previous: before } }));
+    if (reduced()) {
+      write(target);
+      paintStrip();
+      return;
+    }
+    gsap.killTweensOf(image);
+    ghost?.remove();
+    // The picture that leaves is a copy over the old one (where a swipe left it), so the new one can come in at once.
+    const leaving = image.cloneNode() as HTMLImageElement;
+    leaving.dataset.mkLightbox = 'ghost';
+    leaving.alt = '';
+    leaving.setAttribute('aria-hidden', 'true');
+    Object.assign(leaving.style, { position: 'absolute', left: `${image.offsetLeft}px`, top: `${image.offsetTop}px`, width: `${image.offsetWidth}px`, height: `${image.offsetHeight}px`, margin: '0' });
+    stage.append(leaving);
+    ghost = leaving;
+    write(target);
+    paintStrip();
+    gsap.set(image, { opacity: 0, x: 0, y: 0 });
+    keep(gsap.to(leaving, { xPercent: -28 * direction, scale: 0.86, opacity: 0, filter: 'blur(10px)', duration: 0.45, ease: EASE.signature, onComplete: () => {
+      leaving.remove();
+      if (ghost === leaving) ghost = null;
+    } }));
+    const enter = () => {
+      if (!isOpen || index !== target) return;
+      keep(gsap.fromTo(image, { xPercent: 24 * direction, scale: 1.04, opacity: 0, filter: 'blur(10px)' }, { xPercent: 0, scale: 1, opacity: 1, filter: 'blur(0px)', duration: 0.5, ease: EASE.signature, clearProps: 'transform,opacity,filter' }));
+    };
+    // The new picture enters decoded (never blank), waiting at most 250 ms for it.
+    const decoded = typeof image.decode === 'function' ? image.decode().catch(() => undefined) : Promise.resolve();
+    if (image.complete && image.naturalWidth) enter();
+    else void Promise.race([decoded, new Promise((done) => setTimeout(done, 250))]).then(enter);
+  }
+  let ghost: HTMLImageElement | null = null;
+  scope.add(() => ghost?.remove());
+  scope.on(strip, 'click', (event) => {
+    const thumb = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-lightbox-thumb]');
+    if (thumb) go(Number(thumb.dataset.mkLightboxThumb));
+  });
+
+  scope.on(root, 'click', (event) => {
+    const thumb = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-image]');
+    if (!thumb || !root.contains(thumb) || dialog.contains(thumb)) return;
+    event.preventDefault();
+    open(pictures().findIndex((picture) => picture.thumb === thumb));
+  });
+  scope.on(root, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    const thumb = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-image]');
+    if (thumb && !dialog.contains(thumb) && (key === 'Enter' || key === ' ') && !thumb.matches('button, a[href]')) {
+      event.preventDefault();
+      open(pictures().findIndex((picture) => picture.thumb === thumb));
+    }
+  });
+  scope.on(dialog, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    if (key === 'ArrowRight') go(index + 1);
+    else if (key === 'ArrowLeft') go(index - 1);
+    else return;
+    event.preventDefault();
+  });
+  scope.on(dialog, 'cancel', (event) => {
+    event.preventDefault();
+    shut();
+  });
+  scope.on(close, 'click', shut);
+  scope.on(prev, 'click', () => go(index - 1));
+  scope.on(next, 'click', () => go(index + 1));
+  scope.on(backdrop, 'click', shut);
+
+  // Double click / tap zooms where you point; drag pans the zoom, swipes, or drags down to close.
+  scope.on(image, 'dblclick', (event) => {
+    const mouse = event as MouseEvent;
+    if (zoomed) return unzoom();
+    const box = image.getBoundingClientRect();
+    zoomed = true;
+    dialog.setAttribute('data-mk-zoomed', '');
+    const x = (box.left + box.width / 2 - mouse.clientX) || 0;
+    const y = (box.top + box.height / 2 - mouse.clientY) || 0;
+    keep(gsap.to(image, { scale: 2, x, y, duration: reduced() ? 0 : 0.45, ease: EASE.signature }));
+  });
+  let drag: { x: number; y: number; startX: number; startY: number; id: number } | null = null;
+  scope.on(image, 'pointerdown', (event) => {
+    const pointer = event as PointerEvent;
+    if (pointer.button !== 0) return;
+    drag = { x: pointer.clientX, y: pointer.clientY, startX: Number(gsap.getProperty(image, 'x')) || 0, startY: Number(gsap.getProperty(image, 'y')) || 0, id: pointer.pointerId };
+    image.setPointerCapture?.(pointer.pointerId);
+  });
+  scope.on(image, 'pointermove', (event) => {
+    const pointer = event as PointerEvent;
+    if (!drag || pointer.pointerId !== drag.id) return;
+    const dx = pointer.clientX - drag.x;
+    const dy = pointer.clientY - drag.y;
+    if (zoomed) gsap.set(image, { x: drag.startX + dx, y: drag.startY + dy });
+    else if (!reduced()) {
+      gsap.set(image, { x: dx * 0.6, y: Math.max(0, dy) });
+      gsap.set(backdrop, { opacity: 1 - Math.min(0.6, Math.max(0, dy) / 400) });
+    }
+  });
+  const release = (event: Event) => {
+    const pointer = event as PointerEvent;
+    if (!drag || pointer.pointerId !== drag.id) return;
+    const dx = pointer.clientX - drag.x;
+    const dy = pointer.clientY - drag.y;
+    drag = null;
+    if (zoomed) return;
+    if (dy > 120) return shut();
+    if (Math.abs(dx) > 70 && Math.abs(dx) > Math.abs(dy)) return go(index + (dx < 0 ? 1 : -1));
+    if (!reduced()) {
+      keep(gsap.to(image, { x: 0, y: 0, duration: 0.45, ease: EASE.swatch, clearProps: 'transform' }));
+      keep(gsap.to(backdrop, { opacity: 1, duration: 0.3, clearProps: 'opacity' }));
+    }
+  };
+  scope.on(image, 'pointerup', release);
+  scope.on(image, 'pointercancel', release);
+
+  return {
+    open,
+    close: shut,
+    next: () => go(index + 1),
+    prev: () => go(index - 1),
+    get isOpen() {
+      return isOpen;
+    },
+    get index() {
+      return index;
+    },
+    destroy: () => scope.dispose(),
+  };
+}