mirage-engine 0.3.13 → 0.3.14

package/dist/mirage-engine.js

@@ -1,13 +1,13 @@
 var Oe = Object.defineProperty, _e = Object.defineProperties;
 var Ne = Object.getOwnPropertyDescriptors;
 var we = Object.getOwnPropertySymbols;
-var ze = Object.prototype.hasOwnProperty, Xe = Object.prototype.propertyIsEnumerable;
-var me = (s, e, t) => e in s ? Oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, j = (s, e) => {
+var Xe = Object.prototype.hasOwnProperty, ze = Object.prototype.propertyIsEnumerable;
+var me = (s, e, t) => e in s ? Oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, J = (s, e) => {
   for (var t in e || (e = {}))
-    ze.call(e, t) && me(s, t, e[t]);
+    Xe.call(e, t) && me(s, t, e[t]);
   if (we)
     for (var t of we(e))
-      Xe.call(e, t) && me(s, t, e[t]);
+      ze.call(e, t) && me(s, t, e[t]);
   return s;
 }, xe = (s, e) => _e(s, Ne(e));
 var u = (s, e, t) => (me(s, typeof e != "symbol" ? e + "" : e, t), t);
@@ -34,7 +34,7 @@ const Ae = {
   INCLUDE_SELF: "include-self",
   EXCLUDE_SELF: "exclude-self",
   END: "end"
-}, q = {
+}, K = {
   NAME: "data-mirage-dom",
   KEY: "mirageDom",
   VALUES: {
@@ -59,11 +59,11 @@ const Ae = {
   KEY: "mirageTravel",
   VALUES: Ce,
   MAX_LAYERS: Object.keys(Ce).length - 1
-}, V = {
+}, W = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
   VALUES: Ae
-}, P = {
+}, G = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
   VALUES: Ae
@@ -76,7 +76,7 @@ const Ae = {
   VALUES: {
     FRONT: "front"
   }
-}, de = 0, K = 1, ce = 2, Ye = 4, ue = 8, ve = 16;
+}, de = 0, Q = 1, ce = 2, Ye = 4, ue = 8, ve = 16;
 function We(s) {
   const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
   return e ? {
@@ -120,7 +120,7 @@ class De {
     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 |= K | ce, this.cssTimer = window.setTimeout(() => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= Q | ce, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
@@ -139,7 +139,7 @@ class De {
       this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = de);
       const e = window.scrollX, t = window.scrollY;
       (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 |= K, this.isDomDirty = !0, this.scrollTimer = null;
+        this.pendingMask |= Q, 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 i, l;
@@ -159,13 +159,13 @@ class De {
           });
         else if (o.type === "attributes")
           if (o.attributeName === "style") {
-            a |= K | ce;
+            a |= Q | ce;
             const c = o.target, d = He(c.style);
             this.pendingStyles.set(c, d);
           } else
-            o.attributeName === "class" ? a |= K | ce : o.attributeName && o.attributeName.startsWith("data-") && (a |= K | ce, o.attributeName.startsWith("data-mirage") && (a |= ue));
+            o.attributeName === "class" ? a |= Q | ce : o.attributeName && o.attributeName.startsWith("data-") && (a |= Q | ce, o.attributeName.startsWith("data-mirage") && (a |= ue));
         else
-          o.type === "characterData" && (a |= ve | K);
+          o.type === "characterData" && (a |= ve | Q);
       if (a !== de) {
         if (this.pendingMask |= a, a & ue) {
           this.clearTimers(), this.isDomDirty = !0;
@@ -192,12 +192,12 @@ class De {
     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 W = 1, te = 2, B = {
+const H = 1, ie = 2, I = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Te = Object.values(V.VALUES);
+}, Te = Object.values(W.VALUES);
 class ke {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
@@ -257,16 +257,16 @@ class Pe extends y.MeshBasicMaterial {
     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(o, 0, 0, o, 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), g = r.lineHeight, v = ke.getBaseline(r.font);
     h.forEach((p, m) => {
-      const w = m * g + v;
-      let L = 0;
-      r.textAlign === "center" ? L = i / 2 : r.textAlign === "right" && (L = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(p, L, w);
+      const E = m * g + v;
+      let M = 0;
+      r.textAlign === "center" ? M = i / 2 : r.textAlign === "right" && (M = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(p, M, E);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function re(s, e = 0) {
+function se(s, e = 0) {
   if (typeof s == "number")
     return s;
   const t = parseFloat(s) || 0;
@@ -512,43 +512,43 @@ baseColor = blendSrcOver(baseColor, texColor);`, Re = {
   baseColorChunk: Qe
 };
 function Ze(s, e, t, r = null, i) {
-  var E;
+  var C;
   const l = r !== null || !!s.imageSrc;
   let n = "";
   const a = {};
   if (i != null && i.uniforms)
-    for (const [S, x] of Object.entries(i.uniforms))
-      typeof x == "number" ? (n += `uniform float ${S};
-`, a[S] = { value: x }) : Array.isArray(x) ? x.length === 2 ? (n += `uniform vec2 ${S};
-`, a[S] = { value: new y.Vector2(...x) }) : x.length === 3 ? (n += `uniform vec3 ${S};
-`, a[S] = { value: new y.Vector3(...x) }) : x.length === 4 && (n += `uniform vec4 ${S};
-`, a[S] = { value: new y.Vector4(...x) }) : (n += `uniform float ${S};
-`, a[S] = { value: x });
+    for (const [S, w] of Object.entries(i.uniforms))
+      typeof w == "number" ? (n += `uniform float ${S};
+`, a[S] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${S};
+`, a[S] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${S};
+`, a[S] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${S};
+`, a[S] = { value: new y.Vector4(...w) }) : (n += `uniform float ${S};
+`, a[S] = { value: w });
   const o = i !== void 0, c = (l || o ? Le.declChunk : "") + `
 ` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 `, h = s.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, g = l || o ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", v = l || o ? Le.baseColorChunk : "", p = (i == null ? void 0 : i.colorModifier) || "", m = Re.fragmentShader.replace("#INJECT_DECLARATIONS", c).replace("#INJECT_UV_MODIFIER", g).replace("#INJECT_BASE_COLOR", v).replace("#INJECT_COLOR_MODIFIER", p), w = le(s.backgroundColor), L = le(s.borderColor), M = {
+`, g = l || o ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", v = l || o ? Le.baseColorChunk : "", p = (i == null ? void 0 : i.colorModifier) || "", m = Re.fragmentShader.replace("#INJECT_DECLARATIONS", c).replace("#INJECT_UV_MODIFIER", g).replace("#INJECT_BASE_COLOR", v).replace("#INJECT_COLOR_MODIFIER", p), E = le(s.backgroundColor), M = le(s.borderColor), L = {
     uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
       value: new y.Vector4(
-        w.color.r,
-        w.color.g,
-        w.color.b,
-        w.alpha
+        E.color.r,
+        E.color.g,
+        E.color.b,
+        E.alpha
       )
     },
     uBorderColor: {
       value: new y.Vector4(
-        L.color.r,
-        L.color.g,
-        L.color.b,
-        L.alpha
+        M.color.r,
+        M.color.g,
+        M.color.b,
+        M.alpha
       )
     },
     uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: re(s.borderWidth) },
-    uOpacity: { value: (E = s.opacity) != null ? E : 1 },
+    uBorderWidth: { value: se(s.borderWidth) },
+    uOpacity: { value: (C = s.opacity) != null ? C : 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new y.Vector2(1, 1) },
     uTextureOffset: { value: new y.Vector2(0, 0) },
@@ -559,19 +559,19 @@ function Ze(s, e, t, r = null, i) {
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  Ie(M.uBorderRadius.value, s.borderRadius, Math.min(e, t)), l && (M.uTexture.value = r);
-  const T = new y.ShaderMaterial({
-    uniforms: j(j({}, M), a),
+  Ie(L.uBorderRadius.value, s.borderRadius, Math.min(e, t)), l && (L.uTexture.value = r);
+  const R = new y.ShaderMaterial({
+    uniforms: J(J({}, L), a),
     vertexShader: Re.vertexShader,
     fragmentShader: m,
     transparent: !0,
     side: y.FrontSide
     // for better performance
   });
-  return s.backgroundImage && ye(T, { backgroundImage: s.backgroundImage }), T;
+  return s.backgroundImage && ye(R, { backgroundImage: s.backgroundImage }), R;
 }
 function et(s, e, t, r, i) {
-  const l = re(e.borderWidth);
+  const l = se(e.borderWidth);
   ye(s, {
     width: t,
     height: r,
@@ -693,10 +693,10 @@ function Ie(s, e, t = 0) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const r = e.split("/")[0].trim().split(/\s+/), i = re(r[0], t), l = re((o = r[1]) != null ? o : r[0], t), n = re((c = r[2]) != null ? c : r[0], t), a = re((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
+  const r = e.split("/")[0].trim().split(/\s+/), i = se(r[0], t), l = se((o = r[1]) != null ? o : r[0], t), n = se((c = r[2]) != null ? c : r[0], t), a = se((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
   s.set(i, l, n, a);
 }
-const Y = {
+const V = {
   create(s, e, t, r, i, l = 2, n = null, a) {
     return s === "BOX" ? Ze(
       e,
@@ -827,7 +827,7 @@ class rt {
     var a, o, c, d, h;
     this.target = e, this.mountContainer = r, this.registry = i, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (o = t.canvasSize) != null ? o : "viewport", this.clipArea = (c = t.travelerClipArea) != null ? c : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new tt((g, v) => {
       const p = this.registry.get(g);
-      p && p.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(p.material, { texture: v });
+      p && p.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(p.material, { texture: v });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
     const l = 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(
@@ -849,7 +849,7 @@ class rt {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? B.SELECTED : B.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? I.SELECTED : I.BASE;
   }
   createRenderTarget() {
     for (let e = 0; e < O.MAX_LAYERS; e++) {
@@ -899,12 +899,12 @@ class rt {
   updateUniforms(e, t) {
     const r = this.registry.get(e);
     r && (r.traverse((i) => {
-      i.isMesh && i.material && Y.forceUpdateUniforms(
+      i.isMesh && i.material && V.forceUpdateUniforms(
         i.material,
         t
       );
     }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
-      i.isMesh && i.material && Y.forceUpdateUniforms(
+      i.isMesh && i.material && V.forceUpdateUniforms(
         i.material,
         t
       );
@@ -944,7 +944,7 @@ class rt {
     let t = this.registry.get(e.element);
     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 n = new y.PlaneGeometry(1, 1), a = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = Y.create(
+      const n = new y.PlaneGeometry(1, 1), a = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = V.create(
         "BOX",
         e.styles,
         "",
@@ -981,29 +981,29 @@ class rt {
       e.children.filter(
         (p) => p.name.startsWith("TEXT_CHILD")
       ).forEach((p) => {
-        var w;
+        var E;
         const m = p;
-        (w = m.material.map) == null || w.dispose(), m.geometry.dispose(), e.remove(m);
+        (E = m.material.map) == null || E.dispose(), m.geometry.dispose(), e.remove(m);
       });
       const h = t.rect, g = h.x + h.width / 2, v = h.y + h.height / 2;
       i.forEach((p, m) => {
-        const w = Y.create(
+        const E = V.create(
           "TEXT",
           l,
           p.text,
           p.rect.width,
           p.rect.height,
           this.qualityFactor
-        ), L = new y.PlaneGeometry(1, 1), M = new y.Mesh(L, w);
-        M.name = `TEXT_CHILD_${m}`;
-        const T = t.rect.width === 0 ? 1 : p.rect.width / t.rect.width, E = t.rect.height === 0 ? 1 : p.rect.height / t.rect.height;
-        M.scale.set(T, E, 1);
-        const S = p.rect.x + p.rect.width / 2, x = p.rect.y + p.rect.height / 2, R = S - g, A = -(x - v);
-        M.position.set(
-          t.rect.width === 0 ? 0 : R / t.rect.width,
-          t.rect.height === 0 ? 0 : A / t.rect.height,
+        ), M = new y.PlaneGeometry(1, 1), L = new y.Mesh(M, E);
+        L.name = `TEXT_CHILD_${m}`;
+        const R = t.rect.width === 0 ? 1 : p.rect.width / t.rect.width, C = t.rect.height === 0 ? 1 : p.rect.height / t.rect.height;
+        L.scale.set(R, C, 1);
+        const S = p.rect.x + p.rect.width / 2, w = p.rect.y + p.rect.height / 2, B = S - g, _ = -(w - v);
+        L.position.set(
+          t.rect.width === 0 ? 0 : B / t.rect.width,
+          t.rect.height === 0 ? 0 : _ / t.rect.height,
           5e-3
-        ), e.add(M);
+        ), e.add(L);
       }), e.userData.textChildStyleHash = n;
     }
     e.children.forEach((d) => {
@@ -1011,21 +1011,21 @@ class rt {
         return;
       const h = d;
       if (r && t.nativeLayer !== void 0)
-        h.layers.set(B.HIDDEN), t.visibility & W && h.layers.enable(B.getCaptureLayer(t.nativeLayer));
+        h.layers.set(I.HIDDEN), t.visibility & H && h.layers.enable(I.getCaptureLayer(t.nativeLayer));
       else {
-        const g = t.visibility & W ? B.BASE : B.HIDDEN;
-        if (h.layers.set(g), t.visibility & te && h.layers.enable(B.SELECTED), t.visibility & W)
+        const g = t.visibility & H ? I.BASE : I.HIDDEN;
+        if (h.layers.set(g), t.visibility & ie && h.layers.enable(I.SELECTED), t.visibility & H)
           if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
             for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
-              v !== t.nativeLayer && h.layers.enable(B.getCaptureLayer(v));
+              v !== t.nativeLayer && h.layers.enable(I.getCaptureLayer(v));
           else
             for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
-              h.layers.enable(B.getCaptureLayer(v));
+              h.layers.enable(I.getCaptureLayer(v));
       }
     });
   }
   updateMeshProperties(e, t) {
-    var T, E, S;
+    var R, C, S;
     const { rect: r, styles: i } = t, l = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / l, a = this.renderer.domElement.height / l;
     e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
       x: r.x,
@@ -1040,8 +1040,8 @@ class rt {
     if (this.isViewport)
       h = r.x - window.innerWidth / 2 + r.width / 2, g = -r.y + window.innerHeight / 2 - r.height / 2;
     else {
-      const x = r.x - c, R = r.y - d;
-      h = x - n / 2 + r.width / 2, g = -R + a / 2 - r.height / 2;
+      const w = r.x - c, B = r.y - d;
+      h = w - n / 2 + r.width / 2, g = -B + a / 2 - r.height / 2;
     }
     e.position.set(
       h,
@@ -1050,13 +1050,13 @@ class rt {
     );
     const v = r.x, p = r.y;
     e.userData.basePosition = { x: h, y: g }, e.userData.originalBasePosition = { x: h, y: g }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: v, y: p }, 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, w = window.getComputedStyle(m);
-    let L = 0, M = 0;
-    if (w.transform && w.transform !== "none") {
-      const x = new DOMMatrix(w.transform);
-      L = x.m41, M = x.m42;
+    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(m);
+    let M = 0, L = 0;
+    if (E.transform && E.transform !== "none") {
+      const w = new DOMMatrix(E.transform);
+      M = w.m41, L = w.m42;
     }
-    if (e.userData.baseTransform = { x: L, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, Y.update(
+    if (e.userData.baseTransform = { x: M, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, V.update(
       e.userData.baseMaterial,
       "BOX",
       i,
@@ -1064,73 +1064,73 @@ class rt {
       r.width,
       r.height,
       this.qualityFactor,
-      t.isTraveler ? (T = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : T.texture : this.textureManager.get(t.element)
+      t.isTraveler ? (R = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : R.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const _ = Y.create(
+        const N = V.create(
           "BOX",
           t.nativeStyles,
           "",
           t.nativeRect.width,
           t.nativeRect.height,
           this.qualityFactor,
-          t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
+          t.isTraveler ? (C = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : C.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), N = new y.Mesh(e.geometry, _);
-        t.type === "TEXT" && (N.name = "BG_MESH"), this.scene.add(N), e.userData.nativeMesh = N;
+        ), X = new y.Mesh(e.geometry, N);
+        t.type === "TEXT" && (X.name = "BG_MESH"), this.scene.add(X), e.userData.nativeMesh = X;
       }
-      const x = e.userData.nativeMesh;
-      let R, A;
+      const w = e.userData.nativeMesh;
+      let B, _;
       if (this.isViewport)
-        R = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, A = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        B = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, _ = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const _ = t.nativeRect.x - c, N = t.nativeRect.y - d;
-        R = _ - n / 2 + t.nativeRect.width / 2, A = -N + a / 2 - t.nativeRect.height / 2;
+        const N = t.nativeRect.x - c, X = t.nativeRect.y - d;
+        B = N - n / 2 + t.nativeRect.width / 2, _ = -X + a / 2 - t.nativeRect.height / 2;
       }
-      let U = t.nativeRect.width, G = t.nativeRect.height, ie = R, se = A;
+      let b = t.nativeRect.width, U = t.nativeRect.height, $ = B, q = _;
       if (t.nativeStyles.transform) {
-        const _ = t.nativeStyles.transform, N = _.match(/scale\(([\d.]+%?)\)/);
-        if (N) {
-          let f = parseFloat(N[1]);
-          N[1].includes("%") && (f /= 100), U *= f, G *= f;
+        const N = t.nativeStyles.transform, X = N.match(/scale\(([\d.]+%?)\)/);
+        if (X) {
+          let f = parseFloat(X[1]);
+          X[1].includes("%") && (f /= 100), b *= f, U *= f;
         }
-        const J = _.match(/scaleX\(([\d.]+%?)\)/);
-        if (J) {
-          let f = parseFloat(J[1]);
-          J[1].includes("%") && (f /= 100), U *= f;
+        const Z = N.match(/scaleX\(([\d.]+%?)\)/);
+        if (Z) {
+          let f = parseFloat(Z[1]);
+          Z[1].includes("%") && (f /= 100), b *= f;
         }
-        const Q = _.match(/scaleY\(([\d.]+%?)\)/);
-        if (Q) {
-          let f = parseFloat(Q[1]);
-          Q[1].includes("%") && (f /= 100), G *= f;
+        const ee = N.match(/scaleY\(([\d.]+%?)\)/);
+        if (ee) {
+          let f = parseFloat(ee[1]);
+          ee[1].includes("%") && (f /= 100), U *= f;
         }
-        const Z = _.match(/translate\(([^,]+),\s*([^)]+)\)/);
-        if (Z) {
-          const f = Z[1].trim(), b = Z[2].trim();
-          let k = parseFloat(f);
-          f.includes("%") && (k = k / 100 * t.nativeRect.width);
-          let F = parseFloat(b);
-          b.includes("%") && (F = F / 100 * t.nativeRect.height), ie += k, se -= F;
+        const te = N.match(/translate\(([^,]+),\s*([^)]+)\)/);
+        if (te) {
+          const f = te[1].trim(), x = te[2].trim();
+          let D = parseFloat(f);
+          f.includes("%") && (D = D / 100 * t.nativeRect.width);
+          let F = parseFloat(x);
+          x.includes("%") && (F = F / 100 * t.nativeRect.height), $ += D, q -= F;
         }
-        const ne = _.match(/translateX\(([^)]+)\)/);
+        const ne = N.match(/translateX\(([^)]+)\)/);
         if (ne) {
           const f = ne[1].trim();
-          let b = parseFloat(f);
-          f.includes("%") && (b = b / 100 * t.nativeRect.width), ie += b;
+          let x = parseFloat(f);
+          f.includes("%") && (x = x / 100 * t.nativeRect.width), $ += x;
         }
-        const ae = _.match(/translateY\(([^)]+)\)/);
+        const ae = N.match(/translateY\(([^)]+)\)/);
         if (ae) {
           const f = ae[1].trim();
-          let b = parseFloat(f);
-          f.includes("%") && (b = b / 100 * t.nativeRect.height), se -= b;
+          let x = parseFloat(f);
+          f.includes("%") && (x = x / 100 * t.nativeRect.height), q -= x;
         }
       }
-      x.scale.set(U, G, 1), x.position.set(
-        ie,
-        se,
+      w.scale.set(b, U, 1), w.position.set(
+        $,
+        q,
         t.nativeStyles.zIndex + this.renderOrder * o
-      ), Y.update(
-        x.material,
+      ), V.update(
+        w.material,
         "BOX",
         t.nativeStyles,
         "",
@@ -1143,17 +1143,17 @@ class rt {
       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 r = t.visibility & W ? B.BASE : B.HIDDEN;
-    if (e.layers.set(r), t.visibility & te && e.layers.enable(B.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    const r = t.visibility & H ? I.BASE : I.HIDDEN;
+    if (e.layers.set(r), t.visibility & ie && e.layers.enable(I.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const i = e.userData.nativeMesh;
-      if (i.layers.set(B.HIDDEN), t.visibility & W) {
-        i.layers.enable(B.getCaptureLayer(t.nativeLayer));
+      if (i.layers.set(I.HIDDEN), t.visibility & H) {
+        i.layers.enable(I.getCaptureLayer(t.nativeLayer));
         for (let l = t.captureLayer; l <= O.MAX_LAYERS + 1; l++)
-          l !== t.nativeLayer && e.layers.enable(B.getCaptureLayer(l));
+          l !== t.nativeLayer && e.layers.enable(I.getCaptureLayer(l));
       }
-    } else if (t.visibility & W)
+    } else if (t.visibility & H)
       for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
-        e.layers.enable(B.getCaptureLayer(i));
+        e.layers.enable(I.getCaptureLayer(i));
   }
   captureRenderTarget(e, t, r) {
     if (e.size === 0 || !r)
@@ -1166,8 +1166,8 @@ class rt {
       const h = (n.x + 1) / 2 * a, g = (n.y + 1) / 2 * o;
       let v = 0, p = 1;
       typeof this.clipArea == "number" ? p = this.clipArea : this.clipArea.endsWith("%") ? p = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (v = parseFloat(this.clipArea));
-      const m = d.scale.x * p + 0.5, w = d.scale.y * p + 0.5, L = h - m / 2, M = g - w / 2, T = (L * this.qualityFactor - v) / c, E = (M * this.qualityFactor - v) / c, S = (m * this.qualityFactor + v * 2) / c, x = (w * this.qualityFactor + v * 2) / c;
-      this.renderer.setScissor(T, E, S, x), this.renderer.render(this.scene, this.camera);
+      const m = d.scale.x * p + 0.5, E = d.scale.y * p + 0.5, M = h - m / 2, L = g - E / 2, R = (M * this.qualityFactor - v) / c, C = (L * this.qualityFactor - v) / c, S = (m * this.qualityFactor + v * 2) / c, w = (E * this.qualityFactor + v * 2) / c;
+      this.renderer.setScissor(R, C, S, w), 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(i, l);
   }
@@ -1176,7 +1176,7 @@ class rt {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        B.getCaptureLayer(t),
+        I.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
@@ -1212,40 +1212,53 @@ class rt {
           const v = c.x - e, p = c.y - t;
           h = v - i / 2 + c.width / 2, g = -p + l / 2 - c.height / 2;
         }
-        if (a.position.setX(h), a.position.setY(g), a.scale.set(c.width, c.height, 1), a.updateMatrixWorld(), a.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(a.material, {
+        if (a.position.setX(h), a.position.setY(g), a.scale.set(c.width, c.height, 1), a.updateMatrixWorld(), a.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(a.material, {
           width: c.width,
           height: c.height
         }), a.userData.nativeMesh) {
           const v = a.userData.nativeMesh;
-          let p = c.width, m = c.height, w = h, L = g;
+          let p = c.width, m = c.height, E = h, M = g;
           if (a.userData.nativeTransform) {
-            const M = a.userData.nativeTransform, T = M.match(/scale\(([\d.]+%?)\)/);
-            if (T) {
-              let R = parseFloat(T[1]);
-              T[1].includes("%") && (R /= 100), p *= R, m *= R;
+            const L = a.userData.nativeTransform, R = L.match(/scale\(([\d.]+%?)\)/);
+            if (R) {
+              let b = parseFloat(R[1]);
+              R[1].includes("%") && (b /= 100), p *= b, m *= b;
             }
-            const E = M.match(/translate\(([^,]+),\s*([^)]+)\)/);
-            if (E) {
-              const R = E[1].trim(), A = E[2].trim();
-              let U = parseFloat(R);
-              R.includes("%") && (U = U / 100 * c.width);
-              let G = parseFloat(A);
-              A.includes("%") && (G = G / 100 * c.height), w += U, L -= G;
+            const C = L.match(/scaleX\(([\d.]+%?)\)/);
+            if (C) {
+              let b = parseFloat(C[1]);
+              C[1].includes("%") && (b /= 100), p *= b;
             }
-            const S = M.match(/translateX\(([^)]+)\)/);
+            const S = L.match(/scaleY\(([\d.]+%?)\)/);
             if (S) {
-              const R = S[1].trim();
-              let A = parseFloat(R);
-              R.includes("%") && (A = A / 100 * c.width), w += A;
+              let b = parseFloat(S[1]);
+              S[1].includes("%") && (b /= 100), m *= b;
+            }
+            const w = L.match(/translate\(([^,]+),\s*([^)]+)\)/);
+            if (w) {
+              const b = w[1].trim(), U = w[2].trim();
+              let $ = parseFloat(b);
+              b.includes("%") && ($ = $ / 100 * c.width);
+              let q = parseFloat(U);
+              U.includes("%") && (q = q / 100 * c.height), E += $, M -= q;
             }
-            const x = M.match(/translateY\(([^)]+)\)/);
-            if (x) {
-              const R = x[1].trim();
-              let A = parseFloat(R);
-              R.includes("%") && (A = A / 100 * c.height), L -= A;
+            const B = L.match(/translateX\(([^)]+)\)/);
+            if (B) {
+              const b = B[1].trim();
+              let U = parseFloat(b);
+              b.includes("%") && (U = U / 100 * c.width), E += U;
+            }
+            const _ = L.match(/translateY\(([^)]+)\)/);
+            if (_) {
+              const b = _[1].trim();
+              let U = parseFloat(b);
+              b.includes("%") && (U = U / 100 * c.height), M -= U;
             }
           }
-          v.position.setX(w), v.position.setY(L), v.scale.set(p, m, 1), v.updateMatrixWorld();
+          v.position.setX(E), v.position.setY(M), v.scale.set(p, m, 1), v.updateMatrixWorld(), v.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(v.material, {
+            width: p,
+            height: m
+          });
         }
       }
     });
@@ -1343,283 +1356,283 @@ function Me(s) {
     letterSpacing: r
   };
 }
-function Ue(s, e = K | ce | Ye | ve | ue, t, r = 1, i = 0, l = 2, n, a) {
-  var N, J, Q, Z, ne, ae;
+function Ue(s, e = Q | ce | Ye | ve | ue, t, r = 1, i = 0, l = 2, n, a) {
+  var X, Z, ee, te, ne, ae;
   if (s.nodeType === Node.TEXT_NODE) {
     const f = s;
     if (!f.textContent || !f.textContent.trim())
       return null;
-    const b = f.textContent.replace(/\s+/g, " ");
-    if (b.length === 0)
+    const x = f.textContent.replace(/\s+/g, " ");
+    if (x.length === 0)
       return null;
-    const k = it(f);
-    if (k.length === 0)
+    const D = it(f);
+    if (D.length === 0)
       return null;
-    const F = f.parentElement, I = F ? window.getComputedStyle(F) : null;
-    if (!I)
+    const F = f.parentElement, k = F ? window.getComputedStyle(F) : null;
+    if (!k)
       return null;
-    const H = Math.min(...k.map((C) => C.rect.left)), z = Math.min(...k.map((C) => C.rect.top)), $ = Math.max(...k.map((C) => C.rect.left + C.rect.width)), D = Math.max(...k.map((C) => C.rect.top + C.rect.height));
+    const P = Math.min(...D.map((T) => T.rect.left)), z = Math.min(...D.map((T) => T.rect.top)), j = Math.max(...D.map((T) => T.rect.left + T.rect.width)), A = Math.max(...D.map((T) => T.rect.top + T.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: f,
       rect: {
-        x: H + window.scrollX,
+        x: P + window.scrollX,
         y: z + window.scrollY,
-        width: $ - H,
-        height: D - z
+        width: j - P,
+        height: A - z
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(I.opacity),
-        zIndex: (isNaN(parseInt(I.zIndex)) ? 0 : parseInt(I.zIndex)) + i,
+        opacity: F && F.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(k.opacity),
+        zIndex: (isNaN(parseInt(k.zIndex)) ? 0 : parseInt(k.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: b,
-      textLines: k.map((C) => ({
-        text: C.text.trim(),
+      textContent: x,
+      textLines: D.map((T) => ({
+        text: T.text.trim(),
         rect: {
-          x: C.rect.left + window.scrollX,
-          y: C.rect.top + window.scrollY,
-          width: C.rect.width,
-          height: C.rect.height
+          x: T.rect.left + window.scrollX,
+          y: T.rect.top + window.scrollY,
+          width: T.rect.width,
+          height: T.rect.height
         }
       })),
-      textStyles: Me(I),
+      textStyles: Me(k),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
       captureLayer: r,
-      isFixed: I.position === "fixed",
+      isFixed: k.position === "fixed",
       nativeLayer: n,
-      nativeStyles: a ? j(j({
+      nativeStyles: a ? J(J({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(I.opacity),
-        zIndex: (isNaN(parseInt(I.zIndex)) ? 0 : parseInt(I.zIndex)) + i,
+        opacity: F && F.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(k.opacity),
+        zIndex: (isNaN(parseInt(k.zIndex)) ? 0 : parseInt(k.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, Me(I)), a) : void 0,
+      }, Me(k)), a) : void 0,
       nativeRect: a ? {
-        x: H + window.scrollX,
+        x: P + window.scrollX,
         y: z + window.scrollY,
-        width: $ - H,
-        height: D - z
+        width: j - P,
+        height: A - z
       } : void 0,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const o = s, c = o.dataset[V.KEY];
+  const o = s, c = o.dataset[W.KEY];
   let d = t, h = t;
   if (c) {
     const f = new Set(c.split(/\s+/));
-    for (const b of f)
-      if (!Te.includes(b))
+    for (const x of f)
+      if (!Te.includes(x))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${b}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (f.has(V.VALUES.END))
+    if (f.has(W.VALUES.END))
       return null;
-    if (f.has(V.VALUES.INCLUDE_TREE) && f.has(V.VALUES.EXCLUDE_TREE))
+    if (f.has(W.VALUES.INCLUDE_TREE) && f.has(W.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (f.has(V.VALUES.INCLUDE_SELF) && f.has(V.VALUES.EXCLUDE_SELF))
+    if (f.has(W.VALUES.INCLUDE_SELF) && f.has(W.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    f.has(V.VALUES.INCLUDE_TREE) ? d = d | W : f.has(V.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, f.has(V.VALUES.INCLUDE_SELF) ? h = h | W : f.has(V.VALUES.EXCLUDE_SELF) && (h = h & ~W);
+    f.has(W.VALUES.INCLUDE_TREE) ? d = d | H : f.has(W.VALUES.EXCLUDE_TREE) && (d = d & ~H), h = d, f.has(W.VALUES.INCLUDE_SELF) ? h = h | H : f.has(W.VALUES.EXCLUDE_SELF) && (h = h & ~H);
   }
-  const g = o.dataset[P.KEY];
+  const g = o.dataset[G.KEY];
   if (g) {
     const f = new Set(g.split(/\s+/));
-    for (const b of f)
-      if (!Te.includes(b))
+    for (const x of f)
+      if (!Te.includes(x))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${b}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (f.has(P.VALUES.END))
+    if (f.has(G.VALUES.END))
       return null;
-    if (f.has(P.VALUES.INCLUDE_TREE) && f.has(P.VALUES.EXCLUDE_TREE))
+    if (f.has(G.VALUES.INCLUDE_TREE) && f.has(G.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (f.has(P.VALUES.INCLUDE_SELF) && f.has(P.VALUES.EXCLUDE_SELF))
+    if (f.has(G.VALUES.INCLUDE_SELF) && f.has(G.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    f.has(P.VALUES.INCLUDE_TREE) ? d = d | te : f.has(P.VALUES.EXCLUDE_TREE) && (d = d & ~te), h = d, f.has(P.VALUES.INCLUDE_SELF) ? h = h | te : f.has(P.VALUES.EXCLUDE_SELF) && (h = h & ~te);
+    f.has(G.VALUES.INCLUDE_TREE) ? d = d | ie : f.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~ie), h = d, f.has(G.VALUES.INCLUDE_SELF) ? h = h | ie : f.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~ie);
   }
   const v = o.dataset[O.KEY];
-  let p = !1, m = a ? j({}, a) : {}, w = n;
+  let p = !1, m = a ? J({}, a) : {}, E = n;
   if (v) {
     let f = 1;
-    const b = v.indexOf("{"), k = v.lastIndexOf("}");
+    const x = v.indexOf("{"), D = v.lastIndexOf("}");
     let F = v;
-    if (b !== -1 && k !== -1 && k > b) {
-      F = v.substring(0, b).trim();
-      const D = v.substring(b, k + 1);
+    if (x !== -1 && D !== -1 && D > x) {
+      F = v.substring(0, x).trim();
+      const A = v.substring(x, D + 1);
       try {
-        m = new Function("return " + D)();
-      } catch (C) {
+        m = new Function("return " + A)();
+      } catch (T) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${D}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${A}`
         );
       }
     }
-    const I = F.split(/\s+/);
-    let H = !1;
-    const z = I.indexOf(O.VALUES.TRAVELER);
+    const k = F.split(/\s+/);
+    let P = !1;
+    const z = k.indexOf(O.VALUES.TRAVELER);
     if (z !== -1) {
-      p = !0, H = !0;
-      const D = I[z + 1];
-      if (D && !isNaN(parseInt(D, 10)))
-        f = parseInt(D, 10);
+      p = !0, P = !0;
+      const A = k[z + 1];
+      if (A && !isNaN(parseInt(A, 10)))
+        f = parseInt(A, 10);
       else {
-        const C = I.find((ee) => !isNaN(parseInt(ee, 10)));
-        C && (f = parseInt(C, 10));
+        const T = k.find((re) => !isNaN(parseInt(re, 10)));
+        T && (f = parseInt(T, 10));
       }
     }
-    const $ = I.indexOf(O.VALUES.NATIVE);
-    if ($ !== -1) {
-      const D = I[$ + 1];
-      if (D && !isNaN(parseInt(D, 10)))
-        w = parseInt(D, 10);
+    const j = k.indexOf(O.VALUES.NATIVE);
+    if (j !== -1) {
+      const A = k[j + 1];
+      if (A && !isNaN(parseInt(A, 10)))
+        E = parseInt(A, 10);
       else if (!p) {
-        const C = I.find((ee) => !isNaN(parseInt(ee, 10)));
-        C && (w = parseInt(C, 10));
+        const T = k.find((re) => !isNaN(parseInt(re, 10)));
+        T && (E = parseInt(T, 10));
       }
     }
-    if (H) {
-      const D = f + 1;
-      if (D < r)
+    if (P) {
+      const A = f + 1;
+      if (A < r)
         throw new Error(
           `[MirageEngine] Traveler layer (${f}) cannot be smaller than inherited capture layer (${r - 1}).`
         );
-      r = Math.min(D, O.MAX_LAYERS + 1);
+      r = Math.min(A, O.MAX_LAYERS + 1);
     }
   }
-  const L = o.dataset[Ve.KEY];
-  let M;
-  L && (M = JSON.parse(L));
-  const T = o.getBoundingClientRect(), E = window.getComputedStyle(o);
-  if (T.width === 0 || T.height === 0 || E.display === "none")
+  const M = o.dataset[Ve.KEY];
+  let L;
+  M && (L = JSON.parse(M));
+  const R = o.getBoundingClientRect(), C = window.getComputedStyle(o);
+  if (R.width === 0 || R.height === 0 || C.display === "none")
     return null;
   let S = o.getAttribute("data-mid");
   S || (S = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", S));
-  const x = parseInt(E.zIndex), R = (isNaN(x) ? 0 : x) + i;
-  let A;
+  const w = parseInt(C.zIndex), B = (isNaN(w) ? 0 : w) + i;
+  let _;
   if (o.tagName === "IMG")
-    A = o.src;
+    _ = o.src;
   else if (o.tagName.toLowerCase() === "svg") {
-    const f = o.cloneNode(!0), b = m == null ? void 0 : m.color, k = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, I = m == null ? void 0 : m.opacity, H = (C, ee) => {
-      const X = window.getComputedStyle(C), oe = ee, Be = X.fill === X.color, Fe = X.stroke === X.color, fe = k || (Be ? b : void 0) || X.fill;
+    const f = o.cloneNode(!0), x = m == null ? void 0 : m.color, D = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, k = m == null ? void 0 : m.opacity, P = (T, re) => {
+      const Y = window.getComputedStyle(T), oe = re, Fe = Y.fill === Y.color, Be = Y.stroke === Y.color, fe = D || (Fe ? x : void 0) || Y.fill;
       fe && fe !== "none" && (oe.style.fill = fe);
-      const ge = F || (Fe ? b : void 0) || X.stroke;
-      ge && ge !== "none" && (oe.style.stroke = ge), X.strokeWidth && X.strokeWidth !== "0px" && (oe.style.strokeWidth = X.strokeWidth);
-      const be = b || X.color;
+      const ge = F || (Be ? x : void 0) || Y.stroke;
+      ge && ge !== "none" && (oe.style.stroke = ge), Y.strokeWidth && Y.strokeWidth !== "0px" && (oe.style.strokeWidth = Y.strokeWidth);
+      const be = x || Y.color;
       be && (oe.style.color = be);
-      const pe = I || X.opacity;
+      const pe = k || Y.opacity;
       pe && pe !== "1" && (oe.style.opacity = pe);
-      for (let he = 0; he < C.children.length; he++)
-        H(C.children[he], ee.children[he]);
+      for (let he = 0; he < T.children.length; he++)
+        P(T.children[he], re.children[he]);
     };
-    H(o, f);
-    const z = o.getBoundingClientRect(), $ = window.devicePixelRatio * l;
-    f.hasAttribute("viewBox") || f.setAttribute("viewBox", `0 0 ${z.width} ${z.height}`), f.setAttribute("width", (z.width * $).toString()), f.setAttribute("height", (z.height * $).toString());
-    let D = new XMLSerializer().serializeToString(f);
-    D.includes("xmlns=") || (D = D.replace(
+    P(o, f);
+    const z = o.getBoundingClientRect(), j = window.devicePixelRatio * l;
+    f.hasAttribute("viewBox") || f.setAttribute("viewBox", `0 0 ${z.width} ${z.height}`), f.setAttribute("width", (z.width * j).toString()), f.setAttribute("height", (z.height * j).toString());
+    let A = new XMLSerializer().serializeToString(f);
+    A.includes("xmlns=") || (A = A.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), A = `data:image/svg+xml;utf8,${encodeURIComponent(D)}`;
-  } else if (E.backgroundImage && E.backgroundImage !== "none") {
-    const f = E.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    f && (A = f[1]);
-  }
-  const U = {
-    backgroundColor: E.backgroundColor,
-    backgroundImage: E.backgroundImage,
-    opacity: o.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(E.opacity),
-    zIndex: R,
-    borderRadius: E.borderRadius,
-    borderColor: E.borderColor,
-    borderWidth: E.borderWidth,
-    imageSrc: A,
+    )), _ = `data:image/svg+xml;utf8,${encodeURIComponent(A)}`;
+  } else if (C.backgroundImage && C.backgroundImage !== "none") {
+    const f = C.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    f && (_ = f[1]);
+  }
+  const b = {
+    backgroundColor: C.backgroundColor,
+    backgroundImage: C.backgroundImage,
+    opacity: o.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(C.opacity),
+    zIndex: B,
+    borderRadius: C.borderRadius,
+    borderColor: C.borderColor,
+    borderWidth: C.borderWidth,
+    imageSrc: _,
     isTraveler: p
-  }, G = U;
-  let ie, se;
-  const _ = [];
+  }, U = b;
+  let $, q;
+  const N = [];
   return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((f) => {
-    const b = f.nodeType === Node.TEXT_NODE ? h : d, k = Ue(
+    const x = f.nodeType === Node.TEXT_NODE ? h : d, D = Ue(
       f,
       e,
-      b,
+      x,
       r,
-      R,
+      B,
       l,
-      f.nodeType === Node.TEXT_NODE ? w : void 0,
+      f.nodeType === Node.TEXT_NODE ? E : void 0,
       f.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
     );
-    k && _.push(k);
+    D && N.push(D);
   }), {
     id: S,
     type: "BOX",
     element: o,
     rect: {
-      x: T.left + window.scrollX,
-      y: T.top + window.scrollY,
-      width: T.width,
-      height: T.height
+      x: R.left + window.scrollX,
+      y: R.top + window.scrollY,
+      width: R.width,
+      height: R.height
     },
-    styles: G,
-    textContent: ie,
-    textStyles: se,
+    styles: U,
+    textContent: $,
+    textStyles: q,
     dirtyMask: e,
     visibility: h,
     isTraveler: p,
     captureLayer: r,
-    nativeLayer: w,
-    nativeStyles: w !== void 0 ? xe(j({}, U), {
-      backgroundColor: (N = m.backgroundColor) != null ? N : U.backgroundColor,
-      backgroundImage: (J = m.backgroundImage) != null ? J : U.backgroundImage,
-      opacity: (Q = m.opacity) != null ? Q : U.opacity,
-      zIndex: m.zIndex !== void 0 ? m.zIndex + R : U.zIndex,
-      borderRadius: (Z = m.borderRadius) != null ? Z : U.borderRadius,
-      borderColor: (ne = m.borderColor) != null ? ne : U.borderColor,
-      borderWidth: (ae = m.borderWidth) != null ? ae : U.borderWidth,
-      isTraveler: U.isTraveler,
+    nativeLayer: E,
+    nativeStyles: E !== void 0 ? xe(J({}, b), {
+      backgroundColor: (X = m.backgroundColor) != null ? X : b.backgroundColor,
+      backgroundImage: (Z = m.backgroundImage) != null ? Z : b.backgroundImage,
+      opacity: (ee = m.opacity) != null ? ee : b.opacity,
+      zIndex: m.zIndex !== void 0 ? m.zIndex + B : b.zIndex,
+      borderRadius: (te = m.borderRadius) != null ? te : b.borderRadius,
+      borderColor: (ne = m.borderColor) != null ? ne : b.borderColor,
+      borderWidth: (ae = m.borderWidth) != null ? ae : b.borderWidth,
+      isTraveler: b.isTraveler,
       transform: m.transform
     }) : void 0,
-    nativeRect: w !== void 0 ? {
-      x: m.x !== void 0 ? parseFloat(m.x) : T.left + window.scrollX,
-      y: m.y !== void 0 ? parseFloat(m.y) : T.top + window.scrollY,
-      width: m.width !== void 0 ? parseFloat(m.width) : T.width,
-      height: m.height !== void 0 ? parseFloat(m.height) : T.height
+    nativeRect: E !== void 0 ? {
+      x: m.x !== void 0 ? parseFloat(m.x) : R.left + window.scrollX,
+      y: m.y !== void 0 ? parseFloat(m.y) : R.top + window.scrollY,
+      width: m.width !== void 0 ? parseFloat(m.width) : R.width,
+      height: m.height !== void 0 ? parseFloat(m.height) : R.height
     } : void 0,
-    isFixed: E.position === "fixed",
-    children: _,
-    shaderHooks: M
+    isFixed: C.position === "fixed",
+    children: N,
+    shaderHooks: L
   };
 }
 function st(s, e) {
   e.size !== 0 && e.forEach((t, r) => {
     var l, n, a, o;
     const i = s.get(r);
-    !i || !i.userData.basePosition || (Y.forceUpdateUniforms(i.material, {
+    !i || !i.userData.basePosition || (V.forceUpdateUniforms(i.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
       borderRadius: (n = t.borderRadius) != null ? n : (l = i.userData.baseStyles) == null ? void 0 : l.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    }), i.userData.nativeMesh && Y.forceUpdateUniforms(i.userData.nativeMesh.material, {
+    }), i.userData.nativeMesh && V.forceUpdateUniforms(i.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
@@ -1641,7 +1654,7 @@ class nt {
       const o = Ue(
         this.target,
         l,
-        W,
+        H,
         1,
         0,
         this.renderer.qualityFactor
@@ -1695,7 +1708,7 @@ class ot {
     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 = `
-        [${q.NAME}="${q.VALUES.HIDE}"] {
+        [${K.NAME}="${K.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
       `, document.head.appendChild(a);