js-cloudimage-hotspot 1.0.0

package/dist/react/index.js

@@ -0,0 +1,1617 @@
+import { jsxs as rt, Fragment as $, jsx as W } from "react/jsx-runtime";
+import at, { useRef as C, useEffect as Y, forwardRef as ct, useImperativeHandle as lt } from "react";
+import { createPortal as ht } from "react-dom";
+const pt = {
+  alt: "",
+  trigger: "hover",
+  zoom: !1,
+  zoomMax: 4,
+  zoomMin: 1,
+  theme: "light",
+  pulse: !0,
+  zoomControls: !0,
+  placement: "top",
+  lazyLoad: !0,
+  sceneTransition: "fade",
+  scrollHint: !0,
+  invertMarkerTheme: !1,
+  fullscreenButton: !0,
+  zoomControlsPosition: "bottom-right"
+}, dt = {
+  "data-ci-hotspot-src": { key: "src", type: "string" },
+  "data-ci-hotspot-alt": { key: "alt", type: "string" },
+  "data-ci-hotspot-items": { key: "hotspots", type: "json" },
+  "data-ci-hotspot-trigger": { key: "trigger", type: "string" },
+  "data-ci-hotspot-zoom": { key: "zoom", type: "boolean" },
+  "data-ci-hotspot-zoom-max": { key: "zoomMax", type: "number" },
+  "data-ci-hotspot-zoom-min": { key: "zoomMin", type: "number" },
+  "data-ci-hotspot-theme": { key: "theme", type: "string" },
+  "data-ci-hotspot-pulse": { key: "pulse", type: "boolean" },
+  "data-ci-hotspot-placement": { key: "placement", type: "string" },
+  "data-ci-hotspot-lazy-load": { key: "lazyLoad", type: "boolean" },
+  "data-ci-hotspot-zoom-controls": { key: "zoomControls", type: "boolean" },
+  "data-ci-hotspot-scroll-hint": { key: "scrollHint", type: "boolean" },
+  "data-ci-hotspot-ci-token": { key: "token", type: "string", nested: "cloudimage" },
+  "data-ci-hotspot-ci-api-version": { key: "apiVersion", type: "string", nested: "cloudimage" },
+  "data-ci-hotspot-ci-domain": { key: "domain", type: "string", nested: "cloudimage" },
+  "data-ci-hotspot-ci-limit-factor": { key: "limitFactor", type: "number", nested: "cloudimage" },
+  "data-ci-hotspot-ci-params": { key: "params", type: "string", nested: "cloudimage" },
+  "data-ci-hotspot-scenes": { key: "scenes", type: "json" },
+  "data-ci-hotspot-initial-scene": { key: "initialScene", type: "string" },
+  "data-ci-hotspot-scene-transition": { key: "sceneTransition", type: "string" },
+  "data-ci-hotspot-scene-aspect-ratio": { key: "sceneAspectRatio", type: "string" },
+  "data-ci-hotspot-invert-marker-theme": { key: "invertMarkerTheme", type: "boolean" },
+  "data-ci-hotspot-fullscreen-button": { key: "fullscreenButton", type: "boolean" },
+  "data-ci-hotspot-zoom-controls-position": { key: "zoomControlsPosition", type: "string" }
+};
+function ut(i) {
+  const t = {}, e = {};
+  for (const [o, s] of Object.entries(dt)) {
+    const c = i.getAttribute(o);
+    if (c === null) continue;
+    const n = ft(c, s.type);
+    s.nested === "cloudimage" ? e[s.key] = n : t[s.key] = n;
+  }
+  return Object.keys(e).length > 0 && (t.cloudimage = e), t;
+}
+function ft(i, t) {
+  switch (t) {
+    case "boolean":
+      return i === "true";
+    case "number": {
+      const e = parseFloat(i);
+      if (isNaN(e)) {
+        console.warn(`CIHotspot: invalid number value "${i}"`);
+        return;
+      }
+      return e;
+    }
+    case "json":
+      try {
+        return JSON.parse(i);
+      } catch {
+        console.warn(`CIHotspot: failed to parse JSON value "${i}"`);
+        return;
+      }
+    default:
+      return i;
+  }
+}
+function j(i) {
+  return {
+    ...pt,
+    ...i,
+    src: i.src || "",
+    hotspots: i.hotspots || []
+  };
+}
+function V(i) {
+  if (i.scenes && i.scenes.length > 0) {
+    const t = /* @__PURE__ */ new Set();
+    for (const e of i.scenes) {
+      if (!e.id) throw new Error('CIHotspot: each scene must have an "id"');
+      if (t.has(e.id))
+        throw new Error(`CIHotspot: duplicate scene ID "${e.id}"`);
+      if (t.add(e.id), !e.src) throw new Error(`CIHotspot: scene "${e.id}" must have a "src"`);
+    }
+    for (const e of i.scenes)
+      for (const o of e.hotspots || [])
+        if (o.navigateTo && !t.has(o.navigateTo))
+          throw new Error(`CIHotspot: hotspot "${o.id}" navigateTo "${o.navigateTo}" is not a valid scene ID`);
+    if (i.initialScene && !t.has(i.initialScene))
+      throw new Error(`CIHotspot: initialScene "${i.initialScene}" not found in scenes`);
+  } else if (!i.src)
+    throw new Error('CIHotspot: "src" is required');
+}
+const B = "ci-hotspot-styles";
+function ot() {
+  return typeof window < "u" && typeof document < "u";
+}
+function mt(i) {
+  if (typeof i == "string") {
+    const t = document.querySelector(i);
+    if (!t) throw new Error(`CIHotspot: element "${i}" not found`);
+    return t;
+  }
+  return i;
+}
+function b(i, t, e) {
+  const o = document.createElement(i);
+  if (t && (o.className = t), e)
+    for (const [s, c] of Object.entries(e))
+      o.setAttribute(s, c);
+  return o;
+}
+function g(i, ...t) {
+  i.classList.add(...t);
+}
+function w(i, ...t) {
+  i.classList.remove(...t);
+}
+function gt(i) {
+  if (!ot() || document.getElementById(B)) return;
+  const t = document.createElement("style");
+  t.id = B, t.textContent = i, document.head.appendChild(t);
+}
+function _(i) {
+  if (typeof i == "string") {
+    const t = i.trim();
+    return t.endsWith("%") ? { value: parseFloat(t), isPercent: !0 } : { value: parseFloat(t), isPercent: !1 };
+  }
+  return { value: i, isPercent: !1 };
+}
+function G(i, t, e, o) {
+  const s = _(i), c = _(t);
+  return {
+    x: s.isPercent ? s.value : s.value / e * 100,
+    y: c.isPercent ? c.value : c.value / o * 100
+  };
+}
+function m(i, t, e, o) {
+  return i.addEventListener(t, e, o), () => i.removeEventListener(t, e, o);
+}
+function vt(i, t) {
+  const e = b("button", "ci-hotspot-marker", {
+    "aria-label": i.label,
+    "aria-expanded": "false",
+    "data-hotspot-id": i.id,
+    tabindex: "0"
+  });
+  if (e.style.left = `${i.x}%`, e.style.top = `${i.y}%`, i.className) {
+    const o = i.className.trim().split(/\s+/).filter(Boolean);
+    o.length && g(e, ...o);
+  }
+  return i.hidden && g(e, "ci-hotspot-marker--hidden"), t && g(e, "ci-hotspot-marker--pulse"), i.icon && wt(e, i.icon), e;
+}
+function bt(i) {
+  if (typeof DOMParser > "u") return "";
+  const e = new DOMParser().parseFromString(i, "image/svg+xml").documentElement;
+  return e.querySelector("parsererror") ? "" : (it(e), new XMLSerializer().serializeToString(e));
+}
+const yt = /* @__PURE__ */ new Set([
+  "script",
+  "foreignobject",
+  "iframe",
+  "object",
+  "embed",
+  "animate",
+  "animatetransform",
+  "animatemotion",
+  "set",
+  "style",
+  "a",
+  "use",
+  "image",
+  "feimage"
+]);
+function it(i) {
+  for (const t of Array.from(i.attributes)) {
+    const e = t.name.toLowerCase();
+    (e.startsWith("on") || e === "style" || (e === "href" || e === "xlink:href") && /^\s*javascript\s*:/i.test(t.value)) && i.removeAttribute(t.name);
+  }
+  for (const t of Array.from(i.children)) {
+    if (yt.has(t.tagName.toLowerCase())) {
+      t.remove();
+      continue;
+    }
+    it(t);
+  }
+}
+function wt(i, t) {
+  const e = t.trim();
+  if (/^<svg[\s>]/i.test(e) || /^<\?xml/i.test(e))
+    i.innerHTML = bt(t);
+  else if (t.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i) || t.startsWith("http") || t.startsWith("/")) {
+    const o = b("img", void 0, {
+      src: t,
+      alt: "",
+      "aria-hidden": "true"
+    });
+    o.style.width = "100%", o.style.height = "100%", o.style.objectFit = "contain", i.appendChild(o);
+  } else {
+    const o = b("span", t, { "aria-hidden": "true" });
+    i.appendChild(o);
+  }
+}
+function f(i, t) {
+  t ? (g(i, "ci-hotspot-marker--active"), i.setAttribute("aria-expanded", "true")) : (w(i, "ci-hotspot-marker--active"), i.setAttribute("aria-expanded", "false"));
+}
+function kt(i, t) {
+  t ? g(i, "ci-hotspot-marker--hidden") : w(i, "ci-hotspot-marker--hidden");
+}
+function L(i) {
+  i.remove();
+}
+function xt(i, t, e, o) {
+  const s = i.getBoundingClientRect(), c = e.getBoundingClientRect(), n = t.offsetWidth, r = t.offsetHeight, a = s.left + s.width / 2 - c.left, l = s.top + s.height / 2 - c.top, d = s.top - c.top, h = s.bottom - c.top, p = s.left - c.left, u = s.right - c.left, k = e.offsetWidth, v = e.offsetHeight, y = 8, H = {
+    top: d - y,
+    bottom: v - h - y,
+    left: p - y,
+    right: k - u - y
+  };
+  let E = o.placement;
+  E === "auto" && (E = Et(H)), E = zt(E, n, r, H);
+  let z, T, N = 0;
+  switch (E) {
+    case "top":
+      z = a - n / 2, T = d - y - r;
+      break;
+    case "bottom":
+      z = a - n / 2, T = h + y;
+      break;
+    case "left":
+      z = p - y - n, T = l - r / 2;
+      break;
+    case "right":
+      z = u + y, T = l - r / 2;
+      break;
+    default:
+      z = a - n / 2, T = d - y - r;
+  }
+  const M = Tt(z, T, n, r, k, v);
+  return N = E === "top" || E === "bottom" ? z - M.x : T - M.y, {
+    x: M.x,
+    y: M.y,
+    placement: E,
+    arrowOffset: N
+  };
+}
+function Et(i) {
+  const t = Math.max(i.top, i.bottom, i.left, i.right);
+  return t === i.top ? "top" : t === i.bottom ? "bottom" : t === i.right ? "right" : "left";
+}
+function zt(i, t, e, o) {
+  const s = i;
+  switch (s) {
+    case "top":
+      if (o.top < e && o.bottom > o.top) return "bottom";
+      break;
+    case "bottom":
+      if (o.bottom < e && o.top > o.bottom) return "top";
+      break;
+    case "left":
+      if (o.left < t && o.right > o.left) return "right";
+      break;
+    case "right":
+      if (o.right < t && o.left > o.right) return "left";
+      break;
+  }
+  return s;
+}
+function Tt(i, t, e, o, s, c) {
+  let r = i, a = t;
+  return e > s - 2 * 4 ? r = (s - e) / 2 : (r < 4 && (r = 4), r + e > s - 4 && (r = s - 4 - e)), o > c - 2 * 4 ? a = (c - o) / 2 : (a < 4 && (a = 4), a + o > c - 4 && (a = c - 4 - o)), { x: r, y: a };
+}
+const Ct = /* @__PURE__ */ new Set([
+  "a",
+  "b",
+  "br",
+  "div",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "i",
+  "img",
+  "li",
+  "ol",
+  "p",
+  "span",
+  "strong",
+  "ul"
+]), St = /* @__PURE__ */ new Set([
+  "class",
+  "href",
+  "src",
+  "alt",
+  "title",
+  "target",
+  "rel"
+]), Pt = /^(?:https?:|mailto:)/i, Ht = /^(?:https?:|data:image\/(?!svg[+%]))/i, Mt = /* @__PURE__ */ new Set([
+  "noopener",
+  "noreferrer",
+  "nofollow",
+  "external",
+  "author",
+  "help",
+  "license",
+  "next",
+  "prev",
+  "search",
+  "tag",
+  "bookmark"
+]);
+function Lt(i) {
+  const o = new DOMParser().parseFromString(`<body>${i}</body>`, "text/html").body;
+  return st(o), o.innerHTML;
+}
+function st(i) {
+  const t = Array.from(i.childNodes);
+  for (const e of t)
+    if (e.nodeType !== Node.TEXT_NODE)
+      if (e.nodeType === Node.ELEMENT_NODE) {
+        const o = e, s = o.tagName.toLowerCase();
+        if (!Ct.has(s)) {
+          o.remove();
+          continue;
+        }
+        const c = Array.from(o.attributes);
+        for (const n of c) {
+          const r = n.name.toLowerCase();
+          if (r.startsWith("on")) {
+            o.removeAttribute(n.name);
+            continue;
+          }
+          if (!St.has(r)) {
+            o.removeAttribute(n.name);
+            continue;
+          }
+          if (r === "href" && !Pt.test(n.value.trim()))
+            o.removeAttribute(n.name);
+          else if (r === "src" && !Ht.test(n.value.trim()))
+            o.removeAttribute(n.name);
+          else if (r === "rel") {
+            const a = n.value.trim().toLowerCase().split(/\s+/).filter((l) => Mt.has(l));
+            a.length === 0 ? o.removeAttribute(n.name) : o.setAttribute(n.name, a.join(" "));
+          }
+        }
+        st(o);
+      } else
+        e.remove();
+}
+function At(i) {
+  const t = [];
+  i.image && t.push(`<img class="ci-hotspot-popover-image" src="${I(i.image)}" alt="${I(i.title || "")}">`);
+  const e = [];
+  if (i.title && e.push(`<h3 class="ci-hotspot-popover-title">${A(i.title)}</h3>`), i.price && e.push(`<span class="ci-hotspot-popover-price">${A(i.price)}</span>`), i.description && e.push(`<p class="ci-hotspot-popover-description">${A(i.description)}</p>`), i.url && Dt(i.url)) {
+    const o = i.ctaText || "View details";
+    e.push(
+      `<a class="ci-hotspot-popover-cta" href="${I(i.url)}">${A(String(o))}</a>`
+    );
+  }
+  return e.length > 0 && t.push(`<div class="ci-hotspot-popover-body">${e.join("")}</div>`), t.join("");
+}
+function Ft(i, t) {
+  return t ? t(i) : i.content ? Lt(i.content) : i.data ? At(i.data) : "";
+}
+function A(i) {
+  return i.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function Dt(i) {
+  const t = i.replace(/[\s\x00-\x1f]/g, "");
+  return /^https?:\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^#/.test(t);
+}
+function I(i) {
+  return i.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+class q {
+  constructor(t, e) {
+    this.visible = !1, this.markerEl = null, this.containerEl = null, this.hoverCleanups = [], this.hotspot = t, this.options = e;
+    const o = e.triggerMode === "click" || e.triggerMode === "load";
+    this.element = b("div", "ci-hotspot-popover", {
+      role: o ? "dialog" : "tooltip",
+      id: `ci-hotspot-popover-${t.id}`,
+      "aria-hidden": "true",
+      "data-placement": e.placement === "auto" ? "top" : e.placement,
+      ...o && t.label ? { "aria-label": t.label } : {}
+    }), this.arrowEl = b("div", "ci-hotspot-popover-arrow"), this.contentEl = b("div", "ci-hotspot-popover-content"), this.element.appendChild(this.arrowEl), this.element.appendChild(this.contentEl);
+    const s = Ft(t, e.renderFn);
+    if (typeof s == "string" ? this.contentEl.innerHTML = s : s instanceof HTMLElement && this.contentEl.appendChild(s), e.triggerMode === "hover") {
+      const c = () => this.clearHideTimer(), n = () => this.scheduleHide();
+      this.element.addEventListener("mouseenter", c), this.element.addEventListener("mouseleave", n), this.hoverCleanups.push(
+        () => this.element.removeEventListener("mouseenter", c),
+        () => this.element.removeEventListener("mouseleave", n)
+      );
+    }
+  }
+  /** Mount the popover to a container, associating it with a marker */
+  mount(t, e) {
+    this.containerEl = t, this.markerEl = e, t.appendChild(this.element), this.options.triggerMode === "click" || this.options.triggerMode === "load" ? (e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-controls", this.element.id)) : e.setAttribute("aria-describedby", this.element.id);
+  }
+  /** Show the popover */
+  show() {
+    var t, e;
+    this.clearHideTimer(), !this.visible && (this.visible = !0, g(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "false"), this.updatePosition(), (e = (t = this.options).onOpen) == null || e.call(t, this.hotspot));
+  }
+  /** Schedule hide with delay (for hover mode) */
+  scheduleHide(t = 200) {
+    this.clearHideTimer(), this.hideTimer = setTimeout(() => {
+      this.hide();
+    }, t);
+  }
+  /** Hide the popover immediately */
+  hide() {
+    var t, e;
+    this.clearHideTimer(), this.visible && (this.visible = !1, w(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "true"), (e = (t = this.options).onClose) == null || e.call(t, this.hotspot));
+  }
+  /** Clear any pending hide timer */
+  clearHideTimer() {
+    this.hideTimer !== void 0 && (clearTimeout(this.hideTimer), this.hideTimer = void 0);
+  }
+  /** Update popover position relative to marker */
+  updatePosition() {
+    if (!this.markerEl || !this.containerEl || !this.visible) return;
+    const t = xt(
+      this.markerEl,
+      this.element,
+      this.containerEl,
+      { placement: this.options.placement }
+    );
+    this.element.style.left = `${t.x}px`, this.element.style.top = `${t.y}px`, this.element.setAttribute("data-placement", t.placement), this.positionArrow(t.placement, t.arrowOffset);
+  }
+  positionArrow(t, e) {
+    const o = this.arrowEl;
+    o.style.left = "", o.style.top = "", t === "top" || t === "bottom" ? o.style.left = `calc(50% - var(--ci-hotspot-arrow-size) + ${e}px)` : o.style.top = `calc(50% - var(--ci-hotspot-arrow-size) + ${e}px)`;
+  }
+  /** Check if popover is currently visible */
+  isVisible() {
+    return this.visible;
+  }
+  /** Get the hotspot associated with this popover */
+  getHotspot() {
+    return this.hotspot;
+  }
+  /** Destroy the popover and clean up */
+  destroy() {
+    var t, e, o;
+    this.clearHideTimer(), this.hoverCleanups.forEach((s) => s()), this.hoverCleanups = [], (t = this.markerEl) == null || t.removeAttribute("aria-describedby"), (e = this.markerEl) == null || e.removeAttribute("aria-controls"), (o = this.markerEl) == null || o.removeAttribute("aria-haspopup"), this.element.remove(), this.markerEl = null, this.containerEl = null;
+  }
+}
+class Rt {
+  constructor(t, e, o) {
+    this.lastTouchEnd = 0, this.initialPinchDistance = 0, this.initialPinchScale = 1, this.panStartX = 0, this.panStartY = 0, this.isPinching = !1, this.isPanning = !1, this.wasPinching = !1, this.cleanups = [], this.el = t, this.callbacks = e, this.initialPinchScale = o();
+    const s = (r) => this.handleTouchStart(r, o), c = (r) => this.handleTouchMove(r), n = (r) => this.handleTouchEnd(r);
+    t.addEventListener("touchstart", s, { passive: !1 }), t.addEventListener("touchmove", c, { passive: !1 }), t.addEventListener("touchend", n, { passive: !0 }), this.cleanups.push(
+      () => t.removeEventListener("touchstart", s),
+      () => t.removeEventListener("touchmove", c),
+      () => t.removeEventListener("touchend", n)
+    );
+  }
+  handleTouchStart(t, e) {
+    t.touches.length === 2 ? (t.preventDefault(), this.isPinching = !0, this.wasPinching = !1, this.initialPinchDistance = this.getTouchDistance(t.touches), this.initialPinchScale = e()) : t.touches.length === 1 && (this.panStartX = t.touches[0].clientX, this.panStartY = t.touches[0].clientY, this.wasPinching = !1);
+  }
+  handleTouchMove(t) {
+    var e, o, s, c, n, r;
+    if (t.touches.length === 2 && this.isPinching) {
+      t.preventDefault();
+      const a = this.getTouchDistance(t.touches), l = this.initialPinchScale * (a / this.initialPinchDistance), d = (t.touches[0].clientX + t.touches[1].clientX) / 2, h = (t.touches[0].clientY + t.touches[1].clientY) / 2;
+      (o = (e = this.callbacks).onPinch) == null || o.call(e, l, d, h);
+    } else if (t.touches.length === 1 && !this.isPinching && !this.wasPinching) {
+      this.isPanning || (this.isPanning = !0, (c = (s = this.callbacks).onPanStart) == null || c.call(s));
+      const a = t.touches[0].clientX - this.panStartX, l = t.touches[0].clientY - this.panStartY;
+      (r = (n = this.callbacks).onPan) == null || r.call(n, a, l);
+    }
+  }
+  handleTouchEnd(t) {
+    var e, o, s, c;
+    if (this.isPinching && t.touches.length < 2 && (this.isPinching = !1, this.wasPinching = !0, t.touches.length === 1 && (this.panStartX = t.touches[0].clientX, this.panStartY = t.touches[0].clientY)), this.isPanning && (this.isPanning = !1, (o = (e = this.callbacks).onPanEnd) == null || o.call(e)), t.changedTouches.length === 1 && t.touches.length === 0) {
+      if (this.wasPinching) {
+        this.wasPinching = !1, this.lastTouchEnd = 0;
+        return;
+      }
+      const n = Date.now();
+      if (n - this.lastTouchEnd < 300) {
+        const r = t.changedTouches[0];
+        (c = (s = this.callbacks).onDoubleTap) == null || c.call(s, r.clientX, r.clientY);
+      }
+      this.lastTouchEnd = n;
+    }
+  }
+  getTouchDistance(t) {
+    const e = t[0].clientX - t[1].clientX, o = t[0].clientY - t[1].clientY;
+    return Math.sqrt(e * e + o * o);
+  }
+  destroy() {
+    this.cleanups.forEach((t) => t()), this.cleanups = [];
+  }
+}
+class It {
+  constructor(t, e, o) {
+    this.zoom = 1, this.panX = 0, this.panY = 0, this.enabled = !0, this.isDragging = !1, this.dragStartX = 0, this.dragStartY = 0, this.lastPanX = 0, this.lastPanY = 0, this.gestures = null, this.isGesturing = !1, this.gestureStartZoom = 1, this.touchStartPanX = 0, this.touchStartPanY = 0, this.cleanups = [], this.viewport = t, this.container = e, this.options = o, this.bindEvents();
+  }
+  bindEvents() {
+    const t = (n) => {
+      var p, u;
+      if (!this.enabled) return;
+      if (this.isGesturing) {
+        n.preventDefault();
+        return;
+      }
+      if (!n.ctrlKey) {
+        (u = (p = this.options).onScrollWithoutZoom) == null || u.call(p);
+        return;
+      }
+      n.preventDefault();
+      const r = this.container.getBoundingClientRect(), a = n.clientX - r.left, l = n.clientY - r.top;
+      let d = n.deltaY;
+      n.deltaMode === 1 && (d *= 20);
+      const h = -d * 0.01;
+      this.setZoom(this.zoom + h, a, l);
+    };
+    this.container.addEventListener("wheel", t, { passive: !1 }), this.cleanups.push(() => this.container.removeEventListener("wheel", t)), this.bindSafariGestures();
+    const e = (n) => {
+      if (!this.enabled) return;
+      const r = this.container.getBoundingClientRect(), a = n.clientX - r.left, l = n.clientY - r.top;
+      this.zoom > 1 ? this.resetZoom() : this.setZoom(2, a, l);
+    };
+    this.container.addEventListener("dblclick", e), this.cleanups.push(() => this.container.removeEventListener("dblclick", e));
+    const o = (n) => {
+      !this.enabled || this.zoom <= 1 || n.button === 0 && (this.isDragging = !0, this.dragStartX = n.clientX, this.dragStartY = n.clientY, this.lastPanX = this.panX, this.lastPanY = this.panY, g(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = "grabbing", n.preventDefault());
+    }, s = (n) => {
+      if (!this.isDragging) return;
+      const r = (n.clientX - this.dragStartX) / this.zoom, a = (n.clientY - this.dragStartY) / this.zoom;
+      this.panX = this.lastPanX + r, this.panY = this.lastPanY + a, this.clampPan(), this.applyTransform();
+    }, c = () => {
+      this.isDragging && (this.isDragging = !1, w(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = this.zoom > 1 ? "grab" : "");
+    };
+    this.container.addEventListener("mousedown", o), document.addEventListener("mousemove", s), document.addEventListener("mouseup", c), this.cleanups.push(
+      () => this.container.removeEventListener("mousedown", o),
+      () => document.removeEventListener("mousemove", s),
+      () => document.removeEventListener("mouseup", c)
+    ), this.gestures = new Rt(
+      this.container,
+      {
+        onPinch: (n, r, a) => {
+          const l = this.container.getBoundingClientRect();
+          this.setZoom(n, r - l.left, a - l.top);
+        },
+        onPanStart: () => {
+          this.touchStartPanX = this.panX, this.touchStartPanY = this.panY;
+        },
+        onPan: (n, r) => {
+          this.zoom <= 1 || (this.panX = this.touchStartPanX + n / this.zoom, this.panY = this.touchStartPanY + r / this.zoom, this.clampPan(), this.applyTransform());
+        },
+        onDoubleTap: (n, r) => {
+          const a = this.container.getBoundingClientRect();
+          this.zoom > 1 ? this.resetZoom() : this.setZoom(2, n - a.left, r - a.top);
+        }
+      },
+      () => this.zoom
+    );
+  }
+  bindSafariGestures() {
+    if (typeof window > "u" || !("GestureEvent" in window)) return;
+    const t = (s) => {
+      s.preventDefault(), this.isGesturing = !0, this.gestureStartZoom = this.zoom;
+    }, e = (s) => {
+      if (s.preventDefault(), !this.enabled) return;
+      const c = s, n = this.container.getBoundingClientRect(), r = s, a = r.clientX != null ? r.clientX - n.left : n.width / 2, l = r.clientY != null ? r.clientY - n.top : n.height / 2;
+      this.setZoom(this.gestureStartZoom * c.scale, a, l);
+    }, o = (s) => {
+      s.preventDefault(), this.isGesturing = !1;
+    };
+    this.container.addEventListener("gesturestart", t), this.container.addEventListener("gesturechange", e), this.container.addEventListener("gestureend", o), this.cleanups.push(
+      () => this.container.removeEventListener("gesturestart", t),
+      () => this.container.removeEventListener("gesturechange", e),
+      () => this.container.removeEventListener("gestureend", o)
+    );
+  }
+  setZoom(t, e, o) {
+    var c, n;
+    const s = this.zoom;
+    if (this.zoom = Math.max(this.options.zoomMin, Math.min(this.options.zoomMax, t)), e !== void 0 && o !== void 0 && s !== this.zoom) {
+      const r = this.container.offsetWidth, a = this.container.offsetHeight, l = this.zoom / s, d = e / r, h = o / a;
+      this.panX = this.panX - r * d * (l - 1) / this.zoom, this.panY = this.panY - a * h * (l - 1) / this.zoom;
+    }
+    this.clampPan(), this.applyTransform(), this.updateCursor(), (n = (c = this.options).onZoom) == null || n.call(c, this.zoom);
+  }
+  getZoom() {
+    return this.zoom;
+  }
+  resetZoom() {
+    var t, e;
+    this.zoom = 1, this.panX = 0, this.panY = 0, this.applyTransform(), this.updateCursor(), (e = (t = this.options).onZoom) == null || e.call(t, 1);
+  }
+  pan(t, e) {
+    this.zoom <= 1 || (this.panX += t / this.zoom, this.panY += e / this.zoom, this.clampPan(), this.applyTransform());
+  }
+  enable() {
+    this.enabled = !0;
+  }
+  disable() {
+    this.enabled = !1;
+  }
+  clampPan() {
+    const t = this.container.offsetWidth, e = this.container.offsetHeight, o = t * (this.zoom - 1) / this.zoom, s = e * (this.zoom - 1) / this.zoom;
+    this.panX = Math.max(-o, Math.min(0, this.panX)), this.panY = Math.max(-s, Math.min(0, this.panY)), this.zoom <= 1 && (this.panX = 0, this.panY = 0);
+  }
+  applyTransform() {
+    this.viewport.style.transform = `scale(${this.zoom}) translate(${this.panX}px, ${this.panY}px)`, this.viewport.style.setProperty("--zoom", String(this.zoom));
+  }
+  updateCursor() {
+    this.isDragging || (this.container.style.cursor = this.zoom > 1 ? "grab" : "");
+  }
+  destroy() {
+    var t;
+    this.cleanups.forEach((e) => e()), this.cleanups = [], (t = this.gestures) == null || t.destroy(), this.gestures = null, this.viewport.style.transform = "", this.viewport.style.removeProperty("--zoom"), this.container.style.cursor = "";
+  }
+}
+function Zt(i, t, e) {
+  const o = e.zoomStep || 0.5, s = b("div", "ci-hotspot-zoom-controls");
+  s.dataset.position = e.position || "bottom-right";
+  const c = b("button", "ci-hotspot-zoom-in", {
+    "aria-label": "Zoom in",
+    type: "button"
+  });
+  c.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>';
+  const n = b("button", "ci-hotspot-zoom-out", {
+    "aria-label": "Zoom out",
+    type: "button"
+  });
+  n.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>';
+  const r = b("button", "ci-hotspot-zoom-reset", {
+    "aria-label": "Reset zoom",
+    type: "button"
+  });
+  r.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>', s.appendChild(c), s.appendChild(n), s.appendChild(r), c.addEventListener("click", (l) => {
+    l.stopPropagation(), t.setZoom(t.getZoom() + o), a();
+  }), n.addEventListener("click", (l) => {
+    l.stopPropagation(), t.setZoom(t.getZoom() - o), a();
+  }), r.addEventListener("click", (l) => {
+    l.stopPropagation(), t.resetZoom(), a();
+  });
+  function a() {
+    const l = t.getZoom();
+    c.disabled = l >= e.zoomMax, n.disabled = l <= e.zoomMin, r.disabled = Math.abs(l - 1) < 1e-3;
+  }
+  return i.appendChild(s), a(), {
+    element: s,
+    update: a,
+    destroy: () => s.remove()
+  };
+}
+const Ot = typeof navigator < "u" && /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent), Yt = Ot ? "⌘ Scroll or pinch to zoom" : "Ctrl + scroll to zoom", Xt = 1500;
+class Nt {
+  constructor(t) {
+    this.hideTimer = null, this.el = document.createElement("div"), this.el.className = "ci-hotspot-scroll-hint", this.el.textContent = Yt, this.el.setAttribute("aria-hidden", "true"), t.appendChild(this.el);
+  }
+  show() {
+    this.hideTimer !== null && clearTimeout(this.hideTimer), this.el.classList.add("ci-hotspot-scroll-hint--visible"), this.hideTimer = setTimeout(() => {
+      this.el.classList.remove("ci-hotspot-scroll-hint--visible"), this.hideTimer = null;
+    }, Xt);
+  }
+  destroy() {
+    this.hideTimer !== null && (clearTimeout(this.hideTimer), this.hideTimer = null), this.el.remove();
+  }
+}
+const $t = "cloudimg.io", Wt = "v7", R = 100;
+function jt(i, t = R) {
+  return Math.ceil(i / t) * t;
+}
+function nt(i, t = 1, e = 1, o = R) {
+  const s = i * t * e;
+  return jt(s, o);
+}
+function S(i, t, e, o = 1, s = 1) {
+  const c = t.domain || $t, n = t.apiVersion || Wt, r = t.limitFactor || R, a = nt(e, s, o, r), l = encodeURI(i);
+  let d = `https://${t.token}.${c}/${n}/${l}?width=${a}`;
+  return t.params && (d += `&${t.params}`), d;
+}
+function Vt(i, t, e, o) {
+  const s = e.limitFactor || R;
+  let c = 0;
+  const n = new ResizeObserver((r) => {
+    for (const a of r) {
+      const l = a.contentRect.width;
+      if (l === 0) continue;
+      const d = typeof window < "u" && window.devicePixelRatio || 1, h = nt(l, d, o(), s);
+      h !== c && (c = h, i.src = S(t, e, l, o(), d));
+    }
+  });
+  return {
+    observer: n,
+    destroy: () => n.disconnect()
+  };
+}
+const F = 50, K = 0.5;
+class Bt {
+  constructor(t) {
+    this.cleanups = [];
+    const { container: e, getZoomPan: o, onEscape: s, onFullscreenToggle: c } = t, n = m(e, "keydown", (r) => {
+      const a = r.target;
+      if (a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.tagName === "SELECT")
+        return;
+      const l = o();
+      switch (r.key) {
+        case "Escape":
+          s == null || s();
+          break;
+        case "ArrowUp":
+          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(0, F));
+          break;
+        case "ArrowDown":
+          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(0, -F));
+          break;
+        case "ArrowLeft":
+          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(F, 0));
+          break;
+        case "ArrowRight":
+          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(-F, 0));
+          break;
+        case "+":
+        case "=":
+          l && (r.preventDefault(), l.setZoom(l.getZoom() + K));
+          break;
+        case "-":
+          l && (r.preventDefault(), l.setZoom(l.getZoom() - K));
+          break;
+        case "0":
+          l && (r.preventDefault(), l.resetZoom());
+          break;
+        case "f":
+          c && (r.preventDefault(), c());
+          break;
+      }
+    });
+    this.cleanups.push(n);
+  }
+  destroy() {
+    this.cleanups.forEach((t) => t()), this.cleanups = [];
+  }
+}
+const _t = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function U(i) {
+  return Array.from(i.querySelectorAll(_t));
+}
+function J(i, t) {
+  let e = !1, o = null;
+  function s() {
+    if (e) return;
+    e = !0;
+    const r = U(i);
+    r.length !== 0 && (r[0].focus(), o = m(i, "keydown", (a) => {
+      if (a.key !== "Tab") return;
+      const l = U(i);
+      if (l.length === 0) return;
+      const d = l[0], h = l[l.length - 1];
+      a.shiftKey && document.activeElement === d ? (a.preventDefault(), h.focus()) : !a.shiftKey && document.activeElement === h && (a.preventDefault(), d.focus());
+    }));
+  }
+  function c() {
+    e && (e = !1, o == null || o(), o = null, t.focus());
+  }
+  function n() {
+    c();
+  }
+  return { activate: s, deactivate: c, destroy: n };
+}
+let x = null, D = 0;
+function Gt(i) {
+  ot() && (x || (x = b("div", void 0, {
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    role: "status"
+  }), x.style.cssText = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0", document.body.appendChild(x)), x.textContent = "", requestAnimationFrame(() => {
+    x && (x.textContent = i);
+  }));
+}
+function Q() {
+  D++;
+}
+function qt() {
+  D = Math.max(0, D - 1), D === 0 && x && (x.remove(), x = null);
+}
+const tt = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" x2="14" y1="3" y2="10"/><line x1="3" x2="10" y1="21" y2="14"/></svg>', Kt = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/></svg>';
+function Ut() {
+  return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+}
+function Jt() {
+  return document.fullscreenElement || document.webkitFullscreenElement || null;
+}
+function et(i) {
+  return i.requestFullscreen ? i.requestFullscreen() : i.webkitRequestFullscreen ? (i.webkitRequestFullscreen(), Promise.resolve()) : Promise.reject(new Error("Fullscreen API not supported"));
+}
+function Z() {
+  return document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? (document.webkitExitFullscreen(), Promise.resolve()) : Promise.reject(new Error("Fullscreen API not supported"));
+}
+function Qt(i, t = {}) {
+  if (!Ut()) return null;
+  const e = b("button", "ci-hotspot-fullscreen-btn", {
+    "aria-label": "Enter fullscreen",
+    "aria-pressed": "false",
+    type: "button"
+  });
+  e.innerHTML = tt;
+  const o = [];
+  function s() {
+    return Jt() === i;
+  }
+  function c() {
+    var u;
+    const p = s();
+    e.innerHTML = p ? Kt : tt, e.setAttribute("aria-label", p ? "Exit fullscreen" : "Enter fullscreen"), e.setAttribute("aria-pressed", String(p)), p ? g(i, "ci-hotspot-container--fullscreen") : w(i, "ci-hotspot-container--fullscreen"), (u = t.onChange) == null || u.call(t, p);
+  }
+  function n() {
+    s() ? Z().catch(() => {
+    }) : et(i).catch(() => {
+    });
+  }
+  function r() {
+    s() || et(i).catch(() => {
+    });
+  }
+  function a() {
+    s() && Z().catch(() => {
+    });
+  }
+  const l = m(document, "fullscreenchange", c);
+  o.push(l), document.addEventListener("webkitfullscreenchange", c), o.push(() => document.removeEventListener("webkitfullscreenchange", c));
+  const d = m(e, "click", (p) => {
+    p.stopPropagation(), n();
+  });
+  o.push(d), i.appendChild(e);
+  function h() {
+    s() && Z().catch(() => {
+    }), w(i, "ci-hotspot-container--fullscreen"), o.forEach((p) => p()), o.length = 0, e.remove();
+  }
+  return {
+    element: e,
+    isFullscreen: s,
+    toggle: n,
+    enter: r,
+    exit: a,
+    destroy: h
+  };
+}
+const te = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-border-width: 2px;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .8);--ci-hotspot-marker-border: var(--ci-hotspot-marker-border-width) solid var(--ci-hotspot-marker-border-color);--ci-hotspot-marker-border-radius: 50%;--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .3);--ci-hotspot-pulse-color: rgba(0, 0, 0, .2);--ci-hotspot-pulse-size: 40px;--ci-hotspot-pulse-duration: 1.8s;--ci-hotspot-popover-bg: #ffffff;--ci-hotspot-popover-color: #1a1a1a;--ci-hotspot-popover-border: 1px solid rgba(0, 0, 0, .1);--ci-hotspot-popover-border-radius: 12px;--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .12);--ci-hotspot-popover-padding: 16px;--ci-hotspot-popover-max-width: 320px;--ci-hotspot-popover-max-height: 400px;--ci-hotspot-popover-font-family: inherit;--ci-hotspot-popover-font-size: 14px;--ci-hotspot-popover-line-height: 1.5;--ci-hotspot-popover-z-index: 1000;--ci-hotspot-arrow-size: 8px;--ci-hotspot-arrow-color: var(--ci-hotspot-popover-bg);--ci-hotspot-title-font-size: 16px;--ci-hotspot-title-font-weight: 600;--ci-hotspot-title-color: #1a1a1a;--ci-hotspot-price-color: #2d8c3c;--ci-hotspot-price-font-size: 18px;--ci-hotspot-price-font-weight: 700;--ci-hotspot-description-color: #666666;--ci-hotspot-cta-bg: #0058a3;--ci-hotspot-cta-color: #ffffff;--ci-hotspot-cta-border-radius: 8px;--ci-hotspot-cta-padding: 8px 16px;--ci-hotspot-hover-transition: .2s ease;--ci-hotspot-popover-transition: .3s ease;--ci-hotspot-scene-transition-duration: .4s;--ci-hotspot-zoom-controls-bg: rgba(255, 255, 255, .9);--ci-hotspot-zoom-controls-color: #333333;--ci-hotspot-zoom-controls-border-radius: 8px;--ci-hotspot-zoom-controls-shadow: 0 2px 8px rgba(0, 0, 0, .15)}.ci-hotspot-container *,.ci-hotspot-container *:before,.ci-hotspot-container *:after{box-sizing:border-box}.ci-hotspot-container{position:relative;overflow:hidden;width:100%;line-height:0;user-select:none;-webkit-user-select:none}.ci-hotspot-viewport{position:relative;width:100%;transform-origin:0 0;will-change:transform;transition:transform .3s ease}.ci-hotspot-viewport--dragging{transition:none}.ci-hotspot-image{display:block;width:100%;height:auto;pointer-events:none}.ci-hotspot-markers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ci-hotspot-marker{position:absolute;width:var(--ci-hotspot-marker-size);height:var(--ci-hotspot-marker-size);padding:0;border:var(--ci-hotspot-marker-border);border-radius:var(--ci-hotspot-marker-border-radius);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);box-shadow:var(--ci-hotspot-marker-shadow);cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));transition:transform var(--ci-hotspot-hover-transition),box-shadow var(--ci-hotspot-hover-transition);z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;outline:none}.ci-hotspot-marker:hover{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));box-shadow:0 4px 12px #0006}.ci-hotspot-marker:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-marker--active{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));z-index:2}.ci-hotspot-marker--hidden{display:none}.ci-hotspot-marker--pulse:before{content:"";position:absolute;top:50%;left:50%;width:var(--ci-hotspot-pulse-size);height:var(--ci-hotspot-pulse-size);border-radius:50%;background:var(--ci-hotspot-pulse-color);transform:translate(-50%,-50%) scale(1);animation:ci-hotspot-pulse var(--ci-hotspot-pulse-duration) ease-out infinite;pointer-events:none}@keyframes ci-hotspot-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}.ci-hotspot-marker--pulse{animation:ci-hotspot-breathe 2.4s ease-in-out infinite}.ci-hotspot-marker--pulse:hover,.ci-hotspot-marker--pulse.ci-hotspot-marker--active{animation:none}@keyframes ci-hotspot-breathe{0%,to{transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)))}50%{transform:translate(-50%,-50%) scale(calc(1.15 / var(--zoom, 1)))}}.ci-hotspot-popover{position:absolute;z-index:var(--ci-hotspot-popover-z-index);max-width:var(--ci-hotspot-popover-max-width);background:var(--ci-hotspot-popover-bg);color:var(--ci-hotspot-popover-color);border:var(--ci-hotspot-popover-border);border-radius:var(--ci-hotspot-popover-border-radius);box-shadow:var(--ci-hotspot-popover-shadow);font-family:var(--ci-hotspot-popover-font-family);font-size:var(--ci-hotspot-popover-font-size);line-height:var(--ci-hotspot-popover-line-height);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity var(--ci-hotspot-popover-transition),transform var(--ci-hotspot-popover-transition)}.ci-hotspot-popover--visible{opacity:1;pointer-events:auto;transform:translateY(0);animation:ci-hotspot-popover-in var(--ci-hotspot-popover-transition) forwards}@keyframes ci-hotspot-popover-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.ci-hotspot-popover-arrow{position:absolute;width:calc(var(--ci-hotspot-arrow-size) * 2);height:calc(var(--ci-hotspot-arrow-size) * 2);background:var(--ci-hotspot-arrow-color);transform:rotate(45deg);pointer-events:none}.ci-hotspot-popover[data-placement=top] .ci-hotspot-popover-arrow{bottom:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=bottom] .ci-hotspot-popover-arrow{top:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=left] .ci-hotspot-popover-arrow{right:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=right] .ci-hotspot-popover-arrow{left:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover-content{padding:var(--ci-hotspot-popover-padding);max-height:var(--ci-hotspot-popover-max-height);overflow-y:auto;overflow-x:hidden;border-radius:var(--ci-hotspot-popover-border-radius)}.ci-hotspot-popover-image{display:block;width:100%;height:auto;border-radius:calc(var(--ci-hotspot-popover-border-radius) - 4px) calc(var(--ci-hotspot-popover-border-radius) - 4px) 0 0;margin:calc(var(--ci-hotspot-popover-padding) * -1);margin-bottom:12px;width:calc(100% + var(--ci-hotspot-popover-padding) * 2)}.ci-hotspot-popover-body{line-height:1.5}.ci-hotspot-popover-title{margin:0 0 4px;font-size:var(--ci-hotspot-title-font-size);font-weight:var(--ci-hotspot-title-font-weight);color:var(--ci-hotspot-title-color)}.ci-hotspot-popover-price{display:inline-block;margin-bottom:8px;font-size:var(--ci-hotspot-price-font-size);font-weight:var(--ci-hotspot-price-font-weight);color:var(--ci-hotspot-price-color)}.ci-hotspot-popover-description{margin:0 0 12px;color:var(--ci-hotspot-description-color)}.ci-hotspot-popover-cta{display:inline-block;padding:var(--ci-hotspot-cta-padding);background:var(--ci-hotspot-cta-bg);color:var(--ci-hotspot-cta-color);border-radius:var(--ci-hotspot-cta-border-radius);text-decoration:none;font-weight:600;font-size:14px;transition:opacity .2s ease}.ci-hotspot-popover-cta:hover{opacity:.9}.ci-hotspot-popover-cta:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-zoom-controls{position:absolute;display:flex;gap:2px;background:var(--ci-hotspot-zoom-controls-bg);border-radius:var(--ci-hotspot-zoom-controls-border-radius);box-shadow:var(--ci-hotspot-zoom-controls-shadow);z-index:10;overflow:hidden}.ci-hotspot-zoom-controls button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--ci-hotspot-zoom-controls-color);cursor:pointer;font-size:18px;line-height:1;padding:0;transition:background .15s ease}.ci-hotspot-zoom-controls button:hover{background:#0000000d}.ci-hotspot-zoom-controls button:disabled{opacity:.3;cursor:default}.ci-hotspot-zoom-controls button:disabled:hover{background:transparent}.ci-hotspot-zoom-controls button svg{width:18px;height:18px}.ci-hotspot-zoom-controls button:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:-3px}.ci-hotspot-zoom-controls[data-position=bottom-right]{bottom:16px;right:16px}.ci-hotspot-zoom-controls[data-position=bottom-left]{bottom:16px;left:16px}.ci-hotspot-zoom-controls[data-position=bottom-center]{bottom:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]{top:16px;right:16px}.ci-hotspot-zoom-controls[data-position=top-left]{top:16px;left:16px}.ci-hotspot-zoom-controls[data-position=top-center]{top:16px;left:50%;transform:translate(-50%)}.ci-hotspot-cluster{position:absolute;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:16px;border:2px solid rgba(255,255,255,.8);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);font-size:13px;font-weight:700;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-loading .ci-hotspot-image{opacity:0;transition:opacity .3s ease}.ci-hotspot-loading .ci-hotspot-markers{display:none}.ci-hotspot-theme-dark{--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .4);--ci-hotspot-pulse-color: rgba(255, 255, 255, .2);--ci-hotspot-popover-bg: #1a1a1a;--ci-hotspot-popover-color: #f0f0f0;--ci-hotspot-popover-border: 1px solid rgba(255, 255, 255, .1);--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .4);--ci-hotspot-title-color: #f0f0f0;--ci-hotspot-description-color: #aaaaaa;--ci-hotspot-zoom-controls-bg: rgba(30, 30, 30, .9);--ci-hotspot-zoom-controls-color: #f0f0f0}.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-border-color: rgba(0, 0, 0, .3);--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ci-hotspot-pulse-color: rgba(0, 0, 0, .15)}.ci-hotspot-theme-dark.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .3);--ci-hotspot-pulse-color: rgba(255, 255, 255, .15)}.ci-hotspot-scroll-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%) translateY(4px);padding:8px 16px;border-radius:20px;background:#000000b3;color:#fff;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1;white-space:nowrap;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.ci-hotspot-scroll-hint--visible{opacity:1;transform:translate(-50%) translateY(0)}.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{overflow:hidden}.ci-hotspot-container--fixed-ratio .ci-hotspot-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.ci-hotspot-container--fixed-ratio .ci-hotspot-markers{z-index:1}.ci-hotspot-scene-incoming{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}.ci-hotspot-scene-fade-in{animation:ci-hotspot-scene-fade-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-fade-out{animation:ci-hotspot-scene-fade-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ci-hotspot-scene-fade-out{0%{opacity:1}to{opacity:0}}.ci-hotspot-scene-slide-in{animation:ci-hotspot-scene-slide-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out{animation:ci-hotspot-scene-slide-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out{0%{transform:translate(0)}to{transform:translate(-100%)}}.ci-hotspot-scene-slide-in-reverse{animation:ci-hotspot-scene-slide-in-reverse var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-reverse{animation:ci-hotspot-scene-slide-out-reverse var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out-reverse{0%{transform:translate(0)}to{transform:translate(100%)}}.ci-hotspot-marker--navigate{--ci-hotspot-marker-bg: rgba(0, 88, 163, .7)}.ci-hotspot-navigate-icon{width:75%;height:75%;display:block}.ci-hotspot-scene-transitioning .ci-hotspot-markers{opacity:0;pointer-events:none;transition:opacity .1s ease}.ci-hotspot-scene-loading:after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid rgba(0,0,0,.1);border-top-color:#00000080;border-radius:50%;animation:ci-hotspot-spin .6s linear infinite;z-index:10;pointer-events:none}.ci-hotspot-theme-dark .ci-hotspot-scene-loading:after,.ci-hotspot-scene-loading.ci-hotspot-theme-dark:after{border-color:#ffffff1a;border-top-color:#ffffff80}@keyframes ci-hotspot-spin{to{transform:rotate(360deg)}}.ci-hotspot-fullscreen-btn{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--ci-hotspot-zoom-controls-border-radius);background:var(--ci-hotspot-zoom-controls-bg);color:var(--ci-hotspot-zoom-controls-color);box-shadow:var(--ci-hotspot-zoom-controls-shadow);cursor:pointer;padding:0;z-index:10;transition:background .15s ease}.ci-hotspot-fullscreen-btn:hover{background:#0000000d}.ci-hotspot-fullscreen-btn svg{width:18px;height:18px}.ci-hotspot-fullscreen-btn:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-container--fullscreen{background:#000;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.ci-hotspot-container--fullscreen .ci-hotspot-viewport{width:fit-content;max-width:100%;max-height:100%}.ci-hotspot-container--fullscreen .ci-hotspot-image{max-height:100vh;width:auto;max-width:100%;object-fit:contain}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{width:100%;height:100%}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-image{width:100%;height:100%;max-height:none}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn{background:#1e1e1ee6;color:#f0f0f0}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn:hover,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn:hover{background:#ffffff1a}@media (prefers-reduced-motion: reduce){.ci-hotspot-marker,.ci-hotspot-marker:before,.ci-hotspot-popover{animation:none!important;transition-duration:.01ms!important}.ci-hotspot-viewport,.ci-hotspot-scroll-hint{transition-duration:.01ms!important}.ci-hotspot-scene-fade-in,.ci-hotspot-scene-fade-out,.ci-hotspot-scene-slide-in,.ci-hotspot-scene-slide-out,.ci-hotspot-scene-slide-in-reverse,.ci-hotspot-scene-slide-out-reverse{animation-duration:.01ms!important}.ci-hotspot-scene-transitioning .ci-hotspot-markers{transition-duration:.01ms!important}.ci-hotspot-scene-loading:after{animation-duration:.01ms!important}.ci-hotspot-fullscreen-btn{transition-duration:.01ms!important}}', P = class P {
+  constructor(t, e) {
+    this.markers = /* @__PURE__ */ new Map(), this.popovers = /* @__PURE__ */ new Map(), this.normalizedHotspots = /* @__PURE__ */ new Map(), this.scrollHint = null, this.zoomPan = null, this.zoomControls = null, this.cloudimageHandler = null, this.resizeObserver = null, this.keyboardHandler = null, this.fullscreenControl = null, this.focusTraps = /* @__PURE__ */ new Map(), this.cleanups = [], this.hotspotCleanups = /* @__PURE__ */ new Map(), this.imageLoaded = !1, this.destroyed = !1, this.scenesMap = /* @__PURE__ */ new Map(), this.isTransitioning = !1, this.activeTimers = /* @__PURE__ */ new Set(), this.sceneHotspotOverrides = /* @__PURE__ */ new Map(), this.preloadedScenes = /* @__PURE__ */ new Set(), this.rootEl = mt(t), this.config = j(e), V(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), Q(), gt(te), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive();
+  }
+  /** Auto-initialize all elements with data-ci-hotspot-src or data-ci-hotspot-scenes attribute */
+  static autoInit(t) {
+    const o = (t || document).querySelectorAll(
+      "[data-ci-hotspot-src], [data-ci-hotspot-scenes]"
+    ), s = [];
+    return o.forEach((c) => {
+      const n = ut(c);
+      (n.src || n.scenes) && s.push(new P(c, n));
+    }), s;
+  }
+  buildDOM() {
+    this.containerEl = b("div", "ci-hotspot-container"), this.viewportEl = b("div", "ci-hotspot-viewport"), this.imgEl = b("img", "ci-hotspot-image", {
+      alt: this.config.alt || "",
+      draggable: "false"
+    }), this.markersEl = b("div", "ci-hotspot-markers"), this.viewportEl.appendChild(this.imgEl), this.viewportEl.appendChild(this.markersEl), this.containerEl.appendChild(this.viewportEl), this.containerEl.setAttribute("role", "group"), this.containerEl.setAttribute("aria-label", this.config.alt || "Image with hotspots"), this.config.sceneAspectRatio && (g(this.containerEl, "ci-hotspot-container--fixed-ratio"), this.viewportEl.style.aspectRatio = this.config.sceneAspectRatio), this.rootEl.innerHTML = "", this.rootEl.appendChild(this.containerEl), this.config.lazyLoad && g(this.containerEl, "ci-hotspot-loading");
+  }
+  applyTheme() {
+    this.config.theme === "dark" && g(this.containerEl, "ci-hotspot-theme-dark"), this.config.invertMarkerTheme && g(this.containerEl, "ci-hotspot-marker-inverted");
+  }
+  setupImage() {
+    const t = () => {
+      w(this.containerEl, "ci-hotspot-loading"), this.imageLoaded = !0, this.renormalizePixelCoordinates(), this.syncMarkersToImage(), this.showLoadTriggerPopovers();
+    };
+    if (this.imgEl.addEventListener("load", t), this.cleanups.push(() => this.imgEl.removeEventListener("load", t)), this.config.lazyLoad && typeof IntersectionObserver < "u") {
+      const e = new IntersectionObserver(
+        (o) => {
+          var s;
+          (s = o[0]) != null && s.isIntersecting && (this.loadImage(), e.disconnect());
+        },
+        { threshold: 0.1 }
+      );
+      e.observe(this.containerEl), this.cleanups.push(() => e.disconnect());
+    } else
+      this.loadImage();
+  }
+  loadImage() {
+    var t, e;
+    if ((t = this.config.cloudimage) != null && t.token) {
+      const o = this.containerEl.offsetWidth || 300, s = window.devicePixelRatio || 1, c = ((e = this.zoomPan) == null ? void 0 : e.getZoom()) || 1;
+      this.imgEl.src = S(
+        this.config.src,
+        this.config.cloudimage,
+        o,
+        c,
+        s
+      ), this.cloudimageHandler = Vt(
+        this.imgEl,
+        this.config.src,
+        this.config.cloudimage,
+        () => {
+          var n;
+          return ((n = this.zoomPan) == null ? void 0 : n.getZoom()) || 1;
+        }
+      ), this.cloudimageHandler.observer.observe(this.containerEl), this.cleanups.push(() => {
+        var n;
+        return (n = this.cloudimageHandler) == null ? void 0 : n.destroy();
+      });
+    } else
+      this.imgEl.src = this.config.src;
+  }
+  initHotspots() {
+    for (const t of this.config.hotspots)
+      this.addHotspotInternal(t);
+  }
+  addHotspotInternal(t) {
+    var d, h;
+    if (this.markers.has(t.id)) {
+      const p = this.markers.get(t.id);
+      L(p), this.markers.delete(t.id), (d = this.popovers.get(t.id)) == null || d.destroy(), this.popovers.delete(t.id);
+      const u = this.hotspotCleanups.get(t.id);
+      u && (u.forEach((v) => v()), this.hotspotCleanups.delete(t.id));
+      const k = this.focusTraps.get(t.id);
+      k && (k.destroy(), this.focusTraps.delete(t.id));
+    }
+    const { x: e, y: o } = G(
+      t.x,
+      t.y,
+      this.imgEl.naturalWidth || 1e3,
+      this.imgEl.naturalHeight || 1e3
+    ), s = { ...t, x: e, y: o };
+    this.normalizedHotspots.set(t.id, s);
+    const c = this.config.pulse !== !1, n = vt(s, c);
+    this.markers.set(t.id, n), this.markersEl.appendChild(n);
+    const r = t.trigger || this.config.trigger || "hover";
+    if (t.navigateTo) {
+      const p = this.enrichNavigateHotspot(t);
+      if (!!(p.data || p.content || this.config.renderPopover)) {
+        const k = t.placement || this.config.placement || "top", v = new q(p, {
+          placement: k,
+          triggerMode: "hover",
+          renderFn: this.config.renderPopover,
+          onOpen: this.config.onOpen,
+          onClose: this.config.onClose
+        });
+        this.popovers.set(t.id, v), v.mount(this.containerEl, n), this.bindNavigateTrigger(t, n, v);
+      } else
+        this.bindNavigateTrigger(t, n);
+      return;
+    }
+    const a = t.placement || this.config.placement || "top", l = new q(t, {
+      placement: a,
+      triggerMode: r,
+      renderFn: this.config.renderPopover,
+      onOpen: this.config.onOpen,
+      onClose: this.config.onClose
+    });
+    this.popovers.set(t.id, l), l.mount(this.containerEl, n), this.bindTrigger(t, n, l, r), r === "load" && this.imageLoaded && (this.closeAll(), l.show(), f(n, !0), this.ensureFocusTrap(t.id, l.element, n), (h = this.focusTraps.get(t.id)) == null || h.activate());
+  }
+  /** For navigateTo hotspots without explicit data/content, generate popover content from the destination scene */
+  enrichNavigateHotspot(t) {
+    if (t.data || t.content) return t;
+    const e = this.scenesMap.get(t.navigateTo);
+    return e ? {
+      ...t,
+      data: { title: t.label || e.alt || e.id }
+    } : t;
+  }
+  bindNavigateTrigger(t, e, o) {
+    if (g(e, "ci-hotspot-marker--navigate"), e.innerHTML = P.NAVIGATE_ARROW_SVG, t.arrowDirection != null) {
+      const r = e.querySelector("svg");
+      r && (r.style.transform = `rotate(${t.arrowDirection}deg)`);
+    }
+    const s = t.label || t.navigateTo;
+    if (e.setAttribute("aria-label", `Navigate to ${s}`), e.setAttribute("aria-roledescription", "navigation hotspot"), o) {
+      const r = m(e, "mouseenter", () => {
+        this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(), f(e, !0);
+      }), a = m(e, "mouseleave", () => {
+        o.scheduleHide(200), this.trackedTimeout(() => {
+          o.isVisible() || f(e, !1);
+        }, 250);
+      }), l = m(e, "focus", () => {
+        this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(), f(e, !0);
+      }), d = m(e, "blur", () => {
+        o.scheduleHide(200), this.trackedTimeout(() => {
+          o.isVisible() || f(e, !1);
+        }, 250);
+      });
+      this.addHotspotCleanups(t.id, r, a, l, d);
+    } else {
+      const r = m(e, "mouseenter", () => {
+        this.preloadSceneImage(t.navigateTo);
+      }), a = m(e, "focus", () => {
+        this.preloadSceneImage(t.navigateTo);
+      });
+      this.addHotspotCleanups(t.id, r, a);
+    }
+    const c = m(e, "click", (r) => {
+      var a, l, d;
+      r.stopPropagation(), o == null || o.hide(), f(e, !1), (l = (a = this.config).onClick) == null || l.call(a, r, t), (d = t.onClick) == null || d.call(t, r, t), this.goToScene(t.navigateTo);
+    }), n = m(e, "keydown", (r) => {
+      var a, l, d;
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), o == null || o.hide(), f(e, !1), (l = (a = this.config).onClick) == null || l.call(a, r, t), (d = t.onClick) == null || d.call(t, r, t), this.goToScene(t.navigateTo));
+    });
+    this.addHotspotCleanups(t.id, c, n);
+  }
+  bindTrigger(t, e, o, s) {
+    s === "hover" ? this.bindHoverTrigger(t, e, o) : (s === "click" || s === "load") && this.bindClickTrigger(t, e, o), this.bindKeyboardTrigger(t, e, o, s);
+  }
+  bindHoverTrigger(t, e, o) {
+    const s = m(e, "mouseenter", () => {
+      o.clearHideTimer(), o.show(), f(e, !0);
+    }), c = m(e, "mouseleave", () => {
+      o.scheduleHide(200), this.trackedTimeout(() => {
+        o.isVisible() || f(e, !1);
+      }, 250);
+    });
+    this.addHotspotCleanups(t.id, s, c);
+  }
+  bindClickTrigger(t, e, o) {
+    const s = J(o.element, e);
+    this.focusTraps.set(t.id, s);
+    const c = m(e, "click", (r) => {
+      var a, l, d;
+      r.stopPropagation(), (l = (a = this.config).onClick) == null || l.call(a, r, t), (d = t.onClick) == null || d.call(t, r, t), o.isVisible() ? (o.hide(), f(e, !1), s.deactivate()) : (this.closeAll(), o.show(), f(e, !0), s.activate());
+    }), n = m(document, "click", (r) => {
+      o.isVisible() && !t.keepOpen && !o.element.contains(r.target) && !e.contains(r.target) && (o.hide(), f(e, !1), s.deactivate());
+    });
+    this.addHotspotCleanups(t.id, c, n);
+  }
+  bindKeyboardTrigger(t, e, o, s) {
+    const c = m(e, "focus", () => {
+      s === "hover" && (o.clearHideTimer(), o.show(), f(e, !0));
+    }), n = m(e, "blur", () => {
+      s === "hover" && (o.scheduleHide(200), this.trackedTimeout(() => {
+        o.isVisible() || f(e, !1);
+      }, 250));
+    }), r = m(e, "keydown", (a) => {
+      var l, d, h, p, u;
+      a.key === "Enter" || a.key === " " ? (a.preventDefault(), (d = (l = this.config).onClick) == null || d.call(l, a, t), o.isVisible() ? (o.hide(), f(e, !1), (h = this.focusTraps.get(t.id)) == null || h.deactivate()) : (this.closeAll(), o.show(), f(e, !0), this.ensureFocusTrap(t.id, o.element, e), (p = this.focusTraps.get(t.id)) == null || p.activate())) : a.key === "Escape" && o.isVisible() && (o.hide(), f(e, !1), (u = this.focusTraps.get(t.id)) == null || u.deactivate(), e.focus());
+    });
+    this.addHotspotCleanups(t.id, c, n, r);
+  }
+  renormalizePixelCoordinates() {
+    const t = this.imgEl.naturalWidth, e = this.imgEl.naturalHeight;
+    if (!(!t || !e)) {
+      for (const o of this.config.hotspots)
+        if (typeof o.x == "number" || typeof o.y == "number") {
+          const { x: s, y: c } = G(o.x, o.y, t, e), n = this.markers.get(o.id);
+          n && (n.style.left = `${s}%`, n.style.top = `${c}%`);
+          const r = this.normalizedHotspots.get(o.id);
+          r && (r.x = s, r.y = c);
+        }
+    }
+  }
+  showLoadTriggerPopovers() {
+    var t;
+    for (const [e, o] of this.popovers) {
+      const s = this.normalizedHotspots.get(e);
+      if (((s == null ? void 0 : s.trigger) || this.config.trigger || "hover") === "load" && !o.isVisible()) {
+        o.show();
+        const n = this.markers.get(e);
+        n && (f(n, !0), this.ensureFocusTrap(e, o.element, n), (t = this.focusTraps.get(e)) == null || t.activate());
+        break;
+      }
+    }
+  }
+  initZoom() {
+    this.config.scrollHint !== !1 && (this.scrollHint = new Nt(this.containerEl)), this.zoomPan = new It(this.viewportEl, this.containerEl, {
+      zoomMin: this.config.zoomMin || 1,
+      zoomMax: this.config.zoomMax || 4,
+      onZoom: (t) => {
+        var e, o, s;
+        (o = (e = this.config).onZoom) == null || o.call(e, t), (s = this.zoomControls) == null || s.update();
+        for (const [, c] of this.popovers)
+          c.isVisible() && c.updatePosition();
+      },
+      onScrollWithoutZoom: () => {
+        var t;
+        return (t = this.scrollHint) == null ? void 0 : t.show();
+      }
+    }), this.config.zoomControls !== !1 && (this.zoomControls = Zt(this.containerEl, this.zoomPan, {
+      zoomMin: this.config.zoomMin || 1,
+      zoomMax: this.config.zoomMax || 4,
+      position: this.config.zoomControlsPosition
+    }));
+  }
+  setupResponsive() {
+    if (typeof ResizeObserver > "u") return;
+    let t = 0;
+    this.resizeObserver = new ResizeObserver(() => {
+      t || (t = requestAnimationFrame(() => {
+        if (t = 0, this.destroyed) return;
+        this.syncMarkersToImage();
+        const e = this.containerEl.offsetWidth;
+        for (const [o, s] of this.normalizedHotspots)
+          if (s.responsive) {
+            const c = this.markers.get(o);
+            if (!c) continue;
+            const n = s.responsive.maxWidth && e > s.responsive.maxWidth || s.responsive.minWidth && e < s.responsive.minWidth;
+            kt(c, !!n);
+          }
+      }));
+    }), this.cleanups.push(() => {
+      t && cancelAnimationFrame(t);
+    }), this.resizeObserver.observe(this.containerEl), this.cleanups.push(() => {
+      var e;
+      return (e = this.resizeObserver) == null ? void 0 : e.disconnect();
+    });
+  }
+  /** Position the markers layer to match the rendered image area within a fixed-ratio viewport */
+  syncMarkersToImage() {
+    if (!this.config.sceneAspectRatio) return;
+    const t = this.viewportEl.offsetWidth, e = this.viewportEl.offsetHeight, o = this.imgEl.naturalWidth, s = this.imgEl.naturalHeight;
+    if (!t || !e || !o || !s) return;
+    const c = t / e, n = o / s;
+    let r, a, l, d;
+    n > c ? (r = t, a = t / n, l = 0, d = (e - a) / 2) : (a = e, r = e * n, l = (t - r) / 2, d = 0), this.markersEl.style.left = `${l}px`, this.markersEl.style.top = `${d}px`, this.markersEl.style.width = `${r}px`, this.markersEl.style.height = `${a}px`, this.markersEl.style.right = "auto", this.markersEl.style.bottom = "auto";
+  }
+  initScenes() {
+    for (const o of this.config.scenes)
+      this.scenesMap.set(o.id, o);
+    const t = this.config.initialScene || this.config.scenes[0].id, e = this.scenesMap.get(t);
+    this.config.src = e.src, this.config.alt = e.alt || "", this.config.hotspots = [...e.hotspots], this.currentSceneId = t;
+  }
+  initKeyboard() {
+    this.keyboardHandler = new Bt({
+      container: this.containerEl,
+      getZoomPan: () => this.zoomPan,
+      onEscape: () => {
+        var t;
+        if ((t = this.fullscreenControl) != null && t.isFullscreen()) {
+          this.fullscreenControl.exit();
+          return;
+        }
+        this.closeAll();
+      },
+      onFullscreenToggle: () => {
+        var t;
+        (t = this.fullscreenControl) == null || t.toggle();
+      }
+    });
+  }
+  initFullscreen() {
+    this.config.fullscreenButton !== !1 && (this.fullscreenControl = Qt(this.containerEl, {
+      onChange: (t) => {
+        var e, o;
+        requestAnimationFrame(() => {
+          for (const [, s] of this.popovers)
+            s.isVisible() && s.updatePosition();
+        }), (o = (e = this.config).onFullscreenChange) == null || o.call(e, t);
+      }
+    }));
+  }
+  preloadSceneImage(t) {
+    var s;
+    if (this.preloadedScenes.has(t)) return;
+    const e = this.scenesMap.get(t);
+    if (!e) return;
+    this.preloadedScenes.add(t);
+    const o = new Image();
+    if ((s = this.config.cloudimage) != null && s.token) {
+      const c = this.containerEl.offsetWidth || 300, n = typeof window < "u" && window.devicePixelRatio || 1;
+      o.src = S(e.src, this.config.cloudimage, c, 1, n);
+    } else
+      o.src = e.src;
+  }
+  ensureFocusTrap(t, e, o) {
+    this.focusTraps.has(t) || this.focusTraps.set(t, J(e, o));
+  }
+  /** Create a setTimeout that is automatically cleared on destroy */
+  trackedTimeout(t, e) {
+    const o = setTimeout(() => {
+      this.activeTimers.delete(o), t();
+    }, e);
+    this.activeTimers.add(o);
+  }
+  /** Sync current hotspots back to scene override map so navigating away and back preserves changes */
+  syncCurrentSceneHotspots() {
+    !this.currentSceneId || this.isTransitioning || this.sceneHotspotOverrides.set(this.currentSceneId, [...this.config.hotspots]);
+  }
+  addHotspotCleanups(t, ...e) {
+    let o = this.hotspotCleanups.get(t);
+    o || (o = [], this.hotspotCleanups.set(t, o)), o.push(...e);
+  }
+  clearHotspots() {
+    for (const t of this.hotspotCleanups.values())
+      t.forEach((e) => e());
+    this.hotspotCleanups.clear();
+    for (const [, t] of this.popovers)
+      t.destroy();
+    this.popovers.clear();
+    for (const [, t] of this.markers)
+      L(t);
+    this.markers.clear(), this.normalizedHotspots.clear();
+    for (const [, t] of this.focusTraps)
+      t.destroy();
+    this.focusTraps.clear();
+  }
+  /** Read scene transition duration from CSS variable (handles both ms and s units) */
+  getSceneTransitionDuration() {
+    if (typeof getComputedStyle > "u") return 400;
+    const t = getComputedStyle(this.containerEl).getPropertyValue("--ci-hotspot-scene-transition-duration").trim(), e = parseFloat(t);
+    return isNaN(e) ? 400 : t.endsWith("s") && !t.endsWith("ms") ? e * 1e3 : e;
+  }
+  performSceneTransition(t, e, o, s) {
+    var a;
+    if (e === "none") {
+      this.clearHotspots(), this.switchToScene(t), s();
+      return;
+    }
+    const c = this.getSceneTransitionDuration();
+    g(this.containerEl, "ci-hotspot-scene-transitioning");
+    const n = b("img", "ci-hotspot-scene-incoming", {
+      alt: t.alt || "",
+      draggable: "false"
+    });
+    if ((a = this.config.cloudimage) != null && a.token) {
+      const l = this.containerEl.offsetWidth || 300, d = typeof window < "u" && window.devicePixelRatio || 1;
+      n.src = S(t.src, this.config.cloudimage, l, 1, d);
+    } else
+      n.src = t.src;
+    const r = () => {
+      if (!this.destroyed) {
+        if (e === "fade")
+          g(n, "ci-hotspot-scene-fade-in"), g(this.imgEl, "ci-hotspot-scene-fade-out");
+        else if (e === "slide") {
+          const l = o ? "-reverse" : "";
+          g(n, `ci-hotspot-scene-slide-in${l}`), g(this.imgEl, `ci-hotspot-scene-slide-out${l}`);
+        }
+        this.viewportEl.insertBefore(n, this.markersEl), this.transitionTimer = setTimeout(() => {
+          if (this.transitionTimer = void 0, this.destroyed) return;
+          this.clearHotspots(), this.switchToScene(t);
+          const l = () => {
+            n.remove(), w(this.imgEl, "ci-hotspot-scene-fade-out"), w(this.imgEl, "ci-hotspot-scene-slide-out"), w(this.imgEl, "ci-hotspot-scene-slide-out-reverse"), w(this.containerEl, "ci-hotspot-scene-transitioning"), s();
+          };
+          this.imgEl.complete && this.imgEl.naturalWidth > 0 ? l() : (this.imgEl.addEventListener("load", l, { once: !0 }), this.imgEl.addEventListener("error", l, { once: !0 }));
+        }, c);
+      }
+    };
+    n.complete ? r() : (g(this.containerEl, "ci-hotspot-scene-loading"), n.onload = () => {
+      w(this.containerEl, "ci-hotspot-scene-loading"), r();
+    }, n.onerror = () => {
+      this.destroyed || (w(this.containerEl, "ci-hotspot-scene-loading"), n.remove(), w(this.containerEl, "ci-hotspot-scene-transitioning"), this.clearHotspots(), this.switchToScene(t), s());
+    });
+  }
+  switchToScene(t) {
+    var o;
+    this.config.src = t.src, this.config.alt = t.alt || "", this.config.hotspots = this.sceneHotspotOverrides.get(t.id) ?? [...t.hotspots], this.imgEl.alt = t.alt || "", this.containerEl.setAttribute("aria-label", t.alt || "Image with hotspots"), this.imageLoaded = !1;
+    const e = () => {
+      this.imageLoaded = !0, this.renormalizePixelCoordinates(), this.syncMarkersToImage(), this.showLoadTriggerPopovers();
+    };
+    if (this.imgEl.addEventListener("load", e, { once: !0 }), (o = this.config.cloudimage) != null && o.token) {
+      const s = this.containerEl.offsetWidth || 300, c = typeof window < "u" && window.devicePixelRatio || 1;
+      this.imgEl.src = S(t.src, this.config.cloudimage, s, 1, c);
+    } else
+      this.imgEl.src = t.src;
+    this.imgEl.complete && this.imgEl.naturalWidth > 0 && !this.imageLoaded && (this.imgEl.removeEventListener("load", e), e()), this.initHotspots();
+  }
+  // === Public API ===
+  /** Get references to the internal DOM elements */
+  getElements() {
+    return {
+      container: this.containerEl,
+      viewport: this.viewportEl,
+      image: this.imgEl,
+      markers: this.markersEl
+    };
+  }
+  open(t) {
+    var s;
+    if (this.destroyed) return;
+    const e = this.popovers.get(t), o = this.markers.get(t);
+    !e || !o || e.isVisible() || (this.closeAll(), e.show(), f(o, !0), (s = this.focusTraps.get(t)) == null || s.activate());
+  }
+  close(t) {
+    var s;
+    if (this.destroyed) return;
+    const e = this.popovers.get(t), o = this.markers.get(t);
+    e && o && (e.hide(), f(o, !1), (s = this.focusTraps.get(t)) == null || s.deactivate());
+  }
+  closeAll() {
+    var t;
+    if (!this.destroyed) {
+      for (const [e, o] of this.popovers)
+        if (o.isVisible()) {
+          o.hide();
+          const s = this.markers.get(e);
+          s && f(s, !1), (t = this.focusTraps.get(e)) == null || t.deactivate();
+        }
+    }
+  }
+  setZoom(t) {
+    var e;
+    this.destroyed || (e = this.zoomPan) == null || e.setZoom(t);
+  }
+  getZoom() {
+    var t;
+    return ((t = this.zoomPan) == null ? void 0 : t.getZoom()) || 1;
+  }
+  resetZoom() {
+    var t;
+    this.destroyed || (t = this.zoomPan) == null || t.resetZoom();
+  }
+  goToScene(t) {
+    if (this.destroyed || this.isTransitioning || !this.scenesMap.size || t === this.currentSceneId) return;
+    const e = this.scenesMap.get(t);
+    if (!e) return;
+    const o = this.config.sceneTransition || "fade";
+    this.isTransitioning = !0, this.zoomPan && this.zoomPan.getZoom() > 1 && this.zoomPan.resetZoom();
+    let s = !1;
+    if (o === "slide") {
+      for (const c of this.config.hotspots)
+        if (c.navigateTo === t) {
+          const n = this.normalizedHotspots.get(c.id);
+          n && n.x <= 50 && (s = !0);
+          break;
+        }
+    }
+    this.syncCurrentSceneHotspots(), this.currentSceneId = t, this.performSceneTransition(e, o, s, () => {
+      var n, r;
+      this.isTransitioning = !1, Gt(`Navigated to ${e.alt || t}`), (r = (n = this.config).onSceneChange) == null || r.call(n, t, e);
+      const c = e.hotspots[0];
+      if (c) {
+        const a = this.markers.get(c.id);
+        a && document.activeElement && this.containerEl.contains(document.activeElement) && a.focus();
+      }
+    });
+  }
+  getCurrentScene() {
+    return this.currentSceneId;
+  }
+  getScenes() {
+    return Array.from(this.scenesMap.keys());
+  }
+  enterFullscreen() {
+    var t;
+    this.destroyed || (t = this.fullscreenControl) == null || t.enter();
+  }
+  exitFullscreen() {
+    var t;
+    this.destroyed || (t = this.fullscreenControl) == null || t.exit();
+  }
+  isFullscreen() {
+    var t;
+    return ((t = this.fullscreenControl) == null ? void 0 : t.isFullscreen()) ?? !1;
+  }
+  addHotspot(t) {
+    this.destroyed || (this.config.hotspots.push(t), this.addHotspotInternal(t), this.syncCurrentSceneHotspots());
+  }
+  removeHotspot(t) {
+    if (this.destroyed) return;
+    const e = this.hotspotCleanups.get(t);
+    e && (e.forEach((n) => n()), this.hotspotCleanups.delete(t));
+    const o = this.focusTraps.get(t);
+    o && (o.destroy(), this.focusTraps.delete(t));
+    const s = this.markers.get(t), c = this.popovers.get(t);
+    c && (c.destroy(), this.popovers.delete(t)), s && (L(s), this.markers.delete(t)), this.normalizedHotspots.delete(t), this.config.hotspots = this.config.hotspots.filter((n) => n.id !== t), this.syncCurrentSceneHotspots();
+  }
+  updateHotspot(t, e) {
+    if (this.destroyed) return;
+    const o = this.config.hotspots.findIndex((l) => l.id === t);
+    if (o === -1) return;
+    const s = this.markers.get(t), c = (s == null ? void 0 : s.nextElementSibling) || null, r = { ...this.config.hotspots[o], ...e };
+    this.removeHotspot(t), this.config.hotspots.splice(o, 0, r), this.addHotspotInternal(r);
+    const a = this.markers.get(t);
+    a && c && this.markersEl.contains(c) && this.markersEl.insertBefore(a, c), this.syncCurrentSceneHotspots();
+  }
+  update(t) {
+    this.destroyed || (this.destroyInternal(), Q(), this.config = j({ ...this.config, ...t }), V(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive());
+  }
+  destroy() {
+    this.destroyed || (this.destroyed = !0, this.destroyInternal(), this.rootEl.innerHTML = "");
+  }
+  destroyInternal() {
+    var t, e, o, s, c, n, r;
+    this.imageLoaded = !1;
+    for (const a of this.activeTimers) clearTimeout(a);
+    this.activeTimers.clear();
+    for (const a of this.hotspotCleanups.values())
+      a.forEach((l) => l());
+    this.hotspotCleanups.clear(), this.cleanups.forEach((a) => a()), this.cleanups = [];
+    for (const [, a] of this.popovers)
+      a.destroy();
+    this.popovers.clear();
+    for (const [, a] of this.markers)
+      L(a);
+    this.markers.clear(), this.normalizedHotspots.clear();
+    for (const [, a] of this.focusTraps)
+      a.destroy();
+    this.focusTraps.clear(), this.scenesMap.clear(), this.preloadedScenes.clear(), this.sceneHotspotOverrides.clear(), this.currentSceneId = void 0, this.isTransitioning = !1, this.transitionTimer !== void 0 && (clearTimeout(this.transitionTimer), this.transitionTimer = void 0), (t = this.fullscreenControl) == null || t.destroy(), this.fullscreenControl = null, (e = this.keyboardHandler) == null || e.destroy(), this.keyboardHandler = null, (o = this.zoomPan) == null || o.destroy(), this.zoomPan = null, (s = this.zoomControls) == null || s.destroy(), this.zoomControls = null, (c = this.scrollHint) == null || c.destroy(), this.scrollHint = null, (n = this.cloudimageHandler) == null || n.destroy(), this.cloudimageHandler = null, (r = this.resizeObserver) == null || r.disconnect(), this.resizeObserver = null, qt();
+  }
+};
+P.NAVIGATE_ARROW_SVG = '<svg class="ci-hotspot-navigate-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>';
+let X = P;
+function O(i) {
+  const t = C({ value: i, key: JSON.stringify(i) });
+  if (i !== t.current.value) {
+    const e = JSON.stringify(i);
+    e !== t.current.key ? t.current = { value: i, key: e } : t.current.value = i;
+  }
+  return t.current.key;
+}
+function ee(i) {
+  const t = C(null), e = C(null), o = C(!1), s = C(i);
+  s.current = i, Y(() => {
+    const a = t.current;
+    if (!a) return;
+    const l = {
+      src: s.current.src || "",
+      alt: s.current.alt,
+      hotspots: s.current.hotspots || [],
+      trigger: s.current.trigger,
+      zoom: s.current.zoom,
+      zoomMax: s.current.zoomMax,
+      zoomMin: s.current.zoomMin,
+      theme: s.current.theme,
+      pulse: s.current.pulse,
+      placement: s.current.placement,
+      zoomControls: s.current.zoomControls,
+      zoomControlsPosition: s.current.zoomControlsPosition,
+      lazyLoad: s.current.lazyLoad,
+      scrollHint: s.current.scrollHint,
+      cloudimage: s.current.cloudimage,
+      onOpen: s.current.onOpen,
+      onClose: s.current.onClose,
+      onZoom: s.current.onZoom,
+      onClick: s.current.onClick,
+      scenes: s.current.scenes,
+      initialScene: s.current.initialScene,
+      sceneTransition: s.current.sceneTransition,
+      sceneAspectRatio: s.current.sceneAspectRatio,
+      onSceneChange: s.current.onSceneChange,
+      fullscreenButton: s.current.fullscreenButton,
+      onFullscreenChange: s.current.onFullscreenChange
+    };
+    s.current.renderPopover && (l.renderPopover = (h) => {
+      const p = document.createElement("div");
+      return p.dataset.reactPortal = h.id, p;
+    });
+    const d = new X(a, l);
+    return e.current = d, () => {
+      d.destroy(), e.current = null;
+    };
+  }, []);
+  const c = O(i.scenes), n = O(i.hotspots), r = O(i.cloudimage);
+  return Y(() => {
+    if (!o.current) {
+      o.current = !0;
+      return;
+    }
+    e.current && e.current.update({
+      src: i.src || "",
+      alt: i.alt,
+      hotspots: i.hotspots || [],
+      trigger: i.trigger,
+      zoom: i.zoom,
+      zoomMax: i.zoomMax,
+      zoomMin: i.zoomMin,
+      theme: i.theme,
+      pulse: i.pulse,
+      placement: i.placement,
+      zoomControls: i.zoomControls,
+      zoomControlsPosition: i.zoomControlsPosition,
+      lazyLoad: i.lazyLoad,
+      scrollHint: i.scrollHint,
+      cloudimage: i.cloudimage,
+      onOpen: i.onOpen,
+      onClose: i.onClose,
+      onZoom: i.onZoom,
+      onClick: i.onClick,
+      scenes: i.scenes,
+      initialScene: i.initialScene,
+      sceneTransition: i.sceneTransition,
+      sceneAspectRatio: i.sceneAspectRatio,
+      onSceneChange: i.onSceneChange,
+      fullscreenButton: i.fullscreenButton,
+      onFullscreenChange: i.onFullscreenChange
+    });
+  }, [
+    i.src,
+    i.alt,
+    n,
+    i.trigger,
+    i.zoom,
+    i.zoomMax,
+    i.zoomMin,
+    i.theme,
+    i.pulse,
+    i.placement,
+    i.zoomControls,
+    i.zoomControlsPosition,
+    i.lazyLoad,
+    i.scrollHint,
+    r,
+    c,
+    i.initialScene,
+    i.sceneTransition,
+    i.sceneAspectRatio,
+    i.fullscreenButton
+    // Note: Callback props (onOpen, onClose, onZoom, onClick, onSceneChange, onFullscreenChange) are
+    // intentionally excluded from this dependency array. They are read from optionsRef
+    // at call time, so they always reflect the latest value without triggering re-init.
+  ]), { containerRef: t, instance: e };
+}
+const ne = ct(
+  function(t, e) {
+    const { className: o, style: s, renderPopover: c, ...n } = t, { containerRef: r, instance: a } = ee(n), [l, d] = at.useState(/* @__PURE__ */ new Map());
+    return lt(e, () => ({
+      open: (h) => {
+        var p;
+        return (p = a.current) == null ? void 0 : p.open(h);
+      },
+      close: (h) => {
+        var p;
+        return (p = a.current) == null ? void 0 : p.close(h);
+      },
+      closeAll: () => {
+        var h;
+        return (h = a.current) == null ? void 0 : h.closeAll();
+      },
+      setZoom: (h) => {
+        var p;
+        return (p = a.current) == null ? void 0 : p.setZoom(h);
+      },
+      getZoom: () => {
+        var h;
+        return ((h = a.current) == null ? void 0 : h.getZoom()) ?? 1;
+      },
+      resetZoom: () => {
+        var h;
+        return (h = a.current) == null ? void 0 : h.resetZoom();
+      },
+      addHotspot: (h) => {
+        var p;
+        return (p = a.current) == null ? void 0 : p.addHotspot(h);
+      },
+      removeHotspot: (h) => {
+        var p;
+        return (p = a.current) == null ? void 0 : p.removeHotspot(h);
+      },
+      updateHotspot: (h, p) => {
+        var u;
+        return (u = a.current) == null ? void 0 : u.updateHotspot(h, p);
+      },
+      goToScene: (h) => {
+        var p;
+        return (p = a.current) == null ? void 0 : p.goToScene(h);
+      },
+      getCurrentScene: () => {
+        var h;
+        return (h = a.current) == null ? void 0 : h.getCurrentScene();
+      },
+      getScenes: () => {
+        var h;
+        return ((h = a.current) == null ? void 0 : h.getScenes()) ?? [];
+      },
+      enterFullscreen: () => {
+        var h;
+        return (h = a.current) == null ? void 0 : h.enterFullscreen();
+      },
+      exitFullscreen: () => {
+        var h;
+        return (h = a.current) == null ? void 0 : h.exitFullscreen();
+      },
+      isFullscreen: () => {
+        var h;
+        return ((h = a.current) == null ? void 0 : h.isFullscreen()) ?? !1;
+      }
+    })), Y(() => {
+      if (!r.current || !c) return;
+      const h = new MutationObserver(() => {
+        var k;
+        const p = (k = r.current) == null ? void 0 : k.querySelectorAll("[data-react-portal]");
+        if (!p) return;
+        const u = /* @__PURE__ */ new Map();
+        p.forEach((v) => {
+          const y = v.dataset.reactPortal;
+          y && u.set(y, v);
+        }), d((v) => {
+          if (v.size !== u.size) return u;
+          for (const [y, H] of u)
+            if (v.get(y) !== H) return u;
+          return v;
+        });
+      });
+      return h.observe(r.current, { childList: !0, subtree: !0 }), () => h.disconnect();
+    }, [c]), /* @__PURE__ */ rt($, { children: [
+      /* @__PURE__ */ W("div", { ref: r, className: o, style: s }),
+      c && Array.from(l.entries()).map(([h, p]) => {
+        var k;
+        const u = (k = t.hotspots) == null ? void 0 : k.find((v) => v.id === h);
+        return u ? ht(
+          /* @__PURE__ */ W($, { children: c(u) }),
+          p,
+          h
+        ) : null;
+      })
+    ] });
+  }
+);
+export {
+  ne as CIHotspotViewer,
+  ee as useCIHotspot
+};
+//# sourceMappingURL=index.js.map