@mirage-engine/core 0.3.2 → 0.3.4

package/dist/mirage-engine.js

@@ -1,46 +1,47 @@
-var Be = Object.defineProperty, Oe = Object.defineProperties;
+var Oe = Object.defineProperty, Be = Object.defineProperties;
 var Fe = Object.getOwnPropertyDescriptors;
-var Ce = Object.getOwnPropertySymbols;
-var Xe = Object.prototype.hasOwnProperty, _e = Object.prototype.propertyIsEnumerable;
-var ge = (s, e, t) => e in s ? Be(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, G = (s, e) => {
+var be = Object.getOwnPropertySymbols;
+var _e = Object.prototype.hasOwnProperty, Ne = Object.prototype.propertyIsEnumerable;
+var oe = (s, e, t) => e in s ? Oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, q = (s, e) => {
   for (var t in e || (e = {}))
-    Xe.call(e, t) && ge(s, t, e[t]);
-  if (Ce)
-    for (var t of Ce(e))
-      _e.call(e, t) && ge(s, t, e[t]);
+    _e.call(e, t) && oe(s, t, e[t]);
+  if (be)
+    for (var t of be(e))
+      Ne.call(e, t) && oe(s, t, e[t]);
   return s;
-}, pe = (s, e) => Oe(s, Fe(e));
-var u = (s, e, t) => (ge(s, typeof e != "symbol" ? e + "" : e, t), t);
-var we = (s, e, t) => new Promise((i, r) => {
-  var l = (n) => {
+}, we = (s, e) => Be(s, Fe(e));
+var g = (s, e, t) => (oe(s, typeof e != "symbol" ? e + "" : e, t), t);
+var Ee = (s, e, t) => new Promise((r, i) => {
+  var a = (l) => {
     try {
-      a(t.next(n));
+      o(t.next(l));
     } catch (c) {
-      r(c);
+      i(c);
     }
-  }, o = (n) => {
+  }, n = (l) => {
     try {
-      a(t.throw(n));
+      o(t.throw(l));
     } catch (c) {
-      r(c);
+      i(c);
     }
-  }, a = (n) => n.done ? i(n.value) : Promise.resolve(n.value).then(l, o);
-  a((t = t.apply(s, e)).next());
+  }, o = (l) => l.done ? r(l.value) : Promise.resolve(l.value).then(a, n);
+  o((t = t.apply(s, e)).next());
 });
-import * as v from "three";
-const Me = {
+import * as y from "three";
+const Re = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
   INCLUDE_SELF: "include-self",
   EXCLUDE_SELF: "exclude-self",
   END: "end"
-}, q = {
+}, H = {
   NAME: "data-mirage-dom",
   KEY: "mirageDom",
   VALUES: {
-    HIDE: "hide"
+    HIDE: "hide",
+    SHOW: "show"
   }
-}, Te = {
+}, xe = {
   TRAVELER: "traveler",
   NATIVE: "native",
   CAPTURE_1: "1",
@@ -48,30 +49,30 @@ const Me = {
   CAPTURE_3: "3",
   CAPTURE_4: "4",
   CAPTURE_5: "5"
-}, O = {
+}, k = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
-  VALUES: Te,
-  MAX_LAYERS: Object.keys(Te).length - 1
-}, Y = {
+  VALUES: xe,
+  MAX_LAYERS: Object.keys(xe).length - 1
+}, _ = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
-  VALUES: Me
-}, z = {
+  VALUES: Re
+}, V = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
-  VALUES: Me
-}, Ne = {
+  VALUES: Re
+}, Xe = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
-}, lt = {
+}, at = {
   NAME: "data-mirage-sandwich",
   KEY: "mirageSandwich",
   VALUES: {
     FRONT: "front"
   }
-}, he = 0, j = 1, ae = 2, Ye = 4, be = 8, ve = 16;
-function ze(s) {
+}, te = 0, $ = 1, Q = 2, ze = 4, re = 8, le = 16;
+function Ve(s) {
   const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
   return e ? {
     r: parseInt(e[1]) / 255,
@@ -79,10 +80,10 @@ function ze(s) {
     b: parseInt(e[3]) / 255
   } : { r: 1, g: 1, b: 1 };
 }
-function Pe(s) {
+function Ye(s) {
   const e = {};
   if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
-    const t = ze(s.backgroundColor);
+    const t = Ve(s.backgroundColor);
     e.backgroundColor = [t.r, t.g, t.b];
   }
   if (s.backgroundImage ? e.backgroundImage = s.backgroundImage : s.background && (e.backgroundImage = s.background), s.borderRadius && (e.borderRadius = parseFloat(s.borderRadius)), s.width && (e.width = parseFloat(s.width)), s.height && (e.height = parseFloat(s.height)), s.transform && s.transform !== "none") {
@@ -91,34 +92,34 @@ function Pe(s) {
   }
   return e;
 }
-class Ve {
+class We {
   constructor(e, t) {
-    u(this, "target");
-    u(this, "observer");
-    u(this, "pendingDeletions", /* @__PURE__ */ new Set());
-    u(this, "pendingStyles", /* @__PURE__ */ new Map());
-    u(this, "isDomDirty", !1);
-    u(this, "isRunning", !1);
-    u(this, "pendingMask", he);
-    u(this, "mutationTimer", null);
-    u(this, "cssTimer", null);
-    u(this, "resizeConfig");
-    u(this, "resizeTimer", null);
-    u(this, "isResizing", !1);
-    u(this, "lastScrollX", 0);
-    u(this, "lastScrollY", 0);
-    u(this, "scrollTimer", null);
-    u(this, "onBeforeRender", /* @__PURE__ */ new Set());
-    u(this, "onLayoutChange", /* @__PURE__ */ new Set());
-    u(this, "onStyleChange", /* @__PURE__ */ new Set());
-    u(this, "onScrollChange", /* @__PURE__ */ new Set());
-    u(this, "onRender", /* @__PURE__ */ new Set());
-    u(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= j | ae, this.cssTimer = window.setTimeout(() => {
+    g(this, "target");
+    g(this, "observer");
+    g(this, "pendingDeletions", /* @__PURE__ */ new Set());
+    g(this, "pendingStyles", /* @__PURE__ */ new Map());
+    g(this, "isDomDirty", !1);
+    g(this, "isRunning", !1);
+    g(this, "pendingMask", te);
+    g(this, "mutationTimer", null);
+    g(this, "cssTimer", null);
+    g(this, "resizeConfig");
+    g(this, "resizeTimer", null);
+    g(this, "isResizing", !1);
+    g(this, "lastScrollX", 0);
+    g(this, "lastScrollY", 0);
+    g(this, "scrollTimer", null);
+    g(this, "onBeforeRender", /* @__PURE__ */ new Set());
+    g(this, "onLayoutChange", /* @__PURE__ */ new Set());
+    g(this, "onStyleChange", /* @__PURE__ */ new Set());
+    g(this, "onScrollChange", /* @__PURE__ */ new Set());
+    g(this, "onRender", /* @__PURE__ */ new Set());
+    g(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= $ | Q, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
-    u(this, "onWindowResize", () => {
+    g(this, "onWindowResize", () => {
       if (!this.resizeConfig.enabled) {
         this.isDomDirty = !0;
         return;
@@ -127,41 +128,41 @@ class Ve {
         this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
       }, this.resizeConfig.delay);
     });
-    u(this, "renderLoop", () => {
+    g(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
-      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = he);
+      this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = te);
       const e = window.scrollX, t = window.scrollY;
-      (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((i) => i(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
-        this.pendingMask |= j, this.isDomDirty = !0, this.scrollTimer = null;
-      }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((i) => i(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((i) => i()), requestAnimationFrame(this.renderLoop);
+      (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((r) => r(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
+        this.pendingMask |= $, this.isDomDirty = !0, this.scrollTimer = null;
+      }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
     });
-    var r, l;
+    var i, a;
     this.target = e;
-    const i = (r = t.resizeDebounce) != null ? r : !0;
-    i === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : i === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
+    const r = (i = t.resizeDebounce) != null ? i : !0;
+    r === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : r === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
       enabled: !0,
-      delay: (l = i.delay) != null ? l : 150,
-      onStart: i.onStart,
-      onEnd: i.onEnd
-    }, this.observer = new MutationObserver((o) => {
-      let a = he;
-      for (const n of o)
-        if (n.type === "childList")
-          a |= be, n.removedNodes.length > 0 && n.removedNodes.forEach((c) => {
+      delay: (a = r.delay) != null ? a : 150,
+      onStart: r.onStart,
+      onEnd: r.onEnd
+    }, this.observer = new MutationObserver((n) => {
+      let o = te;
+      for (const l of n)
+        if (l.type === "childList")
+          o |= re, l.removedNodes.length > 0 && l.removedNodes.forEach((c) => {
             c instanceof HTMLElement && this.pendingDeletions.add(c);
           });
-        else if (n.type === "attributes")
-          if (n.attributeName === "style") {
-            a |= j | ae;
-            const c = n.target, h = Pe(c.style);
-            this.pendingStyles.set(c, h);
+        else if (l.type === "attributes")
+          if (l.attributeName === "style") {
+            o |= $ | Q;
+            const c = l.target, d = Ye(c.style);
+            this.pendingStyles.set(c, d);
           } else
-            (n.attributeName === "class" || n.attributeName && n.attributeName.startsWith("data-")) && (a |= j | ae);
+            l.attributeName === "class" ? o |= $ | Q : l.attributeName && l.attributeName.startsWith("data-") && (o |= $ | Q, l.attributeName.startsWith("data-mirage") && (o |= re));
         else
-          n.type === "characterData" && (a |= ve | j);
-      if (a !== he) {
-        if (this.pendingMask |= a, a & be) {
+          l.type === "characterData" && (o |= le | $);
+      if (o !== te) {
+        if (this.pendingMask |= o, o & re) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -186,13 +187,13 @@ class Ve {
     this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
   }
 }
-const P = 1, Z = 2, ct = 0, A = {
+const W = 1, j = 2, lt = 0, L = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Se = Object.values(Y.VALUES);
-class De {
+}, Ce = Object.values(_.VALUES);
+class Le {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
    * @param font CSS font shorthand string (e.g., "400 16px Inter")
@@ -207,88 +208,88 @@ class De {
   static calculateBaselineFromDOM(e) {
     if (typeof document == "undefined")
       return 0;
-    const t = document.createElement("div"), i = document.createElement("span"), r = document.createElement("img");
-    t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", i.style.margin = "0", i.style.padding = "0", i.style.border = "none", i.style.lineHeight = "normal", r.width = 1, r.height = 1, r.style.verticalAlign = "baseline", i.appendChild(document.createTextNode("Hidden Text")), t.appendChild(i), t.appendChild(r), document.body.appendChild(t);
-    const l = r.offsetTop - i.offsetTop;
-    return document.body.removeChild(t), l;
+    const t = document.createElement("div"), r = document.createElement("span"), i = document.createElement("img");
+    t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", r.style.margin = "0", r.style.padding = "0", r.style.border = "none", r.style.lineHeight = "normal", i.width = 1, i.height = 1, i.style.verticalAlign = "baseline", r.appendChild(document.createTextNode("Hidden Text")), t.appendChild(r), t.appendChild(i), document.body.appendChild(t);
+    const a = i.offsetTop - r.offsetTop;
+    return document.body.removeChild(t), a;
   }
 }
-u(De, "cache", /* @__PURE__ */ new Map());
-class We extends v.MeshBasicMaterial {
-  constructor(t, i, r, l, o = 2) {
+g(Le, "cache", /* @__PURE__ */ new Map());
+class He extends y.MeshBasicMaterial {
+  constructor(t, r, i, a, n = 2) {
     super({
       transparent: !0,
-      side: v.FrontSide,
+      side: y.FrontSide,
       color: 16777215
     });
-    u(this, "canvas");
-    u(this, "ctx");
-    u(this, "qualityFactor");
+    g(this, "canvas");
+    g(this, "ctx");
+    g(this, "qualityFactor");
     if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
       throw new Error("[Mirage] Failed to create canvas context");
-    this.qualityFactor = o, this.map = new v.CanvasTexture(this.canvas), this.map.colorSpace = v.LinearSRGBColorSpace, this.map.minFilter = v.LinearFilter, this.map.magFilter = v.LinearFilter, this.updateText(t, i, r, l);
-  }
-  wrapText(t, i) {
-    const r = t.split(`
-`), l = [];
-    return r.forEach((o) => {
-      const a = o.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-      if (a.length === 0) {
-        l.push("");
+    this.qualityFactor = n, this.map = new y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t, r, i, a);
+  }
+  wrapText(t, r) {
+    const i = t.split(`
+`), a = [];
+    return i.forEach((n) => {
+      const o = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (o.length === 0) {
+        a.push("");
         return;
       }
-      let n = a[0];
-      for (let c = 1; c < a.length; c++) {
-        const h = a[c];
-        this.ctx.measureText(n + h).width <= i + 2 ? n += h : (n && l.push(n), n = h.trimStart());
+      let l = o[0];
+      for (let c = 1; c < o.length; c++) {
+        const d = o[c];
+        this.ctx.measureText(l + d).width <= r + 2 ? l += d : (l && a.push(l), l = d.trimStart());
       }
-      n && l.push(n);
-    }), l;
-  }
-  updateText(t, i, r, l, o) {
-    o !== void 0 && (this.qualityFactor = o);
-    const n = (window.devicePixelRatio || 1) * this.qualityFactor, c = r * n, h = l * n;
-    this.canvas.width !== c || this.canvas.height !== h ? (this.canvas.width = c, this.canvas.height = h) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(n, 0, 0, n, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const f = this.wrapText(t, r), b = i.lineHeight, p = De.getBaseline(i.font);
-    f.forEach((d, g) => {
-      const w = g * b + p;
-      let L = 0;
-      i.textAlign === "center" ? L = r / 2 : i.textAlign === "right" && (L = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(d, L, w);
+      l && a.push(l);
+    }), a;
+  }
+  updateText(t, r, i, a, n) {
+    n !== void 0 && (this.qualityFactor = n);
+    const l = (window.devicePixelRatio || 1) * this.qualityFactor, c = i * l, d = a * l;
+    this.canvas.width !== c || this.canvas.height !== d ? (this.canvas.width = c, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(l, 0, 0, l, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
+    const h = this.wrapText(t, i), u = r.lineHeight, p = Le.getBaseline(r.font);
+    h.forEach((f, m) => {
+      const E = m * u + p;
+      let R = 0;
+      r.textAlign === "center" ? R = i / 2 : r.textAlign === "right" && (R = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(f, R, E);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function ee(s) {
+function K(s) {
   return typeof s == "number" ? s : parseFloat(s) || 0;
 }
-function le(s) {
+function Z(s) {
   if (!s || s === "transparent")
-    return { color: new v.Color(16777215), alpha: 0 };
+    return { color: new y.Color(16777215), alpha: 0 };
   const e = s.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
-    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), l = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new v.Color(`rgb(${t}, ${i}, ${r})`), alpha: l };
+    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new y.Color(`rgb(${t}, ${r}, ${i})`), alpha: a };
   }
-  return { color: new v.Color(s), alpha: 1 };
+  return { color: new y.Color(s), alpha: 1 };
 }
-function He(s) {
+function Pe(s) {
   const e = [];
-  let t = "", i = 0;
-  for (let r = 0; r < s.length; r++) {
-    const l = s[r];
-    if (l === "(")
-      i++;
-    else if (l === ")")
-      i--;
-    else if (l === "," && i === 0) {
+  let t = "", r = 0;
+  for (let i = 0; i < s.length; i++) {
+    const a = s[i];
+    if (a === "(")
+      r++;
+    else if (a === ")")
+      r--;
+    else if (a === "," && r === 0) {
       e.push(t.trim()), t = "";
       continue;
     }
-    t += l;
+    t += a;
   }
   return t && e.push(t.trim()), e;
 }
@@ -298,48 +299,48 @@ function Ge(s) {
   const e = s.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], i = He(t);
-  let r = Math.PI, l = 0;
-  const o = i[0].trim();
-  if (o.startsWith("to "))
-    o === "to top" ? r = 0 : o === "to right" ? r = Math.PI / 2 : o === "to bottom" ? r = Math.PI : o === "to left" ? r = Math.PI * 1.5 : o === "to top right" || o === "to right top" ? r = Math.PI / 4 : o === "to bottom right" || o === "to right bottom" ? r = Math.PI * 0.75 : o === "to bottom left" || o === "to left bottom" ? r = Math.PI * 1.25 : (o === "to top left" || o === "to left top") && (r = Math.PI * 1.75), l = 1;
-  else if (o.endsWith("deg") || o.endsWith("rad") || o.endsWith("turn")) {
-    const n = parseFloat(o);
-    o.endsWith("deg") ? r = n * (Math.PI / 180) : o.endsWith("rad") ? r = n : o.endsWith("turn") && (r = n * Math.PI * 2), l = 1;
-  }
-  const a = [];
-  for (let n = l; n < i.length && !(a.length >= 8); n++) {
-    const c = i[n].trim(), h = c.lastIndexOf(" ");
-    let f = c, b = null;
-    if (h !== -1 && !c.endsWith(")")) {
-      const d = c.substring(h + 1);
-      (d.endsWith("%") || d.endsWith("px") || !isNaN(parseFloat(d))) && (f = c.substring(0, h).trim(), b = d);
+  const t = e[1], r = Pe(t);
+  let i = Math.PI, a = 0;
+  const n = r[0].trim();
+  if (n.startsWith("to "))
+    n === "to top" ? i = 0 : n === "to right" ? i = Math.PI / 2 : n === "to bottom" ? i = Math.PI : n === "to left" ? i = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? i = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? i = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? i = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (i = Math.PI * 1.75), a = 1;
+  else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
+    const l = parseFloat(n);
+    n.endsWith("deg") ? i = l * (Math.PI / 180) : n.endsWith("rad") ? i = l : n.endsWith("turn") && (i = l * Math.PI * 2), a = 1;
+  }
+  const o = [];
+  for (let l = a; l < r.length && !(o.length >= 8); l++) {
+    const c = r[l].trim(), d = c.lastIndexOf(" ");
+    let h = c, u = null;
+    if (d !== -1 && !c.endsWith(")")) {
+      const f = c.substring(d + 1);
+      (f.endsWith("%") || f.endsWith("px") || !isNaN(parseFloat(f))) && (h = c.substring(0, d).trim(), u = f);
     }
-    const p = le(f);
-    a.push({
+    const p = Z(h);
+    o.push({
       color: p.color,
       alpha: p.alpha,
-      rawStop: b,
+      rawStop: u,
       stop: 0
     });
   }
-  if (a.length > 0) {
-    for (let c = 0; c < a.length; c++)
-      a[c].rawStop !== null && (a[c].stop = parseFloat(a[c].rawStop) / 100);
-    a[0].rawStop === null && (a[0].stop = 0), a.length > 1 && a[a.length - 1].rawStop === null && (a[a.length - 1].stop = 1);
-    let n = 0;
-    for (let c = 1; c < a.length; c++)
-      if (a[c].rawStop !== null || c === a.length - 1) {
-        const h = c - n;
-        if (h > 1) {
-          const f = a[n].stop, p = (a[c].stop - f) / h;
-          for (let d = 1; d < h; d++)
-            a[n + d].stop = f + p * d;
+  if (o.length > 0) {
+    for (let c = 0; c < o.length; c++)
+      o[c].rawStop !== null && (o[c].stop = parseFloat(o[c].rawStop) / 100);
+    o[0].rawStop === null && (o[0].stop = 0), o.length > 1 && o[o.length - 1].rawStop === null && (o[o.length - 1].stop = 1);
+    let l = 0;
+    for (let c = 1; c < o.length; c++)
+      if (o[c].rawStop !== null || c === o.length - 1) {
+        const d = c - l;
+        if (d > 1) {
+          const h = o[l].stop, p = (o[c].stop - h) / d;
+          for (let f = 1; f < d; f++)
+            o[l + f].stop = h + p * f;
         }
-        n = c;
+        l = c;
       }
   }
-  return { angle: r, stops: a };
+  return { angle: i, stops: o };
 }
 const qe = `varying vec2 vUv;
 varying vec4 vScreenPos;
@@ -483,178 +484,178 @@ uniform vec2 uTextureOffset;`, Ke = `vec2 screenUv = (vScreenPos.xy / vScreenPos
 vec2 resultUv = screenUv;
 
 `, Je = `vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`, Re = {
+baseColor = blendSrcOver(baseColor, texColor);`, Te = {
   vertexShader: qe,
   fragmentShader: $e
-}, me = {
+}, ae = {
   declChunk: je,
   uvChunk: Ke,
   baseColorChunk: Je
 };
-function Qe(s, e, t, i = null, r) {
-  var R;
-  const l = i !== null || !!s.imageSrc;
-  let o = "";
-  const a = {};
-  if (r != null && r.uniforms)
-    for (const [E, x] of Object.entries(r.uniforms))
-      typeof x == "number" ? (o += `uniform float ${E};
-`, a[E] = { value: x }) : Array.isArray(x) ? x.length === 2 ? (o += `uniform vec2 ${E};
-`, a[E] = { value: new v.Vector2(...x) }) : x.length === 3 ? (o += `uniform vec3 ${E};
-`, a[E] = { value: new v.Vector3(...x) }) : x.length === 4 && (o += `uniform vec4 ${E};
-`, a[E] = { value: new v.Vector4(...x) }) : (o += `uniform float ${E};
-`, a[E] = { value: x });
-  const n = (l ? me.declChunk : "") + `
-` + o, c = s.isTraveler ? me.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, h = l ? c + ((r == null ? void 0 : r.uvModifier) || "") : "", f = l ? me.baseColorChunk : "", b = (r == null ? void 0 : r.colorModifier) || "", p = Re.fragmentShader.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", h).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", b), d = le(s.backgroundColor), g = le(s.borderColor), w = {
-    uSize: { value: new v.Vector2(e, t) },
+function Qe(s, e, t, r = null, i) {
+  var M;
+  const a = r !== null || !!s.imageSrc;
+  let n = "";
+  const o = {};
+  if (i != null && i.uniforms)
+    for (const [w, b] of Object.entries(i.uniforms))
+      typeof b == "number" ? (n += `uniform float ${w};
+`, o[w] = { value: b }) : Array.isArray(b) ? b.length === 2 ? (n += `uniform vec2 ${w};
+`, o[w] = { value: new y.Vector2(...b) }) : b.length === 3 ? (n += `uniform vec3 ${w};
+`, o[w] = { value: new y.Vector3(...b) }) : b.length === 4 && (n += `uniform vec4 ${w};
+`, o[w] = { value: new y.Vector4(...b) }) : (n += `uniform float ${w};
+`, o[w] = { value: b });
+  const l = (a ? ae.declChunk : "") + `
+` + n, c = s.isTraveler ? ae.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
+`, d = a ? c + ((i == null ? void 0 : i.uvModifier) || "") : "", h = a ? ae.baseColorChunk : "", u = (i == null ? void 0 : i.colorModifier) || "", p = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", h).replace("#INJECT_COLOR_MODIFIER", u), f = Z(s.backgroundColor), m = Z(s.borderColor), E = {
+    uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
-      value: new v.Vector4(
-        d.color.r,
-        d.color.g,
-        d.color.b,
-        d.alpha
+      value: new y.Vector4(
+        f.color.r,
+        f.color.g,
+        f.color.b,
+        f.alpha
       )
     },
     uBorderColor: {
-      value: new v.Vector4(
-        g.color.r,
-        g.color.g,
-        g.color.b,
-        g.alpha
+      value: new y.Vector4(
+        m.color.r,
+        m.color.g,
+        m.color.b,
+        m.alpha
       )
     },
-    uBorderRadius: { value: new v.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: ee(s.borderWidth) },
-    uOpacity: { value: (R = s.opacity) != null ? R : 1 },
+    uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: K(s.borderWidth) },
+    uOpacity: { value: (M = s.opacity) != null ? M : 1 },
     uTexture: { value: null },
-    uTextureRepeat: { value: new v.Vector2(1, 1) },
-    uTextureOffset: { value: new v.Vector2(0, 0) },
+    uTextureRepeat: { value: new y.Vector2(1, 1) },
+    uTextureOffset: { value: new y.Vector2(0, 0) },
     uGradientCount: { value: 0 },
     uGradientAngle: { value: 0 },
     uGradientColors: {
-      value: Array.from({ length: 8 }, () => new v.Vector4(0, 0, 0, 0))
+      value: Array.from({ length: 8 }, () => new y.Vector4(0, 0, 0, 0))
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  Ae(w.uBorderRadius.value, s.borderRadius), l && (w.uTexture.value = i);
-  const L = new v.ShaderMaterial({
-    uniforms: G(G({}, w), a),
-    vertexShader: Re.vertexShader,
+  Me(E.uBorderRadius.value, s.borderRadius), a && (E.uTexture.value = r);
+  const R = new y.ShaderMaterial({
+    uniforms: q(q({}, E), o),
+    vertexShader: Te.vertexShader,
     fragmentShader: p,
     transparent: !0,
-    side: v.FrontSide
+    side: y.FrontSide
     // for better performance
   });
-  return s.backgroundImage && ye(L, { backgroundImage: s.backgroundImage }), L;
+  return s.backgroundImage && ce(R, { backgroundImage: s.backgroundImage }), R;
 }
-function Ze(s, e, t, i, r) {
-  const l = ee(e.borderWidth);
-  ye(s, {
+function Ze(s, e, t, r, i) {
+  const a = K(e.borderWidth);
+  ce(s, {
     width: t,
-    height: i,
+    height: r,
     borderRadius: e.borderRadius,
-    borderWidth: l,
+    borderWidth: a,
     backgroundColor: e.backgroundColor,
     borderColor: e.borderColor,
     opacity: e.opacity,
-    texture: r,
+    texture: i,
     backgroundImage: e.backgroundImage
   });
 }
-function ye(s, e) {
-  var i, r, l;
-  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && Ae(s.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
+function ce(s, e) {
+  var r, i, a;
+  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && Me(s.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
-      const o = s.uniforms.uBgColor.value.w;
+      const n = s.uniforms.uBgColor.value.w;
       s.uniforms.uBgColor.value.set(
         e.backgroundColor[0],
         e.backgroundColor[1],
         e.backgroundColor[2],
-        o
+        n
       );
     } else if (typeof e.backgroundColor == "string") {
-      const o = le(e.backgroundColor);
+      const n = Z(e.backgroundColor);
       s.uniforms.uBgColor.value.set(
-        o.color.r,
-        o.color.g,
-        o.color.b,
-        o.alpha
+        n.color.r,
+        n.color.g,
+        n.color.b,
+        n.alpha
       );
     } else {
-      const o = s.uniforms.uBgColor.value.w;
+      const n = s.uniforms.uBgColor.value.w;
       s.uniforms.uBgColor.value.set(
         e.backgroundColor.r,
         e.backgroundColor.g,
         e.backgroundColor.b,
-        o
+        n
       );
     }
   if (e.borderColor !== void 0)
     if (Array.isArray(e.borderColor)) {
-      const o = s.uniforms.uBorderColor.value.w;
+      const n = s.uniforms.uBorderColor.value.w;
       s.uniforms.uBorderColor.value.set(
         e.borderColor[0],
         e.borderColor[1],
         e.borderColor[2],
-        o
+        n
       );
     } else if (typeof e.borderColor == "string") {
-      const o = le(e.borderColor);
+      const n = Z(e.borderColor);
       s.uniforms.uBorderColor.value.set(
-        o.color.r,
-        o.color.g,
-        o.color.b,
-        o.alpha
+        n.color.r,
+        n.color.g,
+        n.color.b,
+        n.alpha
       );
     } else {
-      const o = s.uniforms.uBorderColor.value.w;
+      const n = s.uniforms.uBorderColor.value.w;
       s.uniforms.uBorderColor.value.set(
         e.borderColor.r,
         e.borderColor.g,
         e.borderColor.b,
-        o
+        n
       );
     }
   e.opacity !== void 0 && (s.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (s.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (s.uniforms.uBorderColor.value.w = e.borderOpacity), s.uniforms.uTexture && e.texture !== void 0 && (s.uniforms.uTexture.value = e.texture);
-  const t = e.texture !== void 0 ? e.texture : (i = s.uniforms.uTexture) == null ? void 0 : i.value;
+  const t = e.texture !== void 0 ? e.texture : (r = s.uniforms.uTexture) == null ? void 0 : r.value;
   if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
-    const o = t.image.width, a = t.image.height, n = (r = e.width) != null ? r : s.uniforms.uSize.value.x, c = (l = e.height) != null ? l : s.uniforms.uSize.value.y;
-    if (o && a && n && c) {
-      const h = o / a, f = n / c;
-      if (h > f) {
-        const b = f / h;
-        s.uniforms.uTextureRepeat.value.set(b, 1), s.uniforms.uTextureOffset.value.set((1 - b) / 2, 0);
+    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, o = t.image.naturalHeight || t.image.videoHeight || t.image.height, l = (i = e.width) != null ? i : s.uniforms.uSize.value.x, c = (a = e.height) != null ? a : s.uniforms.uSize.value.y;
+    if (n && o && l && c) {
+      const d = n / o, h = l / c;
+      if (d > h) {
+        const u = h / d;
+        s.uniforms.uTextureRepeat.value.set(u, 1), s.uniforms.uTextureOffset.value.set((1 - u) / 2, 0);
       } else {
-        const b = h / f;
-        s.uniforms.uTextureRepeat.value.set(1, b), s.uniforms.uTextureOffset.value.set(0, (1 - b) / 2);
+        const u = d / h;
+        s.uniforms.uTextureRepeat.value.set(1, u), s.uniforms.uTextureOffset.value.set(0, (1 - u) / 2);
       }
     }
   } else
     s.uniforms.uTextureRepeat && (s.uniforms.uTextureRepeat.value.set(1, 1), s.uniforms.uTextureOffset.value.set(0, 0));
   if (e.backgroundImage !== void 0) {
-    const o = Ge(e.backgroundImage);
-    if (o) {
-      s.uniforms.uGradientCount.value = o.stops.length, s.uniforms.uGradientAngle.value = o.angle;
-      for (let a = 0; a < 8; a++)
-        if (a < o.stops.length) {
-          const n = o.stops[a];
-          s.uniforms.uGradientColors.value[a].set(
-            n.color.r,
-            n.color.g,
-            n.color.b,
-            n.alpha
-          ), s.uniforms.uGradientStops.value[a] = n.stop;
+    const n = Ge(e.backgroundImage);
+    if (n) {
+      s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
+      for (let o = 0; o < 8; o++)
+        if (o < n.stops.length) {
+          const l = n.stops[o];
+          s.uniforms.uGradientColors.value[o].set(
+            l.color.r,
+            l.color.g,
+            l.color.b,
+            l.alpha
+          ), s.uniforms.uGradientStops.value[o] = l.stop;
         } else
-          s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
+          s.uniforms.uGradientColors.value[o].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[o] = 1;
     } else
       s.uniforms.uGradientCount.value = 0;
   }
-  for (const o of Object.keys(e))
-    o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && s.uniforms[o] !== void 0 && (s.uniforms[o].value !== void 0 && s.uniforms[o].value !== null && typeof s.uniforms[o].value.set == "function" ? Array.isArray(e[o]) ? s.uniforms[o].value.set(...e[o]) : e[o] !== void 0 && (e[o].copy ? s.uniforms[o].value.copy(e[o]) : s.uniforms[o].value = e[o]) : s.uniforms[o].value = e[o]);
+  for (const n of Object.keys(e))
+    n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
 }
-function Ae(s, e) {
-  var a, n, c, h;
+function Me(s, e) {
+  var o, l, c, d;
   if (e == null) {
     s.set(0, 0, 0, 0);
     return;
@@ -667,95 +668,95 @@ function Ae(s, e) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const t = e.split("/")[0].trim().split(/\s+/), i = ee(t[0]), r = ee((a = t[1]) != null ? a : t[0]), l = ee((n = t[2]) != null ? n : t[0]), o = ee((h = (c = t[3]) != null ? c : t[1]) != null ? h : t[0]);
-  s.set(i, r, l, o);
+  const t = e.split("/")[0].trim().split(/\s+/), r = K(t[0]), i = K((o = t[1]) != null ? o : t[0]), a = K((l = t[2]) != null ? l : t[0]), n = K((d = (c = t[3]) != null ? c : t[1]) != null ? d : t[0]);
+  s.set(r, i, a, n);
 }
-const H = {
-  create(s, e, t, i, r, l = 2, o = null, a) {
+const Y = {
+  create(s, e, t, r, i, a = 2, n = null, o) {
     return s === "BOX" ? Qe(
       e,
-      i,
       r,
-      o,
-      a
-    ) : s === "TEXT" ? new We(
+      i,
+      n,
+      o
+    ) : s === "TEXT" ? new He(
       t || "",
       e,
-      i,
       r,
-      l
-    ) : new v.MeshBasicMaterial({ visible: !1 });
+      i,
+      a
+    ) : new y.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, i, r, l, o = 2, a) {
+  update(s, e, t, r, i, a, n = 2, o) {
     e === "BOX" ? Ze(
       s,
       t,
-      r,
-      l,
-      a
+      i,
+      a,
+      o
     ) : e === "TEXT" && s.updateText(
-      i || "",
+      r || "",
       t,
-      r,
-      l,
-      o
+      i,
+      a,
+      n
     );
   },
   forceUpdateUniforms(s, e) {
-    ye(s, e);
+    ce(s, e);
   }
 };
 class et {
-  constructor(e) {
-    u(this, "observer");
-    u(this, "textures", /* @__PURE__ */ new WeakMap());
-    u(this, "loadStatus", /* @__PURE__ */ new WeakMap());
-    u(this, "elementUrls", /* @__PURE__ */ new WeakMap());
-    u(this, "onUpdate");
-    this.onUpdate = e, this.observer = new IntersectionObserver(
-      (t) => {
-        for (const i of t) {
-          const r = i.target;
-          i.isIntersecting ? this.loadTexture(r) : this.disposeTexture(r);
+  constructor(e, t = !0) {
+    g(this, "observer");
+    g(this, "textures", /* @__PURE__ */ new WeakMap());
+    g(this, "loadStatus", /* @__PURE__ */ new WeakMap());
+    g(this, "elementUrls", /* @__PURE__ */ new WeakMap());
+    g(this, "onUpdate");
+    this.onUpdate = e, t && (this.observer = new IntersectionObserver(
+      (r) => {
+        for (const i of r) {
+          const a = i.target;
+          i.isIntersecting ? this.loadTexture(a) : this.disposeTexture(a);
         }
       },
       { rootMargin: "300px" }
-    );
+    ));
   }
   register(e, t) {
     if (e.nodeType !== Node.ELEMENT_NODE)
       return;
-    this.elementUrls.get(e) !== t && (this.elementUrls.set(e, t), this.observer.unobserve(e), this.observer.observe(e));
+    this.elementUrls.get(e) !== t && (this.elementUrls.set(e, t), this.observer ? (this.observer.unobserve(e), this.observer.observe(e)) : this.loadTexture(e));
   }
   unregister(e) {
-    e.nodeType === Node.ELEMENT_NODE && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
+    e.nodeType === Node.ELEMENT_NODE && this.observer && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
   }
   loadTexture(e) {
-    return we(this, null, function* () {
+    return Ee(this, null, function* () {
       if (this.loadStatus.get(e) || this.textures.has(e))
         return;
       const t = this.elementUrls.get(e);
       if (t) {
         this.loadStatus.set(e, !0);
         try {
-          let i;
+          let r;
           if (t.startsWith("data:image/svg+xml"))
-            i = yield new Promise((l, o) => {
-              const a = new Image();
-              a.onload = () => l(a), a.onerror = o, a.src = t;
+            r = yield new Promise((a, n) => {
+              const o = new Image();
+              o.onload = () => a(o), o.onerror = n, o.src = t;
             });
           else {
-            const o = yield (yield fetch(t)).blob();
-            i = yield createImageBitmap(o, { imageOrientation: "flipY" });
+            const n = yield (yield fetch(t)).blob();
+            r = yield createImageBitmap(n, { imageOrientation: "flipY" });
           }
           if (this.elementUrls.get(e) !== t) {
-            "close" in i && i.close();
+            "close" in r && r.close();
             return;
           }
-          const r = new v.Texture(i);
-          i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = v.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
-        } catch (i) {
-          console.warn("[MirageEngine] Failed to load texture:", t, i);
+          const i = new y.Texture(r);
+          r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = y.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
+        } catch (r) {
+          console.warn("[MirageEngine] Failed to load texture:", t, r);
         } finally {
           this.elementUrls.has(e) && this.loadStatus.set(e, !1);
         }
@@ -770,71 +771,78 @@ class et {
     return this.textures.get(e);
   }
   disposeAll() {
-    this.observer.disconnect();
+    this.observer && this.observer.disconnect();
   }
 }
 class tt {
-  constructor(e, t, i, r) {
-    u(this, "canvas");
-    u(this, "scene");
-    u(this, "camera");
-    u(this, "renderer");
-    u(this, "renderTargets", []);
-    u(this, "renderOrder", 0);
-    u(this, "qualityFactor", 2);
-    u(this, "mode", "overlay");
-    u(this, "clipArea", 1);
-    u(this, "targetLayer", "base");
-    u(this, "target");
-    u(this, "mountContainer");
-    u(this, "registry");
-    u(this, "targetRect");
-    u(this, "travelersByLayer", Array.from(
-      { length: O.MAX_LAYERS },
+  constructor(e, t, r, i) {
+    g(this, "canvas");
+    g(this, "scene");
+    g(this, "camera");
+    g(this, "renderer");
+    g(this, "renderTargets", []);
+    g(this, "renderOrder", 0);
+    g(this, "qualityFactor", 2);
+    g(this, "mode", "overlay");
+    g(this, "canvasSize", "viewport");
+    g(this, "clipArea", 1);
+    g(this, "targetLayer", "base");
+    g(this, "overscan", 200);
+    g(this, "target");
+    g(this, "mountContainer");
+    g(this, "registry");
+    g(this, "targetRect");
+    g(this, "travelersByLayer", Array.from(
+      { length: k.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
-    u(this, "textureManager");
+    g(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
-    u(this, "fixedMeshes", /* @__PURE__ */ new Set());
-    var a, n, c, h;
-    this.target = e, this.mountContainer = i, this.registry = r, this.textureManager = new et((f, b) => {
-      const p = this.registry.get(f);
-      p && p.material instanceof v.ShaderMaterial && H.forceUpdateUniforms(p.material, { texture: b });
-    }), this.mode = (a = t.mode) != null ? a : "overlay", this.clipArea = (n = t.travelerClipArea) != null ? n : 1, this.targetLayer = (c = t.layer) != null ? c : "base", this.canvas = document.createElement("canvas"), this.scene = new v.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const l = this.targetRect.width, o = this.targetRect.height;
-    this.camera = new v.OrthographicCamera(
-      l / -2,
-      l / 2,
-      o / 2,
-      o / -2,
+    g(this, "fixedMeshes", /* @__PURE__ */ new Set());
+    var o, l, c, d, h;
+    this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (l = t.canvasSize) != null ? l : "viewport", this.clipArea = (c = t.travelerClipArea) != null ? c : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new et((u, p) => {
+      const f = this.registry.get(u);
+      f && f.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(f.material, { texture: p });
+    }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    this.camera = new y.OrthographicCamera(
+      a / -2,
+      a / 2,
+      n / 2,
+      n / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new v.WebGLRenderer({
+    ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new y.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0,
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), v.ColorManagement.enabled = !1, this.renderer.outputColorSpace = v.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(l, o), this.applyTextQuality((h = t.quality) != null ? h : "medium");
+    }), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(a, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
+  }
+  get isViewport() {
+    return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? A.SELECTED : A.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? L.SELECTED : L.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < O.MAX_LAYERS; e++)
+    for (let e = 0; e < k.MAX_LAYERS; e++) {
+      const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, r = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
       this.renderTargets.push(
-        new v.WebGLRenderTarget(
-          this.targetRect.width * this.qualityFactor,
-          this.targetRect.height * this.qualityFactor,
+        new y.WebGLRenderTarget(
+          t * this.qualityFactor,
+          r * this.qualityFactor,
           {
-            minFilter: v.LinearFilter,
-            magFilter: v.LinearFilter,
-            format: v.RGBAFormat,
+            minFilter: y.LinearFilter,
+            magFilter: y.LinearFilter,
+            format: y.RGBAFormat,
             stencilBuffer: !1,
             depthBuffer: !0
           }
         )
       );
+    }
   }
   applyTextQuality(e) {
     if (typeof e == "number") {
@@ -860,18 +868,19 @@ class tt {
     this.mountContainer.prepend(this.canvas), this.canvas.style.pointerEvents = this.mode === "overlay" ? "none" : "auto", this.updateCanvasLayout();
   }
   updateCanvasLayout() {
-    this.canvas.style.width = `${this.targetRect.width}px`, this.canvas.style.height = `${this.targetRect.height}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = "absolute", this.canvas.style.top = `${this.target.offsetTop}px`, this.canvas.style.left = `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
+    const e = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, t = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    this.canvas.style.width = `${e}px`, this.canvas.style.height = `${t}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = this.isViewport ? "fixed" : "absolute", this.canvas.style.top = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetTop}px`, this.canvas.style.left = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
   }
   updateUniforms(e, t) {
-    const i = this.registry.get(e);
-    i && (i.traverse((r) => {
-      r.isMesh && r.material && H.forceUpdateUniforms(
-        r.material,
+    const r = this.registry.get(e);
+    r && (r.traverse((i) => {
+      i.isMesh && i.material && Y.forceUpdateUniforms(
+        i.material,
         t
       );
-    }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((r) => {
-      r.isMesh && r.material && H.forceUpdateUniforms(
-        r.material,
+    }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
+      i.isMesh && i.material && Y.forceUpdateUniforms(
+        i.material,
         t
       );
     }));
@@ -881,21 +890,21 @@ class tt {
   }
   setSize(e, t) {
     this.renderer.setSize(e, t);
-    for (const i of this.renderTargets)
-      i.setSize(e * this.qualityFactor, t * this.qualityFactor);
+    for (const r of this.renderTargets)
+      r.setSize(e * this.qualityFactor, t * this.qualityFactor);
     this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
   }
   syncScene(e, t) {
-    const i = this.target.getBoundingClientRect(), r = Math.abs(i.width - this.targetRect.width) > 0.1 || Math.abs(i.height - this.targetRect.height) > 0.1, l = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
-    r ? (this.targetRect = i, this.setSize(this.targetRect.width, this.targetRect.height), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((o) => {
-      const a = this.registry.get(o);
-      if (a) {
-        this.scene.remove(a);
-        for (const n of this.travelersByLayer)
-          n.delete(a);
-        this.fixedMeshes.delete(a), a.geometry.dispose(), a.userData.nativeMesh && (this.scene.remove(a.userData.nativeMesh), Array.isArray(a.userData.nativeMesh.material) ? a.userData.nativeMesh.material.forEach((n) => n.dispose()) : a.userData.nativeMesh.material.dispose(), a.userData.nativeMesh.geometry.dispose()), a.traverse((n) => {
-          n instanceof v.Mesh && (n.geometry && n.geometry.dispose(), n.material && (Array.isArray(n.material) ? n.material.forEach((c) => c.dispose()) : n.material.dispose()));
-        }), this.registry.remove(o), this.textureManager.unregister(o);
+    const r = this.target.getBoundingClientRect(), i = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, a = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, o = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, l = Math.abs(i - n) > 0.1 || Math.abs(a - o) > 0.1, c = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
+    l ? (this.targetRect = r, this.setSize(i, a), this.updateCanvasLayout()) : c ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
+      const h = this.registry.get(d);
+      if (h) {
+        this.scene.remove(h);
+        for (const u of this.travelersByLayer)
+          u.delete(h);
+        this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach((u) => u.dispose()) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((u) => {
+          u instanceof y.Mesh && (u.geometry && u.geometry.dispose(), u.material && (Array.isArray(u.material) ? u.material.forEach((p) => p.dispose()) : u.material.dispose()));
+        }), this.registry.remove(d), this.textureManager.unregister(d);
       }
     });
   }
@@ -906,133 +915,150 @@ class tt {
   reconcileNode(e) {
     var i;
     let t = this.registry.get(e.element);
-    if (!t) {
-      const r = new v.PlaneGeometry(1, 1), l = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = H.create(
+    const r = JSON.stringify(e.shaderHooks || null);
+    if (t && t.userData.shaderHash !== r && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
+      const a = new y.PlaneGeometry(1, 1), n = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = Y.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        l,
+        n,
         e.shaderHooks
       );
-      t = new v.Mesh(r, o), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = o;
+      t = new y.Mesh(a, o), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = o, t.userData.domElement = e.element, t.userData.shaderHash = r;
     }
     if (this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
-      for (let r = 0; r < O.MAX_LAYERS; r++)
-        r === e.captureLayer - 2 ? this.travelersByLayer[r].add(t) : this.travelersByLayer[r].delete(t);
+      for (let a = 0; a < k.MAX_LAYERS; a++)
+        a === e.captureLayer - 2 ? this.travelersByLayer[a].add(t) : this.travelersByLayer[a].delete(t);
     else
-      for (const r of this.travelersByLayer)
-        r.delete(t);
+      for (const a of this.travelersByLayer)
+        a.delete(t);
     if (e.isFixed ? this.fixedMeshes.add(t) : this.fixedMeshes.delete(t), e.styles.imageSrc ? this.textureManager.register(e.element, e.styles.imageSrc) : this.textureManager.unregister(e.element), e.type === "BOX")
-      for (const r of e.children)
-        this.reconcileNode(r);
+      for (const a of e.children)
+        this.reconcileNode(a);
     else
       e.type === "TEXT" && (this.reconcileTextChild(t, e, !1), t.userData.nativeMesh && e.nativeStyles && this.reconcileTextChild(t.userData.nativeMesh, e, !0));
   }
-  reconcileTextChild(e, t, i) {
+  reconcileTextChild(e, t, r) {
     var c;
-    const r = t.textLines || [
+    const i = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], l = i ? t.nativeStyles : t.textStyles, o = JSON.stringify(l) + t.textContent + r.map((h) => h.text).join("|"), a = (c = e.userData) == null ? void 0 : c.textChildStyleHash;
-    if (t.dirtyMask & ve || o !== a) {
+    ], a = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(a) + t.textContent + i.map((d) => d.text).join("|"), o = (c = e.userData) == null ? void 0 : c.textChildStyleHash;
+    if (t.dirtyMask & le || n !== o) {
       e.children.filter(
-        (d) => d.name.startsWith("TEXT_CHILD")
-      ).forEach((d) => {
-        var w;
-        const g = d;
-        (w = g.material.map) == null || w.dispose(), g.geometry.dispose(), e.remove(g);
+        (f) => f.name.startsWith("TEXT_CHILD")
+      ).forEach((f) => {
+        var E;
+        const m = f;
+        (E = m.material.map) == null || E.dispose(), m.geometry.dispose(), e.remove(m);
       });
-      const f = t.rect, b = f.x + f.width / 2, p = f.y + f.height / 2;
-      r.forEach((d, g) => {
-        const w = H.create(
+      const h = t.rect, u = h.x + h.width / 2, p = h.y + h.height / 2;
+      i.forEach((f, m) => {
+        const E = Y.create(
           "TEXT",
-          l,
-          d.text,
-          d.rect.width,
-          d.rect.height,
+          a,
+          f.text,
+          f.rect.width,
+          f.rect.height,
           this.qualityFactor
-        ), L = new v.PlaneGeometry(1, 1), R = new v.Mesh(L, w);
-        R.name = `TEXT_CHILD_${g}`;
-        const E = t.rect.width === 0 ? 1 : d.rect.width / t.rect.width, x = t.rect.height === 0 ? 1 : d.rect.height / t.rect.height;
-        R.scale.set(E, x, 1);
-        const U = d.rect.x + d.rect.width / 2, F = d.rect.y + d.rect.height / 2, _ = U - b, D = -(F - p);
-        R.position.set(
-          t.rect.width === 0 ? 0 : _ / t.rect.width,
-          t.rect.height === 0 ? 0 : D / t.rect.height,
+        ), R = new y.PlaneGeometry(1, 1), M = new y.Mesh(R, E);
+        M.name = `TEXT_CHILD_${m}`;
+        const w = t.rect.width === 0 ? 1 : f.rect.width / t.rect.width, b = t.rect.height === 0 ? 1 : f.rect.height / t.rect.height;
+        M.scale.set(w, b, 1);
+        const U = f.rect.x + f.rect.width / 2, D = f.rect.y + f.rect.height / 2, O = U - u, N = -(D - p);
+        M.position.set(
+          t.rect.width === 0 ? 0 : O / t.rect.width,
+          t.rect.height === 0 ? 0 : N / t.rect.height,
           5e-3
-        ), e.add(R);
-      }), e.userData.textChildStyleHash = o;
+        ), e.add(M);
+      }), e.userData.textChildStyleHash = n;
     }
-    e.children.forEach((h) => {
-      if (!h.name.startsWith("TEXT_CHILD"))
+    e.children.forEach((d) => {
+      if (!d.name.startsWith("TEXT_CHILD"))
         return;
-      const f = h, b = t.visibility & P ? A.BASE : A.HIDDEN;
-      if (f.layers.set(b), t.visibility & Z && f.layers.enable(A.SELECTED), t.visibility & P)
-        if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
+      const h = d, u = t.visibility & W ? L.BASE : L.HIDDEN;
+      if (h.layers.set(u), t.visibility & j && h.layers.enable(L.SELECTED), t.visibility & W)
+        if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
           for (let p = t.captureLayer; p < t.nativeLayer; p++)
-            f.layers.enable(A.getCaptureLayer(p));
-        else if (i && t.nativeLayer !== void 0)
-          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= O.MAX_LAYERS + 1; p++)
-            f.layers.enable(A.getCaptureLayer(p));
+            h.layers.enable(L.getCaptureLayer(p));
+        else if (r && t.nativeLayer !== void 0)
+          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= k.MAX_LAYERS + 1; p++)
+            h.layers.enable(L.getCaptureLayer(p));
         else
-          for (let p = t.captureLayer; p <= O.MAX_LAYERS + 1; p++)
-            f.layers.enable(A.getCaptureLayer(p));
+          for (let p = t.captureLayer; p <= k.MAX_LAYERS + 1; p++)
+            h.layers.enable(L.getCaptureLayer(p));
     });
   }
   updateMeshProperties(e, t) {
-    var U, F, _;
-    const { rect: i, styles: r } = t, l = this.renderer.getPixelRatio(), o = this.renderer.domElement.width / l, a = this.renderer.domElement.height / l;
-    e.material = e.userData.baseMaterial, e.scale.set(i.width, i.height, 1), e.userData.domRect = pe(G({}, i), {
-      width: i.width,
-      height: i.height
-    });
-    const n = 1e-3;
+    var w, b, U;
+    const { rect: r, styles: i } = t, a = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / a, o = this.renderer.domElement.height / a;
+    e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
+      x: r.x,
+      y: r.y,
+      width: r.width,
+      height: r.height
+    };
+    const l = 1e-3;
     this.renderOrder++;
-    const c = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY, f = i.x - c, b = i.y - h, p = f - o / 2 + i.width / 2, d = -b + a / 2 - i.height / 2;
+    const c = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
+    let h, u;
+    if (this.isViewport)
+      h = r.x - window.innerWidth / 2 + r.width / 2, u = -r.y + window.innerHeight / 2 - r.height / 2;
+    else {
+      const D = r.x - c, O = r.y - d;
+      h = D - n / 2 + r.width / 2, u = -O + o / 2 - r.height / 2;
+    }
     e.position.set(
-      p,
-      d,
-      r.zIndex + this.renderOrder * n
+      h,
+      u,
+      i.zIndex + this.renderOrder * l
     );
-    const g = i.x, w = i.y;
-    e.userData.basePosition = { x: p, y: d }, e.userData.originalBasePosition = { x: p, y: d }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: g, y: w }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
-    const L = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, R = window.getComputedStyle(L);
-    let E = 0, x = 0;
-    if (R.transform && R.transform !== "none") {
-      const D = new DOMMatrix(R.transform);
-      E = D.m41, x = D.m42;
+    const p = r.x, f = r.y;
+    e.userData.basePosition = { x: h, y: u }, e.userData.originalBasePosition = { x: h, y: u }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: f }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(m);
+    let R = 0, M = 0;
+    if (E.transform && E.transform !== "none") {
+      const D = new DOMMatrix(E.transform);
+      R = D.m41, M = D.m42;
     }
-    if (e.userData.baseTransform = { x: E, y: x }, delete e.userData.originRatioX, delete e.userData.originRatioY, H.update(
+    if (e.userData.baseTransform = { x: R, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, Y.update(
       e.userData.baseMaterial,
       "BOX",
-      r,
+      i,
       "",
-      i.width,
-      i.height,
+      r.width,
+      r.height,
       this.qualityFactor,
-      t.isTraveler ? (U = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : U.texture : this.textureManager.get(t.element)
+      t.isTraveler ? (w = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : w.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const $ = H.create(
+        const I = Y.create(
           "BOX",
           t.nativeStyles,
           "",
           t.nativeRect.width,
           t.nativeRect.height,
           this.qualityFactor,
-          t.isTraveler ? (F = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : F.texture : this.textureManager.get(t.element),
+          t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), V = new v.Mesh(e.geometry, $);
-        t.type === "TEXT" && (V.name = "BG_MESH"), this.scene.add(V), e.userData.nativeMesh = V;
+        ), P = new y.Mesh(e.geometry, I);
+        t.type === "TEXT" && (P.name = "BG_MESH"), this.scene.add(P), e.userData.nativeMesh = P;
+      }
+      const D = e.userData.nativeMesh;
+      let O, N;
+      if (this.isViewport)
+        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, N = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+      else {
+        const I = t.nativeRect.x - c, P = t.nativeRect.y - d;
+        O = I - n / 2 + t.nativeRect.width / 2, N = -P + o / 2 - t.nativeRect.height / 2;
       }
-      const D = e.userData.nativeMesh, I = t.nativeRect.x - c, K = t.nativeRect.y - h, J = I - o / 2 + t.nativeRect.width / 2, Q = -K + a / 2 - t.nativeRect.height / 2;
       D.scale.set(t.nativeRect.width, t.nativeRect.height, 1), D.position.set(
-        J,
-        Q,
-        t.nativeStyles.zIndex + this.renderOrder * n
-      ), H.update(
+        O,
+        N,
+        t.nativeStyles.zIndex + this.renderOrder * l
+      ), Y.update(
         D.material,
         "BOX",
         t.nativeStyles,
@@ -1040,135 +1066,168 @@ class tt {
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (_ = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : _.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (U = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : U.texture : this.textureManager.get(t.element)
       );
     } else
-      e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof v.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
+      e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const i = t.visibility & P ? A.BASE : A.HIDDEN;
-    if (e.layers.set(i), t.visibility & Z && e.layers.enable(A.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
-      const r = e.userData.nativeMesh;
-      if (r.layers.set(A.HIDDEN), t.visibility & P) {
-        for (let l = t.captureLayer; l < t.nativeLayer; l++)
-          e.layers.enable(A.getCaptureLayer(l));
-        for (let l = Math.max(t.captureLayer, t.nativeLayer); l <= O.MAX_LAYERS + 1; l++)
-          r.layers.enable(A.getCaptureLayer(l));
+    const r = t.visibility & W ? L.BASE : L.HIDDEN;
+    if (e.layers.set(r), t.visibility & j && e.layers.enable(L.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+      const i = e.userData.nativeMesh;
+      if (i.layers.set(L.HIDDEN), t.visibility & W) {
+        for (let a = t.captureLayer; a < t.nativeLayer; a++)
+          e.layers.enable(L.getCaptureLayer(a));
+        for (let a = Math.max(t.captureLayer, t.nativeLayer); a <= k.MAX_LAYERS + 1; a++)
+          i.layers.enable(L.getCaptureLayer(a));
       }
-    } else if (t.visibility & P)
-      for (let r = t.captureLayer; r <= O.MAX_LAYERS + 1; r++)
-        e.layers.enable(A.getCaptureLayer(r));
+    } else if (t.visibility & W)
+      for (let i = t.captureLayer; i <= k.MAX_LAYERS + 1; i++)
+        e.layers.enable(L.getCaptureLayer(i));
   }
-  captureRenderTarget(e, t, i) {
-    if (e.size === 0 || !i)
+  captureRenderTarget(e, t, r) {
+    if (e.size === 0 || !r)
       return;
-    const r = new v.Color(), l = this.renderer.getClearAlpha();
-    this.renderer.getClearColor(r), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(i), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
-    const o = new v.Vector3(), a = this.targetRect.width, n = this.targetRect.height, c = this.renderer.getPixelRatio();
-    for (const h of e) {
-      o.setFromMatrixPosition(h.matrixWorld), o.project(this.camera);
-      const f = (o.x + 1) / 2 * a, b = (o.y + 1) / 2 * n;
-      let p = 0, d = 1;
-      typeof this.clipArea == "number" ? d = this.clipArea : this.clipArea.endsWith("%") ? d = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
-      const g = h.scale.x * d + 0.5, w = h.scale.y * d + 0.5, L = f - g / 2, R = b - w / 2, E = (L * this.qualityFactor - p) / c, x = (R * this.qualityFactor - p) / c, U = (g * this.qualityFactor + p * 2) / c, F = (w * this.qualityFactor + p * 2) / c;
-      this.renderer.setScissor(E, x, U, F), this.renderer.render(this.scene, this.camera);
+    const i = new y.Color(), a = this.renderer.getClearAlpha();
+    this.renderer.getClearColor(i), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(r), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
+    const n = new y.Vector3(), o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, l = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, c = this.renderer.getPixelRatio();
+    for (const d of e) {
+      n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
+      const h = (n.x + 1) / 2 * o, u = (n.y + 1) / 2 * l;
+      let p = 0, f = 1;
+      typeof this.clipArea == "number" ? f = this.clipArea : this.clipArea.endsWith("%") ? f = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
+      const m = d.scale.x * f + 0.5, E = d.scale.y * f + 0.5, R = h - m / 2, M = u - E / 2, w = (R * this.qualityFactor - p) / c, b = (M * this.qualityFactor - p) / c, U = (m * this.qualityFactor + p * 2) / c, D = (E * this.qualityFactor + p * 2) / c;
+      this.renderer.setScissor(w, b, U, D), this.renderer.render(this.scene, this.camera);
     }
-    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, l);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, a);
   }
   render() {
-    for (let e = 0; e < O.MAX_LAYERS; e++) {
+    for (let e = 0; e < k.MAX_LAYERS; e++) {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        A.getCaptureLayer(t),
+        L.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
     this.renderer.render(this.scene, this.camera);
   }
+  syncMeshesByDOM() {
+    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), i = this.renderer.domElement.width / r, a = this.renderer.domElement.height / r;
+    this.scene.children.forEach((n) => {
+      const o = n;
+      if (!o.userData || !o.userData.domElement)
+        return;
+      const l = o.userData.domElement;
+      let c;
+      if (l.nodeType === Node.TEXT_NODE) {
+        const h = document.createRange();
+        h.selectNode(l), c = h.getBoundingClientRect();
+      } else
+        c = l.getBoundingClientRect();
+      const d = o.userData.domRect;
+      if (!d || Math.abs(c.x - d.x) > 0.5 || Math.abs(c.y - d.y) > 0.5 || Math.abs(c.width - d.width) > 0.5 || Math.abs(c.height - d.height) > 0.5) {
+        o.userData.domRect = { x: c.x, y: c.y, width: c.width, height: c.height };
+        let h, u;
+        if (this.isViewport)
+          h = c.x - window.innerWidth / 2 + c.width / 2, u = -c.y + window.innerHeight / 2 - c.height / 2;
+        else {
+          const p = c.x - e, f = c.y - t;
+          h = p - i / 2 + c.width / 2, u = -f + a / 2 - c.height / 2;
+        }
+        if (o.position.setX(h), o.position.setY(u), o.scale.set(c.width, c.height, 1), o.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(o.material, {
+          width: c.width,
+          height: c.height
+        }), o.userData.nativeMesh) {
+          const p = o.userData.nativeMesh;
+          p.position.setX(h), p.position.setY(u), p.scale.set(c.width, c.height, 1);
+        }
+      }
+    });
+  }
 }
 function rt(s) {
   const e = s.textContent || "", t = [];
-  let i = "", r = null, l = -1;
-  const o = (c, h) => {
-    for (let f = 0; f < c.length; f++) {
-      const b = c[f], p = document.createRange();
-      p.setStart(s, h + f), p.setEnd(s, h + f + 1);
-      const d = p.getBoundingClientRect();
-      if (d.width === 0 && d.height === 0) {
-        i += b;
+  let r = "", i = null, a = -1;
+  const n = (c, d) => {
+    for (let h = 0; h < c.length; h++) {
+      const u = c[h], p = document.createRange();
+      p.setStart(s, d + h), p.setEnd(s, d + h + 1);
+      const f = p.getBoundingClientRect();
+      if (f.width === 0 && f.height === 0) {
+        r += u;
         continue;
       }
-      l === -1 || Math.abs(d.top - l) > d.height / 2 ? (i && r && t.push({
-        text: i,
+      a === -1 || Math.abs(f.top - a) > f.height / 2 ? (r && i && t.push({
+        text: r,
         rect: {
-          left: r.left,
-          top: r.top,
-          width: r.right - r.left,
-          height: r.bottom - r.top
+          left: i.left,
+          top: i.top,
+          width: i.right - i.left,
+          height: i.bottom - i.top
         }
-      }), i = b, r = {
-        left: d.left,
-        top: d.top,
-        right: d.right,
-        bottom: d.bottom
-      }, l = d.top) : (i += b, r && (r.left = Math.min(r.left, d.left), r.top = Math.min(r.top, d.top), r.right = Math.max(r.right, d.right), r.bottom = Math.max(
-        r.bottom,
-        d.bottom
+      }), r = u, i = {
+        left: f.left,
+        top: f.top,
+        right: f.right,
+        bottom: f.bottom
+      }, a = f.top) : (r += u, i && (i.left = Math.min(i.left, f.left), i.top = Math.min(i.top, f.top), i.right = Math.max(i.right, f.right), i.bottom = Math.max(
+        i.bottom,
+        f.bottom
       )));
     }
-  }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-  let n = 0;
-  for (const c of a) {
-    const h = document.createRange();
-    h.setStart(s, n), h.setEnd(s, n + c.length);
-    const f = h.getClientRects();
-    if (f.length > 1)
-      o(c, n);
+  }, o = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+  let l = 0;
+  for (const c of o) {
+    const d = document.createRange();
+    d.setStart(s, l), d.setEnd(s, l + c.length);
+    const h = d.getClientRects();
+    if (h.length > 1)
+      n(c, l);
     else {
-      const b = f.length === 1 ? f[0] : h.getBoundingClientRect();
-      if (b.width === 0 && b.height === 0) {
-        i += c, n += c.length;
+      const u = h.length === 1 ? h[0] : d.getBoundingClientRect();
+      if (u.width === 0 && u.height === 0) {
+        r += c, l += c.length;
         continue;
       }
-      l === -1 || Math.abs(b.top - l) > b.height / 2 ? (i && r && t.push({
-        text: i,
+      a === -1 || Math.abs(u.top - a) > u.height / 2 ? (r && i && t.push({
+        text: r,
         rect: {
-          left: r.left,
-          top: r.top,
-          width: r.right - r.left,
-          height: r.bottom - r.top
+          left: i.left,
+          top: i.top,
+          width: i.right - i.left,
+          height: i.bottom - i.top
         }
-      }), i = c, r = {
-        left: b.left,
-        top: b.top,
-        right: b.right,
-        bottom: b.bottom
-      }, l = b.top) : (i += c, r && (r.left = Math.min(r.left, b.left), r.top = Math.min(r.top, b.top), r.right = Math.max(r.right, b.right), r.bottom = Math.max(
-        r.bottom,
-        b.bottom
+      }), r = c, i = {
+        left: u.left,
+        top: u.top,
+        right: u.right,
+        bottom: u.bottom
+      }, a = u.top) : (r += c, i && (i.left = Math.min(i.left, u.left), i.top = Math.min(i.top, u.top), i.right = Math.max(i.right, u.right), i.bottom = Math.max(
+        i.bottom,
+        u.bottom
       )));
     }
-    n += c.length;
+    l += c.length;
   }
-  return i && r && t.push({
-    text: i,
+  return r && i && t.push({
+    text: r,
     rect: {
-      left: r.left,
-      top: r.top,
-      width: r.right - r.left,
-      height: r.bottom - r.top
+      left: i.left,
+      top: i.top,
+      width: i.right - i.left,
+      height: i.bottom - i.top
     }
   }), t.filter(
     (c) => c.text.trim().length > 0 && c.rect.width > 0 && c.rect.height > 0
   );
 }
-function Le(s) {
+function Se(s) {
   const e = parseFloat(s.fontSize);
   let t = parseFloat(s.lineHeight);
   isNaN(t) && (t = e * 1.2);
-  let i = parseFloat(s.letterSpacing);
-  return isNaN(i) && (i = 0), {
+  let r = parseFloat(s.letterSpacing);
+  return isNaN(r) && (r = 0), {
     font: `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,
     fontSize: s.fontSize,
     color: s.color,
@@ -1176,325 +1235,299 @@ function Le(s) {
     textBaseline: "alphabetic",
     direction: s.direction || "inherit",
     lineHeight: t,
-    letterSpacing: i
+    letterSpacing: r
   };
 }
-function Ie(s, e = j | ae | Ye | ve | be, t, i = 1, r = 0, l = 2, o, a) {
-  var V, te, re, ie, se, oe;
+function De(s, e = $ | Q | ze | le | re, t, r = 1, i = 0, a = 2, n, o) {
+  var de, ue, fe, ge, pe, me;
   if (s.nodeType === Node.TEXT_NODE) {
-    const m = s;
-    if (!m.textContent || !m.textContent.trim())
+    const v = s;
+    if (!v.textContent || !v.textContent.trim())
       return null;
-    const T = m.textContent.replace(/\s+/g, " ");
-    if (T.length === 0)
+    const C = v.textContent.replace(/\s+/g, " ");
+    if (C.length === 0)
       return null;
-    const M = rt(m);
-    if (M.length === 0)
+    const A = rt(v);
+    if (A.length === 0)
       return null;
-    const k = m.parentElement, S = k ? window.getComputedStyle(k) : null;
+    const B = v.parentElement, S = B ? window.getComputedStyle(B) : null;
     if (!S)
       return null;
-    const B = Math.min(...M.map((y) => y.rect.left)), C = Math.min(...M.map((y) => y.rect.top)), X = Math.max(...M.map((y) => y.rect.left + y.rect.width)), W = Math.max(...M.map((y) => y.rect.top + y.rect.height));
+    const X = Math.min(...A.map((T) => T.rect.left)), x = Math.min(...A.map((T) => T.rect.top)), z = Math.max(...A.map((T) => T.rect.left + T.rect.width)), G = Math.max(...A.map((T) => T.rect.top + T.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: m,
+      element: v,
       rect: {
-        x: B + window.scrollX,
-        y: C + window.scrollY,
-        width: X - B,
-        height: W - C
+        x: X + window.scrollX,
+        y: x + window.scrollY,
+        width: z - X,
+        height: G - x
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: k && k.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(S.opacity),
-        zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + r,
+        opacity: B && B.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(S.opacity),
+        zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: T,
-      textLines: M.map((y) => ({
-        text: y.text.trim(),
+      textContent: C,
+      textLines: A.map((T) => ({
+        text: T.text.trim(),
         rect: {
-          x: y.rect.left + window.scrollX,
-          y: y.rect.top + window.scrollY,
-          width: y.rect.width,
-          height: y.rect.height
+          x: T.rect.left + window.scrollX,
+          y: T.rect.top + window.scrollY,
+          width: T.rect.width,
+          height: T.rect.height
         }
       })),
-      textStyles: Le(S),
+      textStyles: Se(S),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
-      captureLayer: i,
+      captureLayer: r,
       isFixed: S.position === "fixed",
-      nativeLayer: o,
-      nativeStyles: a ? G(G({
+      nativeLayer: n,
+      nativeStyles: o ? q(q({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: k && k.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(S.opacity),
-        zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + r,
+        opacity: B && B.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(S.opacity),
+        zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, Le(S)), a) : void 0,
-      nativeRect: a ? {
-        x: B + window.scrollX,
-        y: C + window.scrollY,
-        width: X - B,
-        height: W - C
+      }, Se(S)), o) : void 0,
+      nativeRect: o ? {
+        x: X + window.scrollX,
+        y: x + window.scrollY,
+        width: z - X,
+        height: G - x
       } : void 0,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const n = s, c = n.dataset[Y.KEY];
-  let h = t, f = t;
+  const l = s, c = l.dataset[_.KEY];
+  let d = t, h = t;
   if (c) {
-    const m = new Set(c.split(/\s+/));
-    for (const T of m)
-      if (!Se.includes(T))
+    const v = new Set(c.split(/\s+/));
+    for (const C of v)
+      if (!Ce.includes(C))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${T}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(Y.VALUES.END))
+    if (v.has(_.VALUES.END))
       return null;
-    if (m.has(Y.VALUES.INCLUDE_TREE) && m.has(Y.VALUES.EXCLUDE_TREE))
+    if (v.has(_.VALUES.INCLUDE_TREE) && v.has(_.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (m.has(Y.VALUES.INCLUDE_SELF) && m.has(Y.VALUES.EXCLUDE_SELF))
+    if (v.has(_.VALUES.INCLUDE_SELF) && v.has(_.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(Y.VALUES.INCLUDE_TREE) ? h = h | P : m.has(Y.VALUES.EXCLUDE_TREE) && (h = h & ~P), f = h, m.has(Y.VALUES.INCLUDE_SELF) ? f = f | P : m.has(Y.VALUES.EXCLUDE_SELF) && (f = f & ~P);
+    v.has(_.VALUES.INCLUDE_TREE) ? d = d | W : v.has(_.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, v.has(_.VALUES.INCLUDE_SELF) ? h = h | W : v.has(_.VALUES.EXCLUDE_SELF) && (h = h & ~W);
   }
-  const b = n.dataset[z.KEY];
-  if (b) {
-    const m = new Set(b.split(/\s+/));
-    for (const T of m)
-      if (!Se.includes(T))
+  const u = l.dataset[V.KEY];
+  if (u) {
+    const v = new Set(u.split(/\s+/));
+    for (const C of v)
+      if (!Ce.includes(C))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${T}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(z.VALUES.END))
+    if (v.has(V.VALUES.END))
       return null;
-    if (m.has(z.VALUES.INCLUDE_TREE) && m.has(z.VALUES.EXCLUDE_TREE))
+    if (v.has(V.VALUES.INCLUDE_TREE) && v.has(V.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (m.has(z.VALUES.INCLUDE_SELF) && m.has(z.VALUES.EXCLUDE_SELF))
+    if (v.has(V.VALUES.INCLUDE_SELF) && v.has(V.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(z.VALUES.INCLUDE_TREE) ? h = h | Z : m.has(z.VALUES.EXCLUDE_TREE) && (h = h & ~Z), f = h, m.has(z.VALUES.INCLUDE_SELF) ? f = f | Z : m.has(z.VALUES.EXCLUDE_SELF) && (f = f & ~Z);
+    v.has(V.VALUES.INCLUDE_TREE) ? d = d | j : v.has(V.VALUES.EXCLUDE_TREE) && (d = d & ~j), h = d, v.has(V.VALUES.INCLUDE_SELF) ? h = h | j : v.has(V.VALUES.EXCLUDE_SELF) && (h = h & ~j);
   }
-  const p = n.dataset[O.KEY];
-  let d = !1, g = a ? G({}, a) : {}, w = o;
+  const p = l.dataset[k.KEY];
+  let f = !1, m = o ? q({}, o) : {}, E = n;
   if (p) {
-    let m = 1;
-    const T = p.indexOf("{"), M = p.lastIndexOf("}");
-    let k = p;
-    if (T !== -1 && M !== -1 && M > T) {
-      k = p.substring(0, T).trim();
-      const C = p.substring(T, M + 1);
+    let v = 1;
+    const C = p.indexOf("{"), A = p.lastIndexOf("}");
+    let B = p;
+    if (C !== -1 && A !== -1 && A > C) {
+      B = p.substring(0, C).trim();
+      const x = p.substring(C, A + 1);
       try {
-        g = new Function("return " + C)();
-      } catch (X) {
+        m = new Function("return " + x)();
+      } catch (z) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${C}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${x}`
         );
       }
     }
-    const S = k.split(/\s+/);
-    let B = !1;
-    if (S.includes(O.VALUES.TRAVELER)) {
-      d = !0, B = !0;
-      const C = S.find((X) => !isNaN(parseInt(X, 10)));
-      C && (m = parseInt(C, 10));
-    } else if (S.includes(O.VALUES.NATIVE)) {
-      d = !1;
-      const C = S.find((X) => !isNaN(parseInt(X, 10)));
-      C && (w = parseInt(C, 10));
+    const S = B.split(/\s+/);
+    let X = !1;
+    if (S.includes(k.VALUES.TRAVELER)) {
+      f = !0, X = !0;
+      const x = S.find((z) => !isNaN(parseInt(z, 10)));
+      x && (v = parseInt(x, 10));
+    } else if (S.includes(k.VALUES.NATIVE)) {
+      f = !1;
+      const x = S.find((z) => !isNaN(parseInt(z, 10)));
+      x && (E = parseInt(x, 10));
     }
-    if (B) {
-      const C = m + 1;
-      if (C < i)
+    if (X) {
+      const x = v + 1;
+      if (x < r)
         throw new Error(
-          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${i - 1}).`
+          `[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${r - 1}).`
         );
-      i = Math.min(C, O.MAX_LAYERS + 1);
+      r = Math.min(x, k.MAX_LAYERS + 1);
     }
   }
-  const L = n.dataset[Ne.KEY];
-  let R;
-  L && (R = JSON.parse(L));
-  const E = n.getBoundingClientRect(), x = window.getComputedStyle(n);
-  if (E.width === 0 || E.height === 0 || x.display === "none")
+  const R = l.dataset[Xe.KEY];
+  let M;
+  R && (M = JSON.parse(R));
+  const w = l.getBoundingClientRect(), b = window.getComputedStyle(l);
+  if (w.width === 0 || w.height === 0 || b.display === "none")
     return null;
-  let U = n.getAttribute("data-mid");
-  U || (U = Math.random().toString(36).substring(2, 11), n.setAttribute("data-mid", U));
-  const F = parseInt(x.zIndex), _ = (isNaN(F) ? 0 : F) + r;
-  let D;
-  if (n.tagName === "IMG")
-    D = n.src;
-  else if (n.tagName.toLowerCase() === "svg") {
-    const m = n.cloneNode(!0), T = g == null ? void 0 : g.color, M = g == null ? void 0 : g.fill, k = g == null ? void 0 : g.stroke, S = g == null ? void 0 : g.opacity, B = (y, xe) => {
-      const N = window.getComputedStyle(y), ne = xe, ke = N.fill === N.color, Ue = N.stroke === N.color, de = M || (ke ? T : void 0) || N.fill;
-      de && de !== "none" && (ne.style.fill = de);
-      const ue = k || (Ue ? T : void 0) || N.stroke;
-      ue && ue !== "none" && (ne.style.stroke = ue), N.strokeWidth && N.strokeWidth !== "0px" && (ne.style.strokeWidth = N.strokeWidth);
-      const Ee = T || N.color;
-      Ee && (ne.style.color = Ee);
-      const fe = S || N.opacity;
-      fe && fe !== "1" && (ne.style.opacity = fe);
-      for (let ce = 0; ce < y.children.length; ce++)
-        B(y.children[ce], xe.children[ce]);
+  let U = l.getAttribute("data-mid");
+  U || (U = Math.random().toString(36).substring(2, 11), l.setAttribute("data-mid", U));
+  const D = parseInt(b.zIndex), O = (isNaN(D) ? 0 : D) + i;
+  let N;
+  if (l.tagName === "IMG")
+    N = l.src;
+  else if (l.tagName.toLowerCase() === "svg") {
+    const v = l.cloneNode(!0), C = m == null ? void 0 : m.color, A = m == null ? void 0 : m.fill, B = m == null ? void 0 : m.stroke, S = m == null ? void 0 : m.opacity, X = (T, ve) => {
+      const F = window.getComputedStyle(T), J = ve, ke = F.fill === F.color, Ue = F.stroke === F.color, ie = A || (ke ? C : void 0) || F.fill;
+      ie && ie !== "none" && (J.style.fill = ie);
+      const se = B || (Ue ? C : void 0) || F.stroke;
+      se && se !== "none" && (J.style.stroke = se), F.strokeWidth && F.strokeWidth !== "0px" && (J.style.strokeWidth = F.strokeWidth);
+      const ye = C || F.color;
+      ye && (J.style.color = ye);
+      const ne = S || F.opacity;
+      ne && ne !== "1" && (J.style.opacity = ne);
+      for (let ee = 0; ee < T.children.length; ee++)
+        X(T.children[ee], ve.children[ee]);
     };
-    B(n, m);
-    const C = n.getBoundingClientRect(), X = window.devicePixelRatio * l;
-    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${C.width} ${C.height}`), m.setAttribute("width", (C.width * X).toString()), m.setAttribute("height", (C.height * X).toString());
-    let W = new XMLSerializer().serializeToString(m);
-    W.includes("xmlns=") || (W = W.replace(
+    X(l, v);
+    const x = l.getBoundingClientRect(), z = window.devicePixelRatio * a;
+    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${x.width} ${x.height}`), v.setAttribute("width", (x.width * z).toString()), v.setAttribute("height", (x.height * z).toString());
+    let G = new XMLSerializer().serializeToString(v);
+    G.includes("xmlns=") || (G = G.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), D = `data:image/svg+xml;utf8,${encodeURIComponent(W)}`;
-  } else if (x.backgroundImage && x.backgroundImage !== "none") {
-    const m = x.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    m && (D = m[1]);
+    )), N = `data:image/svg+xml;utf8,${encodeURIComponent(G)}`;
+  } else if (b.backgroundImage && b.backgroundImage !== "none") {
+    const v = b.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    v && (N = v[1]);
   }
   const I = {
-    backgroundColor: x.backgroundColor,
-    backgroundImage: x.backgroundImage,
-    opacity: n.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(x.opacity),
-    zIndex: _,
-    borderRadius: x.borderRadius,
-    borderColor: x.borderColor,
-    borderWidth: x.borderWidth,
-    imageSrc: D,
-    isTraveler: d
-  }, K = I;
-  let J, Q;
-  const $ = [];
-  return n.tagName.toLowerCase() !== "svg" && Array.from(n.childNodes).forEach((m) => {
-    const T = m.nodeType === Node.TEXT_NODE ? f : h, M = Ie(
-      m,
+    backgroundColor: b.backgroundColor,
+    backgroundImage: b.backgroundImage,
+    opacity: l.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(b.opacity),
+    zIndex: O,
+    borderRadius: b.borderRadius,
+    borderColor: b.borderColor,
+    borderWidth: b.borderWidth,
+    imageSrc: N,
+    isTraveler: f
+  }, P = I;
+  let Ae, Ie;
+  const he = [];
+  return l.tagName.toLowerCase() !== "svg" && Array.from(l.childNodes).forEach((v) => {
+    const C = v.nodeType === Node.TEXT_NODE ? h : d, A = De(
+      v,
       e,
-      T,
-      i,
-      _,
-      l,
-      w,
-      m.nodeType === Node.TEXT_NODE && Object.keys(g).length > 0 ? g : void 0
+      C,
+      r,
+      O,
+      a,
+      E,
+      v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
     );
-    M && $.push(M);
+    A && he.push(A);
   }), {
     id: U,
     type: "BOX",
-    element: n,
+    element: l,
     rect: {
-      x: E.left + window.scrollX,
-      y: E.top + window.scrollY,
-      width: E.width,
-      height: E.height
+      x: w.left + window.scrollX,
+      y: w.top + window.scrollY,
+      width: w.width,
+      height: w.height
     },
-    styles: K,
-    textContent: J,
-    textStyles: Q,
+    styles: P,
+    textContent: Ae,
+    textStyles: Ie,
     dirtyMask: e,
-    visibility: f,
-    isTraveler: d,
-    captureLayer: i,
-    nativeLayer: w,
-    nativeStyles: w !== void 0 ? pe(G({}, I), {
-      backgroundColor: (V = g.backgroundColor) != null ? V : I.backgroundColor,
-      backgroundImage: (te = g.backgroundImage) != null ? te : I.backgroundImage,
-      opacity: (re = g.opacity) != null ? re : I.opacity,
-      zIndex: g.zIndex !== void 0 ? g.zIndex + _ : I.zIndex,
-      borderRadius: (ie = g.borderRadius) != null ? ie : I.borderRadius,
-      borderColor: (se = g.borderColor) != null ? se : I.borderColor,
-      borderWidth: (oe = g.borderWidth) != null ? oe : I.borderWidth,
+    visibility: h,
+    isTraveler: f,
+    captureLayer: r,
+    nativeLayer: E,
+    nativeStyles: E !== void 0 ? we(q({}, I), {
+      backgroundColor: (de = m.backgroundColor) != null ? de : I.backgroundColor,
+      backgroundImage: (ue = m.backgroundImage) != null ? ue : I.backgroundImage,
+      opacity: (fe = m.opacity) != null ? fe : I.opacity,
+      zIndex: m.zIndex !== void 0 ? m.zIndex + O : I.zIndex,
+      borderRadius: (ge = m.borderRadius) != null ? ge : I.borderRadius,
+      borderColor: (pe = m.borderColor) != null ? pe : I.borderColor,
+      borderWidth: (me = m.borderWidth) != null ? me : I.borderWidth,
       isTraveler: I.isTraveler
     }) : void 0,
-    nativeRect: w !== void 0 ? {
-      x: g.x !== void 0 ? parseFloat(g.x) : E.left + window.scrollX,
-      y: g.y !== void 0 ? parseFloat(g.y) : E.top + window.scrollY,
-      width: g.width !== void 0 ? parseFloat(g.width) : E.width,
-      height: g.height !== void 0 ? parseFloat(g.height) : E.height
+    nativeRect: E !== void 0 ? {
+      x: m.x !== void 0 ? parseFloat(m.x) : w.left + window.scrollX,
+      y: m.y !== void 0 ? parseFloat(m.y) : w.top + window.scrollY,
+      width: m.width !== void 0 ? parseFloat(m.width) : w.width,
+      height: m.height !== void 0 ? parseFloat(m.height) : w.height
     } : void 0,
-    isFixed: x.position === "fixed",
-    children: $,
-    shaderHooks: R
+    isFixed: b.position === "fixed",
+    children: he,
+    shaderHooks: M
   };
 }
 function it(s, e) {
-  e.size !== 0 && e.forEach((t, i) => {
-    var U, F, _, D, I, K, J, Q, $, V, te, re, ie, se, oe, m, T, M;
-    const r = s.get(i);
-    if (!r || !r.userData.basePosition)
-      return;
-    let { x: l, y: o } = r.userData.basePosition;
-    const { width: a, height: n } = r.userData.baseSize, c = (U = t.width) != null ? U : a, h = (F = t.height) != null ? F : n, f = c - a, b = h - n;
-    if (t.width !== void 0 && r.userData.originRatioX === void 0 && Math.abs(f) > 0.1) {
-      const k = i.getBoundingClientRect(), S = (_ = t.x) != null ? _ : 0, B = (I = (D = r.userData.baseTransform) == null ? void 0 : D.x) != null ? I : 0, C = r.userData.isFixed ? 0 : window.scrollX;
-      let y = -(k.left + C - S + B - r.userData.baseDOM.x) / f;
-      Math.abs(y) < 0.05 ? y = 0 : Math.abs(y - 1) < 0.05 ? y = 1 : Math.abs(y - 0.5) < 0.05 && (y = 0.5), r.userData.originRatioX = y;
-    }
-    if (t.height !== void 0 && r.userData.originRatioY === void 0 && Math.abs(b) > 0.1) {
-      const k = i.getBoundingClientRect(), S = (K = t.y) != null ? K : 0, B = (Q = (J = r.userData.baseTransform) == null ? void 0 : J.y) != null ? Q : 0, C = r.userData.isFixed ? 0 : window.scrollY;
-      let y = -(k.top + C - S + B - r.userData.baseDOM.y) / b;
-      Math.abs(y) < 0.05 ? y = 0 : Math.abs(y - 1) < 0.05 ? y = 1 : Math.abs(y - 0.5) < 0.05 && (y = 0.5), r.userData.originRatioY = y;
-    }
-    const p = ($ = r.userData.originRatioX) != null ? $ : 0.5, d = (V = r.userData.originRatioY) != null ? V : 0.5, g = f * (0.5 - p), w = b * (0.5 - d), L = (re = (te = r.userData.baseTransform) == null ? void 0 : te.x) != null ? re : 0, R = (se = (ie = r.userData.baseTransform) == null ? void 0 : ie.y) != null ? se : 0, E = ((oe = t.x) != null ? oe : L) - L, x = ((m = t.y) != null ? m : R) - R;
-    r.position.setX(l + g + E), r.position.setY(o - (w + x)), r.scale.set(c, h, 1), H.forceUpdateUniforms(r.material, {
+  e.size !== 0 && e.forEach((t, r) => {
+    var a, n;
+    const i = s.get(r);
+    !i || !i.userData.basePosition || Y.forceUpdateUniforms(i.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
-      borderRadius: (M = t.borderRadius) != null ? M : (T = r.userData.baseStyles) == null ? void 0 : T.borderRadius,
-      width: c,
-      height: h
+      borderRadius: (n = t.borderRadius) != null ? n : (a = i.userData.baseStyles) == null ? void 0 : a.borderRadius
+      // width and height are no longer updated here, they are updated in syncMeshesByDOM
     });
   });
 }
-function st(s, e, t) {
-  s.forEach((i) => {
-    if (i.userData.isFixed && i.userData.initialScroll && i.userData.originalBasePosition) {
-      const r = e - i.userData.initialScroll.x, l = t - i.userData.initialScroll.y;
-      i.userData.basePosition.x = i.userData.originalBasePosition.x + r, i.userData.basePosition.y = i.userData.originalBasePosition.y - l, i.position.x = i.userData.basePosition.x, i.position.y = i.userData.basePosition.y;
-    }
-  });
-}
-class ot {
-  constructor(e, t, i, r) {
-    u(this, "target");
-    u(this, "renderer");
-    u(this, "registry");
-    u(this, "isTravelEnabled", !1);
-    u(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = i, this.tracker = new Ve(e, {
-      resizeDebounce: r.resizeDebounce
-    }), this.tracker.onLayoutChange.add((l, o) => {
-      document.querySelector(`[${O.NAME}~='${O.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const n = Ie(
+class st {
+  constructor(e, t, r, i) {
+    g(this, "target");
+    g(this, "renderer");
+    g(this, "registry");
+    g(this, "isTravelEnabled", !1);
+    g(this, "tracker");
+    this.target = e, this.renderer = t, this.registry = r, this.tracker = new We(e, {
+      resizeDebounce: i.resizeDebounce
+    }), this.tracker.onLayoutChange.add((a, n) => {
+      document.querySelector(`[${k.NAME}~='${k.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const l = De(
         this.target,
-        l,
-        P,
+        a,
+        W,
         1,
         0,
         this.renderer.qualityFactor
       );
-      n && this.renderer.syncScene(n, o);
-    }), this.tracker.onScrollChange.add((l, o) => {
-      st(this.renderer.fixedMeshes, l, o);
-    }), this.tracker.onStyleChange.add((l) => {
-      it(this.registry, l);
+      l && this.renderer.syncScene(l, n);
+    }), this.tracker.onStyleChange.add((a) => {
+      it(this.registry, a);
     }), this.tracker.onRender.add(() => {
-      this.renderer.render();
+      this.renderer.syncMeshesByDOM(), this.renderer.render();
     });
   }
   start() {
@@ -1506,7 +1539,7 @@ class ot {
 }
 class nt {
   constructor() {
-    u(this, "store");
+    g(this, "store");
     this.store = /* @__PURE__ */ new WeakMap();
   }
   register(e, t) {
@@ -1529,30 +1562,30 @@ class nt {
     this.store.delete(e);
   }
 }
-class ht {
+class ct {
   constructor(e, t) {
-    u(this, "renderer");
-    u(this, "syncer");
-    u(this, "target");
-    u(this, "registry");
-    var r, l, o;
+    g(this, "renderer");
+    g(this, "syncer");
+    g(this, "target");
+    g(this, "registry");
+    var i, a, n;
     if (this.target = e, this.registry = new nt(), !document.getElementById("mirage-engine-styles")) {
-      const a = document.createElement("style");
-      a.id = "mirage-engine-styles", a.textContent = `
-        [${q.NAME}="${q.VALUES.HIDE}"] {
+      const o = document.createElement("style");
+      o.id = "mirage-engine-styles", o.textContent = `
+        [${H.NAME}="${H.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
-      `, document.head.appendChild(a);
+      `, document.head.appendChild(o);
     }
-    let i;
-    if (t.mode === "duplicate" ? i = (l = (r = t.container) != null ? r : this.target.parentElement) != null ? l : void 0 : i = (o = this.target.parentElement) != null ? o : void 0, !i)
+    let r;
+    if (t.mode === "duplicate" ? r = (a = (i = t.container) != null ? i : this.target.parentElement) != null ? a : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
     this.renderer = new tt(
       this.target,
       t,
-      i,
+      r,
       this.registry
-    ), this.renderer.mount(), this.syncer = new ot(this.target, this.renderer, this.registry, t);
+    ), this.renderer.mount(), this.syncer = new st(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();
@@ -1584,37 +1617,37 @@ class ht {
       ArrowUp: !1,
       ArrowDown: !1
     };
-    window.addEventListener("keydown", (l) => {
-      t[l.key] !== void 0 && (t[l.key] = !0);
-    }), window.addEventListener("keyup", (l) => {
-      t[l.key] !== void 0 && (t[l.key] = !1);
+    window.addEventListener("keydown", (a) => {
+      t[a.key] !== void 0 && (t[a.key] = !0);
+    }), window.addEventListener("keyup", (a) => {
+      t[a.key] !== void 0 && (t[a.key] = !1);
     });
-    const i = 2, r = () => {
-      requestAnimationFrame(r), t.ArrowRight && e.position.setX(e.position.x + i), t.ArrowLeft && e.position.setX(e.position.x - i), t.ArrowUp && e.position.setY(e.position.y + i), t.ArrowDown && e.position.setY(e.position.y - i);
+    const r = 2, i = () => {
+      requestAnimationFrame(i), t.ArrowRight && e.position.setX(e.position.x + r), t.ArrowLeft && e.position.setX(e.position.x - r), t.ArrowUp && e.position.setY(e.position.y + r), t.ArrowDown && e.position.setY(e.position.y - r);
     };
-    r();
+    i();
   }
 }
 export {
-  Se as ALLOWED_FILTERS,
-  q as ATTR_DOM,
-  Y as ATTR_FILTER,
-  lt as ATTR_SANDWICH,
-  z as ATTR_SELECT,
-  Ne as ATTR_SHADER,
-  O as ATTR_TRAVEL,
-  ve as DIRTY_CONTENT,
-  he as DIRTY_NONE,
-  j as DIRTY_RECT,
-  be as DIRTY_STRUCTURE,
-  ae as DIRTY_STYLE,
-  Ye as DIRTY_ZINDEX,
-  ct as EXCLUDED,
-  ht as Engine,
-  Z as SELECT_LAYER,
-  A as THREE_LAYERS,
-  Te as TRAVEL_VALUES,
-  Ve as Tracker,
-  P as USER_LAYER,
-  Pe as extractFromStyle
+  Ce as ALLOWED_FILTERS,
+  H as ATTR_DOM,
+  _ as ATTR_FILTER,
+  at as ATTR_SANDWICH,
+  V as ATTR_SELECT,
+  Xe as ATTR_SHADER,
+  k as ATTR_TRAVEL,
+  le as DIRTY_CONTENT,
+  te as DIRTY_NONE,
+  $ as DIRTY_RECT,
+  re as DIRTY_STRUCTURE,
+  Q as DIRTY_STYLE,
+  ze as DIRTY_ZINDEX,
+  lt as EXCLUDED,
+  ct as Engine,
+  j as SELECT_LAYER,
+  L as THREE_LAYERS,
+  xe as TRAVEL_VALUES,
+  We as Tracker,
+  W as USER_LAYER,
+  Ye as extractFromStyle
 };