@hoangyell/gallery 1.0.8 → 1.1.0

package/README.md

@@ -28,7 +28,7 @@
 
 - **Pyramid layout** — distribute images across rows with `rows` prop
 - **Two fit modes** — `cover` (default, uniform photo grid) or `contain` (natural aspect, for diagrams and tall portraits)
-- **Lightbox** — click to open, keyboard arrows, swipe, ESC to close
+- **Lightbox & pinch-to-zoom** — click to open, smooth multi-touch pinch-to-zoom & pan, double-tap zoom, mouse wheel, keyboard navigation (`+`, `-`, `0`, arrows, ESC)
 - **Corner rounding** — only the four outer corners of each group are rounded
 - **Hover zoom** — image scales inside its cell without changing layout
 - **Accessible** — focus management, ARIA labels, safe-area controls, reduced-motion support
@@ -81,6 +81,8 @@ import { Gallery } from "@hoangyell/gallery";
 | `orientation` | `"landscape" \| "portrait"` | `"landscape"` | Item aspect ratio hint |
 | `scale` | `number` | `1` | Gallery width scale (0–1) |
 | `fit` | `ObjectFit` | `"cover"` | Default CSS object-fit — see Fit modes below |
+| `zoom` | `boolean` | `true` | Enable pinch-to-zoom, pan, double-tap, and wheel zoom |
+| `zoomControls` | `boolean` | `false` | Show visible zoom in / zoom out / reset buttons in lightbox |
 | `class` | `string` | — | Extra wrapper class |
 
 ## Fit modes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoangyell/gallery",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Astro image gallery with lightbox, pyramid multi-row layout, and accessible controls.",
   "license": "MIT",
   "type": "module",

package/src/Gallery.astro

@@ -29,6 +29,10 @@ export interface Props {
   scale?: number;
   /** Global object-fit for all items unless overridden per-item. */
   fit?: ObjectFit;
+  /** Enable zoom gestures (pinch, double-tap, pan, wheel) in lightbox. Defaults to true. */
+  zoom?: boolean;
+  /** Show visible zoom in/out/reset buttons in the lightbox toolbar. Defaults to false. */
+  zoomControls?: boolean;
 }
 
 const {
@@ -37,6 +41,8 @@ const {
   orientation = "landscape",
   scale = 1,
   fit = "cover",
+  zoom = true,
+  zoomControls = false,
 } = Astro.props;
 
 const rawItems = Array.isArray(Astro.props.items) ? Astro.props.items : [];
@@ -101,6 +107,8 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       data-hy-gallery
       data-orientation={orientation}
       data-fit={fit}
+      data-zoom={zoom ? "true" : "false"}
+      data-zoom-controls={zoomControls ? "true" : "false"}
       style={scale !== 1 ? `width: ${scale * 100}%; margin: 2rem auto;` : undefined}
     >
       {groupedItems.map((group, rowIdx) => {
@@ -340,6 +348,9 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     opacity: 0;
     transition: opacity 0.3s ease;
     cursor: zoom-out;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
   }
 
   :global(.hy-gallery-overlay.is-active) {
@@ -353,6 +364,8 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: visible;
+    touch-action: none;
   }
 
   :global(.hy-gallery-overlay-img) {
@@ -362,15 +375,22 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     border-radius: 0.5rem;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     border: 1px solid var(--hy-gallery-border);
-    cursor: default;
+    cursor: zoom-in;
     user-select: none;
-    transform: scale(0.92);
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+    touch-action: none;
+    transform-origin: center center;
+    will-change: transform;
     transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-    will-change: transform, opacity;
   }
 
-  :global(.hy-gallery-overlay.is-active .hy-gallery-overlay-img) {
-    transform: scale(1);
+  :global(.hy-gallery-overlay-img.is-zoomed) {
+    cursor: grab;
+  }
+
+  :global(.hy-gallery-overlay-img.is-dragging) {
+    cursor: grabbing !important;
   }
 
   :global(.hy-gallery-slide-anim) {
@@ -412,10 +432,18 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     backdrop-filter: blur(4px);
   }
 
-  :global(.hy-gallery-close) {
+  :global(.hy-gallery-controls) {
     position: absolute;
     top: max(env(safe-area-inset-top, 0px), 16px);
     right: max(env(safe-area-inset-right, 0px), 16px);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    z-index: 10;
+  }
+
+  :global(.hy-gallery-btn),
+  :global(.hy-gallery-close) {
     width: 2.5rem;
     height: 2.5rem;
     display: flex;
@@ -426,10 +454,41 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     background: var(--hy-gallery-control-bg);
     color: var(--hy-gallery-text);
     cursor: pointer;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
     z-index: 10;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(4px);
+    padding: 0;
+  }
+
+  :global(.hy-gallery-btn:hover),
+  :global(.hy-gallery-btn:focus-visible),
+  :global(.hy-gallery-close:hover),
+  :global(.hy-gallery-close:focus-visible) {
+    transform: scale(1.08);
+    color: var(--hy-gallery-accent);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.hy-gallery-btn:disabled),
+  :global(.hy-gallery-btn[aria-disabled="true"]) {
+    opacity: 0.35;
+    cursor: not-allowed;
+    transform: none !important;
+    pointer-events: none;
+  }
+
+  :global(.hy-gallery-btn:focus),
+  :global(.hy-gallery-close:focus),
+  :global(.hy-gallery-nav:focus) {
+    outline: none;
+  }
+
+  :global(.hy-gallery-btn:focus-visible),
+  :global(.hy-gallery-close:focus-visible),
+  :global(.hy-gallery-nav:focus-visible) {
+    outline: 2px solid var(--hy-gallery-accent);
+    outline-offset: 2px;
   }
 
   :global(.hy-gallery-nav) {
@@ -460,24 +519,34 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     right: max(env(safe-area-inset-right, 0px), 16px);
   }
 
-  :global(.hy-gallery-close:hover),
   :global(.hy-gallery-nav:hover),
-  :global(.hy-gallery-close:focus-visible),
   :global(.hy-gallery-nav:focus-visible) {
-    transform: scale(1.1);
+    transform: translateY(-50%) scale(1.1);
     color: var(--hy-gallery-accent);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   }
 
-  :global(.hy-gallery-nav:hover),
-  :global(.hy-gallery-nav:focus-visible) {
-    transform: translateY(-50%) scale(1.1);
-  }
-
   @media (max-width: 639px) {
+    :global(.hy-gallery-controls) {
+      top: max(env(safe-area-inset-top, 0px), 8px);
+      right: max(env(safe-area-inset-right, 0px), 8px);
+      gap: 6px;
+    }
+    :global(.hy-gallery-counter) {
+      top: max(env(safe-area-inset-top, 0px), 8px);
+      left: max(env(safe-area-inset-left, 0px), 8px);
+      width: 2.25rem;
+      height: 2.25rem;
+      font-size: 0.625rem;
+    }
+    :global(.hy-gallery-btn),
+    :global(.hy-gallery-close) {
+      width: 2.25rem;
+      height: 2.25rem;
+    }
     :global(.hy-gallery-nav) {
-      width: 2.5rem;
-      height: 2.5rem;
+      width: 2.25rem;
+      height: 2.25rem;
     }
     :global(.hy-gallery-nav-prev) {
       left: max(env(safe-area-inset-left, 0px), 8px);
@@ -497,9 +566,43 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     counterEl: HTMLElement | null;
     prevBtn: HTMLButtonElement | null;
     nextBtn: HTMLButtonElement | null;
+    zoomControls: HTMLElement | null;
+    zoomInBtn: HTMLButtonElement | null;
+    zoomOutBtn: HTMLButtonElement | null;
+    zoomResetBtn: HTMLButtonElement | null;
+    closeBtn: HTMLButtonElement | null;
     currentIndex: number;
+    zoomEnabled: boolean;
+    zoomControlsEnabled: boolean;
+
+    // Zoom & pan state
+    scale: number;
+    translateX: number;
+    translateY: number;
+
+    // Touch tracking
     touchStartX: number;
     touchStartY: number;
+    touchLastX: number;
+    touchLastY: number;
+    isPinching: boolean;
+    isDragging: boolean;
+    pinchStartDist: number;
+    pinchStartScale: number;
+    pinchStartCenter: { x: number; y: number };
+    pinchStartTranslate: { x: number; y: number };
+    lastTapTime: number;
+
+    // Mouse tracking
+    isMouseDown: boolean;
+    mouseStartX: number;
+    mouseStartY: number;
+    mouseLastX: number;
+    mouseLastY: number;
+    hasMouseDragged: boolean;
+    isAnimating: boolean;
+
+    // Body scroll lock state
     lockedScrollY: number;
     previousBodyOverflow: string;
     previousBodyPosition: string;
@@ -510,6 +613,8 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
 
     constructor(el: HTMLElement) {
       this.gallery = el;
+      this.zoomEnabled = el.dataset.zoom !== "false";
+      this.zoomControlsEnabled = el.dataset.zoomControls === "true";
       this.items = Array.from(
         el.querySelectorAll<HTMLButtonElement>(".hy-gallery-item"),
       );
@@ -518,9 +623,37 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       this.counterEl = null;
       this.prevBtn = null;
       this.nextBtn = null;
+      this.zoomControls = null;
+      this.zoomInBtn = null;
+      this.zoomOutBtn = null;
+      this.zoomResetBtn = null;
+      this.closeBtn = null;
       this.currentIndex = -1;
+
+      this.scale = 1;
+      this.translateX = 0;
+      this.translateY = 0;
+
       this.touchStartX = 0;
       this.touchStartY = 0;
+      this.touchLastX = 0;
+      this.touchLastY = 0;
+      this.isPinching = false;
+      this.isDragging = false;
+      this.pinchStartDist = 0;
+      this.pinchStartScale = 1;
+      this.pinchStartCenter = { x: 0, y: 0 };
+      this.pinchStartTranslate = { x: 0, y: 0 };
+      this.lastTapTime = 0;
+
+      this.isMouseDown = false;
+      this.mouseStartX = 0;
+      this.mouseStartY = 0;
+      this.mouseLastX = 0;
+      this.mouseLastY = 0;
+      this.hasMouseDragged = false;
+      this.isAnimating = false;
+
       this.lockedScrollY = -1;
       this.previousBodyOverflow = "";
       this.previousBodyPosition = "";
@@ -544,15 +677,173 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       });
     };
 
+    getContentCenter = () => {
+      return {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2,
+      };
+    };
+
+    applyTransform = (withTransition = false) => {
+      if (!this.imgEl) return;
+      if (withTransition) {
+        this.imgEl.style.transition =
+          "transform 0.28s cubic-bezier(0.16, 1, 0.3, 1)";
+      } else {
+        this.imgEl.style.transition = "none";
+      }
+      this.imgEl.style.transform = `translate3d(${this.translateX}px, ${this.translateY}px, 0px) scale(${this.scale})`;
+    };
+
+    animateTo = (targetScale: number, targetTx: number, targetTy: number) => {
+      this.scale = targetScale;
+      this.translateX = targetTx;
+      this.translateY = targetTy;
+      this.isAnimating = true;
+      this.applyTransform(true);
+      this.updateZoomUI();
+      window.setTimeout(() => {
+        this.isAnimating = false;
+        if (this.imgEl && !this.isPinching && !this.isMouseDown) {
+          this.imgEl.style.transition = "";
+        }
+      }, 300);
+    };
+
+    resetZoom = (animated = false) => {
+      if (animated) {
+        this.animateTo(1, 0, 0);
+      } else {
+        this.scale = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.applyTransform(false);
+        this.updateZoomUI();
+      }
+    };
+
+    clampToBounds = (animate = false) => {
+      if (!this.imgEl) return;
+      if (this.scale <= 1.01) {
+        if (animate) {
+          this.animateTo(1, 0, 0);
+        } else {
+          this.resetZoom(false);
+        }
+        return;
+      }
+
+      const baseW = this.imgEl.offsetWidth || this.imgEl.naturalWidth || 800;
+      const baseH = this.imgEl.offsetHeight || this.imgEl.naturalHeight || 600;
+      const scaledW = baseW * this.scale;
+      const scaledH = baseH * this.scale;
+
+      const vpW = window.innerWidth;
+      const vpH = window.innerHeight;
+
+      const maxTx = Math.max(0, (scaledW - vpW) / 2 + 24);
+      const maxTy = Math.max(0, (scaledH - vpH) / 2 + 24);
+
+      const clampedTx = Math.min(maxTx, Math.max(-maxTx, this.translateX));
+      const clampedTy = Math.min(maxTy, Math.max(-maxTy, this.translateY));
+
+      if (animate) {
+        this.animateTo(this.scale, clampedTx, clampedTy);
+      } else {
+        this.translateX = clampedTx;
+        this.translateY = clampedTy;
+        this.applyTransform(false);
+        this.updateZoomUI();
+      }
+    };
+
+    zoomBy = (factor: number) => {
+      if (!this.zoomEnabled) return;
+      const newScale = Math.min(5.0, Math.max(1.0, this.scale * factor));
+      if (newScale <= 1.01) {
+        this.resetZoom(true);
+        return;
+      }
+      const ratio = newScale / this.scale;
+      this.scale = newScale;
+      this.translateX = this.translateX * ratio;
+      this.translateY = this.translateY * ratio;
+      this.clampToBounds(true);
+    };
+
+    panBy = (dx: number, dy: number) => {
+      this.translateX += dx;
+      this.translateY += dy;
+      this.clampToBounds(true);
+    };
+
+    handleDoubleTap = (clientX: number, clientY: number) => {
+      if (!this.zoomEnabled) return;
+      if (this.scale > 1.15) {
+        this.resetZoom(true);
+      } else {
+        const targetScale = 2.5;
+        const center = this.getContentCenter();
+        const targetTx = clientX - center.x - targetScale * (clientX - center.x);
+        const targetTy = clientY - center.y - targetScale * (clientY - center.y);
+        this.scale = targetScale;
+        this.translateX = targetTx;
+        this.translateY = targetTy;
+        this.clampToBounds(true);
+      }
+    };
+
+    updateZoomUI = () => {
+      if (!this.zoomEnabled) return;
+      if (this.zoomOutBtn) {
+        const disabled = this.scale <= 1.01;
+        this.zoomOutBtn.disabled = disabled;
+        this.zoomOutBtn.setAttribute("aria-disabled", disabled ? "true" : "false");
+      }
+      if (this.zoomInBtn) {
+        const disabled = this.scale >= 4.95;
+        this.zoomInBtn.disabled = disabled;
+        this.zoomInBtn.setAttribute("aria-disabled", disabled ? "true" : "false");
+      }
+      if (this.zoomResetBtn) {
+        const isZoomed = this.scale > 1.01;
+        this.zoomResetBtn.disabled = !isZoomed;
+        this.zoomResetBtn.setAttribute("aria-disabled", !isZoomed ? "true" : "false");
+        const title = isZoomed
+          ? `Reset zoom (${Math.round(this.scale * 100)}%)`
+          : "Reset zoom";
+        this.zoomResetBtn.title = title;
+        this.zoomResetBtn.setAttribute("aria-label", title);
+      }
+      if (this.imgEl) {
+        if (this.scale > 1.01) {
+          this.imgEl.classList.add("is-zoomed");
+          this.imgEl.style.cursor = this.isMouseDown ? "grabbing" : "grab";
+        } else {
+          this.imgEl.classList.remove("is-zoomed", "is-dragging");
+          this.imgEl.style.cursor = "zoom-in";
+        }
+      }
+    };
+
     forceClose = () => {
       if (this.overlay) {
+        window.removeEventListener("mousemove", this.handleMouseMove);
+        window.removeEventListener("mouseup", this.handleMouseUp);
+        window.removeEventListener("resize", this.handleResize);
+        document.removeEventListener("keydown", this.handleKey);
+        document.removeEventListener("gesturestart", this.preventZoom);
+
         this.overlay.remove();
         this.overlay = null;
         this.imgEl = null;
         this.counterEl = null;
+        this.zoomControls = null;
+        this.zoomInBtn = null;
+        this.zoomOutBtn = null;
+        this.zoomResetBtn = null;
+        this.closeBtn = null;
 
-        document.removeEventListener("keydown", this.handleKey);
-        document.removeEventListener("gesturestart", this.preventZoom);
         const main = document.querySelector("main");
         if (main) main.removeAttribute("inert");
       }
@@ -570,6 +861,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
 
       this.imgEl.src = src;
       this.imgEl.alt = alt;
+      this.resetZoom(false);
       this.updateCounter();
       this.updateNavButtons();
       this.preload(index + 1);
@@ -599,16 +891,70 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       this.overlay.setAttribute("aria-modal", "true");
       this.overlay.setAttribute("aria-label", "Image viewer");
 
-      const closeBtn = document.createElement("button");
-      closeBtn.className = "hy-gallery-close";
-      closeBtn.setAttribute("aria-label", "Close");
-      closeBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
-      closeBtn.addEventListener("click", this.close);
+      // Counter (top left)
+      this.counterEl = document.createElement("div");
+      this.counterEl.className = "hy-gallery-counter";
+      this.counterEl.setAttribute("aria-hidden", "true");
+
+      // Controls (top right)
+      this.zoomControls = document.createElement("div");
+      this.zoomControls.className = "hy-gallery-controls";
+
+      if (this.zoomEnabled && this.zoomControlsEnabled) {
+        this.zoomOutBtn = document.createElement("button");
+        this.zoomOutBtn.className = "hy-gallery-btn hy-gallery-zoom-out";
+        this.zoomOutBtn.setAttribute("type", "button");
+        this.zoomOutBtn.setAttribute("aria-label", "Zoom out");
+        this.zoomOutBtn.title = "Zoom out (-)";
+        this.zoomOutBtn.disabled = true;
+        this.zoomOutBtn.setAttribute("aria-disabled", "true");
+        this.zoomOutBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>`;
+        this.zoomOutBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.zoomBy(1 / 1.5);
+        });
+
+        this.zoomInBtn = document.createElement("button");
+        this.zoomInBtn.className = "hy-gallery-btn hy-gallery-zoom-in";
+        this.zoomInBtn.setAttribute("type", "button");
+        this.zoomInBtn.setAttribute("aria-label", "Zoom in");
+        this.zoomInBtn.title = "Zoom in (+)";
+        this.zoomInBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>`;
+        this.zoomInBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.zoomBy(1.5);
+        });
+
+        this.zoomResetBtn = document.createElement("button");
+        this.zoomResetBtn.className = "hy-gallery-btn hy-gallery-zoom-reset";
+        this.zoomResetBtn.setAttribute("type", "button");
+        this.zoomResetBtn.setAttribute("aria-label", "Reset zoom");
+        this.zoomResetBtn.title = "Reset zoom (0)";
+        this.zoomResetBtn.disabled = true;
+        this.zoomResetBtn.setAttribute("aria-disabled", "true");
+        this.zoomResetBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>`;
+        this.zoomResetBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.resetZoom(true);
+        });
+
+        this.zoomControls.append(this.zoomOutBtn, this.zoomInBtn, this.zoomResetBtn);
+      }
+
+      this.closeBtn = document.createElement("button");
+      this.closeBtn.className = "hy-gallery-close";
+      this.closeBtn.setAttribute("type", "button");
+      this.closeBtn.setAttribute("aria-label", "Close");
+      this.closeBtn.title = "Close (ESC)";
+      this.closeBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+      this.closeBtn.addEventListener("click", this.close);
+      this.zoomControls.appendChild(this.closeBtn);
 
       this.prevBtn = document.createElement("button");
       this.prevBtn.className = "hy-gallery-nav hy-gallery-nav-prev";
+      this.prevBtn.setAttribute("type", "button");
       this.prevBtn.setAttribute("aria-label", "Previous image");
-      this.prevBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>`;
+      this.prevBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>`;
       this.prevBtn.addEventListener("click", (e) => {
         e.stopPropagation();
         this.navigate(-1);
@@ -616,8 +962,9 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
 
       this.nextBtn = document.createElement("button");
       this.nextBtn.className = "hy-gallery-nav hy-gallery-nav-next";
+      this.nextBtn.setAttribute("type", "button");
       this.nextBtn.setAttribute("aria-label", "Next image");
-      this.nextBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
+      this.nextBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>`;
       this.nextBtn.addEventListener("click", (e) => {
         e.stopPropagation();
         this.navigate(1);
@@ -630,12 +977,14 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       this.imgEl.className = "hy-gallery-overlay-img";
       this.imgEl.setAttribute("decoding", "sync");
 
-      this.counterEl = document.createElement("div");
-      this.counterEl.className = "hy-gallery-counter";
-      this.counterEl.setAttribute("aria-hidden", "true");
-
       content.appendChild(this.imgEl);
-      this.overlay.append(closeBtn, this.prevBtn, this.nextBtn, content, this.counterEl);
+      this.overlay.append(
+        this.counterEl,
+        this.zoomControls,
+        this.prevBtn,
+        this.nextBtn,
+        content,
+      );
 
       if (this.items.length <= 1) {
         this.prevBtn.style.display = "none";
@@ -644,12 +993,24 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       }
 
       this.overlay.addEventListener("click", this.handleOverlayClick);
+      this.overlay.addEventListener("wheel", this.handleWheel, { passive: false });
       this.overlay.addEventListener("touchstart", this.handleTouchStart, {
-        passive: true,
+        passive: false,
+      });
+      this.overlay.addEventListener("touchmove", this.handleTouchMove, {
+        passive: false,
       });
       this.overlay.addEventListener("touchend", this.handleTouchEnd, {
-        passive: true,
+        passive: false,
+      });
+      this.overlay.addEventListener("touchcancel", this.handleTouchEnd, {
+        passive: false,
       });
+      this.overlay.addEventListener("mousedown", this.handleMouseDown);
+      this.overlay.addEventListener("dblclick", this.handleDblClick);
+      window.addEventListener("mousemove", this.handleMouseMove);
+      window.addEventListener("mouseup", this.handleMouseUp);
+      window.addEventListener("resize", this.handleResize);
       document.addEventListener("keydown", this.handleKey);
     };
 
@@ -657,20 +1018,31 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       if (!this.overlay) return;
 
       this.overlay.classList.remove("is-active");
+      this.resetZoom(true);
 
       setTimeout(() => {
-        this.overlay?.parentNode?.removeChild(this.overlay);
-        this.overlay = null;
-        this.imgEl = null;
-        this.counterEl = null;
+        if (this.overlay) {
+          window.removeEventListener("mousemove", this.handleMouseMove);
+          window.removeEventListener("mouseup", this.handleMouseUp);
+          window.removeEventListener("resize", this.handleResize);
+          document.removeEventListener("keydown", this.handleKey);
+          document.removeEventListener("gesturestart", this.preventZoom);
+
+          this.overlay.parentNode?.removeChild(this.overlay);
+          this.overlay = null;
+          this.imgEl = null;
+          this.counterEl = null;
+          this.zoomControls = null;
+          this.zoomInBtn = null;
+          this.zoomOutBtn = null;
+          this.zoomResetBtn = null;
+          this.closeBtn = null;
+        }
 
         this.unlockBackgroundScroll();
         const main = document.querySelector("main");
         if (main) main.removeAttribute("inert");
 
-        document.removeEventListener("keydown", this.handleKey);
-        document.removeEventListener("gesturestart", this.preventZoom);
-
         if (this.currentIndex >= 0 && this.currentIndex < this.items.length) {
           this.items[this.currentIndex].focus();
         }
@@ -720,6 +1092,8 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       const content = this.overlay?.querySelector(".hy-gallery-overlay-content");
       if (!content || !this.imgEl) return;
 
+      this.resetZoom(false);
+
       const oldImg = this.imgEl;
       this.imgEl = document.createElement("img");
       this.imgEl.className = "hy-gallery-overlay-img hy-gallery-slide-anim";
@@ -733,8 +1107,17 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
 
       content.replaceChild(this.imgEl, oldImg);
 
+      this.imgEl.addEventListener(
+        "animationend",
+        () => {
+          this.imgEl?.classList.remove("hy-gallery-slide-anim");
+        },
+        { once: true },
+      );
+
       this.updateCounter();
       this.updateNavButtons();
+      this.updateZoomUI();
       this.preload(next + dir);
     };
 
@@ -759,6 +1142,10 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     };
 
     handleOverlayClick = (e: MouseEvent) => {
+      if (this.hasMouseDragged) {
+        this.hasMouseDragged = false;
+        return;
+      }
       const target = e.target as HTMLElement;
       if (
         target.classList.contains("hy-gallery-overlay") ||
@@ -769,22 +1156,270 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     };
 
     handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") this.close();
-      else if (e.key === "ArrowLeft") this.navigate(-1);
-      else if (e.key === "ArrowRight") this.navigate(1);
+      if (e.key === "Escape") {
+        if (this.scale > 1.05) {
+          this.resetZoom(true);
+        } else {
+          this.close();
+        }
+      } else if (e.key === "+" || e.key === "=") {
+        this.zoomBy(1.3);
+      } else if (e.key === "-" || e.key === "_") {
+        this.zoomBy(1 / 1.3);
+      } else if (e.key === "0") {
+        this.resetZoom(true);
+      } else if (e.key === "ArrowLeft") {
+        if (this.scale > 1.05) {
+          this.panBy(60, 0);
+        } else {
+          this.navigate(-1);
+        }
+      } else if (e.key === "ArrowRight") {
+        if (this.scale > 1.05) {
+          this.panBy(-60, 0);
+        } else {
+          this.navigate(1);
+        }
+      } else if (e.key === "ArrowUp" && this.scale > 1.05) {
+        this.panBy(0, 60);
+      } else if (e.key === "ArrowDown" && this.scale > 1.05) {
+        this.panBy(0, -60);
+      }
     };
 
     handleTouchStart = (e: TouchEvent) => {
-      this.touchStartX = e.changedTouches[0].screenX;
-      this.touchStartY = e.changedTouches[0].screenY;
+      const target = e.target as HTMLElement;
+      if (target.closest(".hy-gallery-btn, .hy-gallery-close, .hy-gallery-nav")) {
+        return;
+      }
+
+      if (e.touches.length === 1) {
+        this.touchStartX = e.touches[0].clientX;
+        this.touchStartY = e.touches[0].clientY;
+        this.touchLastX = e.touches[0].clientX;
+        this.touchLastY = e.touches[0].clientY;
+        this.isDragging = false;
+        this.isPinching = false;
+      } else if (e.touches.length === 2 && this.zoomEnabled) {
+        this.isPinching = true;
+        this.isDragging = false;
+        const t1 = e.touches[0];
+        const t2 = e.touches[1];
+        this.pinchStartDist = Math.hypot(
+          t2.clientX - t1.clientX,
+          t2.clientY - t1.clientY,
+        );
+        this.pinchStartScale = this.scale;
+        this.pinchStartCenter = {
+          x: (t1.clientX + t2.clientX) / 2,
+          y: (t1.clientY + t2.clientY) / 2,
+        };
+        this.pinchStartTranslate = { x: this.translateX, y: this.translateY };
+        this.applyTransform(false);
+      }
+    };
+
+    handleTouchMove = (e: TouchEvent) => {
+      if (this.isPinching && e.touches.length >= 2) {
+        e.preventDefault();
+        const t1 = e.touches[0];
+        const t2 = e.touches[1];
+        const currDist = Math.hypot(
+          t2.clientX - t1.clientX,
+          t2.clientY - t1.clientY,
+        );
+        const ratio = currDist / (this.pinchStartDist || 1);
+        const rawScale = this.pinchStartScale * ratio;
+        const clampedScale = Math.min(5.5, Math.max(0.75, rawScale));
+
+        const currCenter = {
+          x: (t1.clientX + t2.clientX) / 2,
+          y: (t1.clientY + t2.clientY) / 2,
+        };
+        const center = this.getContentCenter();
+
+        const T_x =
+          currCenter.x -
+          center.x -
+          (clampedScale / this.pinchStartScale) *
+            (this.pinchStartCenter.x - center.x - this.pinchStartTranslate.x);
+        const T_y =
+          currCenter.y -
+          center.y -
+          (clampedScale / this.pinchStartScale) *
+            (this.pinchStartCenter.y - center.y - this.pinchStartTranslate.y);
+
+        this.scale = clampedScale;
+        this.translateX = T_x;
+        this.translateY = T_y;
+        this.applyTransform(false);
+        this.updateZoomUI();
+      } else if (!this.isPinching && e.touches.length === 1) {
+        const touch = e.touches[0];
+        if (this.scale > 1.01) {
+          e.preventDefault();
+          const dx = touch.clientX - this.touchLastX;
+          const dy = touch.clientY - this.touchLastY;
+          this.touchLastX = touch.clientX;
+          this.touchLastY = touch.clientY;
+          this.translateX += dx;
+          this.translateY += dy;
+          this.isDragging = true;
+          this.applyTransform(false);
+        }
+      }
     };
 
     handleTouchEnd = (e: TouchEvent) => {
-      const diffX = e.changedTouches[0].screenX - this.touchStartX;
-      const diffY = e.changedTouches[0].screenY - this.touchStartY;
-      if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
-        if (diffX > 0) this.navigate(-1);
-        else this.navigate(1);
+      if (this.isPinching) {
+        if (e.touches.length < 2) {
+          this.isPinching = false;
+          if (e.touches.length === 1) {
+            this.touchLastX = e.touches[0].clientX;
+            this.touchLastY = e.touches[0].clientY;
+            this.touchStartX = e.touches[0].clientX;
+            this.touchStartY = e.touches[0].clientY;
+          }
+          if (this.scale < 1.0) {
+            this.resetZoom(true);
+          } else if (this.scale > 5.0) {
+            this.scale = 5.0;
+            this.clampToBounds(true);
+          } else {
+            this.clampToBounds(true);
+          }
+        }
+        return;
+      }
+
+      if (e.changedTouches.length === 1) {
+        const touch = e.changedTouches[0];
+        const tapDist = Math.hypot(
+          touch.clientX - this.touchStartX,
+          touch.clientY - this.touchStartY,
+        );
+
+        if (tapDist < 15 && !this.isDragging) {
+          const now = Date.now();
+          if (now - this.lastTapTime < 300) {
+            this.handleDoubleTap(touch.clientX, touch.clientY);
+            this.lastTapTime = 0;
+            return;
+          }
+          this.lastTapTime = now;
+        }
+
+        if (this.scale > 1.01) {
+          this.clampToBounds(true);
+        } else {
+          const diffX = touch.clientX - this.touchStartX;
+          const diffY = touch.clientY - this.touchStartY;
+          if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+            if (diffX > 0) this.navigate(-1);
+            else this.navigate(1);
+          }
+        }
+      }
+    };
+
+    handleWheel = (e: WheelEvent) => {
+      if (!this.overlay || !this.imgEl || !this.zoomEnabled) return;
+      e.preventDefault();
+      const isPinch = e.ctrlKey;
+      const factor = isPinch
+        ? Math.exp(-e.deltaY * 0.015)
+        : e.deltaY < 0
+          ? 1.2
+          : 0.833;
+
+      const targetScale = Math.min(5.0, Math.max(1.0, this.scale * factor));
+      if (Math.abs(targetScale - this.scale) < 0.001) return;
+
+      if (targetScale <= 1.01) {
+        this.resetZoom(true);
+        return;
+      }
+
+      const center = this.getContentCenter();
+      const T_x =
+        e.clientX -
+        center.x -
+        (targetScale / this.scale) * (e.clientX - center.x - this.translateX);
+      const T_y =
+        e.clientY -
+        center.y -
+        (targetScale / this.scale) * (e.clientY - center.y - this.translateY);
+
+      this.scale = targetScale;
+      this.translateX = T_x;
+      this.translateY = T_y;
+      this.clampToBounds(false);
+      this.updateZoomUI();
+    };
+
+    handleMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest(".hy-gallery-btn, .hy-gallery-close, .hy-gallery-nav")) {
+        return;
+      }
+      if (e.button !== 0) return;
+      if (this.scale <= 1.01) return;
+
+      this.isMouseDown = true;
+      this.mouseStartX = e.clientX;
+      this.mouseStartY = e.clientY;
+      this.mouseLastX = e.clientX;
+      this.mouseLastY = e.clientY;
+      this.hasMouseDragged = false;
+      if (this.imgEl) {
+        this.imgEl.classList.add("is-dragging");
+        this.imgEl.style.cursor = "grabbing";
+        this.imgEl.style.transition = "none";
+      }
+      e.preventDefault();
+    };
+
+    handleMouseMove = (e: MouseEvent) => {
+      if (!this.isMouseDown) return;
+      const dx = e.clientX - this.mouseLastX;
+      const dy = e.clientY - this.mouseLastY;
+      if (
+        Math.hypot(e.clientX - this.mouseStartX, e.clientY - this.mouseStartY) >
+        5
+      ) {
+        this.hasMouseDragged = true;
+      }
+      this.mouseLastX = e.clientX;
+      this.mouseLastY = e.clientY;
+      this.translateX += dx;
+      this.translateY += dy;
+      this.applyTransform(false);
+    };
+
+    handleMouseUp = () => {
+      if (!this.isMouseDown) return;
+      this.isMouseDown = false;
+      if (this.imgEl) {
+        this.imgEl.classList.remove("is-dragging");
+        this.imgEl.style.cursor = this.scale > 1.01 ? "grab" : "zoom-in";
+      }
+      this.clampToBounds(true);
+    };
+
+    handleDblClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest(".hy-gallery-btn, .hy-gallery-close, .hy-gallery-nav")) {
+        return;
+      }
+      if (!this.zoomEnabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.handleDoubleTap(e.clientX, e.clientY);
+    };
+
+    handleResize = () => {
+      if (this.scale > 1.01) {
+        this.clampToBounds(false);
       }
     };