vistaview 0.6.6 → 0.7.1

package/dist/vistaview.js

@@ -1,27 +1,27 @@
-var W = Object.defineProperty;
-var A = (s, t, e) => t in s ? W(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var l = (s, t, e) => A(s, typeof t != "symbol" ? t + "" : t, e);
-function $(s) {
+var F = Object.defineProperty;
+var A = (s, t, e) => t in s ? F(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var h = (s, t, e) => A(s, typeof t != "symbol" ? t + "" : t, e);
+function S(s) {
   return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
 }
-function F(s) {
-  const e = window.getComputedStyle(s).objectFit || "", { width: i, height: n } = s.getBoundingClientRect(), o = s.naturalWidth, a = s.naturalHeight;
+function z(s) {
+  const e = window.getComputedStyle(s).objectFit || "", { width: i, height: n } = s.getBoundingClientRect(), o = s.naturalWidth, r = s.naturalHeight;
   if (!e)
     return { width: i, height: n };
-  if (!o || !a)
+  if (!o || !r)
     return { width: i, height: n };
-  const r = o / a, h = i / n;
+  const a = o / r, l = i / n;
   switch (e) {
     case "fill":
       return { width: i, height: n };
     case "none":
-      return { width: o, height: a };
+      return { width: o, height: r };
     case "contain":
-      return r > h ? { width: i, height: i / r } : { width: n * r, height: n };
+      return a > l ? { width: i, height: i / a } : { width: n * a, height: n };
     case "cover":
-      return r < h ? { width: i, height: i / r } : { width: n * r, height: n };
+      return a < l ? { width: i, height: i / a } : { width: n * a, height: n };
     case "scale-down": {
-      const c = { width: o, height: a }, m = r > h ? { width: i, height: i / r } : { width: n * r, height: n };
+      const c = { width: o, height: r }, m = a > l ? { width: i, height: i / a } : { width: n * a, height: n };
       return m.width <= c.width && m.height <= c.height ? m : c;
     }
   }
@@ -42,8 +42,8 @@ function D(s) {
     naturalHeight: s.naturalHeight
   };
 }
-function P(s) {
-  const t = s.imageElm ? D(s.imageElm) : null, e = s.anchorElm ? D(s.anchorElm) : null, i = $(t == null ? void 0 : t.borderRadius), n = e && $(e == null ? void 0 : e.borderRadius), o = (n ? e == null ? void 0 : e.borderRadius : i ? t == null ? void 0 : t.borderRadius : "") || "";
+function k(s) {
+  const t = s.imageElm ? D(s.imageElm) : null, e = s.anchorElm ? D(s.anchorElm) : null, i = S(t == null ? void 0 : t.borderRadius), n = e && S(e == null ? void 0 : e.borderRadius), o = (n ? e == null ? void 0 : e.borderRadius : i ? t == null ? void 0 : t.borderRadius : "") || "";
   return {
     fit: (t == null ? void 0 : t.objectFit) || (e == null ? void 0 : e.objectFit) || "",
     pos: (t == null ? void 0 : t.objectPosition) || "",
@@ -57,25 +57,25 @@ function P(s) {
     left: (e == null ? void 0 : e.left) || (t == null ? void 0 : t.left) || 0
   };
 }
-function H(s, t, e, i = !1) {
+function W(s, t, e, i = !1) {
   const {
     fit: n,
     w: o,
-    h: a,
+    h: r,
     // this ones makes things hard. not used.
     // pos,
     // overflow,
-    nw: r,
-    nh: h,
+    nw: a,
+    nh: l,
     br: c,
     top: m,
-    left: w
-  } = P(s), b = Math.min(Math.max(w, -o), window.innerWidth + o) - window.innerWidth / 2 + o / 2, p = Math.min(Math.max(m, -a), window.innerHeight + a) - window.innerHeight / 2 + a / 2, d = e.style;
-  d.width = `${o}px`, d.height = `${a}px`, d.objectFit = n, e.width = r, e.height = h, d.setProperty("--vvw-init-radius", `${c}`), d.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), d.setProperty("--vvw-init-x", `${b}px`), d.setProperty("--vvw-init-y", `${p}px`), i && (d.setProperty("--vvw-current-x", `${b}px`), d.setProperty("--vvw-current-y", `${p}px`));
-  const v = F(s.imageElm), g = Math.min(o, v.width), f = Math.min(a, v.height), u = t.style;
-  u.setProperty("--vvw-init-radius", `${c}`), u.setProperty("--vvw-init-w", `${g}px`), u.setProperty("--vvw-init-h", `${f}px`), i && (u.setProperty("--vvw-current-radius", `${c}`), u.setProperty("--vvw-current-w", `${g}px`), u.setProperty("--vvw-current-h", `${f}px`), t.dataset.vvwWidth = g.toString(), t.dataset.vvwHeight = f.toString());
+    left: p
+  } = k(s), L = Math.min(Math.max(p, -o), window.innerWidth + o) - window.innerWidth / 2 + o / 2, g = Math.min(Math.max(m, -r), window.innerHeight + r) - window.innerHeight / 2 + r / 2, d = e.style;
+  d.width = `${o}px`, d.height = `${r}px`, d.objectFit = n, e.width = a, e.height = l, d.setProperty("--vvw-init-radius", `${c}`), d.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), d.setProperty("--vvw-init-x", `${L}px`), d.setProperty("--vvw-init-y", `${g}px`), i && (d.setProperty("--vvw-current-x", `${L}px`), d.setProperty("--vvw-current-y", `${g}px`));
+  const u = z(s.imageElm), y = Math.min(o, u.width), f = Math.min(r, u.height), v = t.style;
+  v.setProperty("--vvw-init-radius", `${c}`), v.setProperty("--vvw-init-w", `${y}px`), v.setProperty("--vvw-init-h", `${f}px`), i && (v.setProperty("--vvw-current-radius", `${c}`), v.setProperty("--vvw-current-w", `${y}px`), v.setProperty("--vvw-current-h", `${f}px`), t.dataset.vvwWidth = y.toString(), t.dataset.vvwHeight = f.toString());
 }
-function S(s) {
+function M(s) {
   const t = window.innerWidth, e = window.innerHeight, i = s.naturalWidth, n = s.naturalHeight;
   if (!i || !n)
     throw new Error("Image natural dimensions are zero");
@@ -84,26 +84,26 @@ function S(s) {
       width: i,
       height: n
     };
-  const o = i / n, a = t / e;
-  let r, h;
-  return o > a ? (r = t, h = t / o) : (h = e, r = e * o), {
-    width: r,
-    height: h
+  const o = i / n, r = t / e;
+  let a, l;
+  return o > r ? (a = t, l = t / o) : (l = e, a = e * o), {
+    width: a,
+    height: l
   };
 }
-function z(s, t, e) {
+function q(s, t, e) {
   return Math.min(Math.max(s, t), e);
 }
 function C(s, t = 2) {
   const e = Math.pow(10, t);
   return Math.round(s * e) / e;
 }
-const k = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', q = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', R = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', O = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', Z = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', Y = '<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';
-let I = null;
-function X() {
-  return I || (window.trustedTypes || (window.trustedTypes = {
+const R = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', O = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', Z = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', X = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', N = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', Y = '<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';
+let $ = null;
+function B() {
+  return $ || (window.trustedTypes || (window.trustedTypes = {
     createPolicy: (s, t) => t
-  }), I = window.trustedTypes.createPolicy("vistaView-policy", {
+  }), $ = window.trustedTypes.createPolicy("vistaView-policy", {
     createHTML: (s) => s,
     // HTML is generated by us, not user input
     createScript: () => {
@@ -112,15 +112,15 @@ function X() {
     createScriptURL: () => {
       throw new Error("Not implemented");
     }
-  }), I);
+  }), $);
 }
-function M(s) {
-  const e = X().createHTML(s), i = document.createElement("template");
+function P(s) {
+  const e = B().createHTML(s), i = document.createElement("template");
   i.innerHTML = e;
   const n = i.content;
   return i.remove(), n;
 }
-function N() {
+function j() {
   return {
     name: "download",
     icon: Y,
@@ -131,15 +131,15 @@ function N() {
     }
   };
 }
-function B(s) {
+function V(s) {
   if (typeof s == "string")
     switch (s) {
       case "zoomIn":
-        return `<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${R}</button>`;
+        return `<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${Z}</button>`;
       case "zoomOut":
-        return `<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${O}</button>`;
+        return `<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${X}</button>`;
       case "close":
-        return `<button aria-label="Close" class="vvw-close vvw-ui">${Z}</button>`;
+        return `<button aria-label="Close" class="vvw-close vvw-ui">${N}</button>`;
       case "indexDisplay":
         return '<div class="vvw-index vvw-ui" aria-hidden="true"></div>';
       case "description":
@@ -149,35 +149,35 @@ function B(s) {
     }
   return `<button class="vvw-ui" aria-label="${s.description || s.name}" data-vvw-control="${s.name}">${s.icon}</button>`;
 }
-function j(s, t) {
+function U(s, t) {
   const e = document.createElement("div");
   e.className = "vvw-item", e.dataset.vvwPos = `${t !== void 0 ? t : ""}`, e.dataset.vvwIdx = s.index.toString(), e.appendChild(
-    M(
+    P(
       `<img class="vvw-img-lo" src="${s.thumb || s.src}" alt="${s.alt || ""}" />
       <img class="vvw-img-hi" src="${s.src}" alt="${s.alt || ""}" />`
     )
   );
   const i = e.querySelector("img.vvw-img-lo"), n = e.querySelector("img.vvw-img-hi");
-  return H(s, n, i, t === 0), e;
+  return W(s, n, i, t === 0), e;
 }
-function U({
+function K({
   controls: s
 }) {
-  const t = (i) => i ? i.map(B).join("") : "";
-  return M(
+  const t = (i) => i ? i.map(V).join("") : "";
+  return P(
     `<div class="vvw-root" id="vvw-root">
     <div class="vvw-container">
       <div class="vvw-bg"></div>
       <div class="vvw-image-container"></div>
       <div class="vvw-top-bar"><div>${t(s == null ? void 0 : s.topLeft)}</div><div>${t(s == null ? void 0 : s.topCenter)}</div><div>${t(s == null ? void 0 : s.topRight)}</div></div>
       <div class="vvw-bottom-bar"><div>${t(s == null ? void 0 : s.bottomLeft)}</div><div>${t(s == null ? void 0 : s.bottomCenter)}</div><div>${t(s == null ? void 0 : s.bottomRight)}</div></div>
-      <div class="vvw-prev vvw-ui"><button aria-label="Previous">${k}</button></div>
-      <div class="vvw-next vvw-ui"><button aria-label="Next">${q}</button></div>
+      <div class="vvw-prev vvw-ui"><button aria-label="Previous">${R}</button></div>
+      <div class="vvw-next vvw-ui"><button aria-label="Next">${O}</button></div>
     </div>
     </div>`
   );
 }
-const T = {
+const H = {
   // debug, don't remove
   // animationDurationBase: 1000,
   animationDurationBase: 333,
@@ -188,90 +188,98 @@ const T = {
   rapidLimit: 222,
   controls: {
     topLeft: ["indexDisplay"],
-    topRight: ["zoomIn", "zoomOut", N(), "close"],
+    topRight: ["zoomIn", "zoomOut", j(), "close"],
     bottomLeft: ["description"]
   }
 };
-function K(s) {
-}
 function _(s) {
-  const t = s.options.preloads;
-  s.imageContainer.style.width = `${(t * 2 + 1) * 100}vw`, s.imageContainer.style.left = `-${t * 100}vw`, s.imageContainer.style.display = "flex", G(s);
 }
 function G(s) {
+  const t = s.options.preloads;
+  s.imageContainer.style.width = `${(t * 2 + 1) * 100}vw`, s.imageContainer.style.left = `-${t * 100}vw`, s.imageContainer.style.display = "flex", J(s);
+}
+function J(s) {
   let t = { x: 0, y: 0 }, e = { x: 0, y: 0 }, i = null;
   s.registerPointerListener((n) => {
+    var o;
     if (!n.hasInternalExecution && !(n.pointers.length > 1)) {
-      if (n.event === "down" && (t = { x: n.pointer.x, y: n.pointer.y }, e = { x: n.pointer.x, y: n.pointer.y }), n.event === "move") {
+      if (n.event === "down" && (t = { x: n.pointer.x, y: n.pointer.y }, e = { x: n.pointer.x, y: n.pointer.y }, (o = n.abortController) == null || o.abort()), n.event === "move") {
         e = { x: n.pointer.x, y: n.pointer.y };
-        const o = e.x - t.x, a = e.y - t.y;
-        if (!i && Math.abs(a) > Math.abs(o) || i === "y") {
-          const r = a / window.innerHeight * 100;
-          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${r}vh)`, i = "y";
-        } else if (!i && Math.abs(o) > Math.abs(a) || i === "x") {
-          const r = o / window.innerWidth * 100;
-          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${r}vw)`, i = "x";
+        const r = e.x - t.x, a = e.y - t.y;
+        if (!i && Math.abs(a) > Math.abs(r) || i === "y") {
+          const l = a / window.innerHeight * 100;
+          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${l}vh)`, i = "y";
+        } else if (!i && Math.abs(r) > Math.abs(a) || i === "x") {
+          const l = r / window.innerWidth * 100;
+          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${l}vw)`, i = "x";
         }
       }
       if (n.event === "up" || n.event === "cancel") {
-        let o = function(a) {
-          var r;
-          (r = s.imageContainer) == null || r.addEventListener("transitionend", function h() {
-            var c;
-            (c = s.imageContainer) == null || c.removeEventListener("transitionend", h), s.imageContainer.style.transition = "", s.imageContainer.style.transform = "";
+        let r = function(a) {
+          var l;
+          (l = s.imageContainer) == null || l.addEventListener("transitionend", function c() {
+            var m;
+            (m = s.imageContainer) == null || m.removeEventListener("transitionend", c), s.imageContainer.style.transition = "", s.imageContainer.style.transform = "";
           }), s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = a;
         };
         if (i === "y") {
-          const a = e.y - t.y, r = n.pointer.movementY, h = 8;
-          s.imageContainer.style.transition = "", a > 0 && Math.abs(r) > h || a < 0 && Math.abs(r) > h ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : o("translateY(0vh)");
+          const a = e.y - t.y;
+          Math.abs(a) > 144 ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : r("translateY(0vh)");
         }
         if (i === "x") {
-          const a = e.x - t.x, r = n.pointer.movementX, h = 8;
-          s.imageContainer.style.transition = "", a > 0 && Math.abs(r) > h ? s.prev() : a < 0 && Math.abs(r) > h ? s.next() : o("translateX(0vw)");
+          const a = e.x - t.x, l = n.pointer.movementX, c = 1;
+          s.imageContainer.style.transition = "", a > 0 && Math.abs(l) > c ? s.prev() : a < 0 && Math.abs(l) > c ? s.next() : r("translateX(0vw)");
         }
         i = null, t = { x: 0, y: 0 }, e = { x: 0, y: 0 };
       }
     }
   });
 }
-function J(s) {
+function Q(s) {
 }
-async function Q({
+function tt({
   vistaView: { isReducedMotion: s },
   htmlElements: { to: t },
   index: { from: e, to: i },
-  vistaView: { elements: n, imageContainer: o, options: a }
-}, r) {
-  if (!t || r.aborted || s || !(Math.abs(i - e) === 1 || e === 0 && i === n.length - 1 || e === n.length - 1 && i === 0))
-    return;
-  const c = Math.round(a.animationDurationBase * 100) / 100;
-  return new Promise((m) => {
-    o.addEventListener(
-      "transitionend",
-      () => {
-        m(() => {
-          o.style.transition = "", o.style.transform = "";
-        });
+  vistaView: { elements: n, imageContainer: o, options: r }
+}, a) {
+  if (!(!t || a.aborted || s || !(Math.abs(i - e) === 1 || e === 0 && i === n.length - 1 || e === n.length - 1 && i === 0)))
+    return {
+      cleanup: () => {
+        o.style.transition = "", o.style.transform = "";
       },
-      { once: !0 }
-    );
-    const w = i === e + 1 || e === n.length - 1 && i === 0 ? "translateX(-100vw)" : "translateX(100vw)";
-    o.style.transition = `transform ${c}ms ease`, o.style.transform = w;
-  });
+      transitionEnded: new Promise((c) => {
+        o.addEventListener(
+          "transitionend",
+          () => {
+            c();
+          },
+          { once: !0 }
+        ), o.addEventListener(
+          "transitioncancel",
+          () => {
+            a.aborted && c();
+          },
+          { once: !0 }
+        );
+        const m = Math.round(r.animationDurationBase * 100) / 100, p = i === e + 1 || e === n.length - 1 && i === 0 ? "translateX(-100vw)" : "translateX(100vw)";
+        o.style.transition = `transform ${m}ms ease`, o.style.transform = p;
+      })
+    };
 }
-class V {
+class et {
   constructor({ elm: t, listeners: e }) {
-    l(this, "pointers", []);
-    l(this, "elm");
-    l(this, "listeners", []);
-    l(this, "lastPointerDownId", null);
-    l(this, "removeLastPointer", () => {
+    h(this, "pointers", []);
+    h(this, "elm");
+    h(this, "listeners", []);
+    h(this, "lastPointerDownId", null);
+    h(this, "removeLastPointer", () => {
       if (this.pointers.length && this.lastPointerDownId !== null) {
         const t = this.pointers.findIndex((e) => e.id === this.lastPointerDownId);
         t !== -1 && this.pointers.splice(t, 1);
       }
     });
-    l(this, "onPointerDown", (t) => {
+    h(this, "onPointerDown", (t) => {
       if (!this.listeners.length || t.button !== 0) return;
       t.preventDefault(), this.lastPointerDownId = t.pointerId, window.addEventListener("contextmenu", this.removeLastPointer, { once: !0 }), window.addEventListener("auxclick", this.removeLastPointer, { once: !0 });
       let e = {
@@ -290,7 +298,7 @@ class V {
         })
       );
     });
-    l(this, "onPointerMove", (t) => {
+    h(this, "onPointerMove", (t) => {
       if (!this.listeners.length) return;
       t.preventDefault();
       const e = this.pointers.find((i) => i.id === t.pointerId);
@@ -303,7 +311,7 @@ class V {
         })
       ));
     });
-    l(this, "onPointerUp", (t) => {
+    h(this, "onPointerUp", (t) => {
       if (!this.listeners.length || t.button !== 0 || (window.removeEventListener("contextmenu", this.removeLastPointer), window.removeEventListener("auxclick", this.removeLastPointer), t.target instanceof Node && !this.elm.contains(t.target) && t.target !== document.querySelector("html") && t.target !== document))
         return;
       t.preventDefault();
@@ -321,7 +329,7 @@ class V {
         })
       );
     });
-    l(this, "onPointerCancel", (t) => {
+    h(this, "onPointerCancel", (t) => {
       if (!this.listeners.length || t.target instanceof Node && !this.elm.contains(t.target) && t.target !== document.querySelector("html") && t.target !== document)
         return;
       t.preventDefault();
@@ -369,20 +377,20 @@ class V {
     };
   }
 }
-class tt {
+class it {
   constructor(t, e) {
-    l(this, "maxZoomLevel");
-    l(this, "image", null);
-    l(this, "rect", null);
-    l(this, "initialCenter", { x: 0, y: 0 });
-    l(this, "maxDimension", { width: 0 });
-    l(this, "minDimension", { initialWidth: 0, initialHeight: 0, minWidth: 0, closingWidth: 0 });
-    l(this, "accumulatedTranslate", { x: 0, y: 0 });
+    h(this, "maxZoomLevel");
+    h(this, "image", null);
+    h(this, "rect", null);
+    h(this, "initialCenter", { x: 0, y: 0 });
+    h(this, "maxDimension", { width: 0 });
+    h(this, "minDimension", { initialWidth: 0, initialHeight: 0, minWidth: 0, closingWidth: 0 });
+    h(this, "accumulatedTranslate", { x: 0, y: 0 });
     // state
-    l(this, "scale", 1);
-    l(this, "translate", { x: 0, y: 0 });
-    l(this, "onScale", null);
-    l(this, "animationTimestamp", 0);
+    h(this, "scale", 1);
+    h(this, "translate", { x: 0, y: 0 });
+    h(this, "onScale", null);
+    h(this, "animationTimestamp", 0);
     this.maxZoomLevel = t, this.onScale = e;
   }
   clean() {
@@ -417,7 +425,7 @@ class tt {
     if (!this.image) return;
     this.rect || (this.rect = this.image.getBoundingClientRect()), e || (e = this.initialCenter);
     const i = this.snapToTargetIfClose(
-      z(this.rect.width * t, this.minDimension.minWidth, this.maxDimension.width),
+      q(this.rect.width * t, this.minDimension.minWidth, this.maxDimension.width),
       this.minDimension.initialWidth
     );
     this.onScale && this.onScale({
@@ -425,19 +433,19 @@ class tt {
       isMax: i >= this.maxDimension.width,
       isMin: i <= this.minDimension.initialWidth
     }), this.scale = C(i / this.rect.width);
-    const n = this.rect.left + this.rect.width / 2, o = this.rect.top + this.rect.height / 2, a = this.initialCenter.x - n, r = this.initialCenter.y - o, h = a * (1 - this.scale), c = r * (1 - this.scale), m = e.x - this.initialCenter.x, w = e.y - this.initialCenter.y;
-    this.translate.x = C(h + m), this.translate.y = C(c + w), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, i <= this.minDimension.closingWidth ? this.image.style.opacity = "0.5" : this.image.style.opacity = "";
+    const n = this.rect.left + this.rect.width / 2, o = this.rect.top + this.rect.height / 2, r = this.initialCenter.x - n, a = this.initialCenter.y - o, l = r * (1 - this.scale), c = a * (1 - this.scale), m = e.x - this.initialCenter.x, p = e.y - this.initialCenter.y;
+    this.translate.x = C(l + m), this.translate.y = C(c + p), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, i <= this.minDimension.closingWidth ? this.image.style.opacity = "0.5" : this.image.style.opacity = "";
   }
   moveAndNormalize(t) {
     let e = 0, i = !1;
-    const n = ({ x: o, y: a }) => {
+    const n = ({ x: o, y: r }) => {
       if (i)
         return;
-      if (Math.abs(o) < 1e-3 && Math.abs(a) < 1e-3)
+      if (Math.abs(o) < 1e-3 && Math.abs(r) < 1e-3)
         return this.normalize();
-      o *= 0.9, a *= 0.9;
-      const r = this.image.getBoundingClientRect();
-      this.translate.x = C(this.translate.x + o), this.translate.y = C(this.translate.y + a), r.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - r.right) * 0.1, o *= 0.7), r.left > window.innerWidth / 2 && (this.translate.x -= (r.left - window.innerWidth / 2) * 0.1, o *= 0.7), r.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - r.bottom) * 0.1, a *= 0.7), r.top > window.innerHeight / 2 && (this.translate.y -= (r.top - window.innerHeight / 2) * 0.1, a *= 0.7), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, e = requestAnimationFrame(() => n({ x: o, y: a }));
+      o *= 0.9, r *= 0.9;
+      const a = this.image.getBoundingClientRect();
+      this.translate.x = C(this.translate.x + o), this.translate.y = C(this.translate.y + r), a.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - a.right) * 0.1, o *= 0.7), a.left > window.innerWidth / 2 && (this.translate.x -= (a.left - window.innerWidth / 2) * 0.1, o *= 0.7), a.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - a.bottom) * 0.1, r *= 0.7), a.top > window.innerHeight / 2 && (this.translate.y -= (a.top - window.innerHeight / 2) * 0.1, r *= 0.7), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, e = requestAnimationFrame(() => n({ x: o, y: r }));
     };
     return n({
       x: t.movementX,
@@ -460,87 +468,83 @@ class tt {
   }
   normalize(t = !0) {
     if (!this.image || !this.rect) return;
-    const e = this.snapToTargetIfClose(
-      this.rect.width * this.scale,
-      this.minDimension.initialWidth
-    ), i = this.snapToTargetIfClose(
-      this.rect.height * this.scale,
-      this.minDimension.initialHeight
-    );
-    if (this.image.style.width = `${e}px`, this.image.style.height = `${i}px`, this.scale = 1, this.image.style.opacity = "", this.accumulatedTranslate.x += this.translate.x, this.accumulatedTranslate.y += this.translate.y, this.image.style.left = `calc(50% + ${this.accumulatedTranslate.x}px)`, this.image.style.top = `calc(50% + ${this.accumulatedTranslate.y}px)`, this.translate = { x: 0, y: 0 }, this.image.style.transform = "", this.rect = this.image.getBoundingClientRect(), e <= this.minDimension.closingWidth)
-      return this.clean(), !0;
-    if (e < this.minDimension.initialWidth)
+    const e = this.rect.width * this.scale, i = e <= this.minDimension.closingWidth, n = i ? e : this.snapToTargetIfClose(this.rect.width * this.scale, this.minDimension.initialWidth), o = i ? this.rect.height * this.scale : this.snapToTargetIfClose(this.rect.height * this.scale, this.minDimension.initialHeight);
+    if (this.image.style.width = `${n}px`, this.image.style.height = `${o}px`, this.scale = 1, this.image.style.opacity = "", this.accumulatedTranslate.x += this.translate.x, this.accumulatedTranslate.y += this.translate.y, this.image.style.left = `calc(50% + ${this.accumulatedTranslate.x}px)`, this.image.style.top = `calc(50% + ${this.accumulatedTranslate.y}px)`, this.translate = { x: 0, y: 0 }, this.image.style.transform = "", this.rect = this.image.getBoundingClientRect(), i)
+      return !0;
+    if (n < this.minDimension.initialWidth)
       this.accumulatedTranslate.x = 0, this.accumulatedTranslate.y = 0, requestAnimationFrame(() => {
-        const n = this.image;
-        n && (n.addEventListener(
+        const r = this.image;
+        r && (r.addEventListener(
           "transitionend",
           () => {
-            n && (this.clean(), this.rect = null);
+            r && (this.clean(), this.rect = null);
           },
           { once: !0 }
-        ), n.style.transition = "all 222ms ease", n.style.width = `${this.minDimension.initialWidth}px`, n.style.height = `${this.minDimension.initialHeight}px`, n.style.left = "50%", n.style.top = "50%");
+        ), r.style.transition = "all 222ms ease", r.style.width = `${this.minDimension.initialWidth}px`, r.style.height = `${this.minDimension.initialHeight}px`, r.style.left = "50%", r.style.top = "50%");
       });
     else if (t) {
-      let n = !1;
-      if (this.rect.right < window.innerWidth / 2 && (n = !0, this.accumulatedTranslate.x += window.innerWidth / 2 - this.rect.right), this.rect.left > window.innerWidth / 2 && (n = !0, this.accumulatedTranslate.x -= this.rect.left - window.innerWidth / 2), this.rect.bottom < window.innerHeight / 2 && (n = !0, this.accumulatedTranslate.y += window.innerHeight / 2 - this.rect.bottom), this.rect.top > window.innerHeight / 2 && (n = !0, this.accumulatedTranslate.y -= this.rect.top - window.innerHeight / 2), n) {
-        const o = this.image;
-        o.addEventListener(
+      let r = !1;
+      if (this.rect.right < window.innerWidth / 2 && (r = !0, this.accumulatedTranslate.x += window.innerWidth / 2 - this.rect.right), this.rect.left > window.innerWidth / 2 && (r = !0, this.accumulatedTranslate.x -= this.rect.left - window.innerWidth / 2), this.rect.bottom < window.innerHeight / 2 && (r = !0, this.accumulatedTranslate.y += window.innerHeight / 2 - this.rect.bottom), this.rect.top > window.innerHeight / 2 && (r = !0, this.accumulatedTranslate.y -= this.rect.top - window.innerHeight / 2), r) {
+        const a = this.image;
+        a.addEventListener(
           "transitionend",
           () => {
-            o && (o.style.transition = "", this.rect = null);
+            a && (a.style.transition = "", this.rect = null);
           },
           { once: !0 }
-        ), o.style.transition = "all 222ms ease", o.style.left = `calc(50% + ${this.accumulatedTranslate.x}px)`, o.style.top = `calc(50% + ${this.accumulatedTranslate.y}px)`;
+        ), a.style.transition = "all 222ms ease", a.style.left = `calc(50% + ${this.accumulatedTranslate.x}px)`, a.style.top = `calc(50% + ${this.accumulatedTranslate.y}px)`;
       } else
         this.rect = null;
     }
   }
 }
-class et {
+class nt {
   constructor() {
-    l(this, "fiolast", {});
+    h(this, "fiolast", {});
   }
   // first in out
   fio(t, e, i = 50) {
-    const o = Date.now() - (this.fiolast[e] ?? 0), a = () => {
+    const o = Date.now() - (this.fiolast[e] ?? 0), r = () => {
       this.fiolast[e] = Date.now(), t();
     };
     if (!this.fiolast[e]) {
-      a();
+      r();
       return;
     }
-    o >= i && a();
+    o >= i && r();
   }
 }
 const x = {
   somethingOpened: null
 };
-class it {
+class st {
   constructor(t, e = {}) {
-    l(this, "options");
-    l(this, "elements");
-    l(this, "isReducedMotion");
-    l(this, "currentIndex", -1);
-    l(this, "currentChildren", null);
-    l(this, "setupFunction", K);
-    l(this, "initFunction", _);
-    l(this, "closeFunction", J);
-    l(this, "transitionFunction", Q);
-    l(this, "pointers", null);
-    l(this, "imageState");
-    l(this, "root", null);
-    l(this, "imageContainer", null);
-    l(this, "onClickElements", (t) => {
+    h(this, "options");
+    h(this, "elements");
+    h(this, "isReducedMotion");
+    h(this, "currentIndex", -1);
+    h(this, "currentChildren", null);
+    h(this, "setupFunction", _);
+    h(this, "initFunction", G);
+    h(this, "closeFunction", Q);
+    h(this, "transitionFunction", tt);
+    h(this, "pointers", null);
+    h(this, "imageState");
+    h(this, "imageTransitions", /* @__PURE__ */ new Map());
+    h(this, "root", null);
+    h(this, "imageContainer", null);
+    h(this, "onClickElements", (t) => {
       t.preventDefault();
       const e = t.currentTarget;
       e.dataset.vistaIdx && this.open(parseInt(e.dataset.vistaIdx));
     });
-    l(this, "defaultOnClickHandler", (t) => t.preventDefault());
-    l(this, "abortController", null);
-    l(this, "throttle", new et());
-    l(this, "lastSwapTime", 0);
-    l(this, "isZoomedIn", !1);
-    l(this, "onKeyDown", (t) => {
+    h(this, "defaultOnClickHandler", (t) => t.preventDefault());
+    h(this, "abortController", null);
+    h(this, "throttle", new nt());
+    h(this, "lastSwapTime", 0);
+    h(this, "transitionCleanup", null);
+    h(this, "isZoomedIn", !1);
+    h(this, "onKeyDown", (t) => {
       switch (t.key) {
         case "ArrowLeft":
           t.preventDefault(), this.prev();
@@ -559,7 +563,7 @@ class it {
           break;
       }
     });
-    l(this, "onScroll", (t) => {
+    h(this, "onScroll", (t) => {
       t.preventDefault();
       const e = t.deltaY;
       this.imageState.setInitialCenter({
@@ -567,70 +571,71 @@ class it {
         y: t.clientY
       }), e < 0 ? this.zoomIn() : e > 0 && this.zoomOut();
     });
-    l(this, "onResizeHandler", () => {
+    h(this, "onResizeHandler", () => {
       this.currentChildren.htmls.forEach((t, e) => {
         const i = this.currentChildren.images[e], n = t.querySelector("img.vvw-img-hi"), o = t.querySelector("img.vvw-img-lo");
-        if (H(i, n, o, !1), n.classList.contains("vvw--loaded")) {
-          const { width: a, height: r } = S(n);
-          n.style.setProperty("--vvw-current-w", `${a}px`), n.style.setProperty("--vvw-current-h", `${r}px`), n.dataset.vvwWidth = a.toString(), n.dataset.vvwHeight = r.toString();
+        if (W(i, n, o, !1), n.classList.contains("vvw--loaded")) {
+          const { width: r, height: a } = M(n);
+          n.style.setProperty("--vvw-current-w", `${r}px`), n.style.setProperty("--vvw-current-h", `${a}px`), n.dataset.vvwWidth = r.toString(), n.dataset.vvwHeight = a.toString();
         }
       });
     });
     /// POINTERS
-    l(this, "pointerListeners", []);
-    l(this, "getInternalPointerListener", () => {
+    h(this, "pointerListeners", []);
+    h(this, "getInternalPointerListener", () => {
       const t = this.imageState;
       let e = 0, i = !1, n = () => {
       };
       return (o) => {
         if (o.event === "down") {
           if (n(), this.isZoomedIn && o.pointers.length === 1) {
-            const a = this.pointers.getCentroid();
-            t.setInitialCenter(a);
+            const r = this.pointers.getCentroid();
+            t.setInitialCenter(r);
           }
           if (o.pointers.length >= 2) {
             i = !0;
-            const a = this.pointers.getCentroid();
-            e = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]), t.setInitialCenter(a);
+            const r = this.pointers.getCentroid();
+            e = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]), t.setInitialCenter(r);
           }
         } else if (o.event === "move") {
           if (this.isZoomedIn && o.pointers.length === 1 && o.lastPointerLen === 0) {
-            const a = this.pointers.getCentroid();
-            t.move(a);
+            const r = this.pointers.getCentroid();
+            t.move(r);
           }
           if (o.pointers.length >= 2 && i) {
-            const a = this.pointers.getCentroid(), r = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]);
-            t.scaleMove(r / e, a);
+            const r = this.pointers.getCentroid(), a = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]);
+            t.scaleMove(a / e, r);
           }
         } else (o.event === "up" || o.event === "cancel") && (i || this.isZoomedIn) && (i ? (i = !1, t.normalize() && requestAnimationFrame(() => {
           this.close();
         })) : this.isZoomedIn && o.pointers.length === 0 && (n = t.moveAndNormalize(o.pointer)));
         this.pointerListeners.forEach(
-          (a) => a({
+          (r) => r({
             ...o,
-            hasInternalExecution: this.isZoomedIn || i
+            hasInternalExecution: this.isZoomedIn || i,
+            abortController: this.abortController
           })
         );
       };
     });
     this.elements = t, this.options = {
-      ...T,
+      ...H,
       ...e,
       controls: {
-        ...T.controls,
+        ...H.controls,
         ...e.controls
       }
-    }, this.imageState = new tt(
+    }, this.imageState = new it(
       this.options.maxZoomLevel,
       (i) => {
-        var n, o, a, r, h, c;
+        var n, o, r, a, l, c;
         i.isMin ? (this.isZoomedIn = !1, (n = this.qs(".vvw-zoom-out")) == null || n.setAttribute("disabled", "true"), (o = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || o.style.setProperty(
           "pointer-events",
           "none"
-        )) : (this.isZoomedIn = !0, (a = this.qs(".vvw-zoom-out")) == null || a.removeAttribute("disabled"), (r = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || r.style.setProperty(
+        )) : (this.isZoomedIn = !0, (r = this.qs(".vvw-zoom-out")) == null || r.removeAttribute("disabled"), (a = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || a.style.setProperty(
           "pointer-events",
           "auto"
-        )), i.isMax ? (h = this.qs(".vvw-zoom-in")) == null || h.setAttribute("disabled", "true") : (c = this.qs(".vvw-zoom-in")) == null || c.removeAttribute("disabled");
+        )), i.isMax ? (l = this.qs(".vvw-zoom-in")) == null || l.setAttribute("disabled", "true") : (c = this.qs(".vvw-zoom-in")) == null || c.removeAttribute("disabled");
       }
     ), this.options.setupFunction && (this.setupFunction = this.options.setupFunction), this.options.closeFunction && (this.closeFunction = this.options.closeFunction), this.options.initFunction && (this.initFunction = this.options.initFunction), this.options.transitionFunction && (this.transitionFunction = this.options.transitionFunction), this.isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.elements instanceof NodeList && this.elements.forEach((i, n) => {
       i.dataset.vistaIdx = n.toString(), i.addEventListener("click", this.defaultOnClickHandler), i.addEventListener("pointerup", this.onClickElements);
@@ -640,41 +645,50 @@ class it {
     return this.root ? this.root.querySelector(t) : null;
   }
   async swap(t, e) {
-    const i = this.options.preloads || 0, n = this.currentIndex, { htmls: o, images: a } = this.getChildElements(i, n), r = this.imageContainer, h = this.currentChildren, c = {
-      htmlElements: { from: h.htmls, to: o },
-      images: { from: h.images, to: a },
+    const i = this.options.preloads || 0, n = this.currentIndex, { htmls: o, images: r } = this.getChildElements(i, n), a = this.imageContainer, l = this.currentChildren, c = {
+      htmlElements: { from: l.htmls, to: o },
+      images: { from: l.images, to: r },
       index: { from: t, to: this.currentIndex },
       via: e || { next: !1, prev: !1 },
       vistaView: this
     };
-    this.setupFunction(c), this.currentChildren = { htmls: o, images: a }, this.displayActiveIndex();
-    const m = this.abortController.signal, w = performance.now(), b = w - this.lastSwapTime < this.options.rapidLimit;
-    let p = null;
-    b || (p = await this.transitionFunction(c, m)), this.lastSwapTime = w;
-    const d = o[Math.floor(o.length / 2)].dataset.vvwIdx, v = r.querySelector(
+    this.setupFunction(c), this.currentChildren = { htmls: o, images: r }, this.displayActiveIndex();
+    const m = this.abortController.signal;
+    if (performance.now() - this.lastSwapTime < this.options.rapidLimit) {
+      a.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((b) => {
+        a.appendChild(b);
+      }), this.lastSwapTime = performance.now(), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
+      return;
+    }
+    const g = this.transitionFunction(c, m);
+    g && (this.transitionCleanup = g.cleanup, await g.transitionEnded), this.lastSwapTime = performance.now();
+    const d = o[Math.floor(o.length / 2)].dataset.vvwIdx, u = a.querySelector(
       `.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`
-    ), g = v.getAttribute("style") || "", f = v.classList.contains("vvw--loaded"), u = v.width, L = v.height;
-    this.imageState.reset(), r.innerHTML = "", p instanceof Function && p(), o.forEach((E) => {
-      const y = E.querySelector("img.vvw-img-hi");
-      E.dataset.vvwPos === "0" && !m.aborted && g && f && // ready &&
-      u && L && (y.classList.add("vvw--loaded"), y.classList.add("vvw--ready"), y.setAttribute("style", g), y.width = u, y.height = L, y.dataset.vvwWidth = u.toString(), y.dataset.vvwHeight = L.toString()), r.appendChild(E), y.classList.contains("vvw--ready") && (this.imageState.setCurrentImage(y), this.imageState.setInitialCenter());
+    ), y = this.imageTransitions.get(u);
+    this.imageTransitions.delete(u);
+    const f = u.getAttribute("style") || "", v = u.classList.contains("vvw--loaded"), E = u.classList.contains("vvw--ready"), I = u.width, T = u.height;
+    this.imageState.reset(), a.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((b) => {
+      const w = b.querySelector("img.vvw-img-hi");
+      b.dataset.vvwPos === "0" && !m.aborted && f && I && T && (v && (w.classList.add("vvw--loaded"), w.dataset.vvwWidth = u.dataset.vvwWidth || "", w.dataset.vvwHeight = u.dataset.vvwHeight || ""), E && (w.classList.add("vvw--ready"), w.width = I, w.height = T), w.setAttribute("style", f)), a.appendChild(b), b.dataset.vvwPos === "0" && !m.aborted && E ? (this.imageState.setCurrentImage(w), this.imageState.setInitialCenter()) : b.dataset.vvwPos === "0" && !m.aborted && f && I && T && v && y && (this.imageTransitions.set(w, y), this.transitionImage(w, () => {
+        this.imageState.setCurrentImage(w), this.imageState.setInitialCenter(), w.classList.add("vvw--ready");
+      }));
     }), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
   }
   getChildElements(t, e) {
     const i = [], n = [];
     for (let o = -t; o <= t; o++) {
-      const a = (e + o + this.elements.length) % this.elements.length, r = this.elements[a], h = r instanceof HTMLImageElement ? r : r instanceof HTMLAnchorElement && r.querySelector("img") || void 0, c = r instanceof HTMLElement ? {
-        index: a,
-        imageElm: h instanceof HTMLImageElement ? h : void 0,
-        anchorElm: r instanceof HTMLAnchorElement ? r : void 0,
-        src: r.dataset.vistaviewSrc || r.getAttribute("href") || r.getAttribute("src") || "",
-        thumb: r.dataset.vistaviewThumb || (h instanceof HTMLImageElement ? h.getAttribute("src") : void 0) || r.getAttribute("href") || void 0,
-        alt: h instanceof HTMLImageElement && h.getAttribute("alt") || void 0
+      const r = (e + o + this.elements.length) % this.elements.length, a = this.elements[r], l = a instanceof HTMLImageElement ? a : a instanceof HTMLAnchorElement && a.querySelector("img") || void 0, c = a instanceof HTMLElement ? {
+        index: r,
+        imageElm: l instanceof HTMLImageElement ? l : void 0,
+        anchorElm: a instanceof HTMLAnchorElement ? a : void 0,
+        src: a.dataset.vistaviewSrc || a.getAttribute("href") || a.getAttribute("src") || "",
+        thumb: a.dataset.vistaviewThumb || (l instanceof HTMLImageElement ? l.getAttribute("src") : void 0) || a.getAttribute("href") || void 0,
+        alt: l instanceof HTMLImageElement && l.getAttribute("alt") || void 0
       } : {
-        index: a,
-        ...r
+        index: r,
+        ...a
       };
-      n.push(c), i.push(j(c, o));
+      n.push(c), i.push(U(c, o));
     }
     return {
       htmls: i,
@@ -700,34 +714,45 @@ class it {
     );
   }
   displayActiveIndex() {
-    var a;
+    var r;
     const t = this.currentIndex;
-    this.elements instanceof NodeList && this.elements.forEach((r, h) => {
-      r.style.opacity = "", h === t && (r.style.opacity = "0");
+    this.elements instanceof NodeList && this.elements.forEach((a, l) => {
+      a.style.opacity = "", l === t && (a.style.opacity = "0");
     });
     const e = this.qs(".vvw-index"), i = `${t + 1}`, n = `${this.elements.length}`;
     e && (e.textContent = `${i} / ${n}`);
     const o = this.qs(".vvw-desc");
     if (o) {
-      const r = (a = this.currentChildren) == null ? void 0 : a.images.find((c) => c.index === t), h = (r == null ? void 0 : r.alt) || "";
-      h ? (o.textContent = h, o.setAttribute("aria-label", `Image ${i} of ${n}: ${h}`)) : (o.textContent = "", o.setAttribute("aria-label", `Image ${i} of ${n}`));
+      const a = (r = this.currentChildren) == null ? void 0 : r.images.find((c) => c.index === t), l = (a == null ? void 0 : a.alt) || "";
+      l ? (o.textContent = l, o.setAttribute("aria-label", `Image ${i} of ${n}: ${l}`)) : (o.textContent = "", o.setAttribute("aria-label", `Image ${i} of ${n}`));
     }
   }
+  transitionImage(t, e) {
+    const i = this.imageTransitions.get(t);
+    i && requestAnimationFrame(() => {
+      const { current: n, target: o } = i, r = {
+        width: n.width + (o.width - n.width) * 0.1,
+        height: n.height + (o.height - n.height) * 0.1,
+        radius: n.radius + (o.radius - n.radius) * 0.1
+      };
+      Math.abs(r.width - o.width) < 0.5 && Math.abs(r.height - o.height) < 0.5 && Math.abs(r.radius - o.radius) < 0.5 ? (t.style.setProperty("--vvw-current-w", `${o.width}px`), t.style.setProperty("--vvw-current-h", `${o.height}px`), t.style.setProperty("--vvw-current-radius", `${o.radius}px`), this.imageTransitions.delete(t), e()) : (t.style.setProperty("--vvw-current-w", `${r.width}px`), t.style.setProperty("--vvw-current-h", `${r.height}px`), t.style.setProperty("--vvw-current-radius", `${r.radius}px`), this.imageTransitions.set(t, { current: r, target: o }), this.transitionImage(t, e));
+    });
+  }
   waitForImagesToLoad() {
     this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((i) => {
       const n = i, o = () => {
-        var r;
+        var c;
         n.width = n.naturalWidth, n.height = n.naturalHeight;
-        const a = (r = n.parentElement) == null ? void 0 : r.matches(`[data-vvw-idx="${this.currentIndex}"]`);
-        n.addEventListener(
-          "transitionend",
-          () => {
-            a && (this.imageState.setCurrentImage(n), this.imageState.setInitialCenter()), n.classList.add("vvw--ready");
+        const r = (c = n.parentElement) == null ? void 0 : c.matches(`[data-vvw-idx="${this.currentIndex}"]`), { width: a, height: l } = M(n);
+        n.dataset.vvwWidth = a.toString(), n.dataset.vvwHeight = l.toString(), n.classList.add("vvw--loaded"), this.imageTransitions.set(n, {
+          current: {
+            width: n.style.getPropertyValue("--vvw-current-w") ? parseFloat(n.style.getPropertyValue("--vvw-current-w")) : 0,
+            height: n.style.getPropertyValue("--vvw-current-h") ? parseFloat(n.style.getPropertyValue("--vvw-current-h")) : 0,
+            radius: n.style.getPropertyValue("--vvw-current-radius") ? parseFloat(n.style.getPropertyValue("--vvw-current-radius")) : 0
           },
-          { once: !0 }
-        ), n.classList.add("vvw--loaded"), requestAnimationFrame(() => {
-          const { width: h, height: c } = S(n);
-          n.style.setProperty("--vvw-current-w", `${h}px`), n.style.setProperty("--vvw-current-h", `${c}px`), n.dataset.vvwWidth = h.toString(), n.dataset.vvwHeight = c.toString(), n.style.setProperty("--vvw-current-radius", "0px");
+          target: { width: a, height: l, radius: 0 }
+        }), this.transitionImage(n, () => {
+          r && (this.imageState.setCurrentImage(n), this.imageState.setInitialCenter()), n.classList.add("vvw--ready");
         });
       };
       if (n.complete && n.naturalWidth !== 0) {
@@ -737,10 +762,10 @@ class it {
       n.addEventListener("load", () => {
         o();
       }), n.addEventListener("error", () => {
-        var r;
+        var a;
         n.classList.add("vvw--loaderror");
-        const a = document.createElement("p");
-        a.className = "vvw-img-err", a.setAttribute("role", "alert"), a.textContent = "Error loading image", (r = n.parentNode) == null || r.appendChild(a);
+        const r = document.createElement("p");
+        r.className = "vvw-img-err", r.setAttribute("role", "alert"), r.textContent = "Error loading image", (a = n.parentNode) == null || a.appendChild(r);
       });
     });
   }
@@ -752,30 +777,30 @@ class it {
   }
   /// OPEN
   open(t = 0) {
-    var c, m, w, b, p;
+    var c, m, p, L, g;
     if (x.somethingOpened)
       return;
     x.somethingOpened = this, this.currentIndex = t, document.body.style.overflow = "hidden";
-    const e = U({
+    const e = K({
       controls: this.options.controls
     });
     if (document.body.prepend(e), this.root = document.body.querySelector("#vvw-root"), !this.root)
       throw new Error("Failed to setup VistaView root element.");
     this.imageContainer = this.qs(".vvw-image-container"), this.options.animationDurationBase && this.root.style.setProperty("--vvw-anim-dur", `${this.options.animationDurationBase}`), this.options.initialZIndex !== void 0 && this.root.style.setProperty("--vvw-init-z", `${this.options.initialZIndex ?? 0}`), this.options.arrowOnSmallScreens && this.root.classList.add("vvw-arrow-sm");
-    const i = this.options.preloads || 0, n = t, { images: o, htmls: a } = this.getChildElements(i, n), r = {
-      htmlElements: { from: null, to: a },
+    const i = this.options.preloads || 0, n = t, { images: o, htmls: r } = this.getChildElements(i, n), a = {
+      htmlElements: { from: null, to: r },
       images: { from: null, to: o },
       index: { from: null, to: this.currentIndex },
       via: { next: !1, prev: !1 },
       vistaView: this
     };
-    this.setupFunction(r), this.currentChildren = { htmls: a, images: o }, a.forEach((d) => {
+    this.setupFunction(a), this.currentChildren = { htmls: r, images: o }, r.forEach((d) => {
       this.imageContainer.appendChild(d);
-    }), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (m = this.qs(".vvw-zoom-in")) == null || m.addEventListener("click", () => this.zoomIn()), (w = this.qs(".vvw-zoom-out")) == null || w.addEventListener("click", () => this.zoomOut()), (b = this.qs(".vvw-prev>button")) == null || b.addEventListener("click", () => this.prev()), (p = this.qs(".vvw-next>button")) == null || p.addEventListener("click", () => this.next()), this.options.keyboardListeners && window.addEventListener("keydown", this.onKeyDown), window.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new V({
+    }), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (m = this.qs(".vvw-zoom-in")) == null || m.addEventListener("click", () => this.zoomIn()), (p = this.qs(".vvw-zoom-out")) == null || p.addEventListener("click", () => this.zoomOut()), (L = this.qs(".vvw-prev>button")) == null || L.addEventListener("click", () => this.prev()), (g = this.qs(".vvw-next>button")) == null || g.addEventListener("click", () => this.next()), this.options.keyboardListeners && window.addEventListener("keydown", this.onKeyDown), window.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new et({
       elm: this.imageContainer,
       listeners: [this.getInternalPointerListener()]
     });
-    const h = {};
+    const l = {};
     [
       ...this.options.controls.topLeft || [],
       ...this.options.controls.topRight || [],
@@ -784,29 +809,27 @@ class it {
       ...this.options.controls.bottomLeft || [],
       ...this.options.controls.bottomRight || []
     ].forEach((d) => {
-      typeof d != "string" && (h[d.name] = d);
+      typeof d != "string" && (l[d.name] = d);
     }), this.root.querySelectorAll("button[data-vvw-control]").forEach((d) => {
-      const v = d;
-      v.addEventListener("click", (g) => {
-        const f = g.currentTarget.dataset.vvwControl, u = h[f], L = this.currentChildren.images.find(
-          (E) => E.index === this.currentIndex
+      const u = d;
+      u.addEventListener("click", (y) => {
+        const f = y.currentTarget.dataset.vvwControl, v = l[f], E = this.currentChildren.images.find(
+          (I) => I.index === this.currentIndex
         );
-        u && L && (u.onClick.constructor.name === "AsyncFunction" ? (v.classList.add("vvw--loading"), u.onClick(L, this).finally(() => {
-          v.classList.remove("vvw--loading");
-        })) : u.onClick(L, this));
+        v && E && (v.onClick.constructor.name === "AsyncFunction" ? (u.classList.add("vvw--loading"), v.onClick(E, this).finally(() => {
+          u.classList.remove("vvw--loading");
+        })) : v.onClick(E, this));
       });
     }), this.initFunction(this), requestAnimationFrame(() => {
       var d;
       (d = this.root) == null || d.addEventListener(
         "transitionend",
         () => {
-          var v, g;
-          (v = this.root) == null || v.classList.add("vvw--settled"), this.waitForImagesToLoad(), (g = this.qs(".vvw-bg")) == null || g.addEventListener("click", (f) => {
-            f.preventDefault(), this.close();
-          }), this.imageState.reset();
+          var u;
+          (u = this.root) == null || u.classList.add("vvw--settled"), this.waitForImagesToLoad(), this.imageState.reset();
         },
         { once: !0 }
-      ), this.root.classList.add("vvw--active"), this.displayActiveIndex(), this.options.onOpen && this.options.onOpen(this), this.options.onImageView && this.options.onImageView(r);
+      ), this.root.classList.add("vvw--active"), this.displayActiveIndex(), this.options.onOpen && this.options.onOpen(this), this.options.onImageView && this.options.onImageView(a);
     });
   }
   /// CLOSE
@@ -814,8 +837,8 @@ class it {
     x.somethingOpened === this && this.root && (t ? await new Promise((e) => {
       let n = 0;
       this.root.addEventListener("transitionend", (o) => {
-        o.target === this.root && (n++, n === 2 && this.elements instanceof NodeList && this.elements.forEach((a) => {
-          a.style.opacity = "";
+        o.target === this.root && (n++, n === 2 && this.elements instanceof NodeList && this.elements.forEach((r) => {
+          r.style.opacity = "";
         }), n === 3 && e(null));
       }), this.root.classList.add("vvw--closing");
     }) : this.elements instanceof NodeList && this.elements.forEach((e) => {
@@ -851,7 +874,7 @@ class it {
     n == null || n.abort(), this.abortController = new AbortController(), this.swap(i, e);
   }
 }
-function nt(s) {
+function ot(s) {
   let t = null;
   if (typeof s == "string" ? t = document.querySelectorAll(s) : s instanceof NodeList && (t = s), t)
     for (let e = 0; e < t.length; e++) {
@@ -867,12 +890,12 @@ function nt(s) {
   }
   return t || s;
 }
-function ot({ elements: s, ...t }) {
+function at({ elements: s, ...t }) {
   if (!s) throw new Error("No elements");
-  let e = nt(s);
+  let e = ot(s);
   if (typeof e == "string")
     return null;
-  const i = new it(e, t);
+  const i = new st(e, t);
   return {
     open: (n = 0) => i.open(n),
     close: () => i.close(),
@@ -886,7 +909,7 @@ function ot({ elements: s, ...t }) {
   };
 }
 export {
-  T as DefaultOptions,
-  ot as vistaView,
-  N as vistaViewDownload
+  H as DefaultOptions,
+  at as vistaView,
+  j as vistaViewDownload
 };