mirage-engine 0.3.2 → 0.3.3

package/dist/mirage-engine.js

@@ -1,34 +1,34 @@
-var Fe = Object.defineProperty, _e = Object.defineProperties;
+var _e = Object.defineProperty, ze = Object.defineProperties;
 var Xe = Object.getOwnPropertyDescriptors;
-var Ce = Object.getOwnPropertySymbols;
-var ze = Object.prototype.hasOwnProperty, Ne = Object.prototype.propertyIsEnumerable;
-var ge = (s, e, t) => e in s ? Fe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, G = (s, e) => {
+var Ee = Object.getOwnPropertySymbols;
+var Ne = Object.prototype.hasOwnProperty, Ye = Object.prototype.propertyIsEnumerable;
+var ge = (s, e, t) => e in s ? _e(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, G = (s, e) => {
   for (var t in e || (e = {}))
-    ze.call(e, t) && ge(s, t, e[t]);
-  if (Ce)
-    for (var t of Ce(e))
-      Ne.call(e, t) && ge(s, t, e[t]);
+    Ne.call(e, t) && ge(s, t, e[t]);
+  if (Ee)
+    for (var t of Ee(e))
+      Ye.call(e, t) && ge(s, t, e[t]);
   return s;
-}, pe = (s, e) => _e(s, Xe(e));
-var h = (s, e, t) => (ge(s, typeof e != "symbol" ? e + "" : e, t), t);
-var we = (s, e, t) => new Promise((i, r) => {
-  var c = (o) => {
+}, pe = (s, e) => ze(s, Xe(e));
+var d = (s, e, t) => (ge(s, typeof e != "symbol" ? e + "" : e, t), t);
+var Ce = (s, e, t) => new Promise((i, r) => {
+  var o = (a) => {
     try {
-      a(t.next(o));
+      c(t.next(a));
     } catch (l) {
       r(l);
     }
-  }, n = (o) => {
+  }, n = (a) => {
     try {
-      a(t.throw(o));
+      c(t.throw(a));
     } catch (l) {
       r(l);
     }
-  }, a = (o) => o.done ? i(o.value) : Promise.resolve(o.value).then(c, n);
-  a((t = t.apply(s, e)).next());
+  }, c = (a) => a.done ? i(a.value) : Promise.resolve(a.value).then(o, n);
+  c((t = t.apply(s, e)).next());
 });
-import * as b from "three";
-const De = {
+import * as y from "three";
+const Ae = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
   INCLUDE_SELF: "include-self",
@@ -48,7 +48,7 @@ const De = {
   CAPTURE_3: "3",
   CAPTURE_4: "4",
   CAPTURE_5: "5"
-}, U = {
+}, F = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
   VALUES: Te,
@@ -56,12 +56,12 @@ const De = {
 }, N = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
-  VALUES: De
-}, Y = {
+  VALUES: Ae
+}, V = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
-  VALUES: De
-}, Ye = {
+  VALUES: Ae
+}, Ve = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
 }, Se = {
@@ -70,7 +70,7 @@ const De = {
   VALUES: {
     FRONT: "front"
   }
-}, he = 0, j = 1, ae = 2, Ve = 4, ye = 8, be = 16;
+}, he = 0, q = 1, ne = 2, We = 4, ve = 8, ye = 16;
 function Pe(s) {
   const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
   return e ? {
@@ -79,7 +79,7 @@ function Pe(s) {
     b: parseInt(e[3]) / 255
   } : { r: 1, g: 1, b: 1 };
 }
-function We(s) {
+function He(s) {
   const e = {};
   if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
     const t = Pe(s.backgroundColor);
@@ -91,34 +91,34 @@ function We(s) {
   }
   return e;
 }
-class Ae {
+class ke {
   constructor(e, t) {
-    h(this, "target");
-    h(this, "observer");
-    h(this, "pendingDeletions", /* @__PURE__ */ new Set());
-    h(this, "pendingStyles", /* @__PURE__ */ new Map());
-    h(this, "isDomDirty", !1);
-    h(this, "isRunning", !1);
-    h(this, "pendingMask", he);
-    h(this, "mutationTimer", null);
-    h(this, "cssTimer", null);
-    h(this, "resizeConfig");
-    h(this, "resizeTimer", null);
-    h(this, "isResizing", !1);
-    h(this, "lastScrollX", 0);
-    h(this, "lastScrollY", 0);
-    h(this, "scrollTimer", null);
-    h(this, "onBeforeRender", /* @__PURE__ */ new Set());
-    h(this, "onLayoutChange", /* @__PURE__ */ new Set());
-    h(this, "onStyleChange", /* @__PURE__ */ new Set());
-    h(this, "onScrollChange", /* @__PURE__ */ new Set());
-    h(this, "onRender", /* @__PURE__ */ new Set());
-    h(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(() => {
+    d(this, "target");
+    d(this, "observer");
+    d(this, "pendingDeletions", /* @__PURE__ */ new Set());
+    d(this, "pendingStyles", /* @__PURE__ */ new Map());
+    d(this, "isDomDirty", !1);
+    d(this, "isRunning", !1);
+    d(this, "pendingMask", he);
+    d(this, "mutationTimer", null);
+    d(this, "cssTimer", null);
+    d(this, "resizeConfig");
+    d(this, "resizeTimer", null);
+    d(this, "isResizing", !1);
+    d(this, "lastScrollX", 0);
+    d(this, "lastScrollY", 0);
+    d(this, "scrollTimer", null);
+    d(this, "onBeforeRender", /* @__PURE__ */ new Set());
+    d(this, "onLayoutChange", /* @__PURE__ */ new Set());
+    d(this, "onStyleChange", /* @__PURE__ */ new Set());
+    d(this, "onScrollChange", /* @__PURE__ */ new Set());
+    d(this, "onRender", /* @__PURE__ */ new Set());
+    d(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= q | ne, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
-    h(this, "onWindowResize", () => {
+    d(this, "onWindowResize", () => {
       if (!this.resizeConfig.enabled) {
         this.isDomDirty = !0;
         return;
@@ -127,41 +127,41 @@ class Ae {
         this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
       }, this.resizeConfig.delay);
     });
-    h(this, "renderLoop", () => {
+    d(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);
       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;
+        this.pendingMask |= q, 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);
     });
-    var r, c;
+    var r, o;
     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 = {
       enabled: !0,
-      delay: (c = i.delay) != null ? c : 150,
+      delay: (o = i.delay) != null ? o : 150,
       onStart: i.onStart,
       onEnd: i.onEnd
     }, this.observer = new MutationObserver((n) => {
-      let a = he;
-      for (const o of n)
-        if (o.type === "childList")
-          a |= ye, o.removedNodes.length > 0 && o.removedNodes.forEach((l) => {
+      let c = he;
+      for (const a of n)
+        if (a.type === "childList")
+          c |= ve, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
             l instanceof HTMLElement && this.pendingDeletions.add(l);
           });
-        else if (o.type === "attributes")
-          if (o.attributeName === "style") {
-            a |= j | ae;
-            const l = o.target, d = We(l.style);
-            this.pendingStyles.set(l, d);
+        else if (a.type === "attributes")
+          if (a.attributeName === "style") {
+            c |= q | ne;
+            const l = a.target, u = He(l.style);
+            this.pendingStyles.set(l, u);
           } else
-            (o.attributeName === "class" || o.attributeName && o.attributeName.startsWith("data-")) && (a |= j | ae);
+            (a.attributeName === "class" || a.attributeName && a.attributeName.startsWith("data-")) && (c |= q | ne);
         else
-          o.type === "characterData" && (a |= be | j);
-      if (a !== he) {
-        if (this.pendingMask |= a, a & ye) {
+          a.type === "characterData" && (c |= ye | q);
+      if (c !== he) {
+        if (this.pendingMask |= c, c & ve) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -186,13 +186,13 @@ class Ae {
     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 V = 1, Z = 2, A = {
+const W = 1, j = 2, k = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
 }, Le = Object.values(N.VALUES);
-class ke {
+class Ie {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
    * @param font CSS font shorthand string (e.g., "400 16px Inter")
@@ -209,145 +209,145 @@ class ke {
       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 c = r.offsetTop - i.offsetTop;
-    return document.body.removeChild(t), c;
+    const o = r.offsetTop - i.offsetTop;
+    return document.body.removeChild(t), o;
   }
 }
-h(ke, "cache", /* @__PURE__ */ new Map());
-class He extends b.MeshBasicMaterial {
-  constructor(t, i, r, c, n = 2) {
+d(Ie, "cache", /* @__PURE__ */ new Map());
+class Ge extends y.MeshBasicMaterial {
+  constructor(t, i, r, o, n = 2) {
     super({
       transparent: !0,
-      side: b.FrontSide,
+      side: y.FrontSide,
       color: 16777215
     });
-    h(this, "canvas");
-    h(this, "ctx");
-    h(this, "qualityFactor");
+    d(this, "canvas");
+    d(this, "ctx");
+    d(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 = n, this.map = new b.CanvasTexture(this.canvas), this.map.colorSpace = b.LinearSRGBColorSpace, this.map.minFilter = b.LinearFilter, this.map.magFilter = b.LinearFilter, this.updateText(t, i, r, c);
+    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, i, r, o);
   }
   wrapText(t, i) {
     const r = t.split(`
-`), c = [];
+`), o = [];
     return r.forEach((n) => {
-      const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-      if (a.length === 0) {
-        c.push("");
+      const c = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (c.length === 0) {
+        o.push("");
         return;
       }
-      let o = a[0];
-      for (let l = 1; l < a.length; l++) {
-        const d = a[l];
-        this.ctx.measureText(o + d).width <= i + 2 ? o += d : (o && c.push(o), o = d.trimStart());
+      let a = c[0];
+      for (let l = 1; l < c.length; l++) {
+        const u = c[l];
+        this.ctx.measureText(a + u).width <= i + 2 ? a += u : (a && o.push(a), a = u.trimStart());
       }
-      o && c.push(o);
-    }), c;
+      a && o.push(a);
+    }), o;
   }
-  updateText(t, i, r, c, n) {
+  updateText(t, i, r, o, n) {
     n !== void 0 && (this.qualityFactor = n);
-    const o = (window.devicePixelRatio || 1) * this.qualityFactor, l = r * o, d = c * o;
-    this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(o, 0, 0, o, 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), y = i.lineHeight, p = ke.getBaseline(i.font);
-    f.forEach((u, g) => {
-      const w = g * y + p;
-      let R = 0;
-      i.textAlign === "center" ? R = r / 2 : i.textAlign === "right" && (R = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(u, R, w);
+    const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = r * a, u = o * a;
+    this.canvas.width !== l || this.canvas.height !== u ? (this.canvas.width = l, this.canvas.height = u) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(a, 0, 0, a, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
+    const h = this.wrapText(t, r), f = i.lineHeight, v = Ie.getBaseline(i.font);
+    h.forEach((g, p) => {
+      const E = p * f + v;
+      let L = 0;
+      i.textAlign === "center" ? L = r / 2 : i.textAlign === "right" && (L = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(g, L, 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 ce(s) {
+function oe(s) {
   if (!s || s === "transparent")
-    return { color: new b.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), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new b.Color(`rgb(${t}, ${i}, ${r})`), alpha: c };
+    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), o = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new y.Color(`rgb(${t}, ${i}, ${r})`), alpha: o };
   }
-  return { color: new b.Color(s), alpha: 1 };
+  return { color: new y.Color(s), alpha: 1 };
 }
-function Ge(s) {
+function $e(s) {
   const e = [];
   let t = "", i = 0;
   for (let r = 0; r < s.length; r++) {
-    const c = s[r];
-    if (c === "(")
+    const o = s[r];
+    if (o === "(")
       i++;
-    else if (c === ")")
+    else if (o === ")")
       i--;
-    else if (c === "," && i === 0) {
+    else if (o === "," && i === 0) {
       e.push(t.trim()), t = "";
       continue;
     }
-    t += c;
+    t += o;
   }
   return t && e.push(t.trim()), e;
 }
-function $e(s) {
+function qe(s) {
   if (!s || typeof s != "string" || !s.includes("linear-gradient"))
     return null;
   const e = s.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], i = Ge(t);
-  let r = Math.PI, c = 0;
+  const t = e[1], i = $e(t);
+  let r = Math.PI, o = 0;
   const n = i[0].trim();
   if (n.startsWith("to "))
-    n === "to top" ? r = 0 : n === "to right" ? r = Math.PI / 2 : n === "to bottom" ? r = Math.PI : n === "to left" ? r = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? r = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? r = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? r = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (r = Math.PI * 1.75), c = 1;
+    n === "to top" ? r = 0 : n === "to right" ? r = Math.PI / 2 : n === "to bottom" ? r = Math.PI : n === "to left" ? r = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? r = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? r = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? r = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (r = Math.PI * 1.75), o = 1;
   else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
-    const o = parseFloat(n);
-    n.endsWith("deg") ? r = o * (Math.PI / 180) : n.endsWith("rad") ? r = o : n.endsWith("turn") && (r = o * Math.PI * 2), c = 1;
-  }
-  const a = [];
-  for (let o = c; o < i.length && !(a.length >= 8); o++) {
-    const l = i[o].trim(), d = l.lastIndexOf(" ");
-    let f = l, y = null;
-    if (d !== -1 && !l.endsWith(")")) {
-      const u = l.substring(d + 1);
-      (u.endsWith("%") || u.endsWith("px") || !isNaN(parseFloat(u))) && (f = l.substring(0, d).trim(), y = u);
+    const a = parseFloat(n);
+    n.endsWith("deg") ? r = a * (Math.PI / 180) : n.endsWith("rad") ? r = a : n.endsWith("turn") && (r = a * Math.PI * 2), o = 1;
+  }
+  const c = [];
+  for (let a = o; a < i.length && !(c.length >= 8); a++) {
+    const l = i[a].trim(), u = l.lastIndexOf(" ");
+    let h = l, f = null;
+    if (u !== -1 && !l.endsWith(")")) {
+      const g = l.substring(u + 1);
+      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, u).trim(), f = g);
     }
-    const p = ce(f);
-    a.push({
-      color: p.color,
-      alpha: p.alpha,
-      rawStop: y,
+    const v = oe(h);
+    c.push({
+      color: v.color,
+      alpha: v.alpha,
+      rawStop: f,
       stop: 0
     });
   }
-  if (a.length > 0) {
-    for (let l = 0; l < a.length; l++)
-      a[l].rawStop !== null && (a[l].stop = parseFloat(a[l].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 o = 0;
-    for (let l = 1; l < a.length; l++)
-      if (a[l].rawStop !== null || l === a.length - 1) {
-        const d = l - o;
-        if (d > 1) {
-          const f = a[o].stop, p = (a[l].stop - f) / d;
-          for (let u = 1; u < d; u++)
-            a[o + u].stop = f + p * u;
+  if (c.length > 0) {
+    for (let l = 0; l < c.length; l++)
+      c[l].rawStop !== null && (c[l].stop = parseFloat(c[l].rawStop) / 100);
+    c[0].rawStop === null && (c[0].stop = 0), c.length > 1 && c[c.length - 1].rawStop === null && (c[c.length - 1].stop = 1);
+    let a = 0;
+    for (let l = 1; l < c.length; l++)
+      if (c[l].rawStop !== null || l === c.length - 1) {
+        const u = l - a;
+        if (u > 1) {
+          const h = c[a].stop, v = (c[l].stop - h) / u;
+          for (let g = 1; g < u; g++)
+            c[a + g].stop = h + v * g;
         }
-        o = l;
+        a = l;
       }
   }
-  return { angle: r, stops: a };
+  return { angle: r, stops: c };
 }
-const qe = `varying vec2 vUv;
+const je = `varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   vScreenPos = gl_Position;
-}`, je = `varying vec2 vUv;
+}`, Ke = `varying vec2 vUv;
 uniform vec2 uSize;
 uniform vec4 uBorderRadius;
 uniform float uBorderWidth;
@@ -476,85 +476,85 @@ void main() {
 
   // #include <colorspace_fragment>
 }
-`, Ke = `uniform sampler2D uTexture;
+`, Je = `uniform sampler2D uTexture;
 varying vec4 vScreenPos;
 uniform vec2 uTextureRepeat;
-uniform vec2 uTextureOffset;`, Je = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+uniform vec2 uTextureOffset;`, Qe = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 vec2 resultUv = screenUv;
 
-`, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
+`, Ze = `vec4 texColor = texture2D(uTexture, resultUv);
 baseColor = blendSrcOver(baseColor, texColor);`, Re = {
-  vertexShader: qe,
-  fragmentShader: je
+  vertexShader: je,
+  fragmentShader: Ke
 }, me = {
-  declChunk: Ke,
-  uvChunk: Je,
-  baseColorChunk: Qe
+  declChunk: Je,
+  uvChunk: Qe,
+  baseColorChunk: Ze
 };
-function Ze(s, e, t, i = null, r) {
-  var L;
-  const c = i !== null || !!s.imageSrc;
+function et(s, e, t, i = null, r) {
+  var R;
+  const o = i !== null || !!s.imageSrc;
   let n = "";
-  const a = {};
+  const c = {};
   if (r != null && r.uniforms)
-    for (const [E, x] of Object.entries(r.uniforms))
-      typeof x == "number" ? (n += `uniform float ${E};
-`, a[E] = { value: x }) : Array.isArray(x) ? x.length === 2 ? (n += `uniform vec2 ${E};
-`, a[E] = { value: new b.Vector2(...x) }) : x.length === 3 ? (n += `uniform vec3 ${E};
-`, a[E] = { value: new b.Vector3(...x) }) : x.length === 4 && (n += `uniform vec4 ${E};
-`, a[E] = { value: new b.Vector4(...x) }) : (n += `uniform float ${E};
-`, a[E] = { value: x });
-  const o = (c ? me.declChunk : "") + `
+    for (const [x, w] of Object.entries(r.uniforms))
+      typeof w == "number" ? (n += `uniform float ${x};
+`, c[x] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${x};
+`, c[x] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${x};
+`, c[x] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${x};
+`, c[x] = { value: new y.Vector4(...w) }) : (n += `uniform float ${x};
+`, c[x] = { value: w });
+  const a = (o ? me.declChunk : "") + `
 ` + n, l = s.isTraveler ? me.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, d = c ? l + ((r == null ? void 0 : r.uvModifier) || "") : "", f = c ? me.baseColorChunk : "", y = (r == null ? void 0 : r.colorModifier) || "", p = Re.fragmentShader.replace("#INJECT_DECLARATIONS", o).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", y), u = ce(s.backgroundColor), g = ce(s.borderColor), w = {
-    uSize: { value: new b.Vector2(e, t) },
+`, u = o ? l + ((r == null ? void 0 : r.uvModifier) || "") : "", h = o ? me.baseColorChunk : "", f = (r == null ? void 0 : r.colorModifier) || "", v = Re.fragmentShader.replace("#INJECT_DECLARATIONS", a).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", h).replace("#INJECT_COLOR_MODIFIER", f), g = oe(s.backgroundColor), p = oe(s.borderColor), E = {
+    uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
-      value: new b.Vector4(
-        u.color.r,
-        u.color.g,
-        u.color.b,
-        u.alpha
-      )
-    },
-    uBorderColor: {
-      value: new b.Vector4(
+      value: new y.Vector4(
         g.color.r,
         g.color.g,
         g.color.b,
         g.alpha
       )
     },
-    uBorderRadius: { value: new b.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: ee(s.borderWidth) },
-    uOpacity: { value: (L = s.opacity) != null ? L : 1 },
+    uBorderColor: {
+      value: new y.Vector4(
+        p.color.r,
+        p.color.g,
+        p.color.b,
+        p.alpha
+      )
+    },
+    uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: K(s.borderWidth) },
+    uOpacity: { value: (R = s.opacity) != null ? R : 1 },
     uTexture: { value: null },
-    uTextureRepeat: { value: new b.Vector2(1, 1) },
-    uTextureOffset: { value: new b.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 b.Vector4(0, 0, 0, 0))
+      value: Array.from({ length: 8 }, () => new y.Vector4(0, 0, 0, 0))
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  Ie(w.uBorderRadius.value, s.borderRadius), c && (w.uTexture.value = i);
-  const R = new b.ShaderMaterial({
-    uniforms: G(G({}, w), a),
+  Be(E.uBorderRadius.value, s.borderRadius), o && (E.uTexture.value = i);
+  const L = new y.ShaderMaterial({
+    uniforms: G(G({}, E), c),
     vertexShader: Re.vertexShader,
-    fragmentShader: p,
+    fragmentShader: v,
     transparent: !0,
-    side: b.FrontSide
+    side: y.FrontSide
     // for better performance
   });
-  return s.backgroundImage && ve(R, { backgroundImage: s.backgroundImage }), R;
+  return s.backgroundImage && be(L, { backgroundImage: s.backgroundImage }), L;
 }
-function et(s, e, t, i, r) {
-  const c = ee(e.borderWidth);
-  ve(s, {
+function tt(s, e, t, i, r) {
+  const o = K(e.borderWidth);
+  be(s, {
     width: t,
     height: i,
     borderRadius: e.borderRadius,
-    borderWidth: c,
+    borderWidth: o,
     backgroundColor: e.backgroundColor,
     borderColor: e.borderColor,
     opacity: e.opacity,
@@ -562,9 +562,9 @@ function et(s, e, t, i, r) {
     backgroundImage: e.backgroundImage
   });
 }
-function ve(s, e) {
-  var i, r, c;
-  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && Ie(s.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
+function be(s, e) {
+  var i, r, o;
+  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && Be(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 n = s.uniforms.uBgColor.value.w;
       s.uniforms.uBgColor.value.set(
@@ -574,7 +574,7 @@ function ve(s, e) {
         n
       );
     } else if (typeof e.backgroundColor == "string") {
-      const n = ce(e.backgroundColor);
+      const n = oe(e.backgroundColor);
       s.uniforms.uBgColor.value.set(
         n.color.r,
         n.color.g,
@@ -600,7 +600,7 @@ function ve(s, e) {
         n
       );
     } else if (typeof e.borderColor == "string") {
-      const n = ce(e.borderColor);
+      const n = oe(e.borderColor);
       s.uniforms.uBorderColor.value.set(
         n.color.r,
         n.color.g,
@@ -619,42 +619,42 @@ function ve(s, e) {
   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;
   if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
-    const n = t.image.width, a = t.image.height, o = (r = e.width) != null ? r : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
-    if (n && a && o && l) {
-      const d = n / a, f = o / l;
-      if (d > f) {
-        const y = f / d;
-        s.uniforms.uTextureRepeat.value.set(y, 1), s.uniforms.uTextureOffset.value.set((1 - y) / 2, 0);
+    const n = t.image.width, c = t.image.height, a = (r = e.width) != null ? r : s.uniforms.uSize.value.x, l = (o = e.height) != null ? o : s.uniforms.uSize.value.y;
+    if (n && c && a && l) {
+      const u = n / c, h = a / l;
+      if (u > h) {
+        const f = h / u;
+        s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
       } else {
-        const y = d / f;
-        s.uniforms.uTextureRepeat.value.set(1, y), s.uniforms.uTextureOffset.value.set(0, (1 - y) / 2);
+        const f = u / h;
+        s.uniforms.uTextureRepeat.value.set(1, f), s.uniforms.uTextureOffset.value.set(0, (1 - f) / 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 n = $e(e.backgroundImage);
+    const n = qe(e.backgroundImage);
     if (n) {
       s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
-      for (let a = 0; a < 8; a++)
-        if (a < n.stops.length) {
-          const o = n.stops[a];
-          s.uniforms.uGradientColors.value[a].set(
-            o.color.r,
-            o.color.g,
-            o.color.b,
-            o.alpha
-          ), s.uniforms.uGradientStops.value[a] = o.stop;
+      for (let c = 0; c < 8; c++)
+        if (c < n.stops.length) {
+          const a = n.stops[c];
+          s.uniforms.uGradientColors.value[c].set(
+            a.color.r,
+            a.color.g,
+            a.color.b,
+            a.alpha
+          ), s.uniforms.uGradientStops.value[c] = a.stop;
         } else
-          s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
+          s.uniforms.uGradientColors.value[c].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[c] = 1;
     } else
       s.uniforms.uGradientCount.value = 0;
   }
   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 Ie(s, e) {
-  var a, o, l, d;
+function Be(s, e) {
+  var c, a, l, u;
   if (e == null) {
     s.set(0, 0, 0, 0);
     return;
@@ -667,71 +667,71 @@ function Ie(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]), c = ee((o = t[2]) != null ? o : t[0]), n = ee((d = (l = t[3]) != null ? l : t[1]) != null ? d : t[0]);
-  s.set(i, r, c, n);
+  const t = e.split("/")[0].trim().split(/\s+/), i = K(t[0]), r = K((c = t[1]) != null ? c : t[0]), o = K((a = t[2]) != null ? a : t[0]), n = K((u = (l = t[3]) != null ? l : t[1]) != null ? u : t[0]);
+  s.set(i, r, o, n);
 }
 const H = {
-  create(s, e, t, i, r, c = 2, n = null, a) {
-    return s === "BOX" ? Ze(
+  create(s, e, t, i, r, o = 2, n = null, c) {
+    return s === "BOX" ? et(
       e,
       i,
       r,
       n,
-      a
-    ) : s === "TEXT" ? new He(
+      c
+    ) : s === "TEXT" ? new Ge(
       t || "",
       e,
       i,
       r,
-      c
-    ) : new b.MeshBasicMaterial({ visible: !1 });
+      o
+    ) : new y.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, i, r, c, n = 2, a) {
-    e === "BOX" ? et(
+  update(s, e, t, i, r, o, n = 2, c) {
+    e === "BOX" ? tt(
       s,
       t,
       r,
-      c,
-      a
+      o,
+      c
     ) : e === "TEXT" && s.updateText(
       i || "",
       t,
       r,
-      c,
+      o,
       n
     );
   },
   forceUpdateUniforms(s, e) {
-    ve(s, e);
+    be(s, e);
   }
 };
-class tt {
-  constructor(e) {
-    h(this, "observer");
-    h(this, "textures", /* @__PURE__ */ new WeakMap());
-    h(this, "loadStatus", /* @__PURE__ */ new WeakMap());
-    h(this, "elementUrls", /* @__PURE__ */ new WeakMap());
-    h(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);
+class rt {
+  constructor(e, t = !0) {
+    d(this, "observer");
+    d(this, "textures", /* @__PURE__ */ new WeakMap());
+    d(this, "loadStatus", /* @__PURE__ */ new WeakMap());
+    d(this, "elementUrls", /* @__PURE__ */ new WeakMap());
+    d(this, "onUpdate");
+    this.onUpdate = e, t && (this.observer = new IntersectionObserver(
+      (i) => {
+        for (const r of i) {
+          const o = r.target;
+          r.isIntersecting ? this.loadTexture(o) : this.disposeTexture(o);
         }
       },
       { 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 Ce(this, null, function* () {
       if (this.loadStatus.get(e) || this.textures.has(e))
         return;
       const t = this.elementUrls.get(e);
@@ -740,9 +740,9 @@ class tt {
         try {
           let i;
           if (t.startsWith("data:image/svg+xml"))
-            i = yield new Promise((c, n) => {
-              const a = new Image();
-              a.onload = () => c(a), a.onerror = n, a.src = t;
+            i = yield new Promise((o, n) => {
+              const c = new Image();
+              c.onload = () => o(c), c.onerror = n, c.src = t;
             });
           else {
             const n = yield (yield fetch(t)).blob();
@@ -752,8 +752,8 @@ class tt {
             "close" in i && i.close();
             return;
           }
-          const r = new b.Texture(i);
-          i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = b.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
+          const r = new y.Texture(i);
+          i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = y.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
         } catch (i) {
           console.warn("[MirageEngine] Failed to load texture:", t, i);
         } finally {
@@ -770,71 +770,78 @@ class tt {
     return this.textures.get(e);
   }
   disposeAll() {
-    this.observer.disconnect();
+    this.observer && this.observer.disconnect();
   }
 }
-class rt {
+class it {
   constructor(e, t, i, r) {
-    h(this, "canvas");
-    h(this, "scene");
-    h(this, "camera");
-    h(this, "renderer");
-    h(this, "renderTargets", []);
-    h(this, "renderOrder", 0);
-    h(this, "qualityFactor", 2);
-    h(this, "mode", "overlay");
-    h(this, "clipArea", 1);
-    h(this, "targetLayer", "base");
-    h(this, "target");
-    h(this, "mountContainer");
-    h(this, "registry");
-    h(this, "targetRect");
-    h(this, "travelersByLayer", Array.from(
-      { length: U.MAX_LAYERS },
+    d(this, "canvas");
+    d(this, "scene");
+    d(this, "camera");
+    d(this, "renderer");
+    d(this, "renderTargets", []);
+    d(this, "renderOrder", 0);
+    d(this, "qualityFactor", 2);
+    d(this, "mode", "overlay");
+    d(this, "canvasSize", "viewport");
+    d(this, "clipArea", 1);
+    d(this, "targetLayer", "base");
+    d(this, "overscan", 200);
+    d(this, "target");
+    d(this, "mountContainer");
+    d(this, "registry");
+    d(this, "targetRect");
+    d(this, "travelersByLayer", Array.from(
+      { length: F.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
-    h(this, "textureManager");
+    d(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
-    h(this, "fixedMeshes", /* @__PURE__ */ new Set());
-    var a, o, l, d;
-    this.target = e, this.mountContainer = i, this.registry = r, this.textureManager = new tt((f, y) => {
-      const p = this.registry.get(f);
-      p && p.material instanceof b.ShaderMaterial && H.forceUpdateUniforms(p.material, { texture: y });
-    }), this.mode = (a = t.mode) != null ? a : "overlay", this.clipArea = (o = t.travelerClipArea) != null ? o : 1, this.targetLayer = (l = t.layer) != null ? l : "base", this.canvas = document.createElement("canvas"), this.scene = new b.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const c = this.targetRect.width, n = this.targetRect.height;
-    this.camera = new b.OrthographicCamera(
-      c / -2,
-      c / 2,
+    d(this, "fixedMeshes", /* @__PURE__ */ new Set());
+    var c, a, l, u, h;
+    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (c = t.mode) != null ? c : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (u = t.layer) != null ? u : "base", this.textureManager = new rt((f, v) => {
+      const g = this.registry.get(f);
+      g && g.material instanceof y.ShaderMaterial && H.forceUpdateUniforms(g.material, { texture: v });
+    }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const o = 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(
+      o / -2,
+      o / 2,
       n / 2,
       n / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new b.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
-    }), b.ColorManagement.enabled = !1, this.renderer.outputColorSpace = b.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((d = t.quality) != null ? d : "medium");
+    }), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(o, 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" ? k.SELECTED : k.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < U.MAX_LAYERS; e++)
+    for (let e = 0; e < F.MAX_LAYERS; e++) {
+      const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, i = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
       this.renderTargets.push(
-        new b.WebGLRenderTarget(
-          this.targetRect.width * this.qualityFactor,
-          this.targetRect.height * this.qualityFactor,
+        new y.WebGLRenderTarget(
+          t * this.qualityFactor,
+          i * this.qualityFactor,
           {
-            minFilter: b.LinearFilter,
-            magFilter: b.LinearFilter,
-            format: b.RGBAFormat,
+            minFilter: y.LinearFilter,
+            magFilter: y.LinearFilter,
+            format: y.RGBAFormat,
             stencilBuffer: !1,
             depthBuffer: !0
           }
         )
       );
+    }
   }
   applyTextQuality(e) {
     if (typeof e == "number") {
@@ -860,7 +867,8 @@ class rt {
     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);
@@ -886,16 +894,16 @@ class rt {
     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, c = 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()) : c ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((n) => {
-      const a = this.registry.get(n);
-      if (a) {
-        this.scene.remove(a);
-        for (const o of this.travelersByLayer)
-          o.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((o) => o.dispose()) : a.userData.nativeMesh.material.dispose(), a.userData.nativeMesh.geometry.dispose()), a.traverse((o) => {
-          o instanceof b.Mesh && (o.geometry && o.geometry.dispose(), o.material && (Array.isArray(o.material) ? o.material.forEach((l) => l.dispose()) : o.material.dispose()));
-        }), this.registry.remove(n), this.textureManager.unregister(n);
+    const i = this.target.getBoundingClientRect(), r = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, c = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, a = Math.abs(r - n) > 0.1 || Math.abs(o - c) > 0.1, l = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
+    a ? (this.targetRect = i, this.setSize(r, o), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((u) => {
+      const h = this.registry.get(u);
+      if (h) {
+        this.scene.remove(h);
+        for (const f of this.travelersByLayer)
+          f.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((f) => f.dispose()) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((f) => {
+          f instanceof y.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((v) => v.dispose()) : f.material.dispose()));
+        }), this.registry.remove(u), this.textureManager.unregister(u);
       }
     });
   }
@@ -907,20 +915,20 @@ class rt {
     var i;
     let t = this.registry.get(e.element);
     if (!t) {
-      const r = new b.PlaneGeometry(1, 1), c = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), n = H.create(
+      const r = new y.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), n = H.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        c,
+        o,
         e.shaderHooks
       );
-      t = new b.Mesh(r, n), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = n;
+      t = new y.Mesh(r, n), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = n;
     }
     if (this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
-      for (let r = 0; r < U.MAX_LAYERS; r++)
+      for (let r = 0; r < F.MAX_LAYERS; r++)
         r === e.captureLayer - 2 ? this.travelersByLayer[r].add(t) : this.travelersByLayer[r].delete(t);
     else
       for (const r of this.travelersByLayer)
@@ -935,76 +943,83 @@ class rt {
     var l;
     const r = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], c = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + r.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
-    if (t.dirtyMask & be || n !== a) {
+    ], o = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(o) + t.textContent + r.map((u) => u.text).join("|"), c = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
+    if (t.dirtyMask & ye || n !== c) {
       e.children.filter(
-        (u) => u.name.startsWith("TEXT_CHILD")
-      ).forEach((u) => {
-        var w;
-        const g = u;
-        (w = g.material.map) == null || w.dispose(), g.geometry.dispose(), e.remove(g);
+        (g) => g.name.startsWith("TEXT_CHILD")
+      ).forEach((g) => {
+        var E;
+        const p = g;
+        (E = p.material.map) == null || E.dispose(), p.geometry.dispose(), e.remove(p);
       });
-      const f = t.rect, y = f.x + f.width / 2, p = f.y + f.height / 2;
-      r.forEach((u, g) => {
-        const w = H.create(
+      const h = t.rect, f = h.x + h.width / 2, v = h.y + h.height / 2;
+      r.forEach((g, p) => {
+        const E = H.create(
           "TEXT",
-          c,
-          u.text,
-          u.rect.width,
-          u.rect.height,
+          o,
+          g.text,
+          g.rect.width,
+          g.rect.height,
           this.qualityFactor
-        ), R = new b.PlaneGeometry(1, 1), L = new b.Mesh(R, w);
-        L.name = `TEXT_CHILD_${g}`;
-        const E = t.rect.width === 0 ? 1 : u.rect.width / t.rect.width, x = t.rect.height === 0 ? 1 : u.rect.height / t.rect.height;
-        L.scale.set(E, x, 1);
-        const B = u.rect.x + u.rect.width / 2, F = u.rect.y + u.rect.height / 2, X = B - y, D = -(F - p);
-        L.position.set(
-          t.rect.width === 0 ? 0 : X / t.rect.width,
-          t.rect.height === 0 ? 0 : D / t.rect.height,
+        ), L = new y.PlaneGeometry(1, 1), R = new y.Mesh(L, E);
+        R.name = `TEXT_CHILD_${p}`;
+        const x = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, w = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
+        R.scale.set(x, w, 1);
+        const B = g.rect.x + g.rect.width / 2, M = g.rect.y + g.rect.height / 2, O = B - f, _ = -(M - v);
+        R.position.set(
+          t.rect.width === 0 ? 0 : O / t.rect.width,
+          t.rect.height === 0 ? 0 : _ / t.rect.height,
           5e-3
-        ), e.add(L);
+        ), e.add(R);
       }), e.userData.textChildStyleHash = n;
     }
-    e.children.forEach((d) => {
-      if (!d.name.startsWith("TEXT_CHILD"))
+    e.children.forEach((u) => {
+      if (!u.name.startsWith("TEXT_CHILD"))
         return;
-      const f = d, y = t.visibility & V ? A.BASE : A.HIDDEN;
-      if (f.layers.set(y), t.visibility & Z && f.layers.enable(A.SELECTED), t.visibility & V)
+      const h = u, f = t.visibility & W ? k.BASE : k.HIDDEN;
+      if (h.layers.set(f), t.visibility & j && h.layers.enable(k.SELECTED), t.visibility & W)
         if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
-          for (let p = t.captureLayer; p < t.nativeLayer; p++)
-            f.layers.enable(A.getCaptureLayer(p));
+          for (let v = t.captureLayer; v < t.nativeLayer; v++)
+            h.layers.enable(k.getCaptureLayer(v));
         else if (i && t.nativeLayer !== void 0)
-          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= U.MAX_LAYERS + 1; p++)
-            f.layers.enable(A.getCaptureLayer(p));
+          for (let v = Math.max(t.captureLayer, t.nativeLayer); v <= F.MAX_LAYERS + 1; v++)
+            h.layers.enable(k.getCaptureLayer(v));
         else
-          for (let p = t.captureLayer; p <= U.MAX_LAYERS + 1; p++)
-            f.layers.enable(A.getCaptureLayer(p));
+          for (let v = t.captureLayer; v <= F.MAX_LAYERS + 1; v++)
+            h.layers.enable(k.getCaptureLayer(v));
     });
   }
   updateMeshProperties(e, t) {
-    var B, F, X;
-    const { rect: i, styles: r } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
+    var x, w, B;
+    const { rect: i, styles: r } = t, o = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / o, c = this.renderer.domElement.height / o;
     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 o = 1e-3;
+    const a = 1e-3;
     this.renderOrder++;
-    const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY, f = i.x - l, y = i.y - d, p = f - n / 2 + i.width / 2, u = -y + a / 2 - i.height / 2;
+    const l = this.targetRect.left + window.scrollX, u = this.targetRect.top + window.scrollY;
+    let h, f;
+    if (this.isViewport)
+      h = i.x - window.innerWidth / 2 + i.width / 2, f = -i.y + window.innerHeight / 2 - i.height / 2;
+    else {
+      const M = i.x - l, O = i.y - u;
+      h = M - n / 2 + i.width / 2, f = -O + c / 2 - i.height / 2;
+    }
     e.position.set(
-      p,
-      u,
-      r.zIndex + this.renderOrder * o
+      h,
+      f,
+      r.zIndex + this.renderOrder * a
     );
-    const g = i.x, w = i.y;
-    e.userData.basePosition = { x: p, y: u }, e.userData.originalBasePosition = { x: p, y: u }, 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 R = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, L = window.getComputedStyle(R);
-    let E = 0, x = 0;
-    if (L.transform && L.transform !== "none") {
-      const D = new DOMMatrix(L.transform);
-      E = D.m41, x = D.m42;
+    const v = i.x, g = i.y;
+    e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: v, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const p = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(p);
+    let L = 0, R = 0;
+    if (E.transform && E.transform !== "none") {
+      const M = new DOMMatrix(E.transform);
+      L = M.m41, R = M.m42;
     }
-    if (e.userData.baseTransform = { x: E, y: x }, delete e.userData.originRatioX, delete e.userData.originRatioY, H.update(
+    if (e.userData.baseTransform = { x: L, y: R }, delete e.userData.originRatioX, delete e.userData.originRatioY, H.update(
       e.userData.baseMaterial,
       "BOX",
       r,
@@ -1012,94 +1027,104 @@ class rt {
       i.width,
       i.height,
       this.qualityFactor,
-      t.isTraveler ? (B = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : B.texture : this.textureManager.get(t.element)
+      t.isTraveler ? (x = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : x.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const q = H.create(
+        const A = H.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 ? (w = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : w.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), P = new b.Mesh(e.geometry, q);
-        t.type === "TEXT" && (P.name = "BG_MESH"), this.scene.add(P), e.userData.nativeMesh = P;
+        ), Y = new y.Mesh(e.geometry, A);
+        t.type === "TEXT" && (Y.name = "BG_MESH"), this.scene.add(Y), e.userData.nativeMesh = Y;
       }
-      const D = e.userData.nativeMesh, k = t.nativeRect.x - l, K = t.nativeRect.y - d, J = k - n / 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 * o
+      const M = e.userData.nativeMesh;
+      let O, _;
+      if (this.isViewport)
+        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, _ = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+      else {
+        const A = t.nativeRect.x - l, Y = t.nativeRect.y - u;
+        O = A - n / 2 + t.nativeRect.width / 2, _ = -Y + c / 2 - t.nativeRect.height / 2;
+      }
+      M.scale.set(t.nativeRect.width, t.nativeRect.height, 1), M.position.set(
+        O,
+        _,
+        t.nativeStyles.zIndex + this.renderOrder * a
       ), H.update(
-        D.material,
+        M.material,
         "BOX",
         t.nativeStyles,
         "",
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (X = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : X.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (B = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : B.texture : this.textureManager.get(t.element)
       );
     } else
-      e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof b.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 & V ? 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 i = t.visibility & W ? k.BASE : k.HIDDEN;
+    if (e.layers.set(i), t.visibility & j && e.layers.enable(k.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const r = e.userData.nativeMesh;
-      if (r.layers.set(A.HIDDEN), t.visibility & V) {
-        for (let c = t.captureLayer; c < t.nativeLayer; c++)
-          e.layers.enable(A.getCaptureLayer(c));
-        for (let c = Math.max(t.captureLayer, t.nativeLayer); c <= U.MAX_LAYERS + 1; c++)
-          r.layers.enable(A.getCaptureLayer(c));
+      if (r.layers.set(k.HIDDEN), t.visibility & W) {
+        for (let o = t.captureLayer; o < t.nativeLayer; o++)
+          e.layers.enable(k.getCaptureLayer(o));
+        for (let o = Math.max(t.captureLayer, t.nativeLayer); o <= F.MAX_LAYERS + 1; o++)
+          r.layers.enable(k.getCaptureLayer(o));
       }
-    } else if (t.visibility & V)
-      for (let r = t.captureLayer; r <= U.MAX_LAYERS + 1; r++)
-        e.layers.enable(A.getCaptureLayer(r));
+    } else if (t.visibility & W)
+      for (let r = t.captureLayer; r <= F.MAX_LAYERS + 1; r++)
+        e.layers.enable(k.getCaptureLayer(r));
   }
   captureRenderTarget(e, t, i) {
     if (e.size === 0 || !i)
       return;
-    const r = new b.Color(), c = this.renderer.getClearAlpha();
+    const r = new y.Color(), o = 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 n = new b.Vector3(), a = this.targetRect.width, o = this.targetRect.height, l = this.renderer.getPixelRatio();
-    for (const d of e) {
-      n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
-      const f = (n.x + 1) / 2 * a, y = (n.y + 1) / 2 * o;
-      let p = 0, u = 1;
-      typeof this.clipArea == "number" ? u = this.clipArea : this.clipArea.endsWith("%") ? u = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
-      const g = d.scale.x * u + 0.5, w = d.scale.y * u + 0.5, R = f - g / 2, L = y - w / 2, E = (R * this.qualityFactor - p) / l, x = (L * this.qualityFactor - p) / l, B = (g * this.qualityFactor + p * 2) / l, F = (w * this.qualityFactor + p * 2) / l;
-      this.renderer.setScissor(E, x, B, F), this.renderer.render(this.scene, this.camera);
+    const n = new y.Vector3(), c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, a = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
+    for (const u of e) {
+      n.setFromMatrixPosition(u.matrixWorld), n.project(this.camera);
+      const h = (n.x + 1) / 2 * c, f = (n.y + 1) / 2 * a;
+      let v = 0, g = 1;
+      typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (v = parseFloat(this.clipArea));
+      const p = u.scale.x * g + 0.5, E = u.scale.y * g + 0.5, L = h - p / 2, R = f - E / 2, x = (L * this.qualityFactor - v) / l, w = (R * this.qualityFactor - v) / l, B = (p * this.qualityFactor + v * 2) / l, M = (E * this.qualityFactor + v * 2) / l;
+      this.renderer.setScissor(x, w, B, M), 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, c);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, o);
   }
   render() {
-    for (let e = 0; e < U.MAX_LAYERS; e++) {
+    for (let e = 0; e < F.MAX_LAYERS; e++) {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        A.getCaptureLayer(t),
+        k.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
     this.renderer.render(this.scene, this.camera);
   }
+  updateCameraScroll(e, t) {
+    this.isViewport && (this.camera.position.x = e, this.camera.position.y = -t, this.camera.updateMatrixWorld());
+  }
 }
-function it(s) {
+function st(s) {
   const e = s.textContent || "", t = [];
-  let i = "", r = null, c = -1;
-  const n = (l, d) => {
-    for (let f = 0; f < l.length; f++) {
-      const y = l[f], p = document.createRange();
-      p.setStart(s, d + f), p.setEnd(s, d + f + 1);
-      const u = p.getBoundingClientRect();
-      if (u.width === 0 && u.height === 0) {
-        i += y;
+  let i = "", r = null, o = -1;
+  const n = (l, u) => {
+    for (let h = 0; h < l.length; h++) {
+      const f = l[h], v = document.createRange();
+      v.setStart(s, u + h), v.setEnd(s, u + h + 1);
+      const g = v.getBoundingClientRect();
+      if (g.width === 0 && g.height === 0) {
+        i += f;
         continue;
       }
-      c === -1 || Math.abs(u.top - c) > u.height / 2 ? (i && r && t.push({
+      o === -1 || Math.abs(g.top - o) > g.height / 2 ? (i && r && t.push({
         text: i,
         rect: {
           left: r.left,
@@ -1107,31 +1132,31 @@ function it(s) {
           width: r.right - r.left,
           height: r.bottom - r.top
         }
-      }), i = y, r = {
-        left: u.left,
-        top: u.top,
-        right: u.right,
-        bottom: u.bottom
-      }, c = u.top) : (i += y, r && (r.left = Math.min(r.left, u.left), r.top = Math.min(r.top, u.top), r.right = Math.max(r.right, u.right), r.bottom = Math.max(
+      }), i = f, r = {
+        left: g.left,
+        top: g.top,
+        right: g.right,
+        bottom: g.bottom
+      }, o = g.top) : (i += f, r && (r.left = Math.min(r.left, g.left), r.top = Math.min(r.top, g.top), r.right = Math.max(r.right, g.right), r.bottom = Math.max(
         r.bottom,
-        u.bottom
+        g.bottom
       )));
     }
-  }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-  let o = 0;
-  for (const l of a) {
-    const d = document.createRange();
-    d.setStart(s, o), d.setEnd(s, o + l.length);
-    const f = d.getClientRects();
-    if (f.length > 1)
-      n(l, o);
+  }, c = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+  let a = 0;
+  for (const l of c) {
+    const u = document.createRange();
+    u.setStart(s, a), u.setEnd(s, a + l.length);
+    const h = u.getClientRects();
+    if (h.length > 1)
+      n(l, a);
     else {
-      const y = f.length === 1 ? f[0] : d.getBoundingClientRect();
-      if (y.width === 0 && y.height === 0) {
-        i += l, o += l.length;
+      const f = h.length === 1 ? h[0] : u.getBoundingClientRect();
+      if (f.width === 0 && f.height === 0) {
+        i += l, a += l.length;
         continue;
       }
-      c === -1 || Math.abs(y.top - c) > y.height / 2 ? (i && r && t.push({
+      o === -1 || Math.abs(f.top - o) > f.height / 2 ? (i && r && t.push({
         text: i,
         rect: {
           left: r.left,
@@ -1140,16 +1165,16 @@ function it(s) {
           height: r.bottom - r.top
         }
       }), i = l, r = {
-        left: y.left,
-        top: y.top,
-        right: y.right,
-        bottom: y.bottom
-      }, c = y.top) : (i += l, r && (r.left = Math.min(r.left, y.left), r.top = Math.min(r.top, y.top), r.right = Math.max(r.right, y.right), r.bottom = Math.max(
+        left: f.left,
+        top: f.top,
+        right: f.right,
+        bottom: f.bottom
+      }, o = f.top) : (i += l, r && (r.left = Math.min(r.left, f.left), r.top = Math.min(r.top, f.top), r.right = Math.max(r.right, f.right), r.bottom = Math.max(
         r.bottom,
-        y.bottom
+        f.bottom
       )));
     }
-    o += l.length;
+    a += l.length;
   }
   return i && r && t.push({
     text: i,
@@ -1179,8 +1204,8 @@ function Me(s) {
     letterSpacing: i
   };
 }
-function Be(s, e = j | ae | Ve | be | ye, t, i = 1, r = 0, c = 2, n, a) {
-  var P, te, re, ie, se, ne;
+function Oe(s, e = q | ne | We | ye | ve, t, i = 1, r = 0, o = 2, n, c) {
+  var Q, Z, ee, te, re, ie;
   if (s.nodeType === Node.TEXT_NODE) {
     const m = s;
     if (!m.textContent || !m.textContent.trim())
@@ -1188,22 +1213,22 @@ function Be(s, e = j | ae | Ve | be | ye, t, i = 1, r = 0, c = 2, n, a) {
     const T = m.textContent.replace(/\s+/g, " ");
     if (T.length === 0)
       return null;
-    const M = it(m);
-    if (M.length === 0)
+    const D = st(m);
+    if (D.length === 0)
       return null;
     const I = m.parentElement, S = I ? window.getComputedStyle(I) : null;
     if (!S)
       return null;
-    const O = Math.min(...M.map((v) => v.rect.left)), C = Math.min(...M.map((v) => v.rect.top)), _ = Math.max(...M.map((v) => v.rect.left + v.rect.width)), W = Math.max(...M.map((v) => v.rect.top + v.rect.height));
+    const U = Math.min(...D.map((b) => b.rect.left)), C = Math.min(...D.map((b) => b.rect.top)), z = Math.max(...D.map((b) => b.rect.left + b.rect.width)), P = Math.max(...D.map((b) => b.rect.top + b.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: m,
       rect: {
-        x: O + window.scrollX,
+        x: U + window.scrollX,
         y: C + window.scrollY,
-        width: _ - O,
-        height: W - C
+        width: z - U,
+        height: P - C
       },
       styles: {
         backgroundColor: "transparent",
@@ -1216,13 +1241,13 @@ function Be(s, e = j | ae | Ve | be | ye, t, i = 1, r = 0, c = 2, n, a) {
         isTraveler: !1
       },
       textContent: T,
-      textLines: M.map((v) => ({
-        text: v.text.trim(),
+      textLines: D.map((b) => ({
+        text: b.text.trim(),
         rect: {
-          x: v.rect.left + window.scrollX,
-          y: v.rect.top + window.scrollY,
-          width: v.rect.width,
-          height: v.rect.height
+          x: b.rect.left + window.scrollX,
+          y: b.rect.top + window.scrollY,
+          width: b.rect.width,
+          height: b.rect.height
         }
       })),
       textStyles: Me(S),
@@ -1232,7 +1257,7 @@ function Be(s, e = j | ae | Ve | be | ye, t, i = 1, r = 0, c = 2, n, a) {
       captureLayer: i,
       isFixed: S.position === "fixed",
       nativeLayer: n,
-      nativeStyles: a ? G(G({
+      nativeStyles: c ? G(G({
         backgroundColor: "transparent",
         backgroundImage: "",
         opacity: I && I.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(S.opacity),
@@ -1241,20 +1266,20 @@ function Be(s, e = j | ae | Ve | be | ye, t, i = 1, r = 0, c = 2, n, a) {
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, Me(S)), a) : void 0,
-      nativeRect: a ? {
-        x: O + window.scrollX,
+      }, Me(S)), c) : void 0,
+      nativeRect: c ? {
+        x: U + window.scrollX,
         y: C + window.scrollY,
-        width: _ - O,
-        height: W - C
+        width: z - U,
+        height: P - C
       } : void 0,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const o = s, l = o.dataset[N.KEY];
-  let d = t, f = t;
+  const a = s, l = a.dataset[N.KEY];
+  let u = t, h = t;
   if (l) {
     const m = new Set(l.split(/\s+/));
     for (const T of m)
@@ -1272,233 +1297,233 @@ function Be(s, e = j | ae | Ve | be | ye, t, i = 1, r = 0, c = 2, n, a) {
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(N.VALUES.INCLUDE_TREE) ? d = d | V : m.has(N.VALUES.EXCLUDE_TREE) && (d = d & ~V), f = d, m.has(N.VALUES.INCLUDE_SELF) ? f = f | V : m.has(N.VALUES.EXCLUDE_SELF) && (f = f & ~V);
+    m.has(N.VALUES.INCLUDE_TREE) ? u = u | W : m.has(N.VALUES.EXCLUDE_TREE) && (u = u & ~W), h = u, m.has(N.VALUES.INCLUDE_SELF) ? h = h | W : m.has(N.VALUES.EXCLUDE_SELF) && (h = h & ~W);
   }
-  const y = o.dataset[Y.KEY];
-  if (y) {
-    const m = new Set(y.split(/\s+/));
+  const f = a.dataset[V.KEY];
+  if (f) {
+    const m = new Set(f.split(/\s+/));
     for (const T of m)
       if (!Le.includes(T))
         throw new Error(
           `[MirageEngine] Invalid select token: '${T}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(Y.VALUES.END))
+    if (m.has(V.VALUES.END))
       return null;
-    if (m.has(Y.VALUES.INCLUDE_TREE) && m.has(Y.VALUES.EXCLUDE_TREE))
+    if (m.has(V.VALUES.INCLUDE_TREE) && m.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(Y.VALUES.INCLUDE_SELF) && m.has(Y.VALUES.EXCLUDE_SELF))
+    if (m.has(V.VALUES.INCLUDE_SELF) && m.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(Y.VALUES.INCLUDE_TREE) ? d = d | Z : m.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~Z), f = d, m.has(Y.VALUES.INCLUDE_SELF) ? f = f | Z : m.has(Y.VALUES.EXCLUDE_SELF) && (f = f & ~Z);
+    m.has(V.VALUES.INCLUDE_TREE) ? u = u | j : m.has(V.VALUES.EXCLUDE_TREE) && (u = u & ~j), h = u, m.has(V.VALUES.INCLUDE_SELF) ? h = h | j : m.has(V.VALUES.EXCLUDE_SELF) && (h = h & ~j);
   }
-  const p = o.dataset[U.KEY];
-  let u = !1, g = a ? G({}, a) : {}, w = n;
-  if (p) {
+  const v = a.dataset[F.KEY];
+  let g = !1, p = c ? G({}, c) : {}, E = n;
+  if (v) {
     let m = 1;
-    const T = p.indexOf("{"), M = p.lastIndexOf("}");
-    let I = p;
-    if (T !== -1 && M !== -1 && M > T) {
-      I = p.substring(0, T).trim();
-      const C = p.substring(T, M + 1);
+    const T = v.indexOf("{"), D = v.lastIndexOf("}");
+    let I = v;
+    if (T !== -1 && D !== -1 && D > T) {
+      I = v.substring(0, T).trim();
+      const C = v.substring(T, D + 1);
       try {
-        g = new Function("return " + C)();
-      } catch (_) {
+        p = new Function("return " + C)();
+      } catch (z) {
         console.warn(
           `[MirageEngine] Failed to parse travel styles JSON: ${C}`
         );
       }
     }
     const S = I.split(/\s+/);
-    let O = !1;
-    if (S.includes(U.VALUES.TRAVELER)) {
-      u = !0, O = !0;
-      const C = S.find((_) => !isNaN(parseInt(_, 10)));
+    let U = !1;
+    if (S.includes(F.VALUES.TRAVELER)) {
+      g = !0, U = !0;
+      const C = S.find((z) => !isNaN(parseInt(z, 10)));
       C && (m = parseInt(C, 10));
-    } else if (S.includes(U.VALUES.NATIVE)) {
-      u = !1;
-      const C = S.find((_) => !isNaN(parseInt(_, 10)));
-      C && (w = parseInt(C, 10));
+    } else if (S.includes(F.VALUES.NATIVE)) {
+      g = !1;
+      const C = S.find((z) => !isNaN(parseInt(z, 10)));
+      C && (E = parseInt(C, 10));
     }
-    if (O) {
+    if (U) {
       const C = m + 1;
       if (C < i)
         throw new Error(
           `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${i - 1}).`
         );
-      i = Math.min(C, U.MAX_LAYERS + 1);
+      i = Math.min(C, F.MAX_LAYERS + 1);
     }
   }
-  const R = o.dataset[Ye.KEY];
-  let L;
-  R && (L = JSON.parse(R));
-  const E = o.getBoundingClientRect(), x = window.getComputedStyle(o);
-  if (E.width === 0 || E.height === 0 || x.display === "none")
+  const L = a.dataset[Ve.KEY];
+  let R;
+  L && (R = JSON.parse(L));
+  const x = a.getBoundingClientRect(), w = window.getComputedStyle(a);
+  if (x.width === 0 || x.height === 0 || w.display === "none")
     return null;
-  let B = o.getAttribute("data-mid");
-  B || (B = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", B));
-  const F = parseInt(x.zIndex), X = (isNaN(F) ? 0 : F) + r;
-  let D;
-  if (o.tagName === "IMG")
-    D = o.src;
-  else if (o.tagName.toLowerCase() === "svg") {
-    const m = o.cloneNode(!0), T = g == null ? void 0 : g.color, M = g == null ? void 0 : g.fill, I = g == null ? void 0 : g.stroke, S = g == null ? void 0 : g.opacity, O = (v, xe) => {
-      const z = window.getComputedStyle(v), oe = xe, Oe = z.fill === z.color, Ue = z.stroke === z.color, de = M || (Oe ? T : void 0) || z.fill;
-      de && de !== "none" && (oe.style.fill = de);
-      const ue = I || (Ue ? T : void 0) || z.stroke;
-      ue && ue !== "none" && (oe.style.stroke = ue), z.strokeWidth && z.strokeWidth !== "0px" && (oe.style.strokeWidth = z.strokeWidth);
-      const Ee = T || z.color;
-      Ee && (oe.style.color = Ee);
-      const fe = S || z.opacity;
-      fe && fe !== "1" && (oe.style.opacity = fe);
-      for (let le = 0; le < v.children.length; le++)
-        O(v.children[le], xe.children[le]);
+  let B = a.getAttribute("data-mid");
+  B || (B = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", B));
+  const M = parseInt(w.zIndex), O = (isNaN(M) ? 0 : M) + r;
+  let _;
+  if (a.tagName === "IMG")
+    _ = a.src;
+  else if (a.tagName.toLowerCase() === "svg") {
+    const m = a.cloneNode(!0), T = p == null ? void 0 : p.color, D = p == null ? void 0 : p.fill, I = p == null ? void 0 : p.stroke, S = p == null ? void 0 : p.opacity, U = (b, we) => {
+      const X = window.getComputedStyle(b), se = we, Ue = X.fill === X.color, Fe = X.stroke === X.color, de = D || (Ue ? T : void 0) || X.fill;
+      de && de !== "none" && (se.style.fill = de);
+      const ue = I || (Fe ? T : void 0) || X.stroke;
+      ue && ue !== "none" && (se.style.stroke = ue), X.strokeWidth && X.strokeWidth !== "0px" && (se.style.strokeWidth = X.strokeWidth);
+      const xe = T || X.color;
+      xe && (se.style.color = xe);
+      const fe = S || X.opacity;
+      fe && fe !== "1" && (se.style.opacity = fe);
+      for (let le = 0; le < b.children.length; le++)
+        U(b.children[le], we.children[le]);
     };
-    O(o, m);
-    const C = o.getBoundingClientRect(), _ = window.devicePixelRatio * c;
-    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${C.width} ${C.height}`), m.setAttribute("width", (C.width * _).toString()), m.setAttribute("height", (C.height * _).toString());
-    let W = new XMLSerializer().serializeToString(m);
-    W.includes("xmlns=") || (W = W.replace(
+    U(a, m);
+    const C = a.getBoundingClientRect(), z = window.devicePixelRatio * o;
+    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${C.width} ${C.height}`), m.setAttribute("width", (C.width * z).toString()), m.setAttribute("height", (C.height * z).toString());
+    let P = new XMLSerializer().serializeToString(m);
+    P.includes("xmlns=") || (P = P.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]);
-  }
-  const k = {
-    backgroundColor: x.backgroundColor,
-    backgroundImage: x.backgroundImage,
-    opacity: o.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(x.opacity),
-    zIndex: X,
-    borderRadius: x.borderRadius,
-    borderColor: x.borderColor,
-    borderWidth: x.borderWidth,
-    imageSrc: D,
-    isTraveler: u
-  }, K = k;
-  let J, Q;
-  const q = [];
-  return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((m) => {
-    const T = m.nodeType === Node.TEXT_NODE ? f : d, M = Be(
+    )), _ = `data:image/svg+xml;utf8,${encodeURIComponent(P)}`;
+  } else if (w.backgroundImage && w.backgroundImage !== "none") {
+    const m = w.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    m && (_ = m[1]);
+  }
+  const A = {
+    backgroundColor: w.backgroundColor,
+    backgroundImage: w.backgroundImage,
+    opacity: a.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(w.opacity),
+    zIndex: O,
+    borderRadius: w.borderRadius,
+    borderColor: w.borderColor,
+    borderWidth: w.borderWidth,
+    imageSrc: _,
+    isTraveler: g
+  }, Y = A;
+  let ae, ce;
+  const J = [];
+  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((m) => {
+    const T = m.nodeType === Node.TEXT_NODE ? h : u, D = Oe(
       m,
       e,
       T,
       i,
-      X,
-      c,
-      w,
-      m.nodeType === Node.TEXT_NODE && Object.keys(g).length > 0 ? g : void 0
+      O,
+      o,
+      E,
+      m.nodeType === Node.TEXT_NODE && Object.keys(p).length > 0 ? p : void 0
     );
-    M && q.push(M);
+    D && J.push(D);
   }), {
     id: B,
     type: "BOX",
-    element: o,
+    element: a,
     rect: {
-      x: E.left + window.scrollX,
-      y: E.top + window.scrollY,
-      width: E.width,
-      height: E.height
+      x: x.left + window.scrollX,
+      y: x.top + window.scrollY,
+      width: x.width,
+      height: x.height
     },
-    styles: K,
-    textContent: J,
-    textStyles: Q,
+    styles: Y,
+    textContent: ae,
+    textStyles: ce,
     dirtyMask: e,
-    visibility: f,
-    isTraveler: u,
+    visibility: h,
+    isTraveler: g,
     captureLayer: i,
-    nativeLayer: w,
-    nativeStyles: w !== void 0 ? pe(G({}, k), {
-      backgroundColor: (P = g.backgroundColor) != null ? P : k.backgroundColor,
-      backgroundImage: (te = g.backgroundImage) != null ? te : k.backgroundImage,
-      opacity: (re = g.opacity) != null ? re : k.opacity,
-      zIndex: g.zIndex !== void 0 ? g.zIndex + X : k.zIndex,
-      borderRadius: (ie = g.borderRadius) != null ? ie : k.borderRadius,
-      borderColor: (se = g.borderColor) != null ? se : k.borderColor,
-      borderWidth: (ne = g.borderWidth) != null ? ne : k.borderWidth,
-      isTraveler: k.isTraveler
+    nativeLayer: E,
+    nativeStyles: E !== void 0 ? pe(G({}, A), {
+      backgroundColor: (Q = p.backgroundColor) != null ? Q : A.backgroundColor,
+      backgroundImage: (Z = p.backgroundImage) != null ? Z : A.backgroundImage,
+      opacity: (ee = p.opacity) != null ? ee : A.opacity,
+      zIndex: p.zIndex !== void 0 ? p.zIndex + O : A.zIndex,
+      borderRadius: (te = p.borderRadius) != null ? te : A.borderRadius,
+      borderColor: (re = p.borderColor) != null ? re : A.borderColor,
+      borderWidth: (ie = p.borderWidth) != null ? ie : A.borderWidth,
+      isTraveler: A.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: p.x !== void 0 ? parseFloat(p.x) : x.left + window.scrollX,
+      y: p.y !== void 0 ? parseFloat(p.y) : x.top + window.scrollY,
+      width: p.width !== void 0 ? parseFloat(p.width) : x.width,
+      height: p.height !== void 0 ? parseFloat(p.height) : x.height
     } : void 0,
-    isFixed: x.position === "fixed",
-    children: q,
-    shaderHooks: L
+    isFixed: w.position === "fixed",
+    children: J,
+    shaderHooks: R
   };
 }
-function st(s, e) {
+function nt(s, e) {
   e.size !== 0 && e.forEach((t, i) => {
-    var B, F, X, D, k, K, J, Q, q, P, te, re, ie, se, ne, m, T, M;
+    var B, M, O, _, A, Y, ae, ce, J, Q, Z, ee, te, re, ie, m, T, D;
     const r = s.get(i);
     if (!r || !r.userData.basePosition)
       return;
-    let { x: c, y: n } = r.userData.basePosition;
-    const { width: a, height: o } = r.userData.baseSize, l = (B = t.width) != null ? B : a, d = (F = t.height) != null ? F : o, f = l - a, y = d - o;
-    if (t.width !== void 0 && r.userData.originRatioX === void 0 && Math.abs(f) > 0.1) {
-      const I = i.getBoundingClientRect(), S = (X = t.x) != null ? X : 0, O = (k = (D = r.userData.baseTransform) == null ? void 0 : D.x) != null ? k : 0, C = r.userData.isFixed ? 0 : window.scrollX;
-      let v = -(I.left + C - S + O - r.userData.baseDOM.x) / f;
-      Math.abs(v) < 0.05 ? v = 0 : Math.abs(v - 1) < 0.05 ? v = 1 : Math.abs(v - 0.5) < 0.05 && (v = 0.5), r.userData.originRatioX = v;
+    let { x: o, y: n } = r.userData.basePosition;
+    const { width: c, height: a } = r.userData.baseSize, l = (B = t.width) != null ? B : c, u = (M = t.height) != null ? M : a, h = l - c, f = u - a;
+    if (t.width !== void 0 && r.userData.originRatioX === void 0 && Math.abs(h) > 0.1) {
+      const I = i.getBoundingClientRect(), S = (O = t.x) != null ? O : 0, U = (A = (_ = r.userData.baseTransform) == null ? void 0 : _.x) != null ? A : 0, C = r.userData.isFixed ? 0 : window.scrollX;
+      let b = -(I.left + C - S + U - r.userData.baseDOM.x) / h;
+      Math.abs(b) < 0.05 ? b = 0 : Math.abs(b - 1) < 0.05 ? b = 1 : Math.abs(b - 0.5) < 0.05 && (b = 0.5), r.userData.originRatioX = b;
     }
-    if (t.height !== void 0 && r.userData.originRatioY === void 0 && Math.abs(y) > 0.1) {
-      const I = i.getBoundingClientRect(), S = (K = t.y) != null ? K : 0, O = (Q = (J = r.userData.baseTransform) == null ? void 0 : J.y) != null ? Q : 0, C = r.userData.isFixed ? 0 : window.scrollY;
-      let v = -(I.top + C - S + O - r.userData.baseDOM.y) / y;
-      Math.abs(v) < 0.05 ? v = 0 : Math.abs(v - 1) < 0.05 ? v = 1 : Math.abs(v - 0.5) < 0.05 && (v = 0.5), r.userData.originRatioY = v;
+    if (t.height !== void 0 && r.userData.originRatioY === void 0 && Math.abs(f) > 0.1) {
+      const I = i.getBoundingClientRect(), S = (Y = t.y) != null ? Y : 0, U = (ce = (ae = r.userData.baseTransform) == null ? void 0 : ae.y) != null ? ce : 0, C = r.userData.isFixed ? 0 : window.scrollY;
+      let b = -(I.top + C - S + U - r.userData.baseDOM.y) / f;
+      Math.abs(b) < 0.05 ? b = 0 : Math.abs(b - 1) < 0.05 ? b = 1 : Math.abs(b - 0.5) < 0.05 && (b = 0.5), r.userData.originRatioY = b;
     }
-    const p = (q = r.userData.originRatioX) != null ? q : 0.5, u = (P = r.userData.originRatioY) != null ? P : 0.5, g = f * (0.5 - p), w = y * (0.5 - u), R = (re = (te = r.userData.baseTransform) == null ? void 0 : te.x) != null ? re : 0, L = (se = (ie = r.userData.baseTransform) == null ? void 0 : ie.y) != null ? se : 0, E = ((ne = t.x) != null ? ne : R) - R, x = ((m = t.y) != null ? m : L) - L;
-    r.position.setX(c + g + E), r.position.setY(n - (w + x)), r.scale.set(l, d, 1), H.forceUpdateUniforms(r.material, {
+    const v = (J = r.userData.originRatioX) != null ? J : 0.5, g = (Q = r.userData.originRatioY) != null ? Q : 0.5, p = h * (0.5 - v), E = f * (0.5 - g), L = (ee = (Z = r.userData.baseTransform) == null ? void 0 : Z.x) != null ? ee : 0, R = (re = (te = r.userData.baseTransform) == null ? void 0 : te.y) != null ? re : 0, x = ((ie = t.x) != null ? ie : L) - L, w = ((m = t.y) != null ? m : R) - R;
+    r.position.setX(o + p + x), r.position.setY(n - (E + w)), r.scale.set(l, u, 1), H.forceUpdateUniforms(r.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,
+      borderRadius: (D = t.borderRadius) != null ? D : (T = r.userData.baseStyles) == null ? void 0 : T.borderRadius,
       width: l,
-      height: d
+      height: u
     });
   });
 }
-function nt(s, e, t) {
+function De(s, e, t) {
   s.forEach((i) => {
     if (i.userData.isFixed && i.userData.initialScroll && i.userData.originalBasePosition) {
-      const r = e - i.userData.initialScroll.x, c = t - i.userData.initialScroll.y;
-      i.userData.basePosition.x = i.userData.originalBasePosition.x + r, i.userData.basePosition.y = i.userData.originalBasePosition.y - c, i.position.x = i.userData.basePosition.x, i.position.y = i.userData.basePosition.y;
+      const r = e - i.userData.initialScroll.x, o = t - i.userData.initialScroll.y;
+      i.userData.basePosition.x = i.userData.originalBasePosition.x + r, i.userData.basePosition.y = i.userData.originalBasePosition.y - o, i.position.x = i.userData.basePosition.x, i.position.y = i.userData.basePosition.y;
     }
   });
 }
 class ot {
   constructor(e, t, i, r) {
-    h(this, "target");
-    h(this, "renderer");
-    h(this, "registry");
-    h(this, "isTravelEnabled", !1);
-    h(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = i, this.tracker = new Ae(e, {
+    d(this, "target");
+    d(this, "renderer");
+    d(this, "registry");
+    d(this, "isTravelEnabled", !1);
+    d(this, "tracker");
+    this.target = e, this.renderer = t, this.registry = i, this.tracker = new ke(e, {
       resizeDebounce: r.resizeDebounce
-    }), this.tracker.onLayoutChange.add((c, n) => {
-      document.querySelector(`[${U.NAME}~='${U.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const o = Be(
+    }), this.tracker.onLayoutChange.add((o, n) => {
+      document.querySelector(`[${F.NAME}~='${F.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const a = Oe(
         this.target,
-        c,
-        V,
+        o,
+        W,
         1,
         0,
         this.renderer.qualityFactor
       );
-      o && this.renderer.syncScene(o, n);
-    }), this.tracker.onScrollChange.add((c, n) => {
-      nt(this.renderer.fixedMeshes, c, n);
-    }), this.tracker.onStyleChange.add((c) => {
-      st(this.registry, c);
+      a && this.renderer.syncScene(a, n);
+    }), this.tracker.onScrollChange.add((o, n) => {
+      De(this.renderer.fixedMeshes, o, n), this.renderer.updateCameraScroll(o, n);
+    }), this.tracker.onStyleChange.add((o) => {
+      nt(this.registry, o);
     }), this.tracker.onRender.add(() => {
       this.renderer.render();
     });
   }
   start() {
-    this.tracker.start();
+    this.tracker.start(), De(this.renderer.fixedMeshes, window.scrollX, window.scrollY), this.renderer.updateCameraScroll(window.scrollX, window.scrollY);
   }
   stop() {
     this.tracker.stop();
@@ -1506,7 +1531,7 @@ class ot {
 }
 class at {
   constructor() {
-    h(this, "store");
+    d(this, "store");
     this.store = /* @__PURE__ */ new WeakMap();
   }
   register(e, t) {
@@ -1531,23 +1556,23 @@ class at {
 }
 class ct {
   constructor(e, t) {
-    h(this, "renderer");
-    h(this, "syncer");
-    h(this, "target");
-    h(this, "registry");
-    var r, c, n;
+    d(this, "renderer");
+    d(this, "syncer");
+    d(this, "target");
+    d(this, "registry");
+    var r, o, n;
     if (this.target = e, this.registry = new at(), !document.getElementById("mirage-engine-styles")) {
-      const a = document.createElement("style");
-      a.id = "mirage-engine-styles", a.textContent = `
+      const c = document.createElement("style");
+      c.id = "mirage-engine-styles", c.textContent = `
         [${$.NAME}="${$.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
-      `, document.head.appendChild(a);
+      `, document.head.appendChild(c);
     }
     let i;
-    if (t.mode === "duplicate" ? i = (c = (r = t.container) != null ? r : this.target.parentElement) != null ? c : void 0 : i = (n = this.target.parentElement) != null ? n : void 0, !i)
+    if (t.mode === "duplicate" ? i = (o = (r = t.container) != null ? r : this.target.parentElement) != null ? o : void 0 : i = (n = this.target.parentElement) != null ? n : void 0, !i)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new rt(
+    this.renderer = new it(
       this.target,
       t,
       i,
@@ -1584,10 +1609,10 @@ class ct {
       ArrowUp: !1,
       ArrowDown: !1
     };
-    window.addEventListener("keydown", (c) => {
-      t[c.key] !== void 0 && (t[c.key] = !0);
-    }), window.addEventListener("keyup", (c) => {
-      t[c.key] !== void 0 && (t[c.key] = !1);
+    window.addEventListener("keydown", (o) => {
+      t[o.key] !== void 0 && (t[o.key] = !0);
+    }), window.addEventListener("keyup", (o) => {
+      t[o.key] !== void 0 && (t[o.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);
@@ -1597,14 +1622,14 @@ class ct {
 }
 class lt {
   constructor(e = {}) {
-    h(this, "frontSelector");
-    h(this, "midLayerElement");
-    h(this, "items", []);
-    h(this, "isInitialized", !1);
-    h(this, "midLayer", null);
-    h(this, "frontLayer", null);
-    h(this, "tracker", null);
-    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new Ae(document.body, e.trackerConfig || { resizeDebounce: !0 });
+    d(this, "frontSelector");
+    d(this, "midLayerElement");
+    d(this, "items", []);
+    d(this, "isInitialized", !1);
+    d(this, "midLayer", null);
+    d(this, "frontLayer", null);
+    d(this, "tracker", null);
+    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new ke(document.body, e.trackerConfig || { resizeDebounce: !0 });
   }
   init() {
     var e;
@@ -1634,8 +1659,8 @@ class lt {
     const e = document.querySelectorAll(this.frontSelector);
     this.frontLayer && e.forEach((t) => {
       var n;
-      const i = t.getBoundingClientRect(), r = window.getComputedStyle(t), c = document.createElement("div");
-      c.className = "sand-placeholder", Object.assign(c.style, {
+      const i = t.getBoundingClientRect(), r = window.getComputedStyle(t), o = document.createElement("div");
+      o.className = "sand-placeholder", Object.assign(o.style, {
         display: r.display === "inline" ? "inline-block" : r.display,
         width: `${i.width}px`,
         height: `${i.height}px`,
@@ -1646,14 +1671,14 @@ class lt {
         marginRight: r.marginRight,
         visibility: "hidden",
         pointerEvents: "none"
-      }), (n = t.parentNode) == null || n.insertBefore(c, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
+      }), (n = t.parentNode) == null || n.insertBefore(o, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
         position: "fixed",
         margin: "0",
         boxSizing: "border-box",
         width: `${i.width}px`,
         height: `${i.height}px`,
         pointerEvents: "auto"
-      }), this.items.push({ placeholder: c, original: t });
+      }), this.items.push({ placeholder: o, original: t });
     });
   }
   setupHooks() {
@@ -1668,8 +1693,8 @@ class lt {
 }
 class dt {
   constructor(e, t) {
-    h(this, "_engine");
-    h(this, "_sandwich");
+    d(this, "_engine");
+    d(this, "_sandwich");
     if (!e)
       throw new Error("[Mirage] Target element is required.");
     if (this._engine = new ct(e, t), t.sandwich !== !1) {