zoooom 1.0.0

package/dist/index.js

@@ -0,0 +1,770 @@
+// 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;
+
+// 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
+};
+var Zoooom = class {
+  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/index.ts
+var src_default = Zoooom;
+
+export { Zoooom, src_default as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map