zoooom 1.0.0

package/dist/zoooom-full.iife.global.js

@@ -0,0 +1,1272 @@
+var Zoooom = (function (exports) {
+  'use strict';
+
+  // src/core/constants.ts
+  var PAN_STEP = 50;
+  var ZOOM_FACTOR = 1.5;
+  var MIN_SCALE = 0.8;
+  var OVERSCALE_FACTOR = 2;
+  var VELOCITY_DAMPING = 0.85;
+  var TRACKPAD_SENSITIVITY = 2e-3;
+  var JOYSTICK_RADIUS = 60;
+  var JOYSTICK_DEADZONE = 0.1;
+  var MAX_JOYSTICK_SPEED = 10;
+  var DWELL_TIMEOUT = 100;
+
+  // src/core/transform.ts
+  function updateTransform(state, elements) {
+    if (!elements.image) return;
+    elements.image.style.transform = `translate(calc(-50% + ${state.translateX}px), calc(-50% + ${state.translateY}px)) scale(${state.scale})`;
+  }
+  function animateMovement(state, elements, onPan) {
+    if (state.reducedMotion) {
+      state.velocityX = 0;
+      state.velocityY = 0;
+      return;
+    }
+    state.isAnimating = true;
+    function step() {
+      state.translateX += state.velocityX;
+      state.translateY += state.velocityY;
+      state.velocityX *= VELOCITY_DAMPING;
+      state.velocityY *= VELOCITY_DAMPING;
+      updateTransform(state, elements);
+      onPan?.(state.translateX, state.translateY);
+      if (Math.abs(state.velocityX) > 0.1 || Math.abs(state.velocityY) > 0.1) {
+        requestAnimationFrame(step);
+      } else {
+        state.velocityX = 0;
+        state.velocityY = 0;
+        state.isAnimating = false;
+      }
+    }
+    requestAnimationFrame(step);
+  }
+  function centerImage(state, elements) {
+    if (!elements.container || !elements.image) return;
+    state.translateX = 0;
+    state.translateY = 0;
+    updateTransform(state, elements);
+  }
+  function resetView(state, elements) {
+    state.scale = 1;
+    state.translateX = 0;
+    state.translateY = 0;
+    state.velocityX = 0;
+    state.velocityY = 0;
+    updateTransform(state, elements);
+  }
+  function calculateMaxScale(elements, overscaleFactor = OVERSCALE_FACTOR) {
+    if (!elements.image) return 10;
+    const naturalWidth = elements.image.naturalWidth;
+    const naturalHeight = elements.image.naturalHeight;
+    const displayWidth = elements.image.clientWidth;
+    const displayHeight = elements.image.clientHeight;
+    if (!naturalWidth || !naturalHeight || !displayWidth || !displayHeight) return 10;
+    const widthRatio = naturalWidth / displayWidth;
+    const heightRatio = naturalHeight / displayHeight;
+    const maxScaleFactor = Math.max(widthRatio, heightRatio);
+    const mobileOverscale = window.innerWidth <= 768 ? overscaleFactor * 2 : overscaleFactor;
+    return Math.max(maxScaleFactor * mobileOverscale, MIN_SCALE);
+  }
+  function zoomTowardsPoint(state, elements, delta, pointX, pointY, onZoom) {
+    if (!elements.container || !elements.image) return;
+    const currentScale = state.scale;
+    const newScale = Math.max(MIN_SCALE, Math.min(state.scale * delta, state.maxScale));
+    if (newScale === currentScale) return;
+    const containerRect = elements.container.getBoundingClientRect();
+    const containerCenterX = containerRect.width / 2;
+    const containerCenterY = containerRect.height / 2;
+    const targetX = pointX ?? containerCenterX;
+    const targetY = pointY ?? containerCenterY;
+    const imageX = (targetX - containerCenterX - state.translateX) / currentScale;
+    const imageY = (targetY - containerCenterY - state.translateY) / currentScale;
+    state.translateX = targetX - containerCenterX - imageX * newScale;
+    state.translateY = targetY - containerCenterY - imageY * newScale;
+    if (!state.reducedMotion) {
+      elements.image.style.transition = "transform 0.2s ease-out";
+    }
+    state.scale = newScale;
+    updateTransform(state, elements);
+    onZoom?.(state.scale);
+    if (!state.reducedMotion) {
+      setTimeout(() => {
+        if (elements.image) {
+          elements.image.style.transition = "";
+        }
+      }, 200);
+    }
+  }
+
+  // src/core/loader.ts
+  function createLoadingOverlay(container, loading) {
+    if (loading === false) return null;
+    const overlay = document.createElement("div");
+    overlay.className = "zoooom-loading";
+    overlay.setAttribute("role", "status");
+    overlay.setAttribute("aria-label", "Loading image");
+    if (typeof loading === "string") {
+      overlay.innerHTML = loading;
+    } else {
+      overlay.innerHTML = `
+      <div class="zoooom-spinner"></div>
+      <div class="zoooom-loading-text">Loading...</div>
+    `;
+    }
+    container.appendChild(overlay);
+    return overlay;
+  }
+  function removeLoadingOverlay(elements) {
+    if (elements.loadingOverlay) {
+      elements.loadingOverlay.remove();
+      elements.loadingOverlay = null;
+    }
+  }
+  function loadImage(src, alt, state, elements, options, emit) {
+    state.scale = 1;
+    state.translateX = 0;
+    state.translateY = 0;
+    state.velocityX = 0;
+    state.velocityY = 0;
+    state.isLoaded = false;
+    removeLoadingOverlay(elements);
+    elements.loadingOverlay = createLoadingOverlay(elements.container, options.loading);
+    elements.image.style.opacity = "0";
+    elements.image.style.visibility = "hidden";
+    elements.image.setAttribute("aria-hidden", "true");
+    elements.image.setAttribute("alt", "");
+    const preloader = new Image();
+    preloader.onload = () => {
+      elements.image.src = preloader.src;
+      elements.image.onload = () => {
+        removeLoadingOverlay(elements);
+        elements.image.setAttribute("alt", alt);
+        elements.image.removeAttribute("aria-hidden");
+        if (state.reducedMotion) {
+          elements.image.style.opacity = "1";
+          elements.image.style.visibility = "visible";
+        } else {
+          setTimeout(() => {
+            elements.image.style.transition = "opacity 0.3s ease-in-out";
+            elements.image.style.opacity = "1";
+            elements.image.style.visibility = "visible";
+            setTimeout(() => {
+              elements.image.style.transition = "";
+            }, 300);
+          }, 50);
+        }
+        if (options.maxScale === "auto") {
+          state.maxScale = calculateMaxScale(elements, options.overscaleFactor);
+        }
+        centerImage(state, elements);
+        state.isLoaded = true;
+        emit("load");
+        options.onLoad?.();
+      };
+      elements.image.onerror = () => {
+        removeLoadingOverlay(elements);
+        const error = new Error(`Failed to load image: ${src}`);
+        emit("error", error);
+        options.onError?.(error);
+      };
+    };
+    preloader.onerror = () => {
+      removeLoadingOverlay(elements);
+      const error = new Error(`Failed to load image: ${src}`);
+      emit("error", error);
+      options.onError?.(error);
+    };
+    preloader.src = src;
+  }
+
+  // src/input/mouse.ts
+  function attachMouse(state, elements, onPan) {
+    const { container } = elements;
+    function handleMouseDown(e) {
+      if (e.button !== 0) return;
+      state.isDragging = true;
+      state.startX = e.clientX;
+      state.startY = e.clientY;
+      container.style.cursor = "grabbing";
+      e.preventDefault();
+    }
+    function handleMouseMove(e) {
+      if (!state.isDragging) return;
+      const dx = e.clientX - state.startX;
+      const dy = e.clientY - state.startY;
+      state.translateX += dx;
+      state.translateY += dy;
+      state.startX = e.clientX;
+      state.startY = e.clientY;
+      updateTransform(state, elements);
+      onPan?.(state.translateX, state.translateY);
+    }
+    function handleMouseUp() {
+      if (state.isDragging) {
+        state.isDragging = false;
+        container.style.cursor = "grab";
+      }
+    }
+    container.addEventListener("mousedown", handleMouseDown);
+    container.addEventListener("mousemove", handleMouseMove);
+    container.addEventListener("mouseup", handleMouseUp);
+    container.addEventListener("mouseleave", handleMouseUp);
+    return () => {
+      container.removeEventListener("mousedown", handleMouseDown);
+      container.removeEventListener("mousemove", handleMouseMove);
+      container.removeEventListener("mouseup", handleMouseUp);
+      container.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }
+
+  // src/input/touch.ts
+  function getDistance(e) {
+    const t1 = e.touches[0];
+    const t2 = e.touches[1];
+    const dx = t1.clientX - t2.clientX;
+    const dy = t1.clientY - t2.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+  function attachTouch(state, elements, overscaleFactor, onPan, onZoom) {
+    const { container } = elements;
+    function handleTouchStart(e) {
+      if (e.touches.length === 1) {
+        state.isDragging = true;
+        state.startX = e.touches[0].clientX;
+        state.startY = e.touches[0].clientY;
+        state.initialDistance = 0;
+      } else if (e.touches.length === 2) {
+        state.isDragging = false;
+        state.initialDistance = getDistance(e);
+        state.initialScale = state.scale;
+        state.initialTranslateX = state.translateX;
+        state.initialTranslateY = state.translateY;
+        const t1 = e.touches[0];
+        const t2 = e.touches[1];
+        const rect = container.getBoundingClientRect();
+        state.pinchCenter = {
+          x: (t1.clientX + t2.clientX) / 2 - rect.left,
+          y: (t1.clientY + t2.clientY) / 2 - rect.top
+        };
+      }
+    }
+    function handleTouchMove(e) {
+      e.preventDefault();
+      if (e.touches.length === 1 && state.isDragging) {
+        const dx = e.touches[0].clientX - state.startX;
+        const dy = e.touches[0].clientY - state.startY;
+        state.translateX += dx;
+        state.translateY += dy;
+        state.startX = e.touches[0].clientX;
+        state.startY = e.touches[0].clientY;
+        updateTransform(state, elements);
+        onPan?.(state.translateX, state.translateY);
+      } else if (e.touches.length === 2 && state.initialDistance > 0) {
+        const currentDistance = getDistance(e);
+        const scaleFactor = currentDistance / state.initialDistance;
+        const targetScale = state.initialScale * scaleFactor;
+        state.maxScale = calculateMaxScale(elements, overscaleFactor);
+        const newScale = Math.max(MIN_SCALE, Math.min(targetScale, state.maxScale));
+        if (newScale === state.scale) return;
+        const t1 = e.touches[0];
+        const t2 = e.touches[1];
+        const rect = container.getBoundingClientRect();
+        const currentPinchCenter = {
+          x: (t1.clientX + t2.clientX) / 2 - rect.left,
+          y: (t1.clientY + t2.clientY) / 2 - rect.top
+        };
+        const containerCenterX = rect.width / 2;
+        const containerCenterY = rect.height / 2;
+        const imageX = (state.pinchCenter.x - containerCenterX - state.initialTranslateX) / state.initialScale;
+        const imageY = (state.pinchCenter.y - containerCenterY - state.initialTranslateY) / state.initialScale;
+        state.translateX = currentPinchCenter.x - containerCenterX - imageX * newScale;
+        state.translateY = currentPinchCenter.y - containerCenterY - imageY * newScale;
+        state.scale = newScale;
+        updateTransform(state, elements);
+        onZoom?.(state.scale);
+        state.pinchCenter = currentPinchCenter;
+      }
+    }
+    function handleTouchEnd() {
+      state.isDragging = false;
+      state.initialDistance = 0;
+    }
+    container.addEventListener("touchstart", handleTouchStart, { passive: false });
+    container.addEventListener("touchmove", handleTouchMove, { passive: false });
+    container.addEventListener("touchend", handleTouchEnd);
+    container.addEventListener("touchcancel", handleTouchEnd);
+    return () => {
+      container.removeEventListener("touchstart", handleTouchStart);
+      container.removeEventListener("touchmove", handleTouchMove);
+      container.removeEventListener("touchend", handleTouchEnd);
+      container.removeEventListener("touchcancel", handleTouchEnd);
+    };
+  }
+
+  // src/input/wheel.ts
+  function attachWheel(state, elements, zoomFactor = ZOOM_FACTOR, trackpadSensitivity = TRACKPAD_SENSITIVITY, onZoom) {
+    const { container } = elements;
+    function handleWheel(e) {
+      e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      const pointX = e.clientX - rect.left;
+      const pointY = e.clientY - rect.top;
+      let zoomDelta;
+      if (e.ctrlKey) {
+        zoomDelta = e.deltaY < 0 ? zoomFactor : 1 / zoomFactor;
+      } else {
+        let normalizedDelta;
+        switch (e.deltaMode) {
+          case 1:
+            normalizedDelta = e.deltaY * 20;
+            break;
+          // LINE
+          case 2:
+            normalizedDelta = e.deltaY * 100;
+            break;
+          // PAGE
+          default:
+            normalizedDelta = e.deltaY;
+        }
+        if (Math.abs(normalizedDelta) < 40) {
+          zoomDelta = Math.exp(-normalizedDelta * trackpadSensitivity);
+        } else {
+          zoomDelta = normalizedDelta > 0 ? 1 / zoomFactor : zoomFactor;
+        }
+      }
+      container.classList.add("zoooom-scrolling");
+      if (state.wheelTimeout) clearTimeout(state.wheelTimeout);
+      state.wheelTimeout = setTimeout(() => {
+        container.classList.remove("zoooom-scrolling");
+      }, 200);
+      zoomTowardsPoint(state, elements, zoomDelta, pointX, pointY, onZoom);
+    }
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+      if (state.wheelTimeout) clearTimeout(state.wheelTimeout);
+    };
+  }
+
+  // src/input/keyboard.ts
+  function attachKeyboard(state, elements, panStep = PAN_STEP, zoomFactor = ZOOM_FACTOR, onPan, onZoom) {
+    const { container } = elements;
+    function handleKeyDown(e) {
+      let handled = true;
+      switch (e.key) {
+        case "ArrowLeft":
+          state.velocityX = panStep * 0.2;
+          animateMovement(state, elements, onPan);
+          break;
+        case "ArrowRight":
+          state.velocityX = -panStep * 0.2;
+          animateMovement(state, elements, onPan);
+          break;
+        case "ArrowUp":
+          state.velocityY = panStep * 0.2;
+          animateMovement(state, elements, onPan);
+          break;
+        case "ArrowDown":
+          state.velocityY = -panStep * 0.2;
+          animateMovement(state, elements, onPan);
+          break;
+        case "+":
+        case "=":
+          zoomTowardsPoint(state, elements, zoomFactor, void 0, void 0, onZoom);
+          break;
+        case "-":
+          zoomTowardsPoint(state, elements, 1 / zoomFactor, void 0, void 0, onZoom);
+          break;
+        case "r":
+        case "R":
+          resetView(state, elements);
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) e.preventDefault();
+    }
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+    };
+  }
+
+  // src/input/gesture.ts
+  function attachGesture(state, elements, onZoom) {
+    const { container } = elements;
+    if (!("ongesturestart" in window)) {
+      return () => {
+      };
+    }
+    function handleGestureStart(e) {
+      e.preventDefault();
+      state.scale;
+    }
+    function handleGestureChange(e) {
+      e.preventDefault();
+      const ge = e;
+      const rect = container.getBoundingClientRect();
+      const delta = ge.scale > 1 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
+      zoomTowardsPoint(state, elements, delta, rect.width / 2, rect.height / 2, onZoom);
+    }
+    function handleGestureEnd(e) {
+      e.preventDefault();
+    }
+    container.addEventListener("gesturestart", handleGestureStart, { passive: false });
+    container.addEventListener("gesturechange", handleGestureChange, { passive: false });
+    container.addEventListener("gestureend", handleGestureEnd, { passive: false });
+    return () => {
+      container.removeEventListener("gesturestart", handleGestureStart);
+      container.removeEventListener("gesturechange", handleGestureChange);
+      container.removeEventListener("gestureend", handleGestureEnd);
+    };
+  }
+
+  // src/styles/core.ts
+  var ZOOOOM_CSS = `
+[data-zoooom] {
+  --zoooom-bg: #000;
+  --zoooom-spinner-color: #2196f3;
+  --zoooom-spinner-track: rgba(255, 255, 255, 0.3);
+  --zoooom-spinner-size: 40px;
+  --zoooom-loading-bg: rgba(0, 0, 0, 0.85);
+  --zoooom-loading-radius: 10px;
+  --zoooom-cursor: grab;
+  --zoooom-cursor-active: grabbing;
+  --zoooom-transition-speed: 0.2s;
+  --zoooom-fade-speed: 0.3s;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--zoooom-bg);
+  overflow: hidden;
+  touch-action: none;
+  cursor: var(--zoooom-cursor);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-zoooom]:focus-visible {
+  outline: 2px solid var(--zoooom-spinner-color);
+  outline-offset: -2px;
+}
+
+[data-zoooom] .zoooom-image {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: none;
+}
+
+[data-zoooom] .zoooom-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--zoooom-loading-bg);
+  padding: 20px;
+  border-radius: var(--zoooom-loading-radius);
+  z-index: 10;
+  min-width: 120px;
+}
+
+[data-zoooom] .zoooom-spinner {
+  width: var(--zoooom-spinner-size);
+  height: var(--zoooom-spinner-size);
+  border: 4px solid var(--zoooom-spinner-track);
+  border-radius: 50%;
+  border-top-color: var(--zoooom-spinner-color);
+  animation: zoooom-spin 1s linear infinite;
+}
+
+[data-zoooom] .zoooom-loading-text {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #fff;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+@keyframes zoooom-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-zoooom] .zoooom-spinner {
+    animation: none;
+    border-top-color: var(--zoooom-spinner-track);
+    border-right-color: var(--zoooom-spinner-color);
+  }
+
+  [data-zoooom] .zoooom-image {
+    transition: none !important;
+  }
+}
+`;
+  var injected = false;
+  function injectCoreStyles() {
+    if (injected || typeof document === "undefined") return;
+    const style = document.createElement("style");
+    style.setAttribute("data-zoooom-core", "");
+    style.textContent = ZOOOOM_CSS;
+    document.head.appendChild(style);
+    injected = true;
+  }
+
+  // src/core/Zoooom.ts
+  var DEFAULTS = {
+    src: "",
+    alt: "Image",
+    minScale: MIN_SCALE,
+    maxScale: "auto",
+    overscaleFactor: OVERSCALE_FACTOR,
+    zoomFactor: ZOOM_FACTOR,
+    panStep: PAN_STEP,
+    velocityDamping: VELOCITY_DAMPING,
+    trackpadSensitivity: TRACKPAD_SENSITIVITY,
+    mouse: true,
+    touch: true,
+    wheel: true,
+    keyboard: true,
+    loading: true,
+    injectStyles: true,
+    respectReducedMotion: true
+  };
+  exports.default = class Zoooom {
+    constructor(container, options) {
+      this.cleanups = [];
+      this.listeners = /* @__PURE__ */ new Map();
+      this.resizeHandler = null;
+      this.options = { ...DEFAULTS, ...options };
+      if (this.options.injectStyles) {
+        injectCoreStyles();
+      }
+      const el = typeof container === "string" ? document.querySelector(container) : container;
+      if (!el) {
+        throw new Error(`Zoooom: container "${container}" not found`);
+      }
+      if (el.clientWidth === 0 || el.clientHeight === 0) {
+        console.warn("Zoooom: container has zero dimensions. The viewer needs explicit width/height.");
+      }
+      el.setAttribute("data-zoooom", "");
+      if (!el.hasAttribute("tabindex")) {
+        el.setAttribute("tabindex", "0");
+      }
+      el.setAttribute("role", "application");
+      el.setAttribute("aria-label", "Image viewer \u2014 use arrow keys to pan, +/- to zoom");
+      const img = document.createElement("img");
+      img.className = "zoooom-image";
+      img.setAttribute("draggable", "false");
+      el.appendChild(img);
+      this.elements = { container: el, image: img, loadingOverlay: null };
+      const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+      const reducedMotion = this.options.respectReducedMotion && motionQuery.matches;
+      this.state = {
+        scale: 1,
+        translateX: 0,
+        translateY: 0,
+        velocityX: 0,
+        velocityY: 0,
+        maxScale: typeof this.options.maxScale === "number" ? this.options.maxScale : 10,
+        isDragging: false,
+        isAnimating: false,
+        isLoaded: false,
+        startX: 0,
+        startY: 0,
+        initialDistance: 0,
+        initialScale: 1,
+        initialTranslateX: 0,
+        initialTranslateY: 0,
+        pinchCenter: { x: 0, y: 0 },
+        wheelTimeout: null,
+        reducedMotion
+      };
+      if (this.options.respectReducedMotion) {
+        motionQuery.addEventListener("change", (e) => {
+          this.state.reducedMotion = e.matches;
+        });
+      }
+      if (this.options.mouse) {
+        this.cleanups.push(attachMouse(this.state, this.elements, this.options.onPan));
+      }
+      if (this.options.touch) {
+        this.cleanups.push(attachTouch(
+          this.state,
+          this.elements,
+          this.options.overscaleFactor,
+          this.options.onPan,
+          this.options.onZoom
+        ));
+      }
+      if (this.options.wheel) {
+        this.cleanups.push(attachWheel(
+          this.state,
+          this.elements,
+          this.options.zoomFactor,
+          this.options.trackpadSensitivity,
+          this.options.onZoom
+        ));
+      }
+      if (this.options.keyboard) {
+        this.cleanups.push(attachKeyboard(
+          this.state,
+          this.elements,
+          this.options.panStep,
+          this.options.zoomFactor,
+          this.options.onPan,
+          this.options.onZoom
+        ));
+      }
+      this.cleanups.push(attachGesture(this.state, this.elements, this.options.onZoom));
+      this.resizeHandler = () => centerImage(this.state, this.elements);
+      window.addEventListener("resize", this.resizeHandler);
+      if (this.options.src) {
+        this.load(this.options.src, this.options.alt);
+      }
+    }
+    // --- Public state ---
+    get scale() {
+      return this.state.scale;
+    }
+    get translateX() {
+      return this.state.translateX;
+    }
+    get translateY() {
+      return this.state.translateY;
+    }
+    get isLoaded() {
+      return this.state.isLoaded;
+    }
+    // --- Public methods ---
+    zoomIn() {
+      zoomTowardsPoint(
+        this.state,
+        this.elements,
+        this.options.zoomFactor,
+        void 0,
+        void 0,
+        this.options.onZoom
+      );
+      this.emit("zoom", this.state.scale);
+    }
+    zoomOut() {
+      zoomTowardsPoint(
+        this.state,
+        this.elements,
+        1 / this.options.zoomFactor,
+        void 0,
+        void 0,
+        this.options.onZoom
+      );
+      this.emit("zoom", this.state.scale);
+    }
+    /** "Enhance." */
+    enhance() {
+      this.zoomIn();
+    }
+    zoomTo(scale) {
+      const delta = scale / this.state.scale;
+      zoomTowardsPoint(this.state, this.elements, delta, void 0, void 0, this.options.onZoom);
+      this.emit("zoom", this.state.scale);
+    }
+    zoomToPoint(scale, x, y) {
+      const delta = scale / this.state.scale;
+      zoomTowardsPoint(this.state, this.elements, delta, x, y, this.options.onZoom);
+      this.emit("zoom", this.state.scale);
+    }
+    panTo(x, y) {
+      this.state.translateX = x;
+      this.state.translateY = y;
+      updateTransform(this.state, this.elements);
+      this.options.onPan?.(x, y);
+      this.emit("pan", x, y);
+    }
+    panBy(dx, dy) {
+      this.state.translateX += dx;
+      this.state.translateY += dy;
+      updateTransform(this.state, this.elements);
+      this.options.onPan?.(this.state.translateX, this.state.translateY);
+      this.emit("pan", this.state.translateX, this.state.translateY);
+    }
+    reset() {
+      resetView(this.state, this.elements);
+      this.emit("reset");
+    }
+    center() {
+      centerImage(this.state, this.elements);
+    }
+    load(src, alt) {
+      loadImage(
+        src,
+        alt ?? this.options.alt,
+        this.state,
+        this.elements,
+        this.options,
+        this.emit.bind(this)
+      );
+    }
+    /**
+     * Apply velocity directly (used by joystick plugin).
+     * Sets velocity and lets the rAF loop handle movement.
+     */
+    applyVelocity(vx, vy) {
+      this.state.translateX += vx;
+      this.state.translateY += vy;
+      updateTransform(this.state, this.elements);
+    }
+    /** Get the internal state (for plugin access) */
+    getState() {
+      return this.state;
+    }
+    /** Get the managed elements (for plugin access) */
+    getElements() {
+      return this.elements;
+    }
+    // --- Events ---
+    on(event, handler) {
+      if (!this.listeners.has(event)) {
+        this.listeners.set(event, /* @__PURE__ */ new Set());
+      }
+      this.listeners.get(event).add(handler);
+    }
+    off(event, handler) {
+      this.listeners.get(event)?.delete(handler);
+    }
+    emit(event, ...args) {
+      this.listeners.get(event)?.forEach((fn) => fn(...args));
+    }
+    // --- Lifecycle ---
+    destroy() {
+      this.cleanups.forEach((fn) => fn());
+      this.cleanups = [];
+      if (this.resizeHandler) {
+        window.removeEventListener("resize", this.resizeHandler);
+        this.resizeHandler = null;
+      }
+      if (this.state.wheelTimeout) {
+        clearTimeout(this.state.wheelTimeout);
+      }
+      this.elements.image.remove();
+      if (this.elements.loadingOverlay) {
+        this.elements.loadingOverlay.remove();
+      }
+      this.elements.container.removeAttribute("data-zoooom");
+      this.elements.container.removeAttribute("role");
+      this.elements.container.removeAttribute("aria-label");
+      this.listeners.clear();
+      this.emit("destroy");
+    }
+  };
+
+  // src/joystick/dom.ts
+  function createJoystickDOM(container) {
+    const toggle = document.createElement("button");
+    toggle.className = "zoooom-joystick-toggle";
+    toggle.setAttribute("aria-label", "Toggle navigation joystick");
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.textContent = "\u2316";
+    container.appendChild(toggle);
+    const wrap = document.createElement("div");
+    wrap.className = "zoooom-joystick-wrap";
+    wrap.setAttribute("aria-hidden", "true");
+    const disc = document.createElement("div");
+    disc.className = "zoooom-disc";
+    disc.setAttribute("role", "slider");
+    disc.setAttribute("aria-label", "Pan navigation control");
+    disc.setAttribute("aria-valuenow", "0");
+    disc.setAttribute("aria-valuemin", "0");
+    disc.setAttribute("aria-valuemax", "1");
+    disc.setAttribute("aria-valuetext", "Center position \u2014 not moving");
+    disc.setAttribute("tabindex", "0");
+    const innerCircle = document.createElement("div");
+    innerCircle.className = "zoooom-inner-circle";
+    const zoomOut = document.createElement("div");
+    zoomOut.className = "zoooom-zoom-half zoooom-zoom-out";
+    zoomOut.setAttribute("role", "button");
+    zoomOut.setAttribute("aria-label", "Zoom out");
+    zoomOut.setAttribute("tabindex", "0");
+    zoomOut.textContent = "\u2212";
+    const zoomIn = document.createElement("div");
+    zoomIn.className = "zoooom-zoom-half zoooom-zoom-in";
+    zoomIn.setAttribute("role", "button");
+    zoomIn.setAttribute("aria-label", "Zoom in");
+    zoomIn.setAttribute("tabindex", "0");
+    zoomIn.textContent = "+";
+    innerCircle.appendChild(zoomOut);
+    innerCircle.appendChild(zoomIn);
+    const arrows = document.createElement("div");
+    arrows.className = "zoooom-arrows";
+    arrows.setAttribute("aria-hidden", "true");
+    for (const dir of ["n", "e", "s", "w"]) {
+      const arrow = document.createElement("div");
+      arrow.className = `zoooom-arrow zoooom-arrow-${dir}`;
+      arrows.appendChild(arrow);
+    }
+    disc.appendChild(innerCircle);
+    disc.appendChild(arrows);
+    wrap.appendChild(disc);
+    container.appendChild(wrap);
+    return { wrap, toggle, disc, innerCircle, zoomIn, zoomOut };
+  }
+  function destroyJoystickDOM(dom) {
+    dom.wrap.remove();
+    dom.toggle.remove();
+  }
+
+  // src/styles/joystick.ts
+  var JOYSTICK_CSS = `
+.zoooom-joystick-wrap {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  touch-action: none;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+}
+
+.zoooom-joystick-wrap.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.zoooom-joystick-toggle {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+  backdrop-filter: blur(4px);
+  transition: background 0.2s, box-shadow 0.2s;
+}
+
+.zoooom-joystick-toggle:hover {
+  background: rgba(0, 0, 0, 0.7);
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
+}
+
+.zoooom-joystick-toggle:focus-visible {
+  outline: 2px solid #2196f3;
+  outline-offset: 2px;
+}
+
+.zoooom-disc {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.4);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.zoooom-disc.active {
+  border-color: rgba(255, 255, 255, 0.9);
+}
+
+.zoooom-inner-circle {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  display: flex;
+  position: relative;
+  z-index: 3;
+}
+
+.zoooom-zoom-half {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 22px;
+  color: #fff;
+  user-select: none;
+  transition: background 0.15s;
+}
+
+.zoooom-zoom-half:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.zoooom-zoom-out {
+  border-radius: 36px 0 0 36px;
+  border-right: 1px solid rgba(255, 255, 255, 0.4);
+}
+
+.zoooom-zoom-in {
+  border-radius: 0 36px 36px 0;
+}
+
+.zoooom-arrows {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.zoooom-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.zoooom-arrow-n {
+  top: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 14px solid rgba(255, 255, 255, 0.7);
+}
+
+.zoooom-arrow-e {
+  top: 50%;
+  right: 14px;
+  transform: translateY(-50%);
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 14px solid rgba(255, 255, 255, 0.7);
+}
+
+.zoooom-arrow-s {
+  bottom: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 14px solid rgba(255, 255, 255, 0.7);
+}
+
+.zoooom-arrow-w {
+  top: 50%;
+  left: 14px;
+  transform: translateY(-50%);
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 14px solid rgba(255, 255, 255, 0.7);
+}
+
+.zoooom-disc.north .zoooom-arrow-n,
+.zoooom-disc.south .zoooom-arrow-s,
+.zoooom-disc.east .zoooom-arrow-e,
+.zoooom-disc.west .zoooom-arrow-w,
+.zoooom-disc.north-east .zoooom-arrow-n,
+.zoooom-disc.north-east .zoooom-arrow-e,
+.zoooom-disc.south-east .zoooom-arrow-s,
+.zoooom-disc.south-east .zoooom-arrow-e,
+.zoooom-disc.south-west .zoooom-arrow-s,
+.zoooom-disc.south-west .zoooom-arrow-w,
+.zoooom-disc.north-west .zoooom-arrow-n,
+.zoooom-disc.north-west .zoooom-arrow-w {
+  opacity: 1;
+}
+
+@media (max-width: 768px) {
+  .zoooom-disc {
+    width: 140px;
+    height: 140px;
+  }
+
+  .zoooom-inner-circle {
+    width: 56px;
+    height: 56px;
+  }
+
+  .zoooom-joystick-toggle {
+    width: 48px;
+    height: 48px;
+    font-size: 16px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zoooom-joystick-wrap {
+    transition: none;
+  }
+
+  .zoooom-arrow {
+    transition: none;
+  }
+}
+`;
+  var injected2 = false;
+  function injectJoystickStyles() {
+    if (injected2 || typeof document === "undefined") return;
+    const style = document.createElement("style");
+    style.setAttribute("data-zoooom-joystick", "");
+    style.textContent = JOYSTICK_CSS;
+    document.head.appendChild(style);
+    injected2 = true;
+  }
+
+  // src/joystick/joystick.ts
+  function angleToDirection(angle) {
+    if (angle >= -22.5 && angle < 22.5) return "east";
+    if (angle >= 22.5 && angle < 67.5) return "south-east";
+    if (angle >= 67.5 && angle < 112.5) return "south";
+    if (angle >= 112.5 && angle < 157.5) return "south-west";
+    if (angle >= 157.5 || angle < -157.5) return "west";
+    if (angle >= -157.5 && angle < -112.5) return "north-west";
+    if (angle >= -112.5 && angle < -67.5) return "north";
+    return "north-east";
+  }
+  exports.ZoooomJoystick = class ZoooomJoystick {
+    constructor(viewer, options) {
+      this.visible = false;
+      this.active = false;
+      this.animationId = null;
+      this.joystickX = 0;
+      this.joystickY = 0;
+      this.currentDirection = "";
+      this.dwellTimer = null;
+      this.isDwelling = false;
+      this.hideTimer = null;
+      this.viewer = viewer;
+      this.options = {
+        radius: options?.radius ?? JOYSTICK_RADIUS,
+        deadzone: options?.deadzone ?? JOYSTICK_DEADZONE,
+        maxSpeed: options?.maxSpeed ?? MAX_JOYSTICK_SPEED,
+        position: options?.position ?? "bottom-center",
+        showToggle: options?.showToggle ?? true,
+        dwellTimeout: options?.dwellTimeout ?? DWELL_TIMEOUT
+      };
+      injectJoystickStyles();
+      const elements = this.viewer.getElements();
+      this.dom = createJoystickDOM(elements.container);
+      this.bindEvents();
+    }
+    show() {
+      this.visible = true;
+      this.dom.wrap.classList.add("visible");
+      this.dom.wrap.setAttribute("aria-hidden", "false");
+      this.dom.toggle.setAttribute("aria-expanded", "true");
+      if (this.hideTimer) clearTimeout(this.hideTimer);
+    }
+    hide() {
+      this.visible = false;
+      this.dom.wrap.classList.remove("visible");
+      this.dom.wrap.setAttribute("aria-hidden", "true");
+      this.dom.toggle.setAttribute("aria-expanded", "false");
+      this.stopMovement();
+      this.clearDirection();
+    }
+    destroy() {
+      this.hide();
+      this.stopMovement();
+      if (this.dwellTimer) clearTimeout(this.dwellTimer);
+      if (this.hideTimer) clearTimeout(this.hideTimer);
+      destroyJoystickDOM(this.dom);
+    }
+    bindEvents() {
+      const { toggle, disc, zoomIn, zoomOut, innerCircle } = this.dom;
+      toggle.addEventListener("click", () => {
+        if (this.visible) this.hide();
+        else this.show();
+      });
+      toggle.addEventListener("mouseenter", () => this.show());
+      toggle.addEventListener("mouseleave", () => {
+        this.hideTimer = setTimeout(() => this.hide(), 15e3);
+      });
+      disc.addEventListener("mousemove", (e) => {
+        if (e.target !== disc) return;
+        if (!this.isDwelling) {
+          this.startDwell(e);
+        } else {
+          this.handleMove(e);
+        }
+      });
+      disc.addEventListener("mousedown", (e) => {
+        if (e.target !== disc) return;
+        e.preventDefault();
+        this.handleMove(e);
+        const moveHandler = (me) => this.handleMove(me);
+        document.addEventListener("mousemove", moveHandler);
+        document.addEventListener("mouseup", () => {
+          document.removeEventListener("mousemove", moveHandler);
+          this.stopDwell();
+          this.resetJoystick();
+        }, { once: true });
+      });
+      disc.addEventListener("mouseleave", () => {
+        this.stopDwell();
+        this.resetJoystick();
+      });
+      disc.addEventListener("touchstart", (e) => {
+        if (e.target !== disc) return;
+        e.preventDefault();
+        this.handleMove(e);
+        const moveHandler = (te) => this.handleMove(te);
+        document.addEventListener("touchmove", moveHandler, { passive: false });
+        document.addEventListener("touchend", () => {
+          document.removeEventListener("touchmove", moveHandler);
+          this.stopDwell();
+          this.resetJoystick();
+        }, { once: true });
+      }, { passive: false });
+      zoomIn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.viewer.zoomIn();
+      });
+      zoomOut.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.viewer.zoomOut();
+      });
+      innerCircle.addEventListener("mouseenter", () => {
+        this.stopDwell();
+        this.resetJoystick();
+      });
+      innerCircle.addEventListener("mousedown", (e) => e.stopPropagation());
+      innerCircle.addEventListener("touchstart", (e) => e.stopPropagation(), { passive: false });
+    }
+    handleMove(event) {
+      if (!this.visible) return;
+      const clientX = "clientX" in event ? event.clientX : event.touches[0]?.clientX ?? 0;
+      const clientY = "clientY" in event ? event.clientY : event.touches[0]?.clientY ?? 0;
+      const rect = this.dom.disc.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+      const distX = clientX - centerX;
+      const distY = clientY - centerY;
+      const distance = Math.sqrt(distX * distX + distY * distY);
+      let normalizedX = distX / this.options.radius;
+      let normalizedY = distY / this.options.radius;
+      if (distance > this.options.radius) {
+        normalizedX = normalizedX * (this.options.radius / distance);
+        normalizedY = normalizedY * (this.options.radius / distance);
+      }
+      if (Math.abs(normalizedX) < this.options.deadzone) normalizedX = 0;
+      if (Math.abs(normalizedY) < this.options.deadzone) normalizedY = 0;
+      this.joystickX = normalizedX;
+      this.joystickY = normalizedY;
+      if (distance > this.options.radius * this.options.deadzone) {
+        const angle = Math.atan2(distY, distX) * 180 / Math.PI;
+        const dir = angleToDirection(angle);
+        if (dir !== this.currentDirection) {
+          this.clearDirection();
+          this.dom.disc.classList.add(dir);
+          this.currentDirection = dir;
+        }
+      } else {
+        this.clearDirection();
+      }
+      if (!this.animationId && (Math.abs(normalizedX) > this.options.deadzone || Math.abs(normalizedY) > this.options.deadzone)) {
+        this.active = true;
+        this.dom.disc.classList.add("active");
+        this.startMovement();
+        this.updateAria(normalizedX, normalizedY);
+      } else if (Math.abs(normalizedX) <= this.options.deadzone && Math.abs(normalizedY) <= this.options.deadzone) {
+        this.active = false;
+        this.dom.disc.classList.remove("active");
+        this.stopMovement();
+        this.dom.disc.setAttribute("aria-valuenow", "0");
+        this.dom.disc.setAttribute("aria-valuetext", "Center position \u2014 not moving");
+      }
+    }
+    startDwell(e) {
+      if (this.dwellTimer) clearTimeout(this.dwellTimer);
+      this.dwellTimer = setTimeout(() => {
+        this.isDwelling = true;
+        this.handleMove(e);
+      }, this.options.dwellTimeout);
+    }
+    stopDwell() {
+      if (this.dwellTimer) {
+        clearTimeout(this.dwellTimer);
+        this.dwellTimer = null;
+      }
+      this.isDwelling = false;
+    }
+    startMovement() {
+      if (this.animationId) return;
+      const step = () => {
+        if (!this.active) {
+          this.stopMovement();
+          return;
+        }
+        const vx = -this.joystickX * this.options.maxSpeed;
+        const vy = -this.joystickY * this.options.maxSpeed;
+        this.viewer.applyVelocity(vx, vy);
+        this.animationId = requestAnimationFrame(step);
+      };
+      this.animationId = requestAnimationFrame(step);
+    }
+    stopMovement() {
+      if (this.animationId) {
+        cancelAnimationFrame(this.animationId);
+        this.animationId = null;
+      }
+    }
+    resetJoystick() {
+      this.joystickX = 0;
+      this.joystickY = 0;
+      this.active = false;
+      this.stopMovement();
+      this.clearDirection();
+      this.dom.disc.classList.remove("active");
+    }
+    clearDirection() {
+      if (this.currentDirection) {
+        this.dom.disc.classList.remove(this.currentDirection);
+        this.currentDirection = "";
+      }
+    }
+    updateAria(x, y) {
+      const magnitude = Math.sqrt(x * x + y * y);
+      this.dom.disc.setAttribute("aria-valuenow", magnitude.toFixed(2));
+      let direction;
+      if (Math.abs(x) > Math.abs(y)) {
+        direction = x > 0 ? "right" : "left";
+      } else {
+        direction = y > 0 ? "down" : "up";
+      }
+      const intensity = magnitude > 0.7 ? "fast" : magnitude > 0.3 ? "medium" : "slow";
+      this.dom.disc.setAttribute("aria-valuetext", `Moving ${intensity} ${direction}`);
+    }
+  };
+  exports.ZoooomJoystick = exports.default.ZoooomJoystick; exports.default = exports.default.default;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+  return exports;
+
+})({});
+//# sourceMappingURL=zoooom-full.iife.global.js.map
+//# sourceMappingURL=zoooom-full.iife.global.js.map