vistaview 0.7.7 → 0.10.9

package/dist/vistaview.js

@@ -1,109 +1,27 @@
-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 T(s) {
-  return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
-}
-function R(s) {
-  const e = window.getComputedStyle(s).objectFit || "", { width: i, height: n } = s.getBoundingClientRect(), r = s.naturalWidth, a = s.naturalHeight;
-  if (!e)
-    return { width: i, height: n };
-  if (!r || !a)
-    return { width: i, height: n };
-  const o = r / a, l = i / n;
-  switch (e) {
-    case "fill":
-      return { width: i, height: n };
-    case "none":
-      return { width: r, height: a };
-    case "contain":
-      return o > l ? { width: i, height: i / o } : { width: n * o, height: n };
-    case "cover":
-      return o < l ? { width: i, height: i / o } : { width: n * o, height: n };
-    case "scale-down": {
-      const c = { width: r, height: a }, d = o > l ? { width: i, height: i / o } : { width: n * o, height: n };
-      return d.width <= c.width && d.height <= c.height ? d : c;
-    }
+var z = Object.defineProperty;
+var T = (s, t, e) => t in s ? z(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var r = (s, t, e) => T(s, typeof t != "symbol" ? t + "" : t, e);
+import { V as D, a as L } from "./vista-box-CQvGrjln.js";
+const I = {
+  // debug, don't remove
+  // animationDurationBase: 1000,
+  animationDurationBase: 333,
+  maxZoomLevel: 2,
+  preloads: 1,
+  keyboardListeners: !0,
+  arrowOnSmallScreens: !1,
+  rapidLimit: 222,
+  controls: {
+    topLeft: ["indexDisplay"],
+    topRight: ["zoomIn", "zoomOut", "close"],
+    bottomLeft: ["description"]
   }
-  return { width: i, height: n };
-}
-function D(s) {
-  const t = getComputedStyle(s), e = s.getBoundingClientRect();
-  return {
-    objectFit: t.objectFit,
-    borderRadius: t.borderRadius,
-    objectPosition: t.objectPosition,
-    overflow: t.overflow,
-    top: e.top,
-    left: e.left,
-    width: e.width,
-    height: e.height,
-    naturalWidth: s.naturalWidth,
-    naturalHeight: s.naturalHeight
-  };
-}
-function z(s) {
-  const t = s.imageElm ? D(s.imageElm) : null, e = s.anchorElm ? D(s.anchorElm) : null, i = T(t == null ? void 0 : t.borderRadius), n = e && T(e == null ? void 0 : e.borderRadius), r = (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) || "",
-    br: r,
-    overflow: n ? e.overflow : i ? t.overflow : "",
-    nw: (t == null ? void 0 : t.naturalWidth) || 0,
-    nh: (t == null ? void 0 : t.naturalHeight) || 0,
-    w: (e == null ? void 0 : e.width) || (t == null ? void 0 : t.width) || 0,
-    h: (e == null ? void 0 : e.height) || (t == null ? void 0 : t.height) || 0,
-    top: (e == null ? void 0 : e.top) || (t == null ? void 0 : t.top) || 0,
-    left: (e == null ? void 0 : e.left) || (t == null ? void 0 : t.left) || 0
-  };
-}
-function W(s, t, e, i = !1) {
-  const {
-    fit: n,
-    w: r,
-    h: a,
-    // this ones makes things hard. not used.
-    // pos,
-    // overflow,
-    nw: o,
-    nh: l,
-    br: c,
-    top: d,
-    left: p
-  } = z(s), x = Math.min(Math.max(p, -r), window.innerWidth + r) - window.innerWidth / 2 + r / 2, g = Math.min(Math.max(d, -a), window.innerHeight + a) - window.innerHeight / 2 + a / 2, m = e.style;
-  m.width = `${r}px`, m.height = `${a}px`, m.objectFit = n, e.width = o, e.height = l, m.setProperty("--vvw-init-radius", `${c}`), m.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), m.setProperty("--vvw-init-x", `${x}px`), m.setProperty("--vvw-init-y", `${g}px`), i && (m.setProperty("--vvw-current-x", `${x}px`), m.setProperty("--vvw-current-y", `${g}px`));
-  const u = R(s.imageElm), b = Math.min(r, u.width), f = Math.min(a, u.height), v = t.style;
-  v.setProperty("--vvw-init-radius", `${c}`), v.setProperty("--vvw-init-w", `${b}px`), v.setProperty("--vvw-init-h", `${f}px`), i && (v.setProperty("--vvw-current-radius", `${c}`), v.setProperty("--vvw-current-w", `${b}px`), v.setProperty("--vvw-current-h", `${f}px`), t.dataset.vvwWidth = b.toString(), t.dataset.vvwHeight = f.toString());
-}
-function H(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");
-  if (i < t && n < e)
-    return {
-      width: i,
-      height: n
-    };
-  const r = i / n, a = t / e;
-  let o, l;
-  return r > a ? (o = t, l = t / r) : (l = e, o = e * r), {
-    width: o,
-    height: l
-  };
-}
-function q(s, t, e) {
-  return Math.min(Math.max(s, t), e);
-}
-function L(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>', 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>', N = '<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>', X = '<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 = {
+}, 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>', q = '<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>', M = '<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>', H = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+let E = null;
+function W() {
+  return E || (window.trustedTypes || (window.trustedTypes = {
     createPolicy: (s, t) => t
-  }), $ = window.trustedTypes.createPolicy("vistaView-policy", {
+  }), E = window.trustedTypes.createPolicy("vistaView-policy", {
     createHTML: (s) => s,
     // HTML is generated by us, not user input
     createScript: () => {
@@ -112,174 +30,404 @@ function B() {
     createScriptURL: () => {
       throw new Error("Not implemented");
     }
-  }), $);
+  }), E);
 }
-function P(s) {
-  const e = B().createHTML(s), i = document.createElement("template");
+function F(s) {
+  const e = W().createHTML(s), i = document.createElement("template");
   i.innerHTML = e;
   const n = i.content;
   return i.remove(), n;
 }
-function j() {
-  return {
-    name: "download",
-    icon: Y,
-    onClick: async (s) => {
-      var r;
-      const t = await fetch(s.src), e = await t.blob(), i = t.url, n = document.createElement("a");
-      n.href = URL.createObjectURL(e), n.download = ((r = i.split("/").pop()) == null ? void 0 : r.split("?")[0].split("#")[0]) || "download", document.body.appendChild(n), n.click(), document.body.removeChild(n);
-    }
-  };
-}
-function V(s) {
+function A(s) {
   if (typeof s == "string")
     switch (s) {
       case "zoomIn":
-        return `<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${Z}</button>`;
+        return `<div class="vvw-ui"><button aria-label="Zoom In" class="vvw-zoom-in">${q}</button></div>`;
       case "zoomOut":
-        return `<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${N}</button>`;
+        return `<div class="vvw-ui"><button aria-label="Zoom Out" disabled class="vvw-zoom-out">${M}</button></div>`;
       case "close":
-        return `<button aria-label="Close" class="vvw-close vvw-ui">${X}</button>`;
+        return `<div class="vvw-ui"><button aria-label="Close" class="vvw-close">${H}</button></div>`;
       case "indexDisplay":
         return '<div class="vvw-index vvw-ui" aria-hidden="true"></div>';
       case "description":
         return '<div class="vvw-desc vvw-ui" role="status" aria-live="polite" aria-atomic="true"></div>';
       default:
-        return "";
+        return console.warn(`Unknown default control: ${s}. Will return empty string.`), "";
     }
-  return `<button class="vvw-ui" aria-label="${s.description || s.name}" data-vvw-control="${s.name}">${s.icon}</button>`;
+  return `<div class="vvw-ext vvw-ui" aria-label="${s.description || s.name}" data-vvw-control="${s.name}"></div>`;
 }
-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(
-    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 W(s, n, i, t === 0), e;
-}
-function _({
+function $({
   controls: s
 }) {
-  const t = (i) => i ? i.map(V).join("") : "";
-  return P(
+  const t = (i) => i ? i.map(A).join("") : "", e = F(
     `<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-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">${R}</button></div>
       <div class="vvw-next vvw-ui"><button aria-label="Next">${O}</button></div>
     </div>
     </div>`
   );
+  return [
+    ...(s == null ? void 0 : s.topLeft) || [],
+    ...(s == null ? void 0 : s.topCenter) || [],
+    ...(s == null ? void 0 : s.topRight) || [],
+    ...(s == null ? void 0 : s.bottomLeft) || [],
+    ...(s == null ? void 0 : s.bottomCenter) || [],
+    ...(s == null ? void 0 : s.bottomRight) || []
+  ].forEach((i) => {
+    if (typeof i != "string" && i.control) {
+      const n = e.querySelector(`[data-vvw-control="${i.name}"]`), o = i.control();
+      n && o && n.appendChild(o);
+    }
+  }), e;
 }
-const M = {
-  // debug, don't remove
-  // animationDurationBase: 1000,
-  animationDurationBase: 333,
-  maxZoomLevel: 2,
-  preloads: 1,
-  keyboardListeners: !0,
-  arrowOnSmallScreens: !1,
-  rapidLimit: 222,
-  controls: {
-    topLeft: ["indexDisplay"],
-    topRight: ["zoomIn", "zoomOut", j(), "close"],
-    bottomLeft: ["description"]
-  }
-};
-function K(s) {
+function k(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 V(s) {
+  N(s);
 }
-function J(s) {
+function N(s) {
   let t = { x: 0, y: 0 }, e = { x: 0, y: 0 }, i = null;
   s.registerPointerListener((n) => {
-    var r;
+    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 }, (r = n.abortController) == null || r.abort()), 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 a = e.x - t.x, o = e.y - t.y;
-        if (!i && Math.abs(o) > Math.abs(a) || i === "y") {
-          const l = o / window.innerHeight * 100;
+        const a = e.x - t.x, h = e.y - t.y;
+        if (!i && Math.abs(h) > Math.abs(a) || i === "y") {
+          const l = h / window.innerHeight * 100;
           s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${l}vh)`, i = "y";
-        } else if (!i && Math.abs(a) > Math.abs(o) || i === "x") {
+        } else if (!i && Math.abs(a) > Math.abs(h) || i === "x" && n.state.elmLength > 1) {
           const l = a / 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 a = function(o) {
+        let a = function(h) {
           var l;
-          (l = s.imageContainer) == null || l.addEventListener("transitionend", function c() {
-            var d;
-            (d = s.imageContainer) == null || d.removeEventListener("transitionend", c), s.imageContainer.style.transition = "", s.imageContainer.style.transform = "";
-          }), s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = o;
+          (l = s.imageContainer) == null || l.addEventListener("transitionend", function d() {
+            var p;
+            (p = s.imageContainer) == null || p.removeEventListener("transitionend", d), s.imageContainer.style.transition = "", s.imageContainer.style.transform = "";
+          }), s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = h;
         };
         if (i === "y") {
-          const o = e.y - t.y;
-          Math.abs(o) > 144 ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : a("translateY(0vh)");
+          const h = e.y - t.y;
+          Math.abs(h) > 144 ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : a("translateY(0vh)");
         }
-        if (i === "x") {
-          const o = e.x - t.x, l = n.pointer.movementX, c = 1;
-          s.imageContainer.style.transition = "", o > 0 && Math.abs(l) > c ? s.prev() : o < 0 && Math.abs(l) > c ? s.next() : a("translateX(0vw)");
+        if (i === "x" && n.state.elmLength > 1) {
+          const h = e.x - t.x;
+          s.imageContainer.style.transition = "", h > 64 ? s.prev() : h < -64 ? s.next() : a("translateX(0vw)");
         }
         i = null, t = { x: 0, y: 0 }, e = { x: 0, y: 0 };
       }
     }
   });
 }
-function Q(s) {
+function B(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";
+}
+function X(s) {
 }
-function tt({
-  vistaView: { isReducedMotion: s },
-  htmlElements: { to: t },
-  index: { from: e, to: i },
-  vistaView: { elements: n, imageContainer: r, options: a }
-}, o) {
-  if (!(!t || o.aborted || s || !(Math.abs(i - e) === 1 || e === 0 && i === n.length - 1 || e === n.length - 1 && i === 0)))
+function Y({ vistaView: s, htmlElements: { to: t }, index: { from: e, to: i } }, n) {
+  const { imageContainer: o, options: a } = s, { isReducedMotion: h } = s.state;
+  if (!(!t || n.aborted || h || !(Math.abs(i - e) === 1 || e === 0 && i === s.state.elmLength - 1 || e === s.state.elmLength - 1 && i === 0)))
     return {
       cleanup: () => {
-        r.style.transition = "", r.style.transform = "";
+        o.style.transition = "", o.style.transform = "";
       },
-      transitionEnded: new Promise((c) => {
-        r.addEventListener(
+      transitionEnded: new Promise((d) => {
+        o.addEventListener(
           "transitionend",
           () => {
-            c();
+            d();
           },
           { once: !0 }
-        ), r.addEventListener(
+        ), o.addEventListener(
           "transitioncancel",
           () => {
-            o.aborted && c();
+            n.aborted && d();
           },
           { once: !0 }
         );
-        const d = Math.round(a.animationDurationBase * 100) / 100, p = i === e + 1 || e === n.length - 1 && i === 0 ? "translateX(-100vw)" : "translateX(100vw)";
-        r.style.transition = `transform ${d}ms ease`, r.style.transform = p;
+        const p = Math.round(a.animationDurationBase * 100) / 100, u = i === e + 1 || e === s.state.elmLength - 1 && i === 0 ? "translateX(-100vw)" : "translateX(100vw)";
+        o.style.transition = `transform ${p}ms ease`, o.style.transform = u;
       })
     };
 }
-class et {
+function P(s) {
+  const t = window.innerWidth, e = window.innerHeight, i = s.naturalWidth, n = s.naturalHeight;
+  if (!i || !n)
+    throw console.error("Error", s), new Error("Image natural dimensions are zero");
+  if (i < t && n < e)
+    return {
+      width: i,
+      height: n
+    };
+  const o = i / n, a = t / e;
+  let h, l;
+  return o > a ? (h = t, l = t / o) : (l = e, h = e * o), {
+    width: h,
+    height: l
+  };
+}
+class U extends D {
+  constructor(e) {
+    super(e);
+    r(this, "element");
+    r(this, "rect", null);
+    r(this, "animateNormalizeTimeout", null);
+    const i = document.createElement("img");
+    i.alt = this.config.alt || "", i.classList.add("vvw-img-hi"), this.element = i, i.onerror = (n) => {
+      this.isLoadedRejected(n);
+    }, i.src = this.config.src, i.decode().then(() => {
+      this.onLoad();
+    }).catch((n) => {
+      this.isLoadedRejected(n);
+    }), this.setSizes({
+      stableSize: !1,
+      initDimension: !0
+    });
+  }
+  onWidthChange(e) {
+    super.onWidthChange(e);
+    const i = this.getFromParsedSrcSet(e);
+    if (i && this.element.src !== i) {
+      const n = new Image();
+      n.onload = () => {
+        n.decode().then(() => {
+          this.isCancelled || (this.element.src = i);
+        });
+      }, n.src = i;
+    }
+  }
+  onLoad() {
+    if (this.isCancelled) return;
+    const e = this.element;
+    e.width = e.naturalWidth, e.height = e.naturalHeight, this.maxW = e.naturalWidth * this.maxZoomLevel;
+    const { width: i, height: n } = P(e);
+    this.fullH = n, this.fullW = i, this.minW = this.fullW * 0.5, this.isLoadedResolved(!0);
+  }
+  getFullSizeDim() {
+    return P(this.element);
+  }
+  normalize() {
+    super.normalize();
+    const e = this.element;
+    e.style.objectFit = "cover", e.style.borderRadius = "0";
+  }
+  // Used by: VistaImageEvent
+  scaleMove(e, i, n = !1) {
+    if (!this.isReady || !this.element) return;
+    this.rect || (this.rect = this.element.getBoundingClientRect()), i || (i = this.initPointerCenter);
+    const o = this.rect.left + this.rect.width / 2, a = this.rect.top + this.rect.height / 2, h = this.initPointerCenter.x - o, l = this.initPointerCenter.y - a, d = h * (1 - e), p = l * (1 - e), u = i.x - this.initPointerCenter.x, v = i.y - this.initPointerCenter.y;
+    n ? L.start({
+      vistaImage: this,
+      target: {
+        transform: {
+          x: d + u,
+          y: p + v,
+          scale: e
+        }
+      },
+      onComplete: () => {
+        this.setFinalTransform();
+      },
+      shouldWait: () => !1
+    }) : this.state.transform = {
+      x: d + u,
+      y: p + v,
+      scale: e
+    };
+    const m = this.element.getBoundingClientRect().width * e;
+    this.isZoomedIn = m > this.fullW, this.state.lessThanMinWidth = m <= this.minW, this.onScale({
+      vistaImage: this,
+      scale: m / this.fullW,
+      isMax: m >= this.maxW,
+      isMin: m <= this.fullW
+    });
+  }
+  animateZoom(e, i) {
+    this.state.width * e < this.minW || this.scaleMove(e, i, !0);
+  }
+  // Used by: VistaImageEvent
+  momentumThrow(e) {
+    if (!this.isReady)
+      return () => {
+      };
+    if (!this.isThrowing)
+      return this.setFinalTransform(), () => {
+      };
+    if (Math.abs(e.x) < 0.1 && Math.abs(e.y) < 0.1) {
+      const n = this.element.getBoundingClientRect();
+      return L.start({
+        vistaImage: this,
+        target: {
+          transform: {
+            x: n.right < window.innerWidth / 2 ? this.state.transform.x + (window.innerWidth / 2 - n.right) : n.left > window.innerWidth / 2 ? this.state.transform.x - (n.left - window.innerWidth / 2) : this.state.transform.x,
+            y: n.bottom < window.innerHeight / 2 ? this.state.transform.y + (window.innerHeight / 2 - n.bottom) : n.top > window.innerHeight / 2 ? this.state.transform.y - (n.top - window.innerHeight / 2) : this.state.transform.y
+          }
+        },
+        onComplete: () => {
+          this.isThrowing = !1, this.setFinalTransform();
+        },
+        shouldWait: () => !1
+      }), () => {
+      };
+    }
+    return requestAnimationFrame(() => {
+      if (!this.isThrowing) return this.momentumThrow({ x: 0, y: 0 });
+      const i = this.element, n = this.state.transform;
+      n.x += e.x, n.y += e.y;
+      const o = i.getBoundingClientRect();
+      n.x = n.x + e.x, n.y = n.y + e.y, o.right < window.innerWidth / 2 && (n.x += (window.innerWidth / 2 - o.right) * 0.1, e.x *= 0.7), o.left > window.innerWidth / 2 && (n.x -= (o.left - window.innerWidth / 2) * 0.1, e.x *= 0.7), o.bottom < window.innerHeight / 2 && (n.y += (window.innerHeight / 2 - o.bottom) * 0.1, e.y *= 0.7), o.top > window.innerHeight / 2 && (n.y -= (o.top - window.innerHeight / 2) * 0.1, e.y *= 0.7), this.state.transform = n, this.momentumThrow({
+        x: e.x * 0.9,
+        y: e.y * 0.9
+      });
+    }), () => {
+      L.stop(this), this.isThrowing = !1, this.setFinalTransform();
+    };
+  }
+  animateNormalize() {
+    this.animateNormalizeTimeout && clearTimeout(this.animateNormalizeTimeout), this.animateNormalizeTimeout = setTimeout(() => {
+      L.start({
+        vistaImage: this,
+        target: {
+          width: this.fullW,
+          height: this.fullH,
+          translate: { x: 0, y: 0 },
+          transform: { x: 0, y: 0, scale: 1 }
+        },
+        onComplete: () => {
+          this.setFinalTransform();
+        },
+        shouldWait: () => !1
+      });
+    }, 50);
+  }
+  // Used by: VistaImageEvent
+  setFinalTransform() {
+    if (!this.isReady) return;
+    this.rect = null, super.setFinalTransform({ propagateEvent: !1 });
+    const e = this.state.width <= this.minW;
+    if (this.state.width > this.maxW)
+      this.animateZoom(this.maxW / this.state.width);
+    else if (!e && this.state.width < this.fullW)
+      this.animateNormalize();
+    else if (this.pos === 0) {
+      const i = this.toObject();
+      this.vistaView.options.onContentChange && this.vistaView.options.onContentChange(i, this.vistaView), this.vistaView.state.extensions.forEach((n) => {
+        n.onContentChange && n.onContentChange(i, this.vistaView);
+      });
+    }
+    return {
+      close: e,
+      cancel: () => L.stop(this)
+    };
+  }
+}
+class Z {
+  constructor() {
+    r(this, "fiolast", {});
+  }
+  // first in out
+  fio(t, e, i = 50) {
+    const o = Date.now() - (this.fiolast[e] ?? 0), a = () => {
+      this.fiolast[e] = Date.now(), t();
+    };
+    if (!this.fiolast[e]) {
+      a();
+      return;
+    }
+    o >= i && a();
+  }
+}
+class j {
+  constructor() {
+    r(this, "open", !1);
+    r(this, "settled", !1);
+    r(this, "closing", !1);
+    r(this, "zoomedIn", !1);
+    r(this, "children", {
+      htmls: [],
+      images: []
+    });
+    r(this, "currentIndex", -1);
+    r(this, "elmLength", 0);
+    r(this, "abortController", new AbortController());
+    r(this, "isReducedMotion", !1);
+    r(this, "extensions", /* @__PURE__ */ new Set());
+  }
+}
+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 _(s) {
+  const t = s instanceof HTMLAnchorElement ? s : null, e = s instanceof HTMLImageElement ? s : t == null ? void 0 : t.querySelector("img"), i = t ? getComputedStyle(t) : null, n = e ? getComputedStyle(e) : null;
+  let o = "0px", a = n ? n.objectFit : "contain";
+  return i && S(i.borderRadius) ? o = i.borderRadius : n && S(n.borderRadius) && (o = n.borderRadius), {
+    borderRadius: o,
+    objectFit: a
+  };
+}
+function K(s) {
+  const t = s.split(",").map((i) => i.trim()), e = [];
+  for (const i of t) {
+    const [n, o] = i.split(" ").map((a) => a.trim());
+    if (n && o && o.endsWith("w")) {
+      const a = parseInt(o.slice(0, -1), 10);
+      isNaN(a) || e.push({ src: n, width: a });
+    }
+  }
+  return e;
+}
+function G(s) {
+  const t = s instanceof HTMLImageElement ? s : s.querySelector("img"), e = s.dataset.vistaviewSrc || s.getAttribute("href") || s.getAttribute("src") || (t == null ? void 0 : t.getAttribute("src")) || "", i = s.dataset.vistaviewSrcset || s.getAttribute("srcset") || (t == null ? void 0 : t.getAttribute("srcset")) || "";
+  if (!e && !i)
+    throw console.error("VistaView Error:", s), new Error("VistaView: Element must have href, src, or srcSet");
+  const n = i ? K(i) : void 0, o = _(s);
+  return {
+    config: {
+      src: e,
+      alt: s.dataset.vistaviewAlt || s.getAttribute("alt") || (t == null ? void 0 : t.getAttribute("alt")) || "",
+      srcSet: i || void 0
+    },
+    parsedSrcSet: n != null && n.length ? n : void 0,
+    origin: {
+      anchor: s instanceof HTMLAnchorElement ? s : void 0,
+      image: t,
+      src: e,
+      srcSet: i,
+      borderRadius: o.borderRadius,
+      objectFit: o.objectFit
+    }
+  };
+}
+class J {
   constructor({ elm: t, listeners: e }) {
-    h(this, "pointers", []);
-    h(this, "elm");
-    h(this, "listeners", []);
-    h(this, "lastPointerDownId", null);
-    h(this, "removeLastPointer", () => {
+    r(this, "pointers", []);
+    r(this, "elm");
+    r(this, "listeners", []);
+    r(this, "lastPointerDownId", null);
+    r(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);
       }
     });
-    h(this, "onPointerDown", (t) => {
+    r(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 = {
@@ -298,7 +446,7 @@ class et {
         })
       );
     });
-    h(this, "onPointerMove", (t) => {
+    r(this, "onPointerMove", (t) => {
       if (!this.listeners.length) return;
       t.preventDefault();
       const e = this.pointers.find((i) => i.id === t.pointerId);
@@ -311,17 +459,17 @@ class et {
         })
       ));
     });
-    h(this, "onPointerUp", (t) => {
+    r(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();
-      const e = this.pointers.findIndex((r) => r.id === t.pointerId);
+      const e = this.pointers.findIndex((o) => o.id === t.pointerId);
       if (e === -1) return;
       const i = this.pointers[e];
       i.x = t.clientX, i.y = t.clientY;
       const n = this.pointers.length;
       this.pointers.splice(e, 1), this.listeners.forEach(
-        (r) => r({
+        (o) => o({
           event: "up",
           pointer: i,
           pointers: this.pointers,
@@ -329,17 +477,17 @@ class et {
         })
       );
     });
-    h(this, "onPointerCancel", (t) => {
+    r(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();
-      const e = this.pointers.findIndex((r) => r.id === t.pointerId);
+      const e = this.pointers.findIndex((o) => o.id === t.pointerId);
       if (e === -1) return;
       const i = this.pointers[e];
       i.x = t.clientX, i.y = t.clientY;
       const n = this.pointers.length;
       this.pointers.splice(e, 1), this.listeners.forEach(
-        (r) => r({
+        (o) => o({
           event: "cancel",
           pointer: i,
           pointers: this.pointers,
@@ -377,557 +525,472 @@ class et {
     };
   }
 }
-class it {
-  constructor(t, e) {
-    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
-    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() {
-    this.image && (this.image.style.transform = "", this.image.style.width = "", this.image.style.height = "", this.image.style.top = "", this.image.style.left = "", this.image.style.opacity = "");
-  }
-  reset() {
-    this.clean(), this.image = null, this.rect = null, this.initialCenter = { x: window.innerWidth / 2, y: window.innerHeight / 2 }, this.maxDimension = { width: 0 }, this.minDimension = { initialWidth: 0, initialHeight: 0, minWidth: 0, closingWidth: 0 }, this.accumulatedTranslate = { x: 0, y: 0 }, this.scale = 1, this.translate = { x: 0, y: 0 };
-  }
-  setCurrentImage(t) {
-    if (this.rect = null, this.image = t, this.maxDimension = {
-      width: t.naturalWidth * this.maxZoomLevel
-    }, !t.dataset.vvwWidth || !t.dataset.vvwHeight)
-      throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");
-    const e = parseFloat(t.dataset.vvwWidth), i = parseFloat(t.dataset.vvwHeight);
-    this.minDimension = {
-      initialWidth: e,
-      initialHeight: i,
-      minWidth: e * 0.1,
-      closingWidth: e * 0.5
-    }, this.accumulatedTranslate = { x: 0, y: 0 };
-  }
-  setInitialCenter(t) {
-    this.initialCenter = t || { x: window.innerWidth / 2, y: window.innerHeight / 2 };
-  }
-  move(t) {
-    this.image && (this.rect || (this.rect = this.image.getBoundingClientRect()), this.translate.x = L(t.x - this.initialCenter.x), this.translate.y = L(t.y - this.initialCenter.y), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`);
-  }
-  snapToTargetIfClose(t, e, i = 1) {
-    return Math.abs(t - e) <= i && (t = e), t;
-  }
-  scaleMove(t, e) {
-    if (!this.image) return;
-    this.rect || (this.rect = this.image.getBoundingClientRect()), e || (e = this.initialCenter);
-    const i = this.snapToTargetIfClose(
-      q(this.rect.width * t, this.minDimension.minWidth, this.maxDimension.width),
-      this.minDimension.initialWidth
-    );
-    this.onScale && this.onScale({
-      scale: i / (this.maxDimension.width / this.maxZoomLevel),
-      isMax: i >= this.maxDimension.width,
-      isMin: i <= this.minDimension.initialWidth
-    }), this.scale = L(i / this.rect.width);
-    const n = this.rect.left + this.rect.width / 2, r = this.rect.top + this.rect.height / 2, a = this.initialCenter.x - n, o = this.initialCenter.y - r, l = a * (1 - this.scale), c = o * (1 - this.scale), d = e.x - this.initialCenter.x, p = e.y - this.initialCenter.y;
-    this.translate.x = L(l + d), this.translate.y = L(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: r, y: a }) => {
-      if (i)
-        return;
-      if (Math.abs(r) < 1e-3 && Math.abs(a) < 1e-3)
-        return this.normalize();
-      r *= 0.9, a *= 0.9;
-      const o = this.image.getBoundingClientRect();
-      this.translate.x = L(this.translate.x + r), this.translate.y = L(this.translate.y + a), o.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - o.right) * 0.1, r *= 0.7), o.left > window.innerWidth / 2 && (this.translate.x -= (o.left - window.innerWidth / 2) * 0.1, r *= 0.7), o.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - o.bottom) * 0.1, a *= 0.7), o.top > window.innerHeight / 2 && (this.translate.y -= (o.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: r, y: a }));
-    };
-    return n({
-      x: t.movementX,
-      y: t.movementY
-    }), () => {
-      i = !0, cancelAnimationFrame(e), this.normalize(!1);
-    };
-  }
-  animateZoom(t) {
-    if (!this.image) return;
-    this.rect || (this.rect = this.image.getBoundingClientRect());
-    const e = Date.now(), i = this.image;
-    this.rect.width * t < this.minDimension.closingWidth || i.width < Math.floor(this.minDimension.initialWidth) || (i.addEventListener(
-      "transitionend",
-      () => {
-        this.animationTimestamp === e && i && (i.style.transition = "", this.normalize());
-      },
-      { once: !0 }
-    ), i.style.transition || (i.style.transition = "all 222ms ease"), this.animationTimestamp = e, this.scaleMove(t));
-  }
-  normalize(t = !0) {
-    if (!this.image || !this.rect) return;
-    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), r = 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 = `${r}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 a = this.image;
-        a && (a.addEventListener(
-          "transitionend",
-          () => {
-            a && (this.clean(), this.rect = null);
-          },
-          { once: !0 }
-        ), a.style.transition = "all 222ms ease", a.style.width = `${this.minDimension.initialWidth}px`, a.style.height = `${this.minDimension.initialHeight}px`, a.style.left = "50%", a.style.top = "50%");
-      });
-    else if (t) {
-      let a = !1;
-      if (this.rect.right < window.innerWidth / 2 && (a = !0, this.accumulatedTranslate.x += window.innerWidth / 2 - this.rect.right), this.rect.left > window.innerWidth / 2 && (a = !0, this.accumulatedTranslate.x -= this.rect.left - window.innerWidth / 2), this.rect.bottom < window.innerHeight / 2 && (a = !0, this.accumulatedTranslate.y += window.innerHeight / 2 - this.rect.bottom), this.rect.top > window.innerHeight / 2 && (a = !0, this.accumulatedTranslate.y -= this.rect.top - window.innerHeight / 2), a) {
-        const o = this.image;
-        o.addEventListener(
-          "transitionend",
-          () => {
-            o && (o.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)`;
-      } else
-        this.rect = null;
-    }
-  }
-}
-class nt {
-  constructor() {
-    h(this, "fiolast", {});
-  }
-  // first in out
-  fio(t, e, i = 50) {
-    const r = Date.now() - (this.fiolast[e] ?? 0), a = () => {
-      this.fiolast[e] = Date.now(), t();
-    };
-    if (!this.fiolast[e]) {
-      a();
-      return;
-    }
-    r >= i && a();
-  }
-}
-const C = {
-  somethingOpened: null
-};
-class st {
-  constructor(t, e = {}) {
-    h(this, "options");
-    h(this, "elements");
-    h(this, "isReducedMotion");
-    h(this, "currentIndex", -1);
-    h(this, "currentChildren", null);
-    h(this, "setupFunction", K);
-    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));
+class Q {
+  constructor(t) {
+    //
+    r(this, "pointers", null);
+    // Pinch gesture state
+    r(this, "lastDistance", 0);
+    r(this, "pinchMode", !1);
+    r(this, "lastPinchEndTime", 0);
+    r(this, "PINCH_COOLDOWN", 111);
+    r(this, "cancelMove", () => {
+    });
+    r(this, "pointerListeners", []);
+    r(this, "vvw");
+    // private vistaImage: VistaImage;
+    r(this, "imageContainer", null);
+    r(this, "isPinching", () => this.pinchMode || performance.now() - this.lastPinchEndTime < this.PINCH_COOLDOWN);
+    r(this, "internalPointerListener", (t) => {
+      const e = this.vvw.state.children.images.find((i) => i.pos === 0);
+      if (t.event === "down") {
+        if (this.cancelMove(), this.vvw.state.zoomedIn && t.pointers.length === 1 && !this.isPinching()) {
+          const i = this.pointers.getCentroid();
+          e.setInitialCenter(i);
+        }
+        if (t.pointers.length >= 2) {
+          this.pinchMode = !0;
+          const i = this.pointers.getCentroid();
+          this.lastDistance = this.pointers.getPointerDistance(t.pointers[0], t.pointers[1]), e.setInitialCenter(i);
+        }
+      } else if (t.event === "move") {
+        if (this.vvw.state.zoomedIn && t.pointers.length === 1 && t.lastPointerLen === 0 && !this.isPinching()) {
+          const i = this.pointers.getCentroid();
+          e.scaleMove(1, i);
+        }
+        if (t.pointers.length >= 2 && this.pinchMode) {
+          const i = this.pointers.getCentroid(), n = this.pointers.getPointerDistance(t.pointers[0], t.pointers[1]);
+          e.scaleMove(n / this.lastDistance, i);
+        }
+      } else if ((t.event === "up" || t.event === "cancel") && (this.pinchMode || this.vvw.state.zoomedIn))
+        if (this.pinchMode) {
+          this.lastPinchEndTime = performance.now(), this.pinchMode = !1;
+          const i = e.setFinalTransform();
+          i != null && i.cancel && (this.cancelMove = i.cancel), i != null && i.close && requestAnimationFrame(() => {
+            this.vvw.close();
+          });
+        } else this.vvw.state.zoomedIn && t.pointers.length === 0 && !this.isPinching() && (e.isThrowing = !0, this.cancelMove = e.momentumThrow({
+          x: t.pointer.movementX,
+          y: t.pointer.movementY
+        }));
+      this.pointerListeners.forEach(
+        (i) => i({
+          ...t,
+          state: this.vvw.state,
+          hasInternalExecution: this.vvw.state.zoomedIn || this.isPinching(),
+          abortController: this.vvw.state.abortController
+        })
+      );
     });
-    h(this, "defaultOnClickHandler", (t) => t.preventDefault());
-    h(this, "abortController", null);
-    h(this, "throttle", new nt());
-    h(this, "lastSwapTime", 0);
-    h(this, "isRapidSwap", !1);
-    h(this, "isRapidSwapRelease", 0);
-    h(this, "transitionCleanup", null);
-    h(this, "isZoomedIn", !1);
-    h(this, "onKeyDown", (t) => {
+    r(this, "onKeyDown", (t) => {
+      const e = this.vvw;
       switch (t.key) {
         case "ArrowLeft":
-          t.preventDefault(), this.prev();
+          t.preventDefault(), e.prev();
           break;
         case "ArrowRight":
-          t.preventDefault(), this.next();
+          t.preventDefault(), e.next();
           break;
         case "ArrowUp":
-          t.preventDefault(), this.zoomIn();
+          t.preventDefault(), e.zoomIn();
           break;
         case "ArrowDown":
-          t.preventDefault(), this.zoomOut();
+          t.preventDefault(), e.zoomOut();
           break;
         case "Escape":
-          t.preventDefault(), this.close();
+          t.preventDefault(), e.close();
           break;
       }
     });
-    h(this, "onScroll", (t) => {
+    r(this, "onScroll", (t) => {
       t.preventDefault();
-      const e = t.deltaY;
-      this.imageState.setInitialCenter({
+      const e = this.vvw, i = this.vvw.state.children.images.find((o) => o.pos === 0), n = t.deltaY;
+      i.setInitialCenter({
         x: t.clientX,
         y: t.clientY
-      }), e < 0 ? this.zoomIn() : e > 0 && this.zoomOut();
+      }), n < 0 ? e.zoomIn() : n > 0 && e.zoomOut();
     });
-    h(this, "onResizeHandler", () => {
-      this.currentChildren.htmls.forEach((t, e) => {
-        const i = this.currentChildren.images[e], n = t.querySelector("img.vvw-img-hi"), r = t.querySelector("img.vvw-img-lo");
-        if (W(i, n, r, !1), n.classList.contains("vvw--loaded")) {
-          const { width: a, height: o } = H(n);
-          n.style.setProperty("--vvw-current-w", `${a}px`), n.style.setProperty("--vvw-current-h", `${o}px`), n.dataset.vvwWidth = a.toString(), n.dataset.vvwHeight = o.toString();
-        }
+    r(this, "onResizeHandler", () => {
+      this.vvw.state.children.images.forEach((t) => {
+        t.setSizes();
       });
     });
-    /// POINTERS
-    h(this, "pointerListeners", []);
-    h(this, "getInternalPointerListener", () => {
-      const t = this.imageState;
-      let e = 0, i = !1, n = 0;
-      const r = 33;
-      let a = () => {
-      };
-      function o() {
-        return i || performance.now() - n < r;
-      }
-      return (l) => {
-        if (l.event === "down") {
-          if (a(), this.isZoomedIn && l.pointers.length === 1 && !o()) {
-            const c = this.pointers.getCentroid();
-            t.setInitialCenter(c);
-          }
-          if (l.pointers.length >= 2) {
-            i = !0;
-            const c = this.pointers.getCentroid();
-            e = this.pointers.getPointerDistance(l.pointers[0], l.pointers[1]), t.setInitialCenter(c);
-          }
-        } else if (l.event === "move") {
-          if (this.isZoomedIn && l.pointers.length === 1 && l.lastPointerLen === 0 && !o()) {
-            const c = this.pointers.getCentroid();
-            t.move(c);
-          }
-          if (l.pointers.length >= 2 && i) {
-            const c = this.pointers.getCentroid(), d = this.pointers.getPointerDistance(l.pointers[0], l.pointers[1]);
-            t.scaleMove(d / e, c);
-          }
-        } else (l.event === "up" || l.event === "cancel") && (i || this.isZoomedIn) && (i ? (n = performance.now(), i = !1, t.normalize() && requestAnimationFrame(() => {
-          this.close();
-        })) : this.isZoomedIn && l.pointers.length === 0 && !o() && (a = t.moveAndNormalize(l.pointer)));
-        this.pointerListeners.forEach(
-          (c) => c({
-            ...l,
-            hasInternalExecution: this.isZoomedIn || o(),
-            abortController: this.abortController
-          })
-        );
-      };
+    this.vvw = t;
+  }
+  // register external pointer listener
+  registerPointerListener(t) {
+    this.pointerListeners.push(t);
+  }
+  start(t) {
+    this.vvw.options.keyboardListeners && window.addEventListener("keydown", this.onKeyDown), this.imageContainer = t, this.imageContainer.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new J({
+      elm: t,
+      listeners: [this.internalPointerListener]
     });
+  }
+  stop() {
+    this.vvw.options.keyboardListeners && window.removeEventListener("keydown", this.onKeyDown), window.removeEventListener("resize", this.onResizeHandler), this.imageContainer.removeEventListener("wheel", this.onScroll), this.pointers.removeListeners(), this.pointerListeners = [];
+  }
+}
+const y = {
+  somethingOpened: null
+};
+class tt {
+  constructor(t, e = {}) {
+    r(this, "options");
+    r(this, "state", new j());
+    r(this, "imageContainer", null);
+    r(this, "externalPointerListener", []);
+    r(this, "elements");
+    r(this, "eventHandlers", null);
+    r(this, "imageSetupFunction", k);
+    r(this, "initFunction", V);
+    r(this, "openFunction", B);
+    r(this, "closeFunction", X);
+    r(this, "transitionFunction", Y);
+    r(this, "throttle", new Z());
+    r(this, "root", null);
+    r(this, "onClickElements", (t) => {
+      t.preventDefault();
+      const e = t.currentTarget;
+      e.dataset.vvwIdx && this.open(parseInt(e.dataset.vvwIdx));
+    });
+    r(this, "defaultOnClickHandler", (t) => t.preventDefault());
+    // ============================================================================
+    // SWAP LOGIC - handles image transitions between prev/next
+    // ============================================================================
+    r(this, "lastSwapTime", 0);
+    r(this, "isRapidSwap", !1);
+    r(this, "isRapidSwapRelease", 0);
+    r(this, "transitionCleanup", null);
+    // ============================================================================
+    // ACTIVATE/DEACTIVATE UI ELEMENTS
+    // ============================================================================
+    r(this, "tempDeactivatedUi", []);
+    r(this, "tempDeactivationRequestBy", null);
+    // ============================================================================
+    // ZOOM CONTROLS
+    // ============================================================================
+    r(this, "isZoomedIn", !1);
+    var i;
     this.elements = t, this.options = {
-      ...M,
+      ...I,
       ...e,
       controls: {
-        ...M.controls,
+        ...I.controls,
         ...e.controls
       }
-    }, this.imageState = new it(
-      this.options.maxZoomLevel,
-      (i) => {
-        var n, r, a, o;
-        i.isMin ? (this.isZoomedIn = !1, (n = this.qs(".vvw-zoom-out")) == null || n.setAttribute("disabled", "true")) : (this.isZoomedIn = !0, (r = this.qs(".vvw-zoom-out")) == null || r.removeAttribute("disabled")), i.isMax ? (a = this.qs(".vvw-zoom-in")) == null || a.setAttribute("disabled", "true") : (o = this.qs(".vvw-zoom-in")) == null || o.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);
-    });
+    }, this.options.imageSetupFunction && (this.imageSetupFunction = this.options.imageSetupFunction), 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.options.controls.topLeft || [],
+      ...this.options.controls.topRight || [],
+      ...this.options.controls.topCenter || [],
+      ...this.options.controls.bottomCenter || [],
+      ...this.options.controls.bottomLeft || [],
+      ...this.options.controls.bottomRight || []
+    ].forEach((n) => {
+      typeof n != "string" && this.state.extensions.add(n);
+    }), (i = this.options.extensions) == null || i.forEach((n) => {
+      this.state.extensions.add(n);
+    }), this.state.isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.reset(), this.initFunction(this);
+  }
+  reset() {
+    if (typeof this.elements == "string") {
+      const t = this.qsOrigin(this.elements);
+      this.state.elmLength = t.length, t.forEach((e, i) => {
+        const n = e;
+        n.dataset.vvwIdx = i.toString(), n.removeEventListener("click", this.defaultOnClickHandler), n.removeEventListener("pointerup", this.onClickElements), n.addEventListener("click", this.defaultOnClickHandler), n.addEventListener("pointerup", this.onClickElements);
+      });
+    } else
+      this.state.elmLength = this.elements.length;
   }
+  // ============================================================================
+  // HELPER METHODS
+  // ============================================================================
   qs(t) {
     return this.root ? this.root.querySelector(t) : null;
   }
-  async swap(t, e) {
-    const i = this.options.preloads || 0, n = this.currentIndex, { htmls: r, images: a } = this.getChildElements(i, n), o = this.imageContainer, l = this.currentChildren, c = {
-      htmlElements: { from: l.htmls, to: r },
-      images: { from: l.images, to: a },
-      index: { from: t, to: this.currentIndex },
-      via: e || { next: !1, prev: !1 },
-      vistaView: this
-    };
-    this.setupFunction(c), this.currentChildren = { htmls: r, images: a }, this.displayActiveIndex();
-    const d = this.abortController.signal, x = performance.now() - this.lastSwapTime < this.options.rapidLimit;
-    if (this.isRapidSwap = x, o.querySelectorAll(".vvw-item img.vvw-img-hi").forEach((y) => y.classList.add("vvw--load-cancelled")), x) {
-      this.imageState.reset(), o.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), r.forEach((y) => {
-        o.appendChild(y);
-      }), this.lastSwapTime = performance.now(), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c), this.isRapidSwapRelease && clearTimeout(this.isRapidSwapRelease), this.isRapidSwapRelease = setTimeout(() => {
-        this.isRapidSwap = !1;
-      }, 333);
-      return;
-    }
-    const g = this.transitionFunction(c, d);
-    g && (this.transitionCleanup = g.cleanup, await g.transitionEnded), this.lastSwapTime = performance.now();
-    const m = r[Math.floor(r.length / 2)].dataset.vvwIdx, u = o.querySelector(
-      `.vvw-item[data-vvw-idx="${m}"] img.vvw-img-hi`
-    ), b = 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, S = u.height;
-    this.imageState.reset(), o.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), r.forEach((y) => {
-      const w = y.querySelector("img.vvw-img-hi");
-      y.dataset.vvwPos === "0" && !d.aborted && f && I && S && (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 = S), w.setAttribute("style", f)), o.appendChild(y), y.dataset.vvwPos === "0" && !d.aborted && E ? (this.imageState.setCurrentImage(w), this.imageState.setInitialCenter()) : y.dataset.vvwPos === "0" && !d.aborted && f && I && S && v && b && (this.imageTransitions.set(w, b), this.transitionImage(
-        w,
-        () => {
-          this.imageState.setCurrentImage(w), this.imageState.setInitialCenter(), w.classList.add("vvw--ready");
-        }
-        // false
-      ));
-    }), this.isRapidSwap = !1, this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
+  qsOrigin(t) {
+    return document.querySelectorAll(t);
+  }
+  registerPointerListener(t) {
+    this.externalPointerListener.push(t);
   }
   getChildElements(t, e) {
-    const i = [], n = [];
-    for (let r = -t; r <= t; r++) {
-      const a = (e + r + this.elements.length) % this.elements.length, o = this.elements[a], l = o instanceof HTMLImageElement ? o : o instanceof HTMLAnchorElement && o.querySelector("img") || void 0, c = o instanceof HTMLElement ? {
-        index: a,
-        imageElm: l instanceof HTMLImageElement ? l : void 0,
-        anchorElm: o instanceof HTMLAnchorElement ? o : void 0,
-        src: o.dataset.vistaviewSrc || o.getAttribute("href") || o.getAttribute("src") || "",
-        thumb: o.dataset.vistaviewThumb || (l instanceof HTMLImageElement ? l.getAttribute("src") : void 0) || o.getAttribute("href") || void 0,
-        alt: l instanceof HTMLImageElement && l.getAttribute("alt") || void 0
-      } : {
-        index: a,
-        ...o
+    const i = [], n = [], o = typeof this.elements == "string" ? this.qsOrigin(this.elements) : this.elements;
+    for (let a = -t; a <= t; a++) {
+      const h = (e + a + o.length) % o.length, l = o[h], p = {
+        elm: l instanceof HTMLElement ? G(l) : { config: l, origin: void 0, parsedSrcSet: void 0 },
+        pos: a,
+        index: h,
+        vistaView: this,
+        maxZoomLevel: this.options.maxZoomLevel,
+        transitionShouldWait: () => this.isRapidSwap,
+        onScale: ({
+          vistaImage: m,
+          isMin: c,
+          isMax: g
+        }) => {
+          var x, b, C, w;
+          m.index === this.state.currentIndex && (this.state.zoomedIn = !c, c ? (x = this.qs(".vvw-zoom-out")) == null || x.setAttribute("disabled", "true") : (b = this.qs(".vvw-zoom-out")) == null || b.removeAttribute("disabled"), g ? (C = this.qs(".vvw-zoom-in")) == null || C.setAttribute("disabled", "true") : (w = this.qs(".vvw-zoom-in")) == null || w.removeAttribute("disabled"));
+        }
       };
-      n.push(c), i.push(U(c, r));
+      let u = null;
+      this.state.extensions.forEach((m) => {
+        !u && m.onInitializeImage && (u = m.onInitializeImage(p));
+      });
+      const v = u ?? new U(p), f = document.createElement("div");
+      f.className = "vvw-item", f.dataset.vvwPos = `${a}`, f.dataset.vvwIdx = `${h}`, v.thumb && f.appendChild(v.thumb), f.appendChild(v.element), i.push(v), n.push(f);
     }
     return {
-      htmls: i,
-      images: n
+      htmls: n,
+      images: i
     };
   }
-  zoomIn() {
-    this.throttle.fio(
-      () => {
-        this.imageState.animateZoom(1.68);
-      },
-      "zoom",
-      222
-    );
-  }
-  zoomOut() {
-    this.throttle.fio(
-      () => {
-        this.imageState.animateZoom(0.68);
-      },
-      "zoom",
-      222
-    );
-  }
-  displayActiveIndex() {
-    var a;
-    const t = this.currentIndex;
-    this.elements instanceof NodeList && this.elements.forEach((o, l) => {
-      o.style.opacity = "", l === t && (o.style.opacity = "0");
-    });
-    const e = this.qs(".vvw-index"), i = `${t + 1}`, n = `${this.elements.length}`;
-    e && (e.textContent = `${i} / ${n}`);
-    const r = this.qs(".vvw-desc");
-    if (r) {
-      const o = (a = this.currentChildren) == null ? void 0 : a.images.find((c) => c.index === t), l = (o == null ? void 0 : o.alt) || "";
-      l ? (r.textContent = l, r.setAttribute("aria-label", `Image ${i} of ${n}: ${l}`)) : (r.textContent = "", r.setAttribute("aria-label", `Image ${i} of ${n}`));
-    }
-  }
-  transitionImage(t, e) {
-    if (t.classList.contains("vvw--load-cancelled")) return;
-    if (this.isRapidSwap) {
-      requestAnimationFrame(() => {
-        this.transitionImage(t, e);
+  async swap(t, e) {
+    var f, m;
+    this.reactivateUi();
+    const i = this.options.preloads || 0, n = this.state.currentIndex, { htmls: o, images: a } = this.getChildElements(i, n), h = this.imageContainer, l = this.state.children, d = {
+      htmlElements: { from: l.htmls, to: o },
+      images: { from: l.images, to: a },
+      index: { from: t, to: this.state.currentIndex },
+      via: e || { next: !1, prev: !1 },
+      vistaView: this
+    };
+    this.imageSetupFunction(d), this.state.zoomedIn = !1, (f = this.qs(".vvw-zoom-out")) == null || f.setAttribute("disabled", "true"), (m = this.qs(".vvw-zoom-in")) == null || m.removeAttribute("disabled");
+    const u = performance.now() - this.lastSwapTime < this.options.rapidLimit;
+    this.isRapidSwap = u;
+    const { images: v } = this.state.children;
+    if (this.state.children = { htmls: o, images: a }, this.displayCurrentInfo(), u)
+      v.forEach((c) => {
+        c.cancelPendingLoad(), c.destroy();
+      });
+    else {
+      const c = this.state.abortController.signal, g = this.transitionFunction(d, c);
+      g && (this.transitionCleanup = g.cleanup, await g.transitionEnded), this.lastSwapTime = performance.now(), v.forEach((w) => {
+        w.cancelPendingLoad();
+      });
+      const x = v.find((w) => w.index === n), b = x ? L.stop(x) : void 0, C = a.find((w) => w.index === n);
+      C && x && C.cloneStyleFrom(x, b), v.forEach((w) => {
+        w.destroy();
       });
-      return;
     }
-    const i = this.imageTransitions.get(t);
-    i && requestAnimationFrame(() => {
-      if (t.classList.contains("vvw--load-cancelled")) return;
-      const { current: n, target: r } = i, a = {
-        width: n.width + (r.width - n.width) * 0.2,
-        height: n.height + (r.height - n.height) * 0.2,
-        radius: n.radius + (r.radius - n.radius) * 0.2
-      };
-      Math.abs(a.width - r.width) < 1 && Math.abs(a.height - r.height) < 1 && Math.abs(a.radius - r.radius) < 1 ? (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.delete(t), e()) : (t.style.setProperty("--vvw-current-w", `${a.width}px`), t.style.setProperty("--vvw-current-h", `${a.height}px`), t.style.setProperty("--vvw-current-radius", `${a.radius}px`), this.imageTransitions.set(t, { current: a, target: r }), this.transitionImage(
-        t,
-        e
-        /* false */
-      ));
+    h.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((c) => {
+      h.appendChild(c);
+    }), a.forEach((c) => {
+      c.init();
+    }), u ? (this.isRapidSwapRelease && clearTimeout(this.isRapidSwapRelease), this.isRapidSwapRelease = setTimeout(() => {
+      this.isRapidSwap = !1;
+    }, 333)) : this.isRapidSwap = !1, this.options.onImageView && this.options.onImageView(d, this), this.state.extensions.forEach((c) => {
+      c.onImageView && c.onImageView(d, this);
     });
   }
-  waitForImagesToLoad() {
-    this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((i) => {
-      const n = i;
-      if (n.classList.contains("vvw--load-cancelled")) return;
-      const r = () => {
-        if (n.classList.contains("vvw--load-cancelled")) return;
-        n.width = n.naturalWidth, n.height = n.naturalHeight;
-        const { width: a, height: o } = H(n);
-        n.dataset.vvwWidth = a.toString(), n.dataset.vvwHeight = o.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
-          },
-          target: { width: a, height: o, radius: 0 }
-        }), this.transitionImage(n, () => {
-          var c;
-          if (n.classList.contains("vvw--load-cancelled")) return;
-          ((c = n.parentElement) == null ? void 0 : c.matches(
-            `[data-vvw-idx="${this.currentIndex}"][data-vvw-pos="0"]`
-          )) && (this.imageState.setCurrentImage(n), this.imageState.setInitialCenter()), n.classList.add("vvw--ready");
-        });
-      };
-      if (n.complete && n.naturalWidth !== 0) {
-        r();
-        return;
-      }
-      n.addEventListener("load", () => {
-        r();
-      }), n.addEventListener("error", () => {
-        var o;
-        n.classList.add("vvw--loaderror");
-        const a = document.createElement("p");
-        a.className = "vvw-img-err", a.setAttribute("role", "alert"), a.textContent = "Error loading image", (o = n.parentNode) == null || o.appendChild(a);
-      });
+  // ============================================================================
+  // UI UPDATES
+  // ============================================================================
+  displayCurrentInfo() {
+    const t = this.state.currentIndex;
+    typeof this.elements == "string" && this.qsOrigin(this.elements).forEach((a, h) => {
+      a.style.opacity = "", h === t && (a.style.opacity = "0");
     });
+    const e = this.qs(".vvw-index"), i = `${t + 1}`, n = `${this.state.elmLength}`;
+    e && (e.textContent = `${i} / ${n}`);
+    const o = this.qs(".vvw-desc");
+    if (o) {
+      const a = this.state.children.images.find((l) => l.index === t), h = (a == null ? void 0 : a.config.alt) || "";
+      h ? (o.textContent = h, o.setAttribute("aria-label", `Image ${i} of ${n}: ${h}`), o.style.opacity = "") : (o.textContent = "", o.setAttribute("aria-label", `Image ${i} of ${n}`), o.style.opacity = "0");
+    }
   }
-  registerPointerListener(t) {
-    this.pointerListeners.push(t);
-  }
-  unregisterPointerListeners() {
-    this.pointerListeners = [];
+  deactivateUi(t, e) {
+    t.forEach((i) => {
+      var n, o;
+      i === "zoomIn" ? (n = this.qs(".vvw-zoom-in")) == null || n.setAttribute("disabled", "true") : i === "zoomOut" && ((o = this.qs(".vvw-zoom-out")) == null || o.setAttribute("disabled", "true")), this.tempDeactivatedUi.push(i);
+    }), this.tempDeactivationRequestBy = e || null, this.state.extensions.forEach((i) => {
+      i.onDeactivateUi && i.onDeactivateUi(t, this.tempDeactivationRequestBy, this);
+    });
   }
-  /// OPEN
+  reactivateUi() {
+    this.tempDeactivatedUi.forEach((t) => {
+      var e, i;
+      t === "zoomIn" ? (e = this.qs(".vvw-zoom-in")) == null || e.removeAttribute("disabled") : t === "zoomOut" && ((i = this.qs(".vvw-zoom-out")) == null || i.removeAttribute("disabled"));
+    }), this.state.extensions.forEach((t) => {
+      t.onReactivateUi && t.onReactivateUi(this.tempDeactivatedUi, this.tempDeactivationRequestBy, this);
+    }), this.tempDeactivatedUi = [], this.tempDeactivationRequestBy = null;
+  }
+  // ============================================================================
+  // LIFECYCLE METHODS - open, close, destroy
+  // ============================================================================
+  // OPEN
   open(t = 0) {
-    var c, d, p, x, g;
-    if (C.somethingOpened)
+    var l, d, p, u, v, f, m;
+    if (y.somethingOpened) {
+      console.warn(
+        "Another VistaView instance is already opened. Close it first before opening a new one."
+      );
       return;
-    C.somethingOpened = this, this.currentIndex = t, document.body.style.overflow = "hidden";
-    const e = _({
+    }
+    y.somethingOpened = this, this.reset(), (t < 0 || t >= this.state.elmLength) && (t = (t % this.state.elmLength + this.state.elmLength) % this.state.elmLength), this.state.currentIndex = t, document.body.style.overflow = "hidden";
+    const e = $({
       controls: this.options.controls
     });
-    if (document.body.prepend(e), this.root = document.body.querySelector("#vvw-root"), !this.root)
+    if (document.body.append(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: r, htmls: a } = this.getChildElements(i, n), o = {
+    const i = this.options.preloads || 0, n = t, { images: o, htmls: a } = this.getChildElements(i, n), h = {
       htmlElements: { from: null, to: a },
-      images: { from: null, to: r },
-      index: { from: null, to: this.currentIndex },
+      images: { from: null, to: o },
+      index: { from: null, to: this.state.currentIndex },
       via: { next: !1, prev: !1 },
       vistaView: this
     };
-    this.setupFunction(o), this.currentChildren = { htmls: a, images: r }, a.forEach((m) => {
-      this.imageContainer.appendChild(m);
-    }), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (d = this.qs(".vvw-zoom-in")) == null || d.addEventListener("click", () => this.zoomIn()), (p = this.qs(".vvw-zoom-out")) == null || p.addEventListener("click", () => this.zoomOut()), (x = this.qs(".vvw-prev>button")) == null || x.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 l = {};
-    [
-      ...this.options.controls.topLeft || [],
-      ...this.options.controls.topRight || [],
-      ...this.options.controls.topCenter || [],
-      ...this.options.controls.bottomCenter || [],
-      ...this.options.controls.bottomLeft || [],
-      ...this.options.controls.bottomRight || []
-    ].forEach((m) => {
-      typeof m != "string" && (l[m.name] = m);
-    }), this.root.querySelectorAll("button[data-vvw-control]").forEach((m) => {
-      const u = m;
-      u.addEventListener("click", (b) => {
-        const f = b.currentTarget.dataset.vvwControl, v = l[f], E = this.currentChildren.images.find(
-          (I) => I.index === this.currentIndex
-        );
-        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(() => {
+    this.imageSetupFunction(h), this.state.children = { htmls: a, images: o }, a.forEach((c) => {
+      this.imageContainer.appendChild(c);
+    }), o.forEach((c) => {
+      c.init();
+    }), (l = this.qs(".vvw-close")) == null || l.addEventListener("click", () => this.close()), (d = this.qs(".vvw-zoom-in")) == null || d.addEventListener("click", () => this.zoomIn()), (p = this.qs(".vvw-zoom-out")) == null || p.addEventListener("click", () => this.zoomOut()), (u = this.qs(".vvw-prev>button")) == null || u.addEventListener("click", () => this.prev()), (v = this.qs(".vvw-next>button")) == null || v.addEventListener("click", () => this.next()), this.state.elmLength < 2 && ((f = this.qs(".vvw-prev")) == null || f.classList.add("vvw--hidden"), (m = this.qs(".vvw-next")) == null || m.classList.add("vvw--hidden")), this.openFunction(this), this.eventHandlers = new Q(this), this.externalPointerListener.forEach((c) => {
+      this.eventHandlers.registerPointerListener(c);
+    }), this.eventHandlers.start(this.imageContainer), requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        var m;
-        (m = this.root) == null || m.addEventListener(
+        var c;
+        (c = this.root) == null || c.addEventListener(
           "transitionend",
           () => {
-            var u;
-            (u = this.root) == null || u.classList.add("vvw--settled"), this.imageState.reset(), this.waitForImagesToLoad();
+            var g;
+            (g = this.root) == null || g.classList.add("vvw--settled");
           },
           { once: !0 }
-        ), this.root.classList.add("vvw--active"), this.displayActiveIndex(), this.options.onOpen && this.options.onOpen(this), this.options.onImageView && this.options.onImageView(o);
+        ), this.root.classList.add("vvw--active"), this.displayCurrentInfo(), this.options.onOpen && this.options.onOpen(this), this.options.onImageView && this.options.onImageView(h, this), this.state.extensions.forEach((g) => {
+          g.onOpen && g.onOpen(this), g.onImageView && g.onImageView(h, this);
+        });
       });
     });
   }
   /// CLOSE
   async close(t = !0) {
-    C.somethingOpened === this && this.root && (t ? await new Promise((e) => {
+    y.somethingOpened === this && this.root && (this.eventHandlers.stop(), this.eventHandlers = null, this.state.children.images.forEach((e) => {
+      e.prepareClose();
+    }), t ? await new Promise((e) => {
       let n = 0;
-      this.root.addEventListener("transitionend", (r) => {
-        r.target === this.root && (n++, n === 2 && this.elements instanceof NodeList && this.elements.forEach((a) => {
+      this.root.addEventListener("transitionend", (o) => {
+        o.target === this.root && (n++, n === 2 && typeof this.elements == "string" && (this.state.children.images.forEach((a) => {
+          a.destroy();
+        }), this.qsOrigin(this.elements).forEach((a) => {
           a.style.opacity = "";
-        }), n === 3 && e(null));
+        })), n === 3 && e(null));
       }), this.root.classList.add("vvw--closing");
-    }) : this.elements instanceof NodeList && this.elements.forEach((e) => {
+    }) : typeof this.elements == "string" && (this.state.children.images.forEach((e) => {
+      e.destroy();
+    }), this.qsOrigin(this.elements).forEach((e) => {
       e.style.opacity = "";
-    }), this.options.keyboardListeners && window.removeEventListener("keydown", this.onKeyDown), window.removeEventListener("resize", this.onResizeHandler), window.removeEventListener("wheel", this.onScroll), this.unregisterPointerListeners(), this.pointers.removeListeners(), this.root.remove(), this.root = null, this.imageContainer = null, this.currentChildren = null, this.currentIndex = -1, document.body.style.overflow = "", C.somethingOpened = null, this.closeFunction(this), this.options.onClose && this.options.onClose(this));
+    })), this.root.remove(), this.root = null, this.imageContainer = null, this.state.children = { htmls: [], images: [] }, this.state.currentIndex = -1, this.state.children.images.forEach((e) => {
+      e.destroy();
+    }), document.body.style.overflow = "", y.somethingOpened = null, this.closeFunction(this), this.options.onClose && this.options.onClose(this), this.state.extensions.forEach((e) => {
+      e.onClose && e.onClose(this);
+    }));
   }
+  // DESTROY
+  destroy() {
+    this.close(!1), this.externalPointerListener = [], typeof this.elements == "string" && this.qsOrigin(this.elements).forEach((t) => {
+      t.removeAttribute("data-vista-idx"), t.removeEventListener("click", this.defaultOnClickHandler), t.removeEventListener("pointerup", this.onClickElements);
+    });
+  }
+  // ============================================================================
+  // NAVIGATION METHODS - next, prev, view
+  // ============================================================================
   next() {
-    if (C.somethingOpened !== this)
+    if (y.somethingOpened !== this) {
+      console.warn("This VistaView instance is not opened.");
       return;
-    const t = (this.currentIndex + 1) % this.elements.length;
+    }
+    const t = (this.state.currentIndex + 1) % this.state.elmLength;
     this.view(t, { next: !0, prev: !1 });
   }
   prev() {
-    if (C.somethingOpened !== this)
+    if (y.somethingOpened !== this) {
+      console.warn("This VistaView instance is not opened.");
       return;
-    const t = (this.currentIndex - 1 + this.elements.length) % this.elements.length;
+    }
+    const t = (this.state.currentIndex - 1 + this.state.elmLength) % this.state.elmLength;
     this.view(t, { next: !1, prev: !0 });
   }
-  destroy() {
-    this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
-      t.removeAttribute("data-vista-idx"), t.removeEventListener("click", this.defaultOnClickHandler), t.removeEventListener("pointerup", this.onClickElements);
-    });
+  view(t, e) {
+    if (y.somethingOpened !== this) {
+      console.warn("This VistaView instance is not opened.");
+      return;
+    }
+    if (this.state.elmLength < 2)
+      return;
+    (t < 0 || t >= this.state.elmLength) && (t = (t % this.state.elmLength + this.state.elmLength) % this.state.elmLength);
+    const i = this.state.currentIndex;
+    this.state.currentIndex = t;
+    const n = this.state.abortController;
+    n == null || n.abort(), this.state.abortController = new AbortController(), this.swap(i, e);
   }
-  getCurrentIndex() {
-    return C.somethingOpened !== this ? -1 : this.currentIndex;
+  zoomIn() {
+    if (y.somethingOpened !== this) {
+      console.warn("This VistaView instance is not opened.");
+      return;
+    }
+    this.throttle.fio(
+      () => {
+        const t = this.state.children.images.find((e) => e.pos === 0);
+        t == null || t.animateZoom(1.68);
+      },
+      "zoom",
+      222
+    );
   }
-  view(t, e) {
-    if (C.somethingOpened !== this || t < 0 || t >= this.elements.length)
+  zoomOut() {
+    if (y.somethingOpened !== this) {
+      console.warn("This VistaView instance is not opened.");
       return;
-    const i = this.currentIndex;
-    this.currentIndex = t;
-    const n = this.abortController;
-    n == null || n.abort(), this.abortController = new AbortController(), this.swap(i, e);
+    }
+    this.throttle.fio(
+      () => {
+        const t = this.state.children.images.find((e) => e.pos === 0);
+        t == null || t.animateZoom(0.68);
+      },
+      "zoom",
+      222
+    );
+  }
+  getCurrentIndex() {
+    return this.state.currentIndex;
   }
 }
-function ot(s) {
+function et(s) {
   let t = null;
-  if (typeof s == "string" ? t = document.querySelectorAll(s) : s instanceof NodeList && (t = s), t)
+  if (typeof s == "string") {
+    if (t = document.querySelectorAll(s), t.length === 0)
+      return new Error("No elements found in node list.").toString();
     for (let e = 0; e < t.length; e++) {
-      const i = t[e];
-      if (!(i.dataset.vistaviewSrc || i.getAttribute("href") || i.getAttribute("src") || ""))
-        return `Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`;
+      const i = t[e], n = i.tagName.toLowerCase();
+      if (n !== "img" && n !== "a")
+        return new Error(`Invalid element at index ${e}: expected <img>, <a>, got <${n}>`);
+      if (n === "a" && !(i.querySelector("img") !== null))
+        return new Error(`Invalid <a> element at index ${e}: must contain <img>`);
     }
-  else {
+  } else {
     const e = s;
     for (let i = 0; i < e.length; i++)
       if (!e[i].src)
-        return `Element at index ${i} is missing 'src' attribute.`;
+        return new Error(`Invalid image data at index ${i}: must have 'src'`);
   }
-  return t || s;
+  return s;
 }
-function at({ elements: s, ...t }) {
-  if (!s) throw new Error("No elements");
-  let e = ot(s);
-  if (typeof e == "string")
-    return null;
-  const i = new st(e, t);
+function st({ elements: s, ...t }) {
+  if (!s)
+    return console.error(s), console.error("no elements provided"), console.warn("VistaView: silently returning."), null;
+  let e = et(s);
+  if (e instanceof Error)
+    return console.error(e), console.warn("VistaView: silently returning."), null;
+  const i = new tt(e, t);
   return {
     open: (n = 0) => i.open(n),
+    reset: () => i.reset(),
     close: () => i.close(),
     next: () => i.next(),
     prev: () => i.prev(),
+    zoomIn: () => i.zoomIn(),
+    zoomOut: () => i.zoomOut(),
     destroy: () => i.destroy(),
     getCurrentIndex: () => i.getCurrentIndex(),
     view: (n) => {
@@ -936,11 +999,18 @@ function at({ elements: s, ...t }) {
   };
 }
 export {
-  M as DefaultOptions,
-  Q as close,
-  G as init,
-  K as setup,
-  tt as transition,
-  at as vistaView,
-  j as vistaViewDownload
+  I as DefaultOptions,
+  D as VistaBox,
+  L as VistaHiresTransition,
+  U as VistaImage,
+  Q as VistaImageEvent,
+  J as VistaPointers,
+  j as VistaState,
+  tt as VistaView,
+  X as close,
+  k as imageSetup,
+  V as init,
+  B as open,
+  Y as transition,
+  st as vistaView
 };