mirage-engine 0.3.9 → 0.3.11

package/dist/mirage-engine.js

@@ -1,17 +1,17 @@
 var _e = Object.defineProperty, Fe = Object.defineProperties;
 var Ne = Object.getOwnPropertyDescriptors;
-var ye = Object.getOwnPropertySymbols;
+var we = Object.getOwnPropertySymbols;
 var ze = Object.prototype.hasOwnProperty, Xe = Object.prototype.propertyIsEnumerable;
-var ae = (s, e, t) => e in s ? _e(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, $ = (s, e) => {
+var me = (s, e, t) => e in s ? _e(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) && ae(s, t, e[t]);
-  if (ye)
-    for (var t of ye(e))
-      Xe.call(e, t) && ae(s, t, e[t]);
+    ze.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]);
   return s;
-}, be = (s, e) => Fe(s, Ne(e));
-var u = (s, e, t) => (ae(s, typeof e != "symbol" ? e + "" : e, t), t);
-var we = (s, e, t) => new Promise((r, i) => {
+}, xe = (s, e) => Fe(s, Ne(e));
+var u = (s, e, t) => (me(s, typeof e != "symbol" ? e + "" : e, t), t);
+var Ee = (s, e, t) => new Promise((r, i) => {
   var c = (a) => {
     try {
       o(t.next(a));
@@ -28,20 +28,20 @@ var we = (s, e, t) => new Promise((r, i) => {
   o((t = t.apply(s, e)).next());
 });
 import * as y from "three";
-const Le = {
+const Ae = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
   INCLUDE_SELF: "include-self",
   EXCLUDE_SELF: "exclude-self",
   END: "end"
-}, P = {
+}, K = {
   NAME: "data-mirage-dom",
   KEY: "mirageDom",
   VALUES: {
     HIDE: "hide",
     SHOW: "show"
   }
-}, xe = {
+}, Ce = {
   TRAVELER: "traveler",
   NATIVE: "native",
   CAPTURE_1: "1",
@@ -54,29 +54,29 @@ const Le = {
   CAPTURE_8: "8",
   CAPTURE_9: "9",
   CAPTURE_10: "10"
-}, O = {
+}, _ = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
-  VALUES: xe,
-  MAX_LAYERS: Object.keys(xe).length - 1
-}, z = {
+  VALUES: Ce,
+  MAX_LAYERS: Object.keys(Ce).length - 1
+}, W = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
-  VALUES: Le
-}, Y = {
+  VALUES: Ae
+}, G = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
-  VALUES: Le
+  VALUES: Ae
 }, Ve = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
-}, Ee = {
+}, Se = {
   NAME: "data-mirage-sandwich",
   KEY: "mirageSandwich",
   VALUES: {
     FRONT: "front"
   }
-}, re = 0, q = 1, Z = 2, Ye = 4, ie = 8, ce = 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 ? {
@@ -97,7 +97,7 @@ function He(s) {
   }
   return e;
 }
-class Me {
+class De {
   constructor(e, t) {
     u(this, "target");
     u(this, "observer");
@@ -105,7 +105,7 @@ class Me {
     u(this, "pendingStyles", /* @__PURE__ */ new Map());
     u(this, "isDomDirty", !1);
     u(this, "isRunning", !1);
-    u(this, "pendingMask", re);
+    u(this, "pendingMask", de);
     u(this, "mutationTimer", null);
     u(this, "cssTimer", null);
     u(this, "resizeConfig");
@@ -120,7 +120,7 @@ class Me {
     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 |= q | Z, 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)));
     });
@@ -136,10 +136,10 @@ class Me {
     u(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
-      this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = re);
+      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 |= q, 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, c;
@@ -151,23 +151,23 @@ class Me {
       onStart: r.onStart,
       onEnd: r.onEnd
     }, this.observer = new MutationObserver((n) => {
-      let o = re;
+      let o = de;
       for (const a of n)
         if (a.type === "childList")
-          o |= ie, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
+          o |= ue, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
             l instanceof HTMLElement && this.pendingDeletions.add(l);
           });
         else if (a.type === "attributes")
           if (a.attributeName === "style") {
-            o |= q | Z;
+            o |= Q | ce;
             const l = a.target, d = He(l.style);
             this.pendingStyles.set(l, d);
           } else
-            a.attributeName === "class" ? o |= q | Z : a.attributeName && a.attributeName.startsWith("data-") && (o |= q | Z, a.attributeName.startsWith("data-mirage") && (o |= ie));
+            a.attributeName === "class" ? o |= Q | ce : a.attributeName && a.attributeName.startsWith("data-") && (o |= Q | ce, a.attributeName.startsWith("data-mirage") && (o |= ue));
         else
-          a.type === "characterData" && (o |= ce | q);
-      if (o !== re) {
-        if (this.pendingMask |= o, o & ie) {
+          a.type === "characterData" && (o |= ve | Q);
+      if (o !== de) {
+        if (this.pendingMask |= o, o & ue) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -192,13 +192,13 @@ class Me {
     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, K = 2, D = {
+const $ = 1, te = 2, U = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Ce = Object.values(z.VALUES);
-class Ae {
+}, Te = Object.values(W.VALUES);
+class ke {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
    * @param font CSS font shorthand string (e.g., "400 16px Inter")
@@ -219,7 +219,7 @@ class Ae {
     return document.body.removeChild(t), c;
   }
 }
-u(Ae, "cache", /* @__PURE__ */ new Map());
+u(ke, "cache", /* @__PURE__ */ new Map());
 class Pe extends y.MeshBasicMaterial {
   constructor(t, r, i, c, n = 2) {
     super({
@@ -255,24 +255,24 @@ class Pe extends y.MeshBasicMaterial {
     n !== void 0 && (this.qualityFactor = n);
     const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * a, d = c * a;
     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(a, 0, 0, a, 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), f = r.lineHeight, p = Ae.getBaseline(r.font);
-    h.forEach((g, m) => {
-      const x = m * f + p;
-      let S = 0;
-      r.textAlign === "center" ? S = i / 2 : r.textAlign === "right" && (S = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, S, x);
+    const h = this.wrapText(t, i), f = r.lineHeight, p = ke.getBaseline(r.font);
+    h.forEach((g, v) => {
+      const b = v * f + p;
+      let L = 0;
+      r.textAlign === "center" ? L = i / 2 : r.textAlign === "right" && (L = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, L, b);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function J(s, e = 0) {
+function re(s, e = 0) {
   if (typeof s == "number")
     return s;
   const t = parseFloat(s) || 0;
   return typeof s == "string" && s.includes("%") ? t / 100 * e : t;
 }
-function ee(s) {
+function le(s) {
   if (!s || s === "transparent")
     return { color: new y.Color(16777215), alpha: 0 };
   const e = s.match(
@@ -324,7 +324,7 @@ function $e(s) {
       const g = l.substring(d + 1);
       (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, d).trim(), f = g);
     }
-    const p = ee(h);
+    const p = le(h);
     o.push({
       color: p.color,
       alpha: p.alpha,
@@ -503,52 +503,52 @@ uniform vec2 uTextureOffset;`, Je = `vec2 screenUv = (vScreenPos.xy / vScreenPos
 vec2 resultUv = screenUv;
 
 `, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`, Te = {
+baseColor = blendSrcOver(baseColor, texColor);`, Re = {
   vertexShader: qe,
   fragmentShader: je
-}, Se = {
+}, Le = {
   declChunk: Ke,
   uvChunk: Je,
   baseColorChunk: Qe
 };
 function Ze(s, e, t, r = null, i) {
-  var E;
+  var x;
   const c = r !== null || !!s.imageSrc;
   let n = "";
   const o = {};
   if (i != null && i.uniforms)
-    for (const [b, w] of Object.entries(i.uniforms))
-      typeof w == "number" ? (n += `uniform float ${b};
-`, o[b] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${b};
-`, o[b] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${b};
-`, o[b] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${b};
-`, o[b] = { value: new y.Vector4(...w) }) : (n += `uniform float ${b};
-`, o[b] = { value: w });
-  const a = i !== void 0, l = (c || a ? Se.declChunk : "") + `
+    for (const [C, w] of Object.entries(i.uniforms))
+      typeof w == "number" ? (n += `uniform float ${C};
+`, o[C] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${C};
+`, o[C] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${C};
+`, o[C] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${C};
+`, o[C] = { value: new y.Vector4(...w) }) : (n += `uniform float ${C};
+`, o[C] = { value: w });
+  const a = i !== void 0, l = (c || a ? 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;
-`, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = c || a ? Se.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", m = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), x = ee(s.backgroundColor), S = ee(s.borderColor), L = {
+`, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = c || a ? Le.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", v = Re.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), b = le(s.backgroundColor), L = le(s.borderColor), M = {
     uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
       value: new y.Vector4(
-        x.color.r,
-        x.color.g,
-        x.color.b,
-        x.alpha
+        b.color.r,
+        b.color.g,
+        b.color.b,
+        b.alpha
       )
     },
     uBorderColor: {
       value: new y.Vector4(
-        S.color.r,
-        S.color.g,
-        S.color.b,
-        S.alpha
+        L.color.r,
+        L.color.g,
+        L.color.b,
+        L.alpha
       )
     },
     uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: J(s.borderWidth) },
-    uOpacity: { value: (E = s.opacity) != null ? E : 1 },
+    uBorderWidth: { value: re(s.borderWidth) },
+    uOpacity: { value: (x = s.opacity) != null ? x : 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new y.Vector2(1, 1) },
     uTextureOffset: { value: new y.Vector2(0, 0) },
@@ -559,20 +559,20 @@ function Ze(s, e, t, r = null, i) {
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  De(L.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (L.uTexture.value = r);
-  const T = new y.ShaderMaterial({
-    uniforms: $($({}, L), o),
-    vertexShader: Te.vertexShader,
-    fragmentShader: m,
+  Ie(M.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (M.uTexture.value = r);
+  const S = new y.ShaderMaterial({
+    uniforms: J(J({}, M), o),
+    vertexShader: Re.vertexShader,
+    fragmentShader: v,
     transparent: !0,
     side: y.FrontSide
     // for better performance
   });
-  return s.backgroundImage && le(T, { backgroundImage: s.backgroundImage }), T;
+  return s.backgroundImage && ye(S, { backgroundImage: s.backgroundImage }), S;
 }
 function et(s, e, t, r, i) {
-  const c = J(e.borderWidth);
-  le(s, {
+  const c = re(e.borderWidth);
+  ye(s, {
     width: t,
     height: r,
     borderRadius: e.borderRadius,
@@ -584,11 +584,11 @@ function et(s, e, t, r, i) {
     backgroundImage: e.backgroundImage
   });
 }
-function le(s, e) {
+function ye(s, e) {
   var r, i, c;
   if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0) {
     const n = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(s.uniforms.uSize.value.x, s.uniforms.uSize.value.y);
-    De(s.uniforms.uBorderRadius.value, e.borderRadius, n);
+    Ie(s.uniforms.uBorderRadius.value, e.borderRadius, n);
   }
   if (e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
@@ -600,7 +600,7 @@ function le(s, e) {
         n
       );
     } else if (typeof e.backgroundColor == "string") {
-      const n = ee(e.backgroundColor);
+      const n = le(e.backgroundColor);
       s.uniforms.uBgColor.value.set(
         n.color.r,
         n.color.g,
@@ -626,7 +626,7 @@ function le(s, e) {
         n
       );
     } else if (typeof e.borderColor == "string") {
-      const n = ee(e.borderColor);
+      const n = le(e.borderColor);
       s.uniforms.uBorderColor.value.set(
         n.color.r,
         n.color.g,
@@ -679,7 +679,7 @@ function le(s, e) {
   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 De(s, e, t = 0) {
+function Ie(s, e, t = 0) {
   var a, l, d, h;
   if (e == null) {
     s.set(0, 0, 0, 0);
@@ -693,10 +693,10 @@ function De(s, e, t = 0) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const r = e.split("/")[0].trim().split(/\s+/), i = J(r[0], t), c = J((a = r[1]) != null ? a : r[0], t), n = J((l = r[2]) != null ? l : r[0], t), o = J((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
+  const r = e.split("/")[0].trim().split(/\s+/), i = re(r[0], t), c = re((a = r[1]) != null ? a : r[0], t), n = re((l = r[2]) != null ? l : r[0], t), o = re((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
   s.set(i, c, n, o);
 }
-const X = {
+const H = {
   create(s, e, t, r, i, c = 2, n = null, o) {
     return s === "BOX" ? Ze(
       e,
@@ -728,7 +728,7 @@ const X = {
     );
   },
   forceUpdateUniforms(s, e) {
-    le(s, e);
+    ye(s, e);
   }
 };
 class tt {
@@ -757,7 +757,7 @@ class tt {
     e.nodeType === Node.ELEMENT_NODE && this.observer && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
   }
   loadTexture(e) {
-    return we(this, null, function* () {
+    return Ee(this, null, function* () {
       if (this.loadStatus.get(e) || this.textures.has(e))
         return;
       const t = this.elementUrls.get(e);
@@ -818,7 +818,7 @@ class rt {
     u(this, "registry");
     u(this, "targetRect");
     u(this, "travelersByLayer", Array.from(
-      { length: O.MAX_LAYERS },
+      { length: _.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
     u(this, "textureManager");
@@ -827,7 +827,7 @@ class rt {
     var o, a, l, d, h;
     this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new tt((f, p) => {
       const g = this.registry.get(f);
-      g && g.material instanceof y.ShaderMaterial && X.forceUpdateUniforms(g.material, { texture: p });
+      g && g.material instanceof y.ShaderMaterial && H.forceUpdateUniforms(g.material, { texture: p });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
     const c = 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,10 +849,10 @@ class rt {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? D.SELECTED : D.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? U.SELECTED : U.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < O.MAX_LAYERS; e++) {
+    for (let e = 0; e < _.MAX_LAYERS; e++) {
       const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, r = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
       this.renderTargets.push(
         new y.WebGLRenderTarget(
@@ -899,12 +899,12 @@ class rt {
   updateUniforms(e, t) {
     const r = this.registry.get(e);
     r && (r.traverse((i) => {
-      i.isMesh && i.material && X.forceUpdateUniforms(
+      i.isMesh && i.material && H.forceUpdateUniforms(
         i.material,
         t
       );
     }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
-      i.isMesh && i.material && X.forceUpdateUniforms(
+      i.isMesh && i.material && H.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), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = X.create(
+      const n = new y.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = H.create(
         "BOX",
         e.styles,
         "",
@@ -957,7 +957,7 @@ class rt {
       t = new y.Mesh(n, a), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = a, t.userData.domElement = e.element, t.userData.shaderHash = r;
     }
     if ((c = e.nativeStyles) != null && c.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
-      for (let n = 0; n < O.MAX_LAYERS; n++)
+      for (let n = 0; n < _.MAX_LAYERS; n++)
         n === e.captureLayer - 2 ? this.travelersByLayer[n].add(t) : this.travelersByLayer[n].delete(t);
     else
       for (const n of this.travelersByLayer)
@@ -977,53 +977,53 @@ class rt {
     const i = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
     ], c = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + i.map((d) => d.text).join("|"), o = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
-    if (t.dirtyMask & ce || n !== o) {
+    if (t.dirtyMask & ve || n !== o) {
       e.children.filter(
         (g) => g.name.startsWith("TEXT_CHILD")
       ).forEach((g) => {
-        var x;
-        const m = g;
-        (x = m.material.map) == null || x.dispose(), m.geometry.dispose(), e.remove(m);
+        var b;
+        const v = g;
+        (b = v.material.map) == null || b.dispose(), v.geometry.dispose(), e.remove(v);
       });
       const h = t.rect, f = h.x + h.width / 2, p = h.y + h.height / 2;
-      i.forEach((g, m) => {
-        const x = X.create(
+      i.forEach((g, v) => {
+        const b = H.create(
           "TEXT",
           c,
           g.text,
           g.rect.width,
           g.rect.height,
           this.qualityFactor
-        ), S = new y.PlaneGeometry(1, 1), L = new y.Mesh(S, x);
-        L.name = `TEXT_CHILD_${m}`;
-        const T = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, E = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
-        L.scale.set(T, E, 1);
-        const b = g.rect.x + g.rect.width / 2, w = g.rect.y + g.rect.height / 2, k = b - f, U = -(w - p);
-        L.position.set(
-          t.rect.width === 0 ? 0 : k / t.rect.width,
-          t.rect.height === 0 ? 0 : U / t.rect.height,
+        ), L = new y.PlaneGeometry(1, 1), M = new y.Mesh(L, b);
+        M.name = `TEXT_CHILD_${v}`;
+        const S = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, x = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
+        M.scale.set(S, x, 1);
+        const C = g.rect.x + g.rect.width / 2, w = g.rect.y + g.rect.height / 2, T = C - f, A = -(w - p);
+        M.position.set(
+          t.rect.width === 0 ? 0 : T / t.rect.width,
+          t.rect.height === 0 ? 0 : A / t.rect.height,
           5e-3
-        ), e.add(L);
+        ), e.add(M);
       }), e.userData.textChildStyleHash = n;
     }
     e.children.forEach((d) => {
       if (!d.name.startsWith("TEXT_CHILD"))
         return;
-      const h = d, f = t.visibility & W ? D.BASE : D.HIDDEN;
-      if (h.layers.set(f), t.visibility & K && h.layers.enable(D.SELECTED), t.visibility & W)
+      const h = d, f = t.visibility & $ ? U.BASE : U.HIDDEN;
+      if (h.layers.set(f), t.visibility & te && h.layers.enable(U.SELECTED), t.visibility & $)
         if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
           for (let p = t.captureLayer; p < t.nativeLayer; p++)
-            h.layers.enable(D.getCaptureLayer(p));
+            h.layers.enable(U.getCaptureLayer(p));
         else if (r && t.nativeLayer !== void 0)
-          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= O.MAX_LAYERS + 1; p++)
-            h.layers.enable(D.getCaptureLayer(p));
+          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= _.MAX_LAYERS + 1; p++)
+            h.layers.enable(U.getCaptureLayer(p));
         else
-          for (let p = t.captureLayer; p <= O.MAX_LAYERS + 1; p++)
-            h.layers.enable(D.getCaptureLayer(p));
+          for (let p = t.captureLayer; p <= _.MAX_LAYERS + 1; p++)
+            h.layers.enable(U.getCaptureLayer(p));
     });
   }
   updateMeshProperties(e, t) {
-    var T, E, b;
+    var S, x, C;
     const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, o = this.renderer.domElement.height / c;
     e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
       x: r.x,
@@ -1038,8 +1038,8 @@ class rt {
     if (this.isViewport)
       h = r.x - window.innerWidth / 2 + r.width / 2, f = -r.y + window.innerHeight / 2 - r.height / 2;
     else {
-      const w = r.x - l, k = r.y - d;
-      h = w - n / 2 + r.width / 2, f = -k + o / 2 - r.height / 2;
+      const w = r.x - l, T = r.y - d;
+      h = w - n / 2 + r.width / 2, f = -T + o / 2 - r.height / 2;
     }
     e.position.set(
       h,
@@ -1048,13 +1048,13 @@ class rt {
     );
     const p = r.x, g = r.y;
     e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: g }, 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, x = window.getComputedStyle(m);
-    let S = 0, L = 0;
-    if (x.transform && x.transform !== "none") {
-      const w = new DOMMatrix(x.transform);
-      S = w.m41, L = w.m42;
+    const v = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, b = window.getComputedStyle(v);
+    let L = 0, M = 0;
+    if (b.transform && b.transform !== "none") {
+      const w = new DOMMatrix(b.transform);
+      L = w.m41, M = w.m42;
     }
-    if (e.userData.baseTransform = { x: S, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, X.update(
+    if (e.userData.baseTransform = { x: L, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, H.update(
       e.userData.baseMaterial,
       "BOX",
       i,
@@ -1062,34 +1062,62 @@ 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 ? (S = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : S.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const B = X.create(
+        const X = H.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 ? (x = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : x.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), G = new y.Mesh(e.geometry, B);
-        t.type === "TEXT" && (G.name = "BG_MESH"), this.scene.add(G), e.userData.nativeMesh = G;
+        ), N = new y.Mesh(e.geometry, X);
+        t.type === "TEXT" && (N.name = "BG_MESH"), this.scene.add(N), e.userData.nativeMesh = N;
       }
       const w = e.userData.nativeMesh;
-      let k, U;
+      let T, A;
       if (this.isViewport)
-        k = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, U = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        T = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, A = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const B = t.nativeRect.x - l, G = t.nativeRect.y - d;
-        k = B - n / 2 + t.nativeRect.width / 2, U = -G + o / 2 - t.nativeRect.height / 2;
+        const X = t.nativeRect.x - l, N = t.nativeRect.y - d;
+        T = X - n / 2 + t.nativeRect.width / 2, A = -N + o / 2 - t.nativeRect.height / 2;
       }
-      w.scale.set(t.nativeRect.width, t.nativeRect.height, 1), w.position.set(
-        k,
-        U,
+      let I = t.nativeRect.width, q = t.nativeRect.height, ie = T, se = A;
+      if (t.nativeStyles.transform) {
+        const X = t.nativeStyles.transform, N = X.match(/scale\(([\d.]+%?)\)/);
+        if (N) {
+          let B = parseFloat(N[1]);
+          N[1].includes("%") && (B /= 100), I *= B, q *= B;
+        }
+        const Z = X.match(/translate\(([^,]+),\s*([^)]+)\)/);
+        if (Z) {
+          const B = Z[1].trim(), F = Z[2].trim();
+          let m = parseFloat(B);
+          B.includes("%") && (m = m / 100 * t.nativeRect.width);
+          let R = parseFloat(F);
+          F.includes("%") && (R = R / 100 * t.nativeRect.height), ie += m, se -= R;
+        }
+        const ne = X.match(/translateX\(([^)]+)\)/);
+        if (ne) {
+          const B = ne[1].trim();
+          let F = parseFloat(B);
+          B.includes("%") && (F = F / 100 * t.nativeRect.width), ie += F;
+        }
+        const oe = X.match(/translateY\(([^)]+)\)/);
+        if (oe) {
+          const B = oe[1].trim();
+          let F = parseFloat(B);
+          B.includes("%") && (F = F / 100 * t.nativeRect.height), se -= F;
+        }
+      }
+      w.scale.set(I, q, 1), w.position.set(
+        ie,
+        se,
         t.nativeStyles.zIndex + this.renderOrder * a
-      ), X.update(
+      ), H.update(
         w.material,
         "BOX",
         t.nativeStyles,
@@ -1097,24 +1125,24 @@ class rt {
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (C = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : C.texture : this.textureManager.get(t.element)
       );
     } else
       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 ? D.BASE : D.HIDDEN;
-    if (e.layers.set(r), t.visibility & K && e.layers.enable(D.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    const r = t.visibility & $ ? U.BASE : U.HIDDEN;
+    if (e.layers.set(r), t.visibility & te && e.layers.enable(U.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const i = e.userData.nativeMesh;
-      if (i.layers.set(D.HIDDEN), t.visibility & W) {
+      if (i.layers.set(U.HIDDEN), t.visibility & $) {
         for (let c = t.captureLayer; c < t.nativeLayer; c++)
-          e.layers.enable(D.getCaptureLayer(c));
-        for (let c = Math.max(t.captureLayer, t.nativeLayer); c <= O.MAX_LAYERS + 1; c++)
-          i.layers.enable(D.getCaptureLayer(c));
+          e.layers.enable(U.getCaptureLayer(c));
+        for (let c = Math.max(t.captureLayer, t.nativeLayer); c <= _.MAX_LAYERS + 1; c++)
+          i.layers.enable(U.getCaptureLayer(c));
       }
-    } else if (t.visibility & W)
-      for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
-        e.layers.enable(D.getCaptureLayer(i));
+    } else if (t.visibility & $)
+      for (let i = t.captureLayer; i <= _.MAX_LAYERS + 1; i++)
+        e.layers.enable(U.getCaptureLayer(i));
   }
   captureRenderTarget(e, t, r) {
     if (e.size === 0 || !r)
@@ -1127,17 +1155,17 @@ class rt {
       const h = (n.x + 1) / 2 * o, f = (n.y + 1) / 2 * a;
       let p = 0, g = 1;
       typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
-      const m = d.scale.x * g + 0.5, x = d.scale.y * g + 0.5, S = h - m / 2, L = f - x / 2, T = (S * this.qualityFactor - p) / l, E = (L * this.qualityFactor - p) / l, b = (m * this.qualityFactor + p * 2) / l, w = (x * this.qualityFactor + p * 2) / l;
-      this.renderer.setScissor(T, E, b, w), this.renderer.render(this.scene, this.camera);
+      const v = d.scale.x * g + 0.5, b = d.scale.y * g + 0.5, L = h - v / 2, M = f - b / 2, S = (L * this.qualityFactor - p) / l, x = (M * this.qualityFactor - p) / l, C = (v * this.qualityFactor + p * 2) / l, w = (b * this.qualityFactor + p * 2) / l;
+      this.renderer.setScissor(S, x, C, 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, c);
   }
   render() {
-    for (let e = 0; e < O.MAX_LAYERS; e++) {
+    for (let e = 0; e < _.MAX_LAYERS; e++) {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        D.getCaptureLayer(t),
+        U.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
@@ -1173,28 +1201,40 @@ class rt {
           const p = l.x - e, g = l.y - t;
           h = p - i / 2 + l.width / 2, f = -g + c / 2 - l.height / 2;
         }
-        if (o.position.setX(h), o.position.setY(f), o.scale.set(l.width, l.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && X.forceUpdateUniforms(o.material, {
+        if (o.position.setX(h), o.position.setY(f), o.scale.set(l.width, l.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && H.forceUpdateUniforms(o.material, {
           width: l.width,
           height: l.height
         }), o.userData.nativeMesh) {
           const p = o.userData.nativeMesh;
-          let g = l.width, m = l.height, x = h, S = f;
+          let g = l.width, v = l.height, b = h, L = f;
           if (o.userData.nativeTransform) {
-            const L = o.userData.nativeTransform, T = L.match(/scale\(([\d.]+%?)\)/);
-            if (T) {
-              let b = parseFloat(T[1]);
-              T[1].includes("%") && (b /= 100), g *= b, m *= b;
+            const M = o.userData.nativeTransform, S = M.match(/scale\(([\d.]+%?)\)/);
+            if (S) {
+              let T = parseFloat(S[1]);
+              S[1].includes("%") && (T /= 100), g *= T, v *= T;
+            }
+            const x = M.match(/translate\(([^,]+),\s*([^)]+)\)/);
+            if (x) {
+              const T = x[1].trim(), A = x[2].trim();
+              let I = parseFloat(T);
+              T.includes("%") && (I = I / 100 * l.width);
+              let q = parseFloat(A);
+              A.includes("%") && (q = q / 100 * l.height), b += I, L -= q;
+            }
+            const C = M.match(/translateX\(([^)]+)\)/);
+            if (C) {
+              const T = C[1].trim();
+              let A = parseFloat(T);
+              T.includes("%") && (A = A / 100 * l.width), b += A;
             }
-            const E = L.match(/translate\(([^,]+),\s*([^)]+)\)/);
-            if (E) {
-              const b = E[1].trim(), w = E[2].trim();
-              let k = parseFloat(b);
-              b.includes("%") && (k = k / 100 * l.width);
-              let U = parseFloat(w);
-              w.includes("%") && (U = U / 100 * l.height), x += k, S -= U;
+            const w = M.match(/translateY\(([^)]+)\)/);
+            if (w) {
+              const T = w[1].trim();
+              let A = parseFloat(T);
+              T.includes("%") && (A = A / 100 * l.height), L -= A;
             }
           }
-          p.position.setX(x), p.position.setY(S), p.scale.set(g, m, 1), p.updateMatrixWorld();
+          p.position.setX(b), p.position.setY(L), p.scale.set(g, v, 1), p.updateMatrixWorld();
         }
       }
     });
@@ -1276,7 +1316,7 @@ function it(s) {
     (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
   );
 }
-function Re(s) {
+function Me(s) {
   const e = parseFloat(s.fontSize);
   let t = parseFloat(s.lineHeight);
   isNaN(t) && (t = e * 1.2);
@@ -1292,283 +1332,283 @@ function Re(s) {
     letterSpacing: r
   };
 }
-function ke(s, e = q | Z | Ye | ce | ie, t, r = 1, i = 0, c = 2, n, o) {
-  var de, ue, fe, ge, pe, me;
+function Ue(s, e = Q | ce | Ye | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
+  var N, Z, ne, oe, B, F;
   if (s.nodeType === Node.TEXT_NODE) {
-    const v = s;
-    if (!v.textContent || !v.textContent.trim())
+    const m = s;
+    if (!m.textContent || !m.textContent.trim())
       return null;
-    const M = v.textContent.replace(/\s+/g, " ");
-    if (M.length === 0)
+    const R = m.textContent.replace(/\s+/g, " ");
+    if (R.length === 0)
       return null;
-    const I = it(v);
-    if (I.length === 0)
+    const O = it(m);
+    if (O.length === 0)
       return null;
-    const F = v.parentElement, A = F ? window.getComputedStyle(F) : null;
-    if (!A)
+    const V = m.parentElement, k = V ? window.getComputedStyle(V) : null;
+    if (!k)
       return null;
-    const V = Math.min(...I.map((C) => C.rect.left)), _ = Math.min(...I.map((C) => C.rect.top)), H = Math.max(...I.map((C) => C.rect.left + C.rect.width)), R = Math.max(...I.map((C) => C.rect.top + C.rect.height));
+    const P = Math.min(...O.map((E) => E.rect.left)), z = Math.min(...O.map((E) => E.rect.top)), j = Math.max(...O.map((E) => E.rect.left + E.rect.width)), D = Math.max(...O.map((E) => E.rect.top + E.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: v,
+      element: m,
       rect: {
-        x: V + window.scrollX,
-        y: _ + window.scrollY,
-        width: H - V,
-        height: R - _
+        x: P + window.scrollX,
+        y: z + window.scrollY,
+        width: j - P,
+        height: D - z
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(A.opacity),
-        zIndex: (isNaN(parseInt(A.zIndex)) ? 0 : parseInt(A.zIndex)) + i,
+        opacity: V && V.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: M,
-      textLines: I.map((C) => ({
-        text: C.text.trim(),
+      textContent: R,
+      textLines: O.map((E) => ({
+        text: E.text.trim(),
         rect: {
-          x: C.rect.left + window.scrollX,
-          y: C.rect.top + window.scrollY,
-          width: C.rect.width,
-          height: C.rect.height
+          x: E.rect.left + window.scrollX,
+          y: E.rect.top + window.scrollY,
+          width: E.rect.width,
+          height: E.rect.height
         }
       })),
-      textStyles: Re(A),
+      textStyles: Me(k),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
       captureLayer: r,
-      isFixed: A.position === "fixed",
+      isFixed: k.position === "fixed",
       nativeLayer: n,
-      nativeStyles: o ? $($({
+      nativeStyles: o ? J(J({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(A.opacity),
-        zIndex: (isNaN(parseInt(A.zIndex)) ? 0 : parseInt(A.zIndex)) + i,
+        opacity: V && V.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
-      }, Re(A)), o) : void 0,
+      }, Me(k)), o) : void 0,
       nativeRect: o ? {
-        x: V + window.scrollX,
-        y: _ + window.scrollY,
-        width: H - V,
-        height: R - _
+        x: P + window.scrollX,
+        y: z + window.scrollY,
+        width: j - P,
+        height: D - z
       } : void 0,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const a = s, l = a.dataset[z.KEY];
+  const a = s, l = a.dataset[W.KEY];
   let d = t, h = t;
   if (l) {
-    const v = new Set(l.split(/\s+/));
-    for (const M of v)
-      if (!Ce.includes(M))
+    const m = new Set(l.split(/\s+/));
+    for (const R of m)
+      if (!Te.includes(R))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(z.VALUES.END))
+    if (m.has(W.VALUES.END))
       return null;
-    if (v.has(z.VALUES.INCLUDE_TREE) && v.has(z.VALUES.EXCLUDE_TREE))
+    if (m.has(W.VALUES.INCLUDE_TREE) && m.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 (v.has(z.VALUES.INCLUDE_SELF) && v.has(z.VALUES.EXCLUDE_SELF))
+    if (m.has(W.VALUES.INCLUDE_SELF) && m.has(W.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(z.VALUES.INCLUDE_TREE) ? d = d | W : v.has(z.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, v.has(z.VALUES.INCLUDE_SELF) ? h = h | W : v.has(z.VALUES.EXCLUDE_SELF) && (h = h & ~W);
+    m.has(W.VALUES.INCLUDE_TREE) ? d = d | $ : m.has(W.VALUES.EXCLUDE_TREE) && (d = d & ~$), h = d, m.has(W.VALUES.INCLUDE_SELF) ? h = h | $ : m.has(W.VALUES.EXCLUDE_SELF) && (h = h & ~$);
   }
-  const f = a.dataset[Y.KEY];
+  const f = a.dataset[G.KEY];
   if (f) {
-    const v = new Set(f.split(/\s+/));
-    for (const M of v)
-      if (!Ce.includes(M))
+    const m = new Set(f.split(/\s+/));
+    for (const R of m)
+      if (!Te.includes(R))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(Y.VALUES.END))
+    if (m.has(G.VALUES.END))
       return null;
-    if (v.has(Y.VALUES.INCLUDE_TREE) && v.has(Y.VALUES.EXCLUDE_TREE))
+    if (m.has(G.VALUES.INCLUDE_TREE) && m.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 (v.has(Y.VALUES.INCLUDE_SELF) && v.has(Y.VALUES.EXCLUDE_SELF))
+    if (m.has(G.VALUES.INCLUDE_SELF) && m.has(G.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(Y.VALUES.INCLUDE_TREE) ? d = d | K : v.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~K), h = d, v.has(Y.VALUES.INCLUDE_SELF) ? h = h | K : v.has(Y.VALUES.EXCLUDE_SELF) && (h = h & ~K);
+    m.has(G.VALUES.INCLUDE_TREE) ? d = d | te : m.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~te), h = d, m.has(G.VALUES.INCLUDE_SELF) ? h = h | te : m.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~te);
   }
-  const p = a.dataset[O.KEY];
-  let g = !1, m = o ? $({}, o) : {}, x = n;
+  const p = a.dataset[_.KEY];
+  let g = !1, v = o ? J({}, o) : {}, b = n;
   if (p) {
-    let v = 1;
-    const M = p.indexOf("{"), I = p.lastIndexOf("}");
-    let F = p;
-    if (M !== -1 && I !== -1 && I > M) {
-      F = p.substring(0, M).trim();
-      const R = p.substring(M, I + 1);
+    let m = 1;
+    const R = p.indexOf("{"), O = p.lastIndexOf("}");
+    let V = p;
+    if (R !== -1 && O !== -1 && O > R) {
+      V = p.substring(0, R).trim();
+      const D = p.substring(R, O + 1);
       try {
-        m = new Function("return " + R)();
-      } catch (C) {
+        v = new Function("return " + D)();
+      } catch (E) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${R}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${D}`
         );
       }
     }
-    const A = F.split(/\s+/);
-    let V = !1;
-    const _ = A.indexOf(O.VALUES.TRAVELER);
-    if (_ !== -1) {
-      g = !0, V = !0;
-      const R = A[_ + 1];
-      if (R && !isNaN(parseInt(R, 10)))
-        v = parseInt(R, 10);
+    const k = V.split(/\s+/);
+    let P = !1;
+    const z = k.indexOf(_.VALUES.TRAVELER);
+    if (z !== -1) {
+      g = !0, P = !0;
+      const D = k[z + 1];
+      if (D && !isNaN(parseInt(D, 10)))
+        m = parseInt(D, 10);
       else {
-        const C = A.find((j) => !isNaN(parseInt(j, 10)));
-        C && (v = parseInt(C, 10));
+        const E = k.find((ee) => !isNaN(parseInt(ee, 10)));
+        E && (m = parseInt(E, 10));
       }
     }
-    const H = A.indexOf(O.VALUES.NATIVE);
-    if (H !== -1) {
-      const R = A[H + 1];
-      if (R && !isNaN(parseInt(R, 10)))
-        x = parseInt(R, 10);
+    const j = k.indexOf(_.VALUES.NATIVE);
+    if (j !== -1) {
+      const D = k[j + 1];
+      if (D && !isNaN(parseInt(D, 10)))
+        b = parseInt(D, 10);
       else if (!g) {
-        const C = A.find((j) => !isNaN(parseInt(j, 10)));
-        C && (x = parseInt(C, 10));
+        const E = k.find((ee) => !isNaN(parseInt(ee, 10)));
+        E && (b = parseInt(E, 10));
       }
     }
-    if (V) {
-      const R = v + 1;
-      if (R < r)
+    if (P) {
+      const D = m + 1;
+      if (D < r)
         throw new Error(
-          `[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${r - 1}).`
+          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${r - 1}).`
         );
-      r = Math.min(R, O.MAX_LAYERS + 1);
+      r = Math.min(D, _.MAX_LAYERS + 1);
     }
   }
-  const S = a.dataset[Ve.KEY];
-  let L;
-  S && (L = JSON.parse(S));
-  const T = a.getBoundingClientRect(), E = window.getComputedStyle(a);
-  if (T.width === 0 || T.height === 0 || E.display === "none")
+  const L = a.dataset[Ve.KEY];
+  let M;
+  L && (M = JSON.parse(L));
+  const S = a.getBoundingClientRect(), x = window.getComputedStyle(a);
+  if (S.width === 0 || S.height === 0 || x.display === "none")
     return null;
-  let b = a.getAttribute("data-mid");
-  b || (b = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", b));
-  const w = parseInt(E.zIndex), k = (isNaN(w) ? 0 : w) + i;
-  let U;
+  let C = a.getAttribute("data-mid");
+  C || (C = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", C));
+  const w = parseInt(x.zIndex), T = (isNaN(w) ? 0 : w) + i;
+  let A;
   if (a.tagName === "IMG")
-    U = a.src;
+    A = a.src;
   else if (a.tagName.toLowerCase() === "svg") {
-    const v = a.cloneNode(!0), M = m == null ? void 0 : m.color, I = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, A = m == null ? void 0 : m.opacity, V = (C, j) => {
-      const N = window.getComputedStyle(C), Q = j, Be = N.fill === N.color, Oe = N.stroke === N.color, se = I || (Be ? M : void 0) || N.fill;
-      se && se !== "none" && (Q.style.fill = se);
-      const ne = F || (Oe ? M : void 0) || N.stroke;
-      ne && ne !== "none" && (Q.style.stroke = ne), N.strokeWidth && N.strokeWidth !== "0px" && (Q.style.strokeWidth = N.strokeWidth);
-      const ve = M || N.color;
-      ve && (Q.style.color = ve);
-      const oe = A || N.opacity;
-      oe && oe !== "1" && (Q.style.opacity = oe);
-      for (let te = 0; te < C.children.length; te++)
-        V(C.children[te], j.children[te]);
+    const m = a.cloneNode(!0), R = v == null ? void 0 : v.color, O = v == null ? void 0 : v.fill, V = v == null ? void 0 : v.stroke, k = v == null ? void 0 : v.opacity, P = (E, ee) => {
+      const Y = window.getComputedStyle(E), ae = ee, Be = Y.fill === Y.color, Oe = Y.stroke === Y.color, fe = O || (Be ? R : void 0) || Y.fill;
+      fe && fe !== "none" && (ae.style.fill = fe);
+      const ge = V || (Oe ? R : void 0) || Y.stroke;
+      ge && ge !== "none" && (ae.style.stroke = ge), Y.strokeWidth && Y.strokeWidth !== "0px" && (ae.style.strokeWidth = Y.strokeWidth);
+      const be = R || Y.color;
+      be && (ae.style.color = be);
+      const pe = k || Y.opacity;
+      pe && pe !== "1" && (ae.style.opacity = pe);
+      for (let he = 0; he < E.children.length; he++)
+        P(E.children[he], ee.children[he]);
     };
-    V(a, v);
-    const _ = a.getBoundingClientRect(), H = window.devicePixelRatio * c;
-    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${_.width} ${_.height}`), v.setAttribute("width", (_.width * H).toString()), v.setAttribute("height", (_.height * H).toString());
-    let R = new XMLSerializer().serializeToString(v);
-    R.includes("xmlns=") || (R = R.replace(
+    P(a, m);
+    const z = a.getBoundingClientRect(), j = window.devicePixelRatio * c;
+    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${z.width} ${z.height}`), m.setAttribute("width", (z.width * j).toString()), m.setAttribute("height", (z.height * j).toString());
+    let D = new XMLSerializer().serializeToString(m);
+    D.includes("xmlns=") || (D = D.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), U = `data:image/svg+xml;utf8,${encodeURIComponent(R)}`;
-  } else if (E.backgroundImage && E.backgroundImage !== "none") {
-    const v = E.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    v && (U = v[1]);
-  }
-  const B = {
-    backgroundColor: E.backgroundColor,
-    backgroundImage: E.backgroundImage,
-    opacity: a.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(E.opacity),
-    zIndex: k,
-    borderRadius: E.borderRadius,
-    borderColor: E.borderColor,
-    borderWidth: E.borderWidth,
-    imageSrc: U,
+    )), A = `data:image/svg+xml;utf8,${encodeURIComponent(D)}`;
+  } else if (x.backgroundImage && x.backgroundImage !== "none") {
+    const m = x.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    m && (A = m[1]);
+  }
+  const I = {
+    backgroundColor: x.backgroundColor,
+    backgroundImage: x.backgroundImage,
+    opacity: a.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(x.opacity),
+    zIndex: T,
+    borderRadius: x.borderRadius,
+    borderColor: x.borderColor,
+    borderWidth: x.borderWidth,
+    imageSrc: A,
     isTraveler: g
-  }, G = B;
-  let Ie, Ue;
-  const he = [];
-  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((v) => {
-    const M = v.nodeType === Node.TEXT_NODE ? h : d, I = ke(
-      v,
+  }, q = I;
+  let ie, se;
+  const X = [];
+  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((m) => {
+    const R = m.nodeType === Node.TEXT_NODE ? h : d, O = Ue(
+      m,
       e,
-      M,
+      R,
       r,
-      k,
+      T,
       c,
-      v.nodeType === Node.TEXT_NODE ? x : void 0,
-      v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
+      m.nodeType === Node.TEXT_NODE ? b : void 0,
+      m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
     );
-    I && he.push(I);
+    O && X.push(O);
   }), {
-    id: b,
+    id: C,
     type: "BOX",
     element: a,
     rect: {
-      x: T.left + window.scrollX,
-      y: T.top + window.scrollY,
-      width: T.width,
-      height: T.height
+      x: S.left + window.scrollX,
+      y: S.top + window.scrollY,
+      width: S.width,
+      height: S.height
     },
-    styles: G,
-    textContent: Ie,
-    textStyles: Ue,
+    styles: q,
+    textContent: ie,
+    textStyles: se,
     dirtyMask: e,
     visibility: h,
     isTraveler: g,
     captureLayer: r,
-    nativeLayer: x,
-    nativeStyles: x !== void 0 ? be($({}, B), {
-      backgroundColor: (de = m.backgroundColor) != null ? de : B.backgroundColor,
-      backgroundImage: (ue = m.backgroundImage) != null ? ue : B.backgroundImage,
-      opacity: (fe = m.opacity) != null ? fe : B.opacity,
-      zIndex: m.zIndex !== void 0 ? m.zIndex + k : B.zIndex,
-      borderRadius: (ge = m.borderRadius) != null ? ge : B.borderRadius,
-      borderColor: (pe = m.borderColor) != null ? pe : B.borderColor,
-      borderWidth: (me = m.borderWidth) != null ? me : B.borderWidth,
-      isTraveler: B.isTraveler,
-      transform: m.transform
+    nativeLayer: b,
+    nativeStyles: b !== void 0 ? xe(J({}, I), {
+      backgroundColor: (N = v.backgroundColor) != null ? N : I.backgroundColor,
+      backgroundImage: (Z = v.backgroundImage) != null ? Z : I.backgroundImage,
+      opacity: (ne = v.opacity) != null ? ne : I.opacity,
+      zIndex: v.zIndex !== void 0 ? v.zIndex + T : I.zIndex,
+      borderRadius: (oe = v.borderRadius) != null ? oe : I.borderRadius,
+      borderColor: (B = v.borderColor) != null ? B : I.borderColor,
+      borderWidth: (F = v.borderWidth) != null ? F : I.borderWidth,
+      isTraveler: I.isTraveler,
+      transform: v.transform
     }) : void 0,
-    nativeRect: x !== 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: b !== void 0 ? {
+      x: v.x !== void 0 ? parseFloat(v.x) : S.left + window.scrollX,
+      y: v.y !== void 0 ? parseFloat(v.y) : S.top + window.scrollY,
+      width: v.width !== void 0 ? parseFloat(v.width) : S.width,
+      height: v.height !== void 0 ? parseFloat(v.height) : S.height
     } : void 0,
-    isFixed: E.position === "fixed",
-    children: he,
-    shaderHooks: L
+    isFixed: x.position === "fixed",
+    children: X,
+    shaderHooks: M
   };
 }
 function st(s, e) {
   e.size !== 0 && e.forEach((t, r) => {
     var c, n, o, a;
     const i = s.get(r);
-    !i || !i.userData.basePosition || (X.forceUpdateUniforms(i.material, {
+    !i || !i.userData.basePosition || (H.forceUpdateUniforms(i.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
       borderRadius: (n = t.borderRadius) != null ? n : (c = i.userData.baseStyles) == null ? void 0 : c.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    }), i.userData.nativeMesh && X.forceUpdateUniforms(i.userData.nativeMesh.material, {
+    }), i.userData.nativeMesh && H.forceUpdateUniforms(i.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
@@ -1583,14 +1623,14 @@ class nt {
     u(this, "registry");
     u(this, "isTravelEnabled", !1);
     u(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = r, this.tracker = new Me(e, {
+    this.target = e, this.renderer = t, this.registry = r, this.tracker = new De(e, {
       resizeDebounce: i.resizeDebounce
     }), this.tracker.onLayoutChange.add((c, n) => {
-      document.querySelector(`[${O.NAME}~='${O.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const a = ke(
+      document.querySelector(`[${_.NAME}~='${_.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const a = Ue(
         this.target,
         c,
-        W,
+        $,
         1,
         0,
         this.renderer.qualityFactor
@@ -1644,7 +1684,7 @@ class at {
     if (this.target = e, this.registry = new ot(), !document.getElementById("mirage-engine-styles")) {
       const o = document.createElement("style");
       o.id = "mirage-engine-styles", o.textContent = `
-        [${P.NAME}="${P.VALUES.HIDE}"] {
+        [${K.NAME}="${K.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
       `, document.head.appendChild(o);
@@ -1709,7 +1749,7 @@ class ct {
     u(this, "midLayer", null);
     u(this, "frontLayer", null);
     u(this, "tracker", null);
-    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new Me(document.body, e.trackerConfig || { resizeDebounce: !0 });
+    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new De(document.body, e.trackerConfig || { resizeDebounce: !0 });
   }
   init() {
     var e;
@@ -1780,7 +1820,7 @@ class ht {
     if (this._engine = new at(e, t), t.sandwich !== !1) {
       const r = typeof t.sandwich == "object" ? t.sandwich : {};
       this._sandwich = new ct({
-        frontSelector: r.frontSelector || `[${Ee.NAME}='${Ee.VALUES.FRONT}']`
+        frontSelector: r.frontSelector || `[${Se.NAME}='${Se.VALUES.FRONT}']`
       }), this._sandwich.useTracker(this._engine.getTracker());
     }
   }