mirage-engine 0.3.19 → 0.3.21

package/dist/mirage-engine.js

@@ -1,17 +1,17 @@
-var Xe = Object.defineProperty, Ve = Object.defineProperties;
-var Ye = Object.getOwnPropertyDescriptors;
-var Ee = Object.getOwnPropertySymbols;
-var We = Object.prototype.hasOwnProperty, He = Object.prototype.propertyIsEnumerable;
-var ye = (s, e, t) => e in s ? Xe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, te = (s, e) => {
+var We = Object.defineProperty, He = Object.defineProperties;
+var Pe = Object.getOwnPropertyDescriptors;
+var Re = Object.getOwnPropertySymbols;
+var $e = Object.prototype.hasOwnProperty, Ge = Object.prototype.propertyIsEnumerable;
+var xe = (s, e, t) => e in s ? We(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, re = (s, e) => {
   for (var t in e || (e = {}))
-    We.call(e, t) && ye(s, t, e[t]);
-  if (Ee)
-    for (var t of Ee(e))
-      He.call(e, t) && ye(s, t, e[t]);
+    $e.call(e, t) && xe(s, t, e[t]);
+  if (Re)
+    for (var t of Re(e))
+      Ge.call(e, t) && xe(s, t, e[t]);
   return s;
-}, Ce = (s, e) => Ve(s, Ye(e));
-var u = (s, e, t) => (ye(s, typeof e != "symbol" ? e + "" : e, t), t);
-var Te = (s, e, t) => new Promise((i, r) => {
+}, Le = (s, e) => He(s, Pe(e));
+var u = (s, e, t) => (xe(s, typeof e != "symbol" ? e + "" : e, t), t);
+var Me = (s, e, t) => new Promise((i, r) => {
   var c = (l) => {
     try {
       a(t.next(l));
@@ -27,21 +27,21 @@ var Te = (s, e, t) => new Promise((i, r) => {
   }, a = (l) => l.done ? i(l.value) : Promise.resolve(l.value).then(c, n);
   a((t = t.apply(s, e)).next());
 });
-import * as w from "three";
-const Ie = {
+import * as y from "three";
+const _e = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
   INCLUDE_SELF: "include-self",
   EXCLUDE_SELF: "exclude-self",
   END: "end"
-}, ee = {
+}, te = {
   NAME: "data-mirage-dom",
   KEY: "mirageDom",
   VALUES: {
     HIDE: "hide",
     SHOW: "show"
   }
-}, Re = {
+}, De = {
   TRAVELER: "traveler",
   NATIVE: "native",
   CAPTURE_1: "1",
@@ -54,30 +54,30 @@ const Ie = {
   CAPTURE_8: "8",
   CAPTURE_9: "9",
   CAPTURE_10: "10"
-}, N = {
+}, V = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
-  VALUES: Re,
-  MAX_LAYERS: Object.keys(Re).length - 1
-}, P = {
+  VALUES: De,
+  MAX_LAYERS: Object.keys(De).length - 1
+}, G = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
-  VALUES: Ie
-}, q = {
+  VALUES: _e
+}, j = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
-  VALUES: Ie
-}, Pe = {
+  VALUES: _e
+}, qe = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
-}, Le = {
+}, Ae = {
   NAME: "data-mirage-sandwich",
   KEY: "mirageSandwich",
   VALUES: {
     FRONT: "front"
   }
-}, ge = 0, re = 1, ue = 2, Ge = 4, pe = 8, be = 16;
-function $e(s) {
+}, pe = 0, ie = 1, fe = 2, je = 4, me = 8, Se = 16;
+function Ke(s) {
   const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
   return e ? {
     r: parseInt(e[1]) / 255,
@@ -86,10 +86,10 @@ function $e(s) {
     a: e[4] !== void 0 ? parseFloat(e[4]) : 1
   } : { r: 1, g: 1, b: 1, a: 1 };
 }
-function qe(s) {
+function Je(s) {
   const e = {};
   if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor) {
-    const t = $e(s.backgroundColor);
+    const t = Ke(s.backgroundColor);
     e.backgroundColor = [t.r, t.g, t.b, t.a];
   }
   if (s.backgroundImage ? e.backgroundImage = s.backgroundImage : s.background && (e.backgroundImage = s.background), s.boxShadow && (e.boxShadow = s.boxShadow), s.borderRadius && (e.borderRadius = parseFloat(s.borderRadius)), s.width && (e.width = parseFloat(s.width)), s.height && (e.height = parseFloat(s.height)), s.transform && s.transform !== "none") {
@@ -98,7 +98,7 @@ function qe(s) {
   }
   return e;
 }
-class Be {
+class Fe {
   constructor(e, t) {
     u(this, "target");
     u(this, "observer");
@@ -106,7 +106,7 @@ class Be {
     u(this, "pendingStyles", /* @__PURE__ */ new Map());
     u(this, "isDomDirty", !1);
     u(this, "isRunning", !1);
-    u(this, "pendingMask", ge);
+    u(this, "pendingMask", pe);
     u(this, "mutationTimer", null);
     u(this, "cssTimer", null);
     u(this, "resizeConfig");
@@ -121,7 +121,7 @@ class Be {
     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 |= re | ue, this.cssTimer = window.setTimeout(() => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= ie | fe, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
@@ -137,10 +137,10 @@ class Be {
     u(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
-      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = ge);
+      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = pe);
       const e = window.scrollX, t = window.scrollY;
       (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((i) => i(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
-        this.pendingMask |= re, this.isDomDirty = !0, this.scrollTimer = null;
+        this.pendingMask |= ie, this.isDomDirty = !0, this.scrollTimer = null;
       }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((i) => i(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((i) => i()), requestAnimationFrame(this.renderLoop);
     });
     var r, c;
@@ -152,23 +152,23 @@ class Be {
       onStart: i.onStart,
       onEnd: i.onEnd
     }, this.observer = new MutationObserver((n) => {
-      let a = ge;
+      let a = pe;
       for (const l of n)
         if (l.type === "childList")
-          a |= pe, l.removedNodes.length > 0 && l.removedNodes.forEach((o) => {
+          a |= me, l.removedNodes.length > 0 && l.removedNodes.forEach((o) => {
             o instanceof HTMLElement && this.pendingDeletions.add(o);
           });
         else if (l.type === "attributes")
           if (l.attributeName === "style") {
-            a |= re | ue;
-            const o = l.target, f = qe(o.style);
+            a |= ie | fe;
+            const o = l.target, f = Je(o.style);
             this.pendingStyles.set(o, f);
           } else
-            l.attributeName === "class" ? a |= re | ue : l.attributeName && l.attributeName.startsWith("data-") && (a |= re | ue, l.attributeName.startsWith("data-mirage") && (a |= pe));
+            l.attributeName === "class" ? a |= ie | fe : l.attributeName && l.attributeName.startsWith("data-") && (a |= ie | fe, l.attributeName.startsWith("data-mirage") && (a |= me));
         else
-          l.type === "characterData" && (a |= be | re);
-      if (a !== ge) {
-        if (this.pendingMask |= a, a & pe) {
+          l.type === "characterData" && (a |= Se | ie);
+      if (a !== pe) {
+        if (this.pendingMask |= a, a & me) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -193,13 +193,13 @@ class Be {
     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 G = 1, ae = 2, O = {
+const q = 1, ae = 2, F = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Me = Object.values(P.VALUES);
-class Ue {
+}, ke = Object.values(G.VALUES);
+class Oe {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
    * @param font CSS font shorthand string (e.g., "400 16px Inter")
@@ -220,12 +220,12 @@ class Ue {
     return document.body.removeChild(t), c;
   }
 }
-u(Ue, "cache", /* @__PURE__ */ new Map());
-class je extends w.MeshBasicMaterial {
+u(Oe, "cache", /* @__PURE__ */ new Map());
+class Ze extends y.MeshBasicMaterial {
   constructor(t, i, r, c, n = 2) {
     super({
       transparent: !0,
-      side: w.FrontSide,
+      side: y.FrontSide,
       color: 16777215
     });
     u(this, "canvas");
@@ -233,7 +233,7 @@ class je extends w.MeshBasicMaterial {
     u(this, "qualityFactor");
     if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
       throw new Error("[Mirage] Failed to create canvas context");
-    this.qualityFactor = n, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t, i, r, c);
+    this.qualityFactor = n, this.map = new y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t, i, r, c);
   }
   wrapText(t, i) {
     const r = t.split(`
@@ -256,11 +256,11 @@ class je extends w.MeshBasicMaterial {
     n !== void 0 && (this.qualityFactor = n);
     const l = (window.devicePixelRatio || 1) * this.qualityFactor, o = r * l, f = c * l;
     this.canvas.width !== o || this.canvas.height !== f ? (this.canvas.width = o, this.canvas.height = f) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(l, 0, 0, l, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const h = this.wrapText(t, r), d = i.lineHeight, p = Ue.getBaseline(i.font);
-    h.forEach((g, M) => {
-      const m = M * d + p;
-      let y = 0;
-      i.textAlign === "center" ? y = r / 2 : i.textAlign === "right" && (y = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(g, y, m);
+    const h = this.wrapText(t, r), d = i.lineHeight, m = Oe.getBaseline(i.font);
+    h.forEach((p, R) => {
+      const v = R * d + m;
+      let b = 0;
+      i.textAlign === "center" ? b = r / 2 : i.textAlign === "right" && (b = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(p, b, v);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
@@ -275,17 +275,17 @@ function le(s, e = 0) {
 }
 function ce(s) {
   if (!s || s === "transparent")
-    return { color: new w.Color(16777215), alpha: 0 };
+    return { color: new y.Color(16777215), alpha: 0 };
   const e = s.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
     const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new w.Color(`rgb(${t}, ${i}, ${r})`), alpha: c };
+    return { color: new y.Color(`rgb(${t}, ${i}, ${r})`), alpha: c };
   }
-  return { color: new w.Color(s), alpha: 1 };
+  return { color: new y.Color(s), alpha: 1 };
 }
-function Oe(s) {
+function ze(s) {
   const e = [];
   let t = "", i = 0;
   for (let r = 0; r < s.length; r++) {
@@ -302,13 +302,13 @@ function Oe(s) {
   }
   return t && e.push(t.trim()), e;
 }
-function Ke(s) {
+function Qe(s) {
   if (!s || typeof s != "string" || !s.includes("linear-gradient"))
     return null;
   const e = s.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], i = Oe(t);
+  const t = e[1], i = ze(t);
   let r = Math.PI, c = 0;
   const n = i[0].trim();
   if (n.startsWith("to "))
@@ -322,13 +322,13 @@ function Ke(s) {
     const o = i[l].trim(), f = o.lastIndexOf(" ");
     let h = o, d = null;
     if (f !== -1 && !o.endsWith(")")) {
-      const g = o.substring(f + 1);
-      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = o.substring(0, f).trim(), d = g);
+      const p = o.substring(f + 1);
+      (p.endsWith("%") || p.endsWith("px") || !isNaN(parseFloat(p))) && (h = o.substring(0, f).trim(), d = p);
     }
-    const p = ce(h);
+    const m = ce(h);
     a.push({
-      color: p.color,
-      alpha: p.alpha,
+      color: m.color,
+      alpha: m.alpha,
       rawStop: d,
       stop: 0
     });
@@ -342,38 +342,38 @@ function Ke(s) {
       if (a[o].rawStop !== null || o === a.length - 1) {
         const f = o - l;
         if (f > 1) {
-          const h = a[l].stop, p = (a[o].stop - h) / f;
-          for (let g = 1; g < f; g++)
-            a[l + g].stop = h + p * g;
+          const h = a[l].stop, m = (a[o].stop - h) / f;
+          for (let p = 1; p < f; p++)
+            a[l + p].stop = h + m * p;
         }
         l = o;
       }
   }
   return { angle: r, stops: a };
 }
-function Je(s) {
+function et(s) {
   if (!s || s === "none")
     return null;
-  const e = Oe(s);
+  const e = ze(s);
   if (e.length === 0)
     return null;
   const t = e[0].trim(), i = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, r = t.match(i);
   let c = "transparent", n = t;
   if (r && r[1] !== "inset") {
-    const p = r[1];
-    (p.startsWith("rgb") || p.startsWith("#") || p === "black" || p === "white" || p === "transparent") && (c = p, n = t.replace(p, "").trim());
+    const m = r[1];
+    (m.startsWith("rgb") || m.startsWith("#") || m === "black" || m === "white" || m === "transparent") && (c = m, n = t.replace(m, "").trim());
   }
   n = n.replace("inset", "").trim();
-  const a = n.split(/\s+/).map((p) => parseFloat(p) || 0), l = a[0] || 0, o = a[1] || 0, f = a[2] || 0, h = a[3] || 0, d = ce(c);
+  const a = n.split(/\s+/).map((m) => parseFloat(m) || 0), l = a[0] || 0, o = a[1] || 0, f = a[2] || 0, h = a[3] || 0, d = ce(c);
   return { offsetX: l, offsetY: o, blurRadius: f, spreadRadius: h, color: d.color, alpha: d.alpha };
 }
-const Ze = `varying vec2 vUv;
+const tt = `varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   vScreenPos = gl_Position;
-}`, Qe = `varying vec2 vUv;
+}`, rt = `varying vec2 vUv;
 uniform vec2 uSize;
 uniform vec2 uMeshSize;
 uniform vec4 uShadowColor;
@@ -532,89 +532,90 @@ void main() {
 
   // #include <colorspace_fragment>
 }
-`, et = `uniform sampler2D uTexture;
+`, it = `uniform sampler2D uTexture;
 varying vec4 vScreenPos;
 uniform vec2 uTextureRepeat;
-uniform vec2 uTextureOffset;`, tt = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+uniform vec2 uTextureOffset;`, st = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 vec2 resultUv = screenUv;
 
-`, rt = `vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`, De = {
-  vertexShader: Ze,
-  fragmentShader: Qe
-}, Ae = {
-  declChunk: et,
-  uvChunk: tt,
-  baseColorChunk: rt
+`, nt = `vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`, Ie = {
+  vertexShader: tt,
+  fragmentShader: rt
+}, Be = {
+  declChunk: it,
+  uvChunk: st,
+  baseColorChunk: nt
 };
-function it(s, e, t, i = null, r) {
+function ot(s, e, t, i = null, r) {
   var C;
   const c = i !== null || !!s.imageSrc;
   let n = "";
   const a = {};
   if (r != null && r.uniforms)
-    for (const [b, S] of Object.entries(r.uniforms))
-      typeof S == "number" ? (n += `uniform float ${b};
-`, a[b] = { value: S }) : Array.isArray(S) ? S.length === 2 ? (n += `uniform vec2 ${b};
-`, a[b] = { value: new w.Vector2(...S) }) : S.length === 3 ? (n += `uniform vec3 ${b};
-`, a[b] = { value: new w.Vector3(...S) }) : S.length === 4 && (n += `uniform vec4 ${b};
-`, a[b] = { value: new w.Vector4(...S) }) : (n += `uniform float ${b};
-`, a[b] = { value: S });
-  const l = r !== void 0, o = (c || l ? Ae.declChunk : "") + `
+    for (const [w, x] of Object.entries(r.uniforms))
+      typeof x == "number" ? (n += `uniform float ${w};
+`, a[w] = { value: x }) : Array.isArray(x) ? x.length === 2 ? (n += `uniform vec2 ${w};
+`, a[w] = { value: new y.Vector2(...x) }) : x.length === 3 ? (n += `uniform vec3 ${w};
+`, a[w] = { value: new y.Vector3(...x) }) : x.length === 4 && (n += `uniform vec4 ${w};
+`, a[w] = { value: new y.Vector4(...x) }) : x && typeof x == "object" && x.type ? (n += `uniform ${x.type} ${w};
+`, a[w] = x) : (n += `uniform float ${w};
+`, a[w] = { value: x });
+  const l = r !== void 0, o = (c || l ? Be.declChunk : "") + `
 ` + n, f = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 `, h = s.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 localUv = (p / uSize) + 0.5;
 vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
-`, d = c || l ? f + h + ((r == null ? void 0 : r.uvModifier) || "") : "", p = c || l ? Ae.baseColorChunk : "", g = (r == null ? void 0 : r.colorModifier) || "", M = De.fragmentShader.replace("#INJECT_DECLARATIONS", o).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), m = ce(s.backgroundColor), y = ce(s.borderColor), E = {
-    uSize: { value: new w.Vector2(e, t) },
-    uMeshSize: { value: new w.Vector2(e, t) },
-    uShadowColor: { value: new w.Vector4(0, 0, 0, 0) },
-    uShadowOffset: { value: new w.Vector2(0, 0) },
+`, d = c || l ? f + h + ((r == null ? void 0 : r.uvModifier) || "") : "", m = c || l ? Be.baseColorChunk : "", p = (r == null ? void 0 : r.colorModifier) || "", R = Ie.fragmentShader.replace("#INJECT_DECLARATIONS", o).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", m).replace("#INJECT_COLOR_MODIFIER", p), v = ce(s.backgroundColor), b = ce(s.borderColor), E = {
+    uSize: { value: new y.Vector2(e, t) },
+    uMeshSize: { value: new y.Vector2(e, t) },
+    uShadowColor: { value: new y.Vector4(0, 0, 0, 0) },
+    uShadowOffset: { value: new y.Vector2(0, 0) },
     uShadowBlur: { value: 0 },
     uShadowSpread: { value: 0 },
     uBgColor: {
-      value: new w.Vector4(
-        m.color.r,
-        m.color.g,
-        m.color.b,
-        m.alpha
+      value: new y.Vector4(
+        v.color.r,
+        v.color.g,
+        v.color.b,
+        v.alpha
       )
     },
     uBorderColor: {
-      value: new w.Vector4(
-        y.color.r,
-        y.color.g,
-        y.color.b,
-        y.alpha
+      value: new y.Vector4(
+        b.color.r,
+        b.color.g,
+        b.color.b,
+        b.alpha
       )
     },
-    uBorderRadius: { value: new w.Vector4(0, 0, 0, 0) },
+    uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
     uBorderWidth: { value: le(s.borderWidth) },
     uOpacity: { value: (C = s.opacity) != null ? C : 1 },
     uTexture: { value: null },
-    uTextureRepeat: { value: new w.Vector2(1, 1) },
-    uTextureOffset: { value: new w.Vector2(0, 0) },
+    uTextureRepeat: { value: new y.Vector2(1, 1) },
+    uTextureOffset: { value: new y.Vector2(0, 0) },
     uGradientCount: { value: 0 },
     uGradientAngle: { value: 0 },
     uGradientColors: {
-      value: Array.from({ length: 8 }, () => new w.Vector4(0, 0, 0, 0))
+      value: Array.from({ length: 8 }, () => new y.Vector4(0, 0, 0, 0))
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  _e(E.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (E.uTexture.value = i);
-  const A = new w.ShaderMaterial({
-    uniforms: te(te({}, E), a),
-    vertexShader: De.vertexShader,
-    fragmentShader: M,
+  Ne(E.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (E.uTexture.value = i);
+  const M = new y.ShaderMaterial({
+    uniforms: re(re({}, E), a),
+    vertexShader: Ie.vertexShader,
+    fragmentShader: R,
     transparent: !0,
-    side: w.FrontSide
+    side: y.FrontSide
     // for better performance
   });
-  return s.backgroundImage && xe(A, { backgroundImage: s.backgroundImage }), A;
+  return s.backgroundImage && Ee(M, { backgroundImage: s.backgroundImage }), M;
 }
-function st(s, e, t, i, r) {
+function at(s, e, t, i, r) {
   const c = le(e.borderWidth);
-  xe(s, {
+  Ee(s, {
     width: t,
     height: i,
     borderRadius: e.borderRadius,
@@ -627,10 +628,10 @@ function st(s, e, t, i, r) {
     boxShadow: e.boxShadow
   });
 }
-function xe(s, e) {
+function Ee(s, e) {
   var i, r, c;
   if (e.boxShadow !== void 0) {
-    const n = Je(e.boxShadow);
+    const n = et(e.boxShadow);
     n ? (s.uniforms.uShadowColor.value.set(n.color.r, n.color.g, n.color.b, n.alpha), s.uniforms.uShadowOffset.value.set(n.offsetX, n.offsetY), s.uniforms.uShadowBlur.value = n.blurRadius, s.uniforms.uShadowSpread.value = n.spreadRadius, s.userData.shadowPadding = n.blurRadius + n.spreadRadius + Math.max(Math.abs(n.offsetX), Math.abs(n.offsetY))) : (s.uniforms.uShadowColor.value.w = 0, s.userData.shadowPadding = 0);
   }
   if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), s.uniforms.uMeshSize) {
@@ -639,7 +640,7 @@ function xe(s, e) {
   }
   if (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);
-    _e(s.uniforms.uBorderRadius.value, e.borderRadius, n);
+    Ne(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)) {
@@ -710,7 +711,7 @@ function xe(s, e) {
   } else
     s.uniforms.uTextureRepeat && (s.uniforms.uTextureRepeat.value.set(1, 1), s.uniforms.uTextureOffset.value.set(0, 0));
   if (e.backgroundImage !== void 0) {
-    const n = Ke(e.backgroundImage);
+    const n = Qe(e.backgroundImage);
     if (n) {
       s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
       for (let a = 0; a < 8; a++)
@@ -730,7 +731,7 @@ function xe(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" && n !== "boxShadow" && 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 _e(s, e, t = 0) {
+function Ne(s, e, t = 0) {
   var l, o, f, h;
   if (e == null) {
     s.set(0, 0, 0, 0);
@@ -747,24 +748,24 @@ function _e(s, e, t = 0) {
   const i = e.split("/")[0].trim().split(/\s+/), r = le(i[0], t), c = le((l = i[1]) != null ? l : i[0], t), n = le((o = i[2]) != null ? o : i[0], t), a = le((h = (f = i[3]) != null ? f : i[1]) != null ? h : i[0], t);
   s.set(r, c, n, a);
 }
-const W = {
+const P = {
   create(s, e, t, i, r, c = 2, n = null, a) {
-    return s === "BOX" ? it(
+    return s === "BOX" ? ot(
       e,
       i,
       r,
       n,
       a
-    ) : s === "TEXT" ? new je(
+    ) : s === "TEXT" ? new Ze(
       t || "",
       e,
       i,
       r,
       c
-    ) : new w.MeshBasicMaterial({ visible: !1 });
+    ) : new y.MeshBasicMaterial({ visible: !1 });
   },
   update(s, e, t, i, r, c, n = 2, a) {
-    e === "BOX" ? st(
+    e === "BOX" ? at(
       s,
       t,
       r,
@@ -779,10 +780,10 @@ const W = {
     );
   },
   forceUpdateUniforms(s, e) {
-    xe(s, e);
+    Ee(s, e);
   }
 };
-class nt {
+class lt {
   constructor(e, t = !0) {
     u(this, "observer");
     u(this, "textures", /* @__PURE__ */ new WeakMap());
@@ -808,7 +809,7 @@ class nt {
     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 Te(this, null, function* () {
+    return Me(this, null, function* () {
       if (this.loadStatus.get(e) || this.textures.has(e))
         return;
       const t = this.elementUrls.get(e);
@@ -829,8 +830,8 @@ class nt {
             "close" in i && i.close();
             return;
           }
-          const r = new w.Texture(i);
-          i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = w.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
+          const r = new y.Texture(i);
+          i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = y.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
         } catch (i) {
           console.warn("[MirageEngine] Failed to load texture:", t, i);
         } finally {
@@ -850,7 +851,7 @@ class nt {
     this.observer && this.observer.disconnect();
   }
 }
-class ot {
+class ct {
   constructor(e, t, i, r) {
     u(this, "canvas");
     u(this, "scene");
@@ -869,50 +870,50 @@ class ot {
     u(this, "registry");
     u(this, "targetRect");
     u(this, "travelersByLayer", Array.from(
-      { length: N.MAX_LAYERS },
+      { length: V.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
     u(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
     u(this, "fixedMeshes", /* @__PURE__ */ new Set());
     var a, l, o, f, h;
-    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (l = t.canvasSize) != null ? l : "viewport", this.clipArea = (o = t.travelerClipArea) != null ? o : 1, this.targetLayer = (f = t.layer) != null ? f : "base", this.textureManager = new nt((d, p) => {
-      const g = this.registry.get(d);
-      g && g.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(g.material, { texture: p });
-    }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new w.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (l = t.canvasSize) != null ? l : "viewport", this.clipArea = (o = t.travelerClipArea) != null ? o : 1, this.targetLayer = (f = t.layer) != null ? f : "base", this.textureManager = new lt((d, m) => {
+      const p = this.registry.get(d);
+      p && p.material instanceof y.ShaderMaterial && P.forceUpdateUniforms(p.material, { texture: m });
+    }, 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 w.OrthographicCamera(
+    this.camera = new y.OrthographicCamera(
       c / -2,
       c / 2,
       n / 2,
       n / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new w.WebGLRenderer({
+    ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new y.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0,
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
+    }), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
   }
   get isViewport() {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? O.SELECTED : O.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? F.SELECTED : F.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < N.MAX_LAYERS; e++) {
+    for (let e = 0; e < V.MAX_LAYERS; e++) {
       const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, i = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
       this.renderTargets.push(
-        new w.WebGLRenderTarget(
+        new y.WebGLRenderTarget(
           t * this.qualityFactor,
           i * this.qualityFactor,
           {
-            minFilter: w.LinearFilter,
-            magFilter: w.LinearFilter,
-            format: w.RGBAFormat,
+            minFilter: y.LinearFilter,
+            magFilter: y.LinearFilter,
+            format: y.RGBAFormat,
             stencilBuffer: !1,
             depthBuffer: !0
           }
@@ -950,12 +951,12 @@ class ot {
   updateUniforms(e, t) {
     const i = this.registry.get(e);
     i && (i.traverse((r) => {
-      r.isMesh && r.material && W.forceUpdateUniforms(
+      r.isMesh && r.material && P.forceUpdateUniforms(
         r.material,
         t
       );
     }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((r) => {
-      r.isMesh && r.material && W.forceUpdateUniforms(
+      r.isMesh && r.material && P.forceUpdateUniforms(
         r.material,
         t
       );
@@ -981,7 +982,7 @@ class ot {
         this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach(
           (d) => d.dispose()
         ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((d) => {
-          d instanceof w.Mesh && (d.geometry && d.geometry.dispose(), d.material && (Array.isArray(d.material) ? d.material.forEach((p) => p.dispose()) : d.material.dispose()));
+          d instanceof y.Mesh && (d.geometry && d.geometry.dispose(), d.material && (Array.isArray(d.material) ? d.material.forEach((m) => m.dispose()) : d.material.dispose()));
         }), this.registry.remove(f), this.textureManager.unregister(f);
       }
     });
@@ -994,8 +995,8 @@ class ot {
     var r, c;
     let t = this.registry.get(e.element);
     const i = JSON.stringify(e.shaderHooks || null);
-    if (t && t.userData.shaderHash !== i && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof w.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
-      const n = new w.PlaneGeometry(1, 1), a = e.isTraveler ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), l = W.create(
+    if (t && t.userData.shaderHash !== i && (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 ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), l = P.create(
         "BOX",
         e.styles,
         "",
@@ -1005,10 +1006,10 @@ class ot {
         a,
         e.shaderHooks
       );
-      t = new w.Mesh(n, l), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = l, t.userData.domElement = e.element, t.userData.shaderHash = i;
+      t = new y.Mesh(n, l), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = l, t.userData.domElement = e.element, t.userData.shaderHash = i;
     }
     if (t.userData.clipElements = e.clipElements, (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 < N.MAX_LAYERS; n++)
+      for (let n = 0; n < V.MAX_LAYERS; n++)
         n === e.captureLayer - 2 ? this.travelersByLayer[n].add(t) : this.travelersByLayer[n].delete(t);
     else
       for (const n of this.travelersByLayer)
@@ -1028,31 +1029,31 @@ class ot {
     const r = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
     ], c = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + r.map((f) => f.text).join("|"), a = (o = e.userData) == null ? void 0 : o.textChildStyleHash;
-    if (t.dirtyMask & be || n !== a) {
+    if (t.dirtyMask & Se || n !== a) {
       e.children.filter(
-        (g) => g.name.startsWith("TEXT_CHILD")
-      ).forEach((g) => {
-        var m;
-        const M = g;
-        (m = M.material.map) == null || m.dispose(), M.geometry.dispose(), e.remove(M);
+        (p) => p.name.startsWith("TEXT_CHILD")
+      ).forEach((p) => {
+        var v;
+        const R = p;
+        (v = R.material.map) == null || v.dispose(), R.geometry.dispose(), e.remove(R);
       });
-      const h = t.rect, d = h.x + h.width / 2, p = h.y + h.height / 2;
-      r.forEach((g, M) => {
-        const m = W.create(
+      const h = t.rect, d = h.x + h.width / 2, m = h.y + h.height / 2;
+      r.forEach((p, R) => {
+        const v = P.create(
           "TEXT",
           c,
-          g.text,
-          g.rect.width,
-          g.rect.height,
+          p.text,
+          p.rect.width,
+          p.rect.height,
           this.qualityFactor
-        ), y = new w.PlaneGeometry(1, 1), E = new w.Mesh(y, m);
-        E.name = `TEXT_CHILD_${M}`;
-        const A = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, C = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
-        E.scale.set(A, C, 1);
-        const b = g.rect.x + g.rect.width / 2, S = g.rect.y + g.rect.height / 2, z = b - d, X = -(S - p);
+        ), b = new y.PlaneGeometry(1, 1), E = new y.Mesh(b, v);
+        E.name = `TEXT_CHILD_${R}`;
+        const M = t.rect.width === 0 ? 1 : p.rect.width / t.rect.width, C = t.rect.height === 0 ? 1 : p.rect.height / t.rect.height;
+        E.scale.set(M, C, 1);
+        const w = p.rect.x + p.rect.width / 2, x = p.rect.y + p.rect.height / 2, z = w - d, Y = -(x - m);
         E.position.set(
           t.rect.width === 0 ? 0 : z / t.rect.width,
-          t.rect.height === 0 ? 0 : X / t.rect.height,
+          t.rect.height === 0 ? 0 : Y / t.rect.height,
           5e-3
         ), e.add(E);
       }), e.userData.textChildStyleHash = n;
@@ -1062,21 +1063,21 @@ class ot {
         return;
       const h = f;
       if (i && t.nativeLayer !== void 0)
-        h.layers.set(O.HIDDEN), t.visibility & G && h.layers.enable(O.getCaptureLayer(t.nativeLayer));
+        h.layers.set(F.HIDDEN), t.visibility & q && h.layers.enable(F.getCaptureLayer(t.nativeLayer));
       else {
-        const d = t.visibility & G ? O.BASE : O.HIDDEN;
-        if (h.layers.set(d), t.visibility & ae && h.layers.enable(O.SELECTED), t.visibility & G)
+        const d = t.visibility & q ? F.BASE : F.HIDDEN;
+        if (h.layers.set(d), t.visibility & ae && h.layers.enable(F.SELECTED), t.visibility & q)
           if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
-            for (let p = t.captureLayer; p <= N.MAX_LAYERS + 1; p++)
-              p !== t.nativeLayer && h.layers.enable(O.getCaptureLayer(p));
+            for (let m = t.captureLayer; m <= V.MAX_LAYERS + 1; m++)
+              m !== t.nativeLayer && h.layers.enable(F.getCaptureLayer(m));
           else
-            for (let p = t.captureLayer; p <= N.MAX_LAYERS + 1; p++)
-              h.layers.enable(O.getCaptureLayer(p));
+            for (let m = t.captureLayer; m <= V.MAX_LAYERS + 1; m++)
+              h.layers.enable(F.getCaptureLayer(m));
       }
     });
   }
   updateMeshProperties(e, t) {
-    var C, b, S, z, X;
+    var C, w, x, z, Y;
     const { rect: i, styles: r } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
     e.material = e.userData.baseMaterial;
     let l = ((C = e.material.userData) == null ? void 0 : C.shadowPadding) || 0;
@@ -1089,27 +1090,27 @@ class ot {
     const o = 1e-3;
     this.renderOrder++;
     const f = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY;
-    let d, p;
+    let d, m;
     if (this.isViewport)
-      d = i.x - window.innerWidth / 2 + i.width / 2, p = -i.y + window.innerHeight / 2 - i.height / 2;
+      d = i.x - window.innerWidth / 2 + i.width / 2, m = -i.y + window.innerHeight / 2 - i.height / 2;
     else {
-      const B = i.x - f, k = i.y - h;
-      d = B - n / 2 + i.width / 2, p = -k + a / 2 - i.height / 2;
+      const A = i.x - f, N = i.y - h;
+      d = A - n / 2 + i.width / 2, m = -N + a / 2 - i.height / 2;
     }
     e.position.set(
       d,
-      p,
+      m,
       r.zIndex + this.renderOrder * o
     );
-    const g = i.x, M = i.y;
-    e.userData.basePosition = { x: d, y: p }, e.userData.originalBasePosition = { x: d, y: p }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: g, y: M }, 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, y = window.getComputedStyle(m);
-    let E = 0, A = 0;
-    if (y.transform && y.transform !== "none") {
-      const B = new DOMMatrix(y.transform);
-      E = B.m41, A = B.m42;
+    const p = i.x, R = i.y;
+    e.userData.basePosition = { x: d, y: m }, e.userData.originalBasePosition = { x: d, y: m }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: p, y: R }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const v = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, b = window.getComputedStyle(v);
+    let E = 0, M = 0;
+    if (b.transform && b.transform !== "none") {
+      const A = new DOMMatrix(b.transform);
+      E = A.m41, M = A.m42;
     }
-    if (e.userData.baseTransform = { x: E, y: A }, delete e.userData.originRatioX, delete e.userData.originRatioY, W.update(
+    if (e.userData.baseTransform = { x: E, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, P.update(
       e.userData.baseMaterial,
       "BOX",
       r,
@@ -1117,120 +1118,120 @@ class ot {
       i.width,
       i.height,
       this.qualityFactor,
-      t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element)
+      t.isTraveler ? (w = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : w.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const U = W.create(
+        const _ = P.create(
           "BOX",
           t.nativeStyles,
           "",
           t.nativeRect.width,
           t.nativeRect.height,
           this.qualityFactor,
-          t.isTraveler ? (S = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : S.texture : this.textureManager.get(t.element),
+          t.isTraveler ? (x = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : x.texture : t.nativeStyles.imageSrc && t.nativeStyles.imageSrc !== t.styles.imageSrc ? new y.TextureLoader().load(t.nativeStyles.imageSrc) : this.textureManager.get(t.element),
           t.shaderHooks
-        ), V = new w.Mesh(e.geometry, U);
-        t.type === "TEXT" && (V.name = "BG_MESH"), this.scene.add(V), e.userData.nativeMesh = V;
+        ), W = new y.Mesh(e.geometry, _);
+        t.type === "TEXT" && (W.name = "BG_MESH"), this.scene.add(W), e.userData.nativeMesh = W;
       }
-      const B = e.userData.nativeMesh;
-      let k, j;
+      const A = e.userData.nativeMesh;
+      let N, B;
       if (this.isViewport)
-        k = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, j = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        N = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, B = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const U = t.nativeRect.x - f, V = t.nativeRect.y - h;
-        k = U - n / 2 + t.nativeRect.width / 2, j = -V + a / 2 - t.nativeRect.height / 2;
+        const _ = t.nativeRect.x - f, W = t.nativeRect.y - h;
+        N = _ - n / 2 + t.nativeRect.width / 2, B = -W + a / 2 - t.nativeRect.height / 2;
       }
-      let J = t.nativeRect.width, Z = t.nativeRect.height, L = k, _ = j;
+      let K = t.nativeRect.width, J = t.nativeRect.height, L = N, U = B;
       if (t.nativeStyles.transform) {
-        const U = t.nativeStyles.transform, V = U.match(/scale\(([\d.]+%?)\)/);
-        if (V) {
-          let x = parseFloat(V[1]);
-          V[1].includes("%") && (x /= 100), J *= x, Z *= x;
-        }
-        const ie = U.match(/scaleX\(([\d.]+%?)\)/);
-        if (ie) {
-          let x = parseFloat(ie[1]);
-          ie[1].includes("%") && (x /= 100), J *= x;
+        const _ = t.nativeStyles.transform, W = _.match(/scale\(([\d.]+%?)\)/);
+        if (W) {
+          let g = parseFloat(W[1]);
+          W[1].includes("%") && (g /= 100), K *= g, J *= g;
         }
-        const se = U.match(/scaleY\(([\d.]+%?)\)/);
+        const se = _.match(/scaleX\(([\d.]+%?)\)/);
         if (se) {
-          let x = parseFloat(se[1]);
-          se[1].includes("%") && (x /= 100), Z *= x;
+          let g = parseFloat(se[1]);
+          se[1].includes("%") && (g /= 100), K *= g;
         }
-        const ne = U.match(/translate\(([^,]+),\s*([^)]+)\)/);
+        const ne = _.match(/scaleY\(([\d.]+%?)\)/);
         if (ne) {
-          const x = ne[1].trim(), T = ne[2].trim();
-          let F = parseFloat(x);
-          x.includes("%") && (F = F / 100 * t.nativeRect.width);
-          let D = parseFloat(T);
-          T.includes("%") && (D = D / 100 * t.nativeRect.height), L += F, _ -= D;
+          let g = parseFloat(ne[1]);
+          ne[1].includes("%") && (g /= 100), J *= g;
+        }
+        const oe = _.match(/translate\(([^,]+),\s*([^)]+)\)/);
+        if (oe) {
+          const g = oe[1].trim(), S = oe[2].trim();
+          let k = parseFloat(g);
+          g.includes("%") && (k = k / 100 * t.nativeRect.width);
+          let O = parseFloat(S);
+          S.includes("%") && (O = O / 100 * t.nativeRect.height), L += k, U -= O;
         }
-        const he = U.match(/translateX\(([^)]+)\)/);
+        const he = _.match(/translateX\(([^)]+)\)/);
         if (he) {
-          const x = he[1].trim();
-          let T = parseFloat(x);
-          x.includes("%") && (T = T / 100 * t.nativeRect.width), L += T;
+          const g = he[1].trim();
+          let S = parseFloat(g);
+          g.includes("%") && (S = S / 100 * t.nativeRect.width), L += S;
         }
-        const v = U.match(/translateY\(([^)]+)\)/);
-        if (v) {
-          const x = v[1].trim();
-          let T = parseFloat(x);
-          x.includes("%") && (T = T / 100 * t.nativeRect.height), _ -= T;
+        const de = _.match(/translateY\(([^)]+)\)/);
+        if (de) {
+          const g = de[1].trim();
+          let S = parseFloat(g);
+          g.includes("%") && (S = S / 100 * t.nativeRect.height), U -= S;
         }
       }
-      let K = ((z = B.material.userData) == null ? void 0 : z.shadowPadding) || 0;
-      B.scale.set(J + K * 2, Z + K * 2, 1), B.position.set(
+      let Z = ((z = A.material.userData) == null ? void 0 : z.shadowPadding) || 0;
+      A.scale.set(K + Z * 2, J + Z * 2, 1), A.position.set(
         L,
-        _,
+        U,
         t.nativeStyles.zIndex + this.renderOrder * o
-      ), W.update(
-        B.material,
+      ), P.update(
+        A.material,
         "BOX",
         t.nativeStyles,
         "",
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (X = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : X.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (Y = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : Y.texture : A.material.uniforms.uTexture.value || this.textureManager.get(t.element)
       );
     } else
-      e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof w.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
+      e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const i = t.visibility & G ? O.BASE : O.HIDDEN;
-    if (e.layers.set(i), t.visibility & ae && e.layers.enable(O.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    const i = t.visibility & q ? F.BASE : F.HIDDEN;
+    if (e.layers.set(i), t.visibility & ae && e.layers.enable(F.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const r = e.userData.nativeMesh;
-      if (r.layers.set(O.HIDDEN), t.visibility & G) {
-        r.layers.enable(O.getCaptureLayer(t.nativeLayer));
-        for (let c = t.captureLayer; c <= N.MAX_LAYERS + 1; c++)
-          c !== t.nativeLayer && e.layers.enable(O.getCaptureLayer(c));
+      if (r.layers.set(F.HIDDEN), t.visibility & q) {
+        r.layers.enable(F.getCaptureLayer(t.nativeLayer));
+        for (let c = t.captureLayer; c <= V.MAX_LAYERS + 1; c++)
+          c !== t.nativeLayer && e.layers.enable(F.getCaptureLayer(c));
       }
-    } else if (t.visibility & G)
-      for (let r = t.captureLayer; r <= N.MAX_LAYERS + 1; r++)
-        e.layers.enable(O.getCaptureLayer(r));
+    } else if (t.visibility & q)
+      for (let r = t.captureLayer; r <= V.MAX_LAYERS + 1; r++)
+        e.layers.enable(F.getCaptureLayer(r));
   }
   captureRenderTarget(e, t, i) {
     if (e.size === 0 || !i)
       return;
-    const r = new w.Color(), c = this.renderer.getClearAlpha();
+    const r = new y.Color(), c = this.renderer.getClearAlpha();
     this.renderer.getClearColor(r), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(i), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
-    const n = new w.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, l = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, o = this.renderer.getPixelRatio();
+    const n = new y.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, l = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, o = this.renderer.getPixelRatio();
     for (const f of e) {
       n.setFromMatrixPosition(f.matrixWorld), n.project(this.camera);
       const h = (n.x + 1) / 2 * a, d = (n.y + 1) / 2 * l;
-      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 = f.scale.x * g + 0.5, m = f.scale.y * g + 0.5, y = h - M / 2, E = d - m / 2, A = (y * this.qualityFactor - p) / o, C = (E * this.qualityFactor - p) / o, b = (M * this.qualityFactor + p * 2) / o, S = (m * this.qualityFactor + p * 2) / o;
-      this.renderer.setScissor(A, C, b, S), this.renderer.render(this.scene, this.camera);
+      let m = 0, p = 1;
+      typeof this.clipArea == "number" ? p = this.clipArea : this.clipArea.endsWith("%") ? p = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (m = parseFloat(this.clipArea));
+      const R = f.scale.x * p + 0.5, v = f.scale.y * p + 0.5, b = h - R / 2, E = d - v / 2, M = (b * this.qualityFactor - m) / o, C = (E * this.qualityFactor - m) / o, w = (R * this.qualityFactor + m * 2) / o, x = (v * this.qualityFactor + m * 2) / o;
+      this.renderer.setScissor(M, C, w, x), this.renderer.render(this.scene, this.camera);
     }
     this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, c);
   }
   render() {
-    for (let l = 0; l < N.MAX_LAYERS; l++) {
+    for (let l = 0; l < V.MAX_LAYERS; l++) {
       const o = l + 1;
       this.captureRenderTarget(
         this.travelersByLayer[l],
-        O.getCaptureLayer(o),
+        F.getCaptureLayer(o),
         this.renderTargets[l]
       );
     }
@@ -1238,9 +1239,9 @@ class ot {
       if (o && o.width > 0 && o.height > 0) {
         const f = Math.floor((o.x - n) * t), h = Math.floor(
           (i - (o.y - c + o.height)) * t
-        ), d = Math.ceil(o.width * t), p = Math.ceil(o.height * t);
+        ), d = Math.ceil(o.width * t), m = Math.ceil(o.height * t);
         l.onBeforeRender = () => {
-          e.enable(e.SCISSOR_TEST), e.scissor(f, h, d, p);
+          e.enable(e.SCISSOR_TEST), e.scissor(f, h, d, m);
         }, l.onAfterRender = () => {
           e.disable(e.SCISSOR_TEST);
         }, l.__hasScissorHook = !0;
@@ -1269,8 +1270,8 @@ class ot {
         return;
       let o;
       if (l.nodeType === Node.TEXT_NODE) {
-        const p = document.createRange();
-        p.selectNode(l), o = p.getBoundingClientRect();
+        const m = document.createRange();
+        m.selectNode(l), o = m.getBoundingClientRect();
       } else
         o = l.getBoundingClientRect();
       const f = a.userData.domRect;
@@ -1281,96 +1282,96 @@ class ot {
           width: o.width,
           height: o.height
         };
-        const p = a.userData.clipElements;
-        if (p && p.length > 0) {
-          let y = -1 / 0, E = -1 / 0, A = 1 / 0, C = 1 / 0;
-          for (const b of p) {
-            const S = b.getBoundingClientRect();
-            y = Math.max(y, S.left), E = Math.max(E, S.top), A = Math.min(A, S.right), C = Math.min(C, S.bottom);
+        const m = a.userData.clipElements;
+        if (m && m.length > 0) {
+          let b = -1 / 0, E = -1 / 0, M = 1 / 0, C = 1 / 0;
+          for (const w of m) {
+            const x = w.getBoundingClientRect();
+            b = Math.max(b, x.left), E = Math.max(E, x.top), M = Math.min(M, x.right), C = Math.min(C, x.bottom);
           }
           a.userData.scissorRect = {
-            x: y,
+            x: b,
             y: E,
-            width: Math.max(0, A - y),
+            width: Math.max(0, M - b),
             height: Math.max(0, C - E)
           };
         } else
           a.userData.scissorRect = void 0;
-        let g, M;
+        let p, R;
         if (this.isViewport)
-          g = o.x - window.innerWidth / 2 + o.width / 2, M = -o.y + window.innerHeight / 2 - o.height / 2;
+          p = o.x - window.innerWidth / 2 + o.width / 2, R = -o.y + window.innerHeight / 2 - o.height / 2;
         else {
-          const y = o.x - e, E = o.y - t;
-          g = y - r / 2 + o.width / 2, M = -E + c / 2 - o.height / 2;
+          const b = o.x - e, E = o.y - t;
+          p = b - r / 2 + o.width / 2, R = -E + c / 2 - o.height / 2;
         }
-        a.position.setX(g), a.position.setY(M);
-        let m = ((h = a.material.userData) == null ? void 0 : h.shadowPadding) || 0;
-        if (a.scale.set(o.width + m * 2, o.height + m * 2, 1), a.updateMatrixWorld(), a.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(a.material, {
+        a.position.setX(p), a.position.setY(R);
+        let v = ((h = a.material.userData) == null ? void 0 : h.shadowPadding) || 0;
+        if (a.scale.set(o.width + v * 2, o.height + v * 2, 1), a.updateMatrixWorld(), a.material instanceof y.ShaderMaterial && P.forceUpdateUniforms(a.material, {
           width: o.width,
           height: o.height
         }), a.userData.nativeMesh) {
-          const y = a.userData.nativeMesh;
-          let E = o.width, A = o.height, C = g, b = M;
+          const b = a.userData.nativeMesh;
+          let E = o.width, M = o.height, C = p, w = R;
           if (a.userData.nativeTransform) {
-            const z = a.userData.nativeTransform, X = z.match(/scale\(([\d.]+%?)\)/);
-            if (X) {
-              let L = parseFloat(X[1]);
-              X[1].includes("%") && (L /= 100), E *= L, A *= L;
+            const z = a.userData.nativeTransform, Y = z.match(/scale\(([\d.]+%?)\)/);
+            if (Y) {
+              let L = parseFloat(Y[1]);
+              Y[1].includes("%") && (L /= 100), E *= L, M *= L;
             }
-            const B = z.match(/scaleX\(([\d.]+%?)\)/);
-            if (B) {
-              let L = parseFloat(B[1]);
-              B[1].includes("%") && (L /= 100), E *= L;
+            const A = z.match(/scaleX\(([\d.]+%?)\)/);
+            if (A) {
+              let L = parseFloat(A[1]);
+              A[1].includes("%") && (L /= 100), E *= L;
             }
-            const k = z.match(/scaleY\(([\d.]+%?)\)/);
-            if (k) {
-              let L = parseFloat(k[1]);
-              k[1].includes("%") && (L /= 100), A *= L;
+            const N = z.match(/scaleY\(([\d.]+%?)\)/);
+            if (N) {
+              let L = parseFloat(N[1]);
+              N[1].includes("%") && (L /= 100), M *= L;
             }
-            const j = z.match(/translate\(([^,]+),\s*([^)]+)\)/);
-            if (j) {
-              const L = j[1].trim(), _ = j[2].trim();
-              let K = parseFloat(L);
-              L.includes("%") && (K = K / 100 * o.width);
-              let U = parseFloat(_);
-              _.includes("%") && (U = U / 100 * o.height), C += K, b -= U;
+            const B = z.match(/translate\(([^,]+),\s*([^)]+)\)/);
+            if (B) {
+              const L = B[1].trim(), U = B[2].trim();
+              let Z = parseFloat(L);
+              L.includes("%") && (Z = Z / 100 * o.width);
+              let _ = parseFloat(U);
+              U.includes("%") && (_ = _ / 100 * o.height), C += Z, w -= _;
             }
-            const J = z.match(/translateX\(([^)]+)\)/);
+            const K = z.match(/translateX\(([^)]+)\)/);
+            if (K) {
+              const L = K[1].trim();
+              let U = parseFloat(L);
+              L.includes("%") && (U = U / 100 * o.width), C += U;
+            }
+            const J = z.match(/translateY\(([^)]+)\)/);
             if (J) {
               const L = J[1].trim();
-              let _ = parseFloat(L);
-              L.includes("%") && (_ = _ / 100 * o.width), C += _;
-            }
-            const Z = z.match(/translateY\(([^)]+)\)/);
-            if (Z) {
-              const L = Z[1].trim();
-              let _ = parseFloat(L);
-              L.includes("%") && (_ = _ / 100 * o.height), b -= _;
+              let U = parseFloat(L);
+              L.includes("%") && (U = U / 100 * o.height), w -= U;
             }
           }
-          let S = ((d = y.material.userData) == null ? void 0 : d.shadowPadding) || 0;
-          y.position.setX(C), y.position.setY(b), y.scale.set(E + S * 2, A + S * 2, 1), y.updateMatrixWorld(), y.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(y.material, {
+          let x = ((d = b.material.userData) == null ? void 0 : d.shadowPadding) || 0;
+          b.position.setX(C), b.position.setY(w), b.scale.set(E + x * 2, M + x * 2, 1), b.updateMatrixWorld(), b.material instanceof y.ShaderMaterial && P.forceUpdateUniforms(b.material, {
             width: E,
-            height: A
+            height: M
           });
         }
       }
     });
   }
 }
-function at(s) {
+function ht(s) {
   const e = s.textContent || "", t = [];
   let i = "", r = null, c = -1;
   const n = (o, f) => {
     for (let h = 0; h < o.length; h++) {
-      const d = o[h], p = document.createRange();
-      p.setStart(s, f + h), p.setEnd(s, f + h + 1);
-      const g = p.getBoundingClientRect();
-      if (g.width === 0 && g.height === 0) {
+      const d = o[h], m = document.createRange();
+      m.setStart(s, f + h), m.setEnd(s, f + h + 1);
+      const p = m.getBoundingClientRect();
+      if (p.width === 0 && p.height === 0) {
         i += d;
         continue;
       }
-      c === -1 || Math.abs(g.top - c) > g.height / 2 ? (i && r && t.push({
+      c === -1 || Math.abs(p.top - c) > p.height / 2 ? (i && r && t.push({
         text: i,
         rect: {
           left: r.left,
@@ -1379,13 +1380,13 @@ function at(s) {
           height: r.bottom - r.top
         }
       }), i = d, r = {
-        left: g.left,
-        top: g.top,
-        right: g.right,
-        bottom: g.bottom
-      }, c = g.top) : (i += d, r && (r.left = Math.min(r.left, g.left), r.top = Math.min(r.top, g.top), r.right = Math.max(r.right, g.right), r.bottom = Math.max(
+        left: p.left,
+        top: p.top,
+        right: p.right,
+        bottom: p.bottom
+      }, c = p.top) : (i += d, r && (r.left = Math.min(r.left, p.left), r.top = Math.min(r.top, p.top), r.right = Math.max(r.right, p.right), r.bottom = Math.max(
         r.bottom,
-        g.bottom
+        p.bottom
       )));
     }
   }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
@@ -1434,7 +1435,7 @@ function at(s) {
     (o) => o.text.trim().length > 0 && o.rect.width > 0 && o.rect.height > 0
   );
 }
-function ke(s) {
+function Ue(s) {
   const e = parseFloat(s.fontSize);
   let t = parseFloat(s.lineHeight);
   isNaN(t) && (t = e * 1.2);
@@ -1450,74 +1451,74 @@ function ke(s) {
     letterSpacing: i
   };
 }
-function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, c = 2, n, a, l) {
-  var K, U, V, ie, se, ne, he;
+function Xe(s, e = ie | fe | je | Se | me, t, i = 1, r = 0, c = 2, n, a, l) {
+  var _, W, se, ne, oe, he, de;
   if (s.nodeType === Node.TEXT_NODE) {
-    const v = s;
-    if (!v.textContent || !v.textContent.trim())
+    const g = s;
+    if (!g.textContent || !g.textContent.trim())
       return null;
-    const x = v.textContent.replace(/\s+/g, " ");
-    if (x.length === 0)
+    const S = g.textContent.replace(/\s+/g, " ");
+    if (S.length === 0)
       return null;
-    const T = at(v);
-    if (T.length === 0)
+    const k = ht(g);
+    if (k.length === 0)
       return null;
-    const F = v.parentElement, D = F ? window.getComputedStyle(F) : null;
-    if (!D)
+    const O = g.parentElement, I = O ? window.getComputedStyle(O) : null;
+    if (!I)
       return null;
-    const $ = Math.min(...T.map((R) => R.rect.left)), Y = Math.min(...T.map((R) => R.rect.top)), Q = Math.max(...T.map((R) => R.rect.left + R.rect.width)), I = Math.max(...T.map((R) => R.rect.top + R.rect.height));
+    const H = Math.min(...k.map((T) => T.rect.left)), X = Math.min(...k.map((T) => T.rect.top)), Q = Math.max(...k.map((T) => T.rect.left + T.rect.width)), D = Math.max(...k.map((T) => T.rect.top + T.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: v,
+      element: g,
       rect: {
-        x: $ + window.scrollX,
-        y: Y + window.scrollY,
-        width: Q - $,
-        height: I - Y
+        x: H + window.scrollX,
+        y: X + window.scrollY,
+        width: Q - H,
+        height: D - X
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(D.opacity),
-        zIndex: (isNaN(parseInt(D.zIndex)) ? 0 : parseInt(D.zIndex)) + r,
+        opacity: O && O.dataset[te.KEY] === te.VALUES.HIDE ? 1 : parseFloat(I.opacity),
+        zIndex: (isNaN(parseInt(I.zIndex)) ? 0 : parseInt(I.zIndex)) + r,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: x,
-      textLines: T.map((R) => ({
-        text: R.text.trim(),
+      textContent: S,
+      textLines: k.map((T) => ({
+        text: T.text.trim(),
         rect: {
-          x: R.rect.left + window.scrollX,
-          y: R.rect.top + window.scrollY,
-          width: R.rect.width,
-          height: R.rect.height
+          x: T.rect.left + window.scrollX,
+          y: T.rect.top + window.scrollY,
+          width: T.rect.width,
+          height: T.rect.height
         }
       })),
-      textStyles: ke(D),
+      textStyles: Ue(I),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
       captureLayer: i,
-      isFixed: D.position === "fixed",
+      isFixed: I.position === "fixed",
       nativeLayer: n,
-      nativeStyles: a ? te(te({
+      nativeStyles: a ? re(re({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(D.opacity),
-        zIndex: (isNaN(parseInt(D.zIndex)) ? 0 : parseInt(D.zIndex)) + r,
+        opacity: O && O.dataset[te.KEY] === te.VALUES.HIDE ? 1 : parseFloat(I.opacity),
+        zIndex: (isNaN(parseInt(I.zIndex)) ? 0 : parseInt(I.zIndex)) + r,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, ke(D)), a) : void 0,
+      }, Ue(I)), a) : void 0,
       nativeRect: a ? {
-        x: $ + window.scrollX,
-        y: Y + window.scrollY,
-        width: Q - $,
-        height: I - Y
+        x: H + window.scrollX,
+        y: X + window.scrollY,
+        width: Q - H,
+        height: D - X
       } : void 0,
       clipElements: l,
       children: []
@@ -1525,162 +1526,165 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, c = 2, n, a, l) {
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const o = s, f = o.dataset[P.KEY];
+  const o = s, f = o.dataset[G.KEY];
   let h = t, d = t;
   if (f) {
-    const v = new Set(f.split(/\s+/));
-    for (const x of v)
-      if (!Me.includes(x))
+    const g = new Set(f.split(/\s+/));
+    for (const S of g)
+      if (!ke.includes(S))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${S}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(P.VALUES.END))
+    if (g.has(G.VALUES.END))
       return null;
-    if (v.has(P.VALUES.INCLUDE_TREE) && v.has(P.VALUES.EXCLUDE_TREE))
+    if (g.has(G.VALUES.INCLUDE_TREE) && g.has(G.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(P.VALUES.INCLUDE_SELF) && v.has(P.VALUES.EXCLUDE_SELF))
+    if (g.has(G.VALUES.INCLUDE_SELF) && g.has(G.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(P.VALUES.INCLUDE_TREE) ? h = h | G : v.has(P.VALUES.EXCLUDE_TREE) && (h = h & ~G), d = h, v.has(P.VALUES.INCLUDE_SELF) ? d = d | G : v.has(P.VALUES.EXCLUDE_SELF) && (d = d & ~G);
+    g.has(G.VALUES.INCLUDE_TREE) ? h = h | q : g.has(G.VALUES.EXCLUDE_TREE) && (h = h & ~q), d = h, g.has(G.VALUES.INCLUDE_SELF) ? d = d | q : g.has(G.VALUES.EXCLUDE_SELF) && (d = d & ~q);
   }
-  const p = o.dataset[q.KEY];
-  if (p) {
-    const v = new Set(p.split(/\s+/));
-    for (const x of v)
-      if (!Me.includes(x))
+  const m = o.dataset[j.KEY];
+  if (m) {
+    const g = new Set(m.split(/\s+/));
+    for (const S of g)
+      if (!ke.includes(S))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${S}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(q.VALUES.END))
+    if (g.has(j.VALUES.END))
       return null;
-    if (v.has(q.VALUES.INCLUDE_TREE) && v.has(q.VALUES.EXCLUDE_TREE))
+    if (g.has(j.VALUES.INCLUDE_TREE) && g.has(j.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(q.VALUES.INCLUDE_SELF) && v.has(q.VALUES.EXCLUDE_SELF))
+    if (g.has(j.VALUES.INCLUDE_SELF) && g.has(j.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(q.VALUES.INCLUDE_TREE) ? h = h | ae : v.has(q.VALUES.EXCLUDE_TREE) && (h = h & ~ae), d = h, v.has(q.VALUES.INCLUDE_SELF) ? d = d | ae : v.has(q.VALUES.EXCLUDE_SELF) && (d = d & ~ae);
-  }
-  const g = o.dataset[N.KEY];
-  let M = !1, m = a ? te({}, a) : {}, y = n;
-  if (g) {
-    let v = 1;
-    const x = g.indexOf("{"), T = g.lastIndexOf("}");
-    let F = g;
-    if (x !== -1 && T !== -1 && T > x) {
-      F = g.substring(0, x).trim();
-      const I = g.substring(x, T + 1);
+    g.has(j.VALUES.INCLUDE_TREE) ? h = h | ae : g.has(j.VALUES.EXCLUDE_TREE) && (h = h & ~ae), d = h, g.has(j.VALUES.INCLUDE_SELF) ? d = d | ae : g.has(j.VALUES.EXCLUDE_SELF) && (d = d & ~ae);
+  }
+  const p = o.dataset[V.KEY];
+  let R = !1, v = a ? re({}, a) : {}, b = n;
+  if (p) {
+    let g = 1;
+    const S = p.indexOf("{"), k = p.lastIndexOf("}");
+    let O = p;
+    if (S !== -1 && k !== -1 && k > S) {
+      O = p.substring(0, S).trim();
+      const D = p.substring(S, k + 1);
       try {
-        m = new Function("return " + I)();
-      } catch (R) {
+        v = new Function("return " + D)();
+      } catch (T) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${I}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${D}`
         );
       }
     }
-    const D = F.split(/\s+/);
-    let $ = !1;
-    const Y = D.indexOf(N.VALUES.TRAVELER);
-    if (Y !== -1) {
-      M = !0, $ = !0;
-      const I = D[Y + 1];
-      if (I && !isNaN(parseInt(I, 10)))
-        v = parseInt(I, 10);
+    const I = O.split(/\s+/);
+    let H = !1;
+    const X = I.indexOf(V.VALUES.TRAVELER);
+    if (X !== -1) {
+      R = !0, H = !0;
+      const D = I[X + 1];
+      if (D && !isNaN(parseInt(D, 10)))
+        g = parseInt(D, 10);
       else {
-        const R = D.find((oe) => !isNaN(parseInt(oe, 10)));
-        R && (v = parseInt(R, 10));
+        const T = I.find((ee) => !isNaN(parseInt(ee, 10)));
+        T && (g = parseInt(T, 10));
       }
     }
-    const Q = D.indexOf(N.VALUES.NATIVE);
+    const Q = I.indexOf(V.VALUES.NATIVE);
     if (Q !== -1) {
-      const I = D[Q + 1];
-      if (I && !isNaN(parseInt(I, 10)))
-        y = parseInt(I, 10);
-      else if (!M) {
-        const R = D.find((oe) => !isNaN(parseInt(oe, 10)));
-        R && (y = parseInt(R, 10));
+      const D = I[Q + 1];
+      if (D && !isNaN(parseInt(D, 10)))
+        b = parseInt(D, 10);
+      else if (!R) {
+        const T = I.find((ee) => !isNaN(parseInt(ee, 10)));
+        T && (b = parseInt(T, 10));
       }
     }
-    if ($) {
-      const I = v + 1;
-      if (I < i)
+    if (H) {
+      const D = g + 1;
+      if (D < i)
         throw new Error(
-          `[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${i - 1}).`
+          `[MirageEngine] Traveler layer (${g}) cannot be smaller than inherited capture layer (${i - 1}).`
         );
-      i = Math.min(I, N.MAX_LAYERS + 1);
+      i = Math.min(D, V.MAX_LAYERS + 1);
     }
   }
-  const E = o.dataset[Pe.KEY];
-  let A;
-  E && (A = JSON.parse(E));
-  const C = o.getBoundingClientRect(), b = window.getComputedStyle(o);
-  if (C.width === 0 || C.height === 0 || b.display === "none")
+  const E = o.dataset[qe.KEY];
+  let M;
+  E && (M = JSON.parse(E));
+  const C = o.getBoundingClientRect(), w = window.getComputedStyle(o);
+  if (C.width === 0 || C.height === 0 || w.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 z = parseInt(b.zIndex), X = (isNaN(z) ? 0 : z) + r;
-  let B;
+  let x = o.getAttribute("data-mid");
+  x || (x = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", x));
+  const z = parseInt(w.zIndex), Y = (isNaN(z) ? 0 : z) + r;
+  let A, N;
   if (o.tagName === "IMG")
-    B = o.src;
+    A = o.src;
   else if (o.tagName.toLowerCase() === "svg") {
-    const v = o.cloneNode(!0), x = m == null ? void 0 : m.color, T = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, D = m == null ? void 0 : m.opacity, $ = (R, oe) => {
-      const H = window.getComputedStyle(R), de = oe, ze = H.fill === H.color, Ne = H.stroke === H.color, me = T || (ze ? x : void 0) || H.fill;
-      me && me !== "none" && (de.style.fill = me);
-      const ve = F || (Ne ? x : void 0) || H.stroke;
-      ve && ve !== "none" && (de.style.stroke = ve), H.strokeWidth && H.strokeWidth !== "0px" && (de.style.strokeWidth = H.strokeWidth);
-      const Se = x || H.color;
-      Se && (de.style.color = Se);
-      const we = D || H.opacity;
-      we && we !== "1" && (de.style.opacity = we);
-      for (let fe = 0; fe < R.children.length; fe++)
-        $(R.children[fe], oe.children[fe]);
+    const g = v == null ? void 0 : v.color, S = v == null ? void 0 : v.fill, k = v == null ? void 0 : v.stroke, O = v == null ? void 0 : v.opacity, I = (H) => {
+      const X = o.cloneNode(!0), Q = (ve, Ce) => {
+        const $ = window.getComputedStyle(ve), ue = Ce, Ve = $.fill === $.color, Ye = $.stroke === $.color, ye = (H ? S || (Ve ? g : void 0) : void 0) || $.fill;
+        ye && ye !== "none" && (ue.style.fill = ye);
+        const we = (H ? k || (Ye ? g : void 0) : void 0) || $.stroke;
+        we && we !== "none" && (ue.style.stroke = we), $.strokeWidth && $.strokeWidth !== "0px" && (ue.style.strokeWidth = $.strokeWidth);
+        const Te = (H ? g : void 0) || $.color;
+        Te && (ue.style.color = Te);
+        const be = (H ? O : void 0) || $.opacity;
+        be && be !== "1" && (ue.style.opacity = be);
+        for (let ge = 0; ge < ve.children.length; ge++)
+          Q(ve.children[ge], Ce.children[ge]);
+      };
+      Q(o, X);
+      const D = o.getBoundingClientRect(), T = window.devicePixelRatio * c;
+      X.hasAttribute("viewBox") || X.setAttribute("viewBox", `0 0 ${D.width} ${D.height}`), X.setAttribute("width", (D.width * T).toString()), X.setAttribute("height", (D.height * T).toString());
+      let ee = new XMLSerializer().serializeToString(X);
+      return ee.includes("xmlns=") || (ee = ee.replace(
+        "<svg",
+        '<svg xmlns="http://www.w3.org/2000/svg"'
+      )), `data:image/svg+xml;utf8,${encodeURIComponent(ee)}`;
     };
-    $(o, v);
-    const Y = o.getBoundingClientRect(), Q = window.devicePixelRatio * c;
-    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${Y.width} ${Y.height}`), v.setAttribute("width", (Y.width * Q).toString()), v.setAttribute("height", (Y.height * Q).toString());
-    let I = new XMLSerializer().serializeToString(v);
-    I.includes("xmlns=") || (I = I.replace(
-      "<svg",
-      '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), B = `data:image/svg+xml;utf8,${encodeURIComponent(I)}`;
-  } else if (b.backgroundImage && b.backgroundImage !== "none") {
-    const v = b.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    v && (B = v[1]);
-  }
-  const k = {
-    backgroundColor: b.backgroundColor,
-    backgroundImage: b.backgroundImage,
-    opacity: o.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(b.opacity),
-    zIndex: X,
-    borderRadius: b.borderRadius,
-    borderColor: b.borderColor,
-    borderWidth: b.borderWidth,
-    boxShadow: b.boxShadow,
-    imageSrc: B,
-    isTraveler: M
-  }, j = k;
-  let J, Z;
-  const L = [], _ = b.overflow === "hidden" ? [...l || [], o] : l;
-  return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((v) => {
-    const x = v.nodeType === Node.TEXT_NODE ? d : h, T = Fe(
-      v,
+    A = I(!1), b !== void 0 && (g || S || k || O) && (N = I(!0));
+  } else if (w.backgroundImage && w.backgroundImage !== "none") {
+    const g = w.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    g && (A = g[1]);
+  }
+  const B = {
+    backgroundColor: w.backgroundColor,
+    backgroundImage: w.backgroundImage,
+    opacity: o.dataset[te.KEY] === te.VALUES.HIDE ? 1 : parseFloat(w.opacity),
+    zIndex: Y,
+    borderRadius: w.borderRadius,
+    borderColor: w.borderColor,
+    borderWidth: w.borderWidth,
+    boxShadow: w.boxShadow,
+    imageSrc: A,
+    isTraveler: R
+  }, K = B;
+  let J, L;
+  const U = [], Z = w.overflow === "hidden" ? [...l || [], o] : l;
+  return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((g) => {
+    const S = g.nodeType === Node.TEXT_NODE ? d : h, k = Xe(
+      g,
       e,
-      x,
+      S,
       i,
-      X,
+      Y,
       c,
-      v.nodeType === Node.TEXT_NODE ? y : void 0,
-      v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0,
-      _
+      g.nodeType === Node.TEXT_NODE ? b : void 0,
+      g.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0,
+      Z
     );
-    T && L.push(T);
+    k && U.push(k);
   }), {
-    id: S,
+    id: x,
     type: "BOX",
     element: o,
     rect: {
@@ -1689,50 +1693,51 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, c = 2, n, a, l) {
       width: C.width,
       height: C.height
     },
-    styles: j,
+    styles: K,
     textContent: J,
-    textStyles: Z,
+    textStyles: L,
     dirtyMask: e,
     visibility: d,
-    isTraveler: M,
+    isTraveler: R,
     captureLayer: i,
-    nativeLayer: y,
-    nativeStyles: y !== void 0 ? Ce(te({}, k), {
-      backgroundColor: (K = m.backgroundColor) != null ? K : k.backgroundColor,
-      backgroundImage: (U = m.backgroundImage) != null ? U : k.backgroundImage,
-      opacity: (V = m.opacity) != null ? V : k.opacity,
-      zIndex: m.zIndex !== void 0 ? m.zIndex + X : k.zIndex,
-      borderRadius: (ie = m.borderRadius) != null ? ie : k.borderRadius,
-      borderColor: (se = m.borderColor) != null ? se : k.borderColor,
-      borderWidth: (ne = m.borderWidth) != null ? ne : k.borderWidth,
-      boxShadow: (he = m.boxShadow) != null ? he : k.boxShadow,
-      isTraveler: k.isTraveler,
-      transform: m.transform
+    nativeLayer: b,
+    nativeStyles: b !== void 0 ? Le(re({}, B), {
+      backgroundColor: (_ = v.backgroundColor) != null ? _ : B.backgroundColor,
+      backgroundImage: (W = v.backgroundImage) != null ? W : B.backgroundImage,
+      opacity: (se = v.opacity) != null ? se : B.opacity,
+      zIndex: v.zIndex !== void 0 ? v.zIndex + Y : B.zIndex,
+      borderRadius: (ne = v.borderRadius) != null ? ne : B.borderRadius,
+      borderColor: (oe = v.borderColor) != null ? oe : B.borderColor,
+      borderWidth: (he = v.borderWidth) != null ? he : B.borderWidth,
+      boxShadow: (de = v.boxShadow) != null ? de : B.boxShadow,
+      isTraveler: B.isTraveler,
+      transform: v.transform,
+      imageSrc: N != null ? N : A
     }) : void 0,
-    nativeRect: y !== void 0 ? {
-      x: m.x !== void 0 ? parseFloat(m.x) : C.left + window.scrollX,
-      y: m.y !== void 0 ? parseFloat(m.y) : C.top + window.scrollY,
-      width: m.width !== void 0 ? parseFloat(m.width) : C.width,
-      height: m.height !== void 0 ? parseFloat(m.height) : C.height
+    nativeRect: b !== void 0 ? {
+      x: v.x !== void 0 ? parseFloat(v.x) : C.left + window.scrollX,
+      y: v.y !== void 0 ? parseFloat(v.y) : C.top + window.scrollY,
+      width: v.width !== void 0 ? parseFloat(v.width) : C.width,
+      height: v.height !== void 0 ? parseFloat(v.height) : C.height
     } : void 0,
-    isFixed: b.position === "fixed",
+    isFixed: w.position === "fixed",
     clipElements: l,
-    children: L,
-    shaderHooks: A
+    children: U,
+    shaderHooks: M
   };
 }
-function lt(s, e) {
+function dt(s, e) {
   e.size !== 0 && e.forEach((t, i) => {
     var c, n, a, l;
     const r = s.get(i);
-    !r || !r.userData.basePosition || (W.forceUpdateUniforms(r.material, {
+    !r || !r.userData.basePosition || (P.forceUpdateUniforms(r.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       boxShadow: t.boxShadow,
       opacity: t.opacity,
       borderRadius: (n = t.borderRadius) != null ? n : (c = r.userData.baseStyles) == null ? void 0 : c.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    }), r.userData.nativeMesh && W.forceUpdateUniforms(r.userData.nativeMesh.material, {
+    }), r.userData.nativeMesh && P.forceUpdateUniforms(r.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       boxShadow: t.boxShadow,
@@ -1741,28 +1746,28 @@ function lt(s, e) {
     }));
   });
 }
-class ct {
+class ut {
   constructor(e, t, i, r) {
     u(this, "target");
     u(this, "renderer");
     u(this, "registry");
     u(this, "isTravelEnabled", !1);
     u(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = i, this.tracker = new Be(e, {
+    this.target = e, this.renderer = t, this.registry = i, this.tracker = new Fe(e, {
       resizeDebounce: r.resizeDebounce
     }), this.tracker.onLayoutChange.add((c, n) => {
-      document.querySelector(`[${N.NAME}~='${N.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const l = Fe(
+      document.querySelector(`[${V.NAME}~='${V.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const l = Xe(
         this.target,
         c,
-        G,
+        q,
         1,
         0,
         this.renderer.qualityFactor
       );
       l && this.renderer.syncScene(l, n);
     }), this.tracker.onStyleChange.add((c) => {
-      lt(this.registry, c);
+      dt(this.registry, c);
     }), this.tracker.onRender.add(() => {
       this.renderer.syncMeshesByDOM(), this.renderer.render();
     });
@@ -1774,7 +1779,7 @@ class ct {
     this.tracker.stop();
   }
 }
-class ht {
+class ft {
   constructor() {
     u(this, "store");
     this.store = /* @__PURE__ */ new WeakMap();
@@ -1799,17 +1804,17 @@ class ht {
     this.store.delete(e);
   }
 }
-class dt {
+class gt {
   constructor(e, t) {
     u(this, "renderer");
     u(this, "syncer");
     u(this, "target");
     u(this, "registry");
     var r, c, n;
-    if (this.target = e, this.registry = new ht(), !document.getElementById("mirage-engine-styles")) {
+    if (this.target = e, this.registry = new ft(), !document.getElementById("mirage-engine-styles")) {
       const a = document.createElement("style");
       a.id = "mirage-engine-styles", a.textContent = `
-        [${ee.NAME}="${ee.VALUES.HIDE}"] {
+        [${te.NAME}="${te.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
       `, document.head.appendChild(a);
@@ -1817,12 +1822,12 @@ class dt {
     let i;
     if (t.mode === "duplicate" ? i = (c = (r = t.container) != null ? r : this.target.parentElement) != null ? c : void 0 : i = (n = this.target.parentElement) != null ? n : void 0, !i)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new ot(
+    this.renderer = new ct(
       this.target,
       t,
       i,
       this.registry
-    ), this.renderer.mount(), this.syncer = new ct(this.target, this.renderer, this.registry, t);
+    ), this.renderer.mount(), this.syncer = new ut(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();
@@ -1865,7 +1870,7 @@ class dt {
     r();
   }
 }
-class ut {
+class pt {
   constructor(e = {}) {
     u(this, "frontSelector");
     u(this, "midLayerElement");
@@ -1874,7 +1879,7 @@ class ut {
     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 Be(document.body, e.trackerConfig || { resizeDebounce: !0 });
+    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new Fe(document.body, e.trackerConfig || { resizeDebounce: !0 });
   }
   init() {
     var e;
@@ -1936,16 +1941,16 @@ class ut {
     });
   }
 }
-class gt {
+class vt {
   constructor(e, t) {
     u(this, "_engine");
     u(this, "_sandwich");
     if (!e)
       throw new Error("[Mirage] Target element is required.");
-    if (this._engine = new dt(e, t), t.sandwich !== !1) {
+    if (this._engine = new gt(e, t), t.sandwich !== !1) {
       const i = typeof t.sandwich == "object" ? t.sandwich : {};
-      this._sandwich = new ut({
-        frontSelector: i.frontSelector || `[${Le.NAME}='${Le.VALUES.FRONT}']`
+      this._sandwich = new pt({
+        frontSelector: i.frontSelector || `[${Ae.NAME}='${Ae.VALUES.FRONT}']`
       }), this._sandwich.useTracker(this._engine.getTracker());
     }
   }
@@ -1972,5 +1977,5 @@ class gt {
   }
 }
 export {
-  gt as Mirage
+  vt as Mirage
 };