mirage-engine 0.3.15 → 0.3.17

package/dist/mirage-engine.js

@@ -12,22 +12,22 @@ var ve = (s, e, t) => e in s ? ze(s, e, { enumerable: !0, configurable: !0, writ
 }, Se = (s, e) => Ne(s, Xe(e));
 var u = (s, e, t) => (ve(s, typeof e != "symbol" ? e + "" : e, t), t);
 var Ee = (s, e, t) => new Promise((r, i) => {
-  var c = (o) => {
+  var c = (a) => {
     try {
-      a(t.next(o));
+      o(t.next(a));
     } catch (l) {
       i(l);
     }
-  }, n = (o) => {
+  }, n = (a) => {
     try {
-      a(t.throw(o));
+      o(t.throw(a));
     } catch (l) {
       i(l);
     }
-  }, a = (o) => o.done ? r(o.value) : Promise.resolve(o.value).then(c, n);
-  a((t = t.apply(s, e)).next());
+  }, o = (a) => a.done ? r(a.value) : Promise.resolve(a.value).then(c, n);
+  o((t = t.apply(s, e)).next());
 });
-import * as y from "three";
+import * as w from "three";
 const Ae = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
@@ -76,22 +76,23 @@ const Ae = {
   VALUES: {
     FRONT: "front"
   }
-}, ue = 0, re = 1, he = 2, Pe = 4, fe = 8, ye = 16;
+}, ue = 0, re = 1, he = 2, Pe = 4, fe = 8, we = 16;
 function He(s) {
-  const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
   return e ? {
     r: parseInt(e[1]) / 255,
     g: parseInt(e[2]) / 255,
-    b: parseInt(e[3]) / 255
-  } : { r: 1, g: 1, b: 1 };
+    b: parseInt(e[3]) / 255,
+    a: e[4] !== void 0 ? parseFloat(e[4]) : 1
+  } : { r: 1, g: 1, b: 1, a: 1 };
 }
 function Ge(s) {
   const e = {};
-  if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
+  if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor) {
     const t = He(s.backgroundColor);
-    e.backgroundColor = [t.r, t.g, t.b];
+    e.backgroundColor = [t.r, t.g, t.b, t.a];
   }
-  if (s.backgroundImage ? e.backgroundImage = s.backgroundImage : s.background && (e.backgroundImage = s.background), s.borderRadius && (e.borderRadius = parseFloat(s.borderRadius)), s.width && (e.width = parseFloat(s.width)), s.height && (e.height = parseFloat(s.height)), s.transform && s.transform !== "none") {
+  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") {
     const t = new DOMMatrix(s.transform);
     e.x = t.m41, e.y = t.m42, e.z = t.m43;
   }
@@ -151,23 +152,23 @@ class ke {
       onStart: r.onStart,
       onEnd: r.onEnd
     }, this.observer = new MutationObserver((n) => {
-      let a = ue;
-      for (const o of n)
-        if (o.type === "childList")
-          a |= fe, o.removedNodes.length > 0 && o.removedNodes.forEach((l) => {
+      let o = ue;
+      for (const a of n)
+        if (a.type === "childList")
+          o |= fe, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
             l instanceof HTMLElement && this.pendingDeletions.add(l);
           });
-        else if (o.type === "attributes")
-          if (o.attributeName === "style") {
-            a |= re | he;
-            const l = o.target, d = Ge(l.style);
+        else if (a.type === "attributes")
+          if (a.attributeName === "style") {
+            o |= re | he;
+            const l = a.target, d = Ge(l.style);
             this.pendingStyles.set(l, d);
           } else
-            o.attributeName === "class" ? a |= re | he : o.attributeName && o.attributeName.startsWith("data-") && (a |= re | he, o.attributeName.startsWith("data-mirage") && (a |= fe));
+            a.attributeName === "class" ? o |= re | he : a.attributeName && a.attributeName.startsWith("data-") && (o |= re | he, a.attributeName.startsWith("data-mirage") && (o |= fe));
         else
-          o.type === "characterData" && (a |= ye | re);
-      if (a !== ue) {
-        if (this.pendingMask |= a, a & fe) {
+          a.type === "characterData" && (o |= we | re);
+      if (o !== ue) {
+        if (this.pendingMask |= o, o & fe) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -192,7 +193,7 @@ class ke {
     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 $ = 1, ae = 2, O = {
+const $ = 1, oe = 2, O = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
@@ -220,11 +221,11 @@ class Ie {
   }
 }
 u(Ie, "cache", /* @__PURE__ */ new Map());
-class $e extends y.MeshBasicMaterial {
+class $e extends w.MeshBasicMaterial {
   constructor(t, r, i, c, n = 2) {
     super({
       transparent: !0,
-      side: y.FrontSide,
+      side: w.FrontSide,
       color: 16777215
     });
     u(this, "canvas");
@@ -232,41 +233,41 @@ class $e extends y.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 y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t, r, i, c);
+    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, r, i, c);
   }
   wrapText(t, r) {
     const i = t.split(`
 `), c = [];
     return i.forEach((n) => {
-      const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-      if (a.length === 0) {
+      const o = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (o.length === 0) {
         c.push("");
         return;
       }
-      let o = a[0];
-      for (let l = 1; l < a.length; l++) {
-        const d = a[l];
-        this.ctx.measureText(o + d).width <= r + 2 ? o += d : (o && c.push(o), o = d.trimStart());
+      let a = o[0];
+      for (let l = 1; l < o.length; l++) {
+        const d = o[l];
+        this.ctx.measureText(a + d).width <= r + 2 ? a += d : (a && c.push(a), a = d.trimStart());
       }
-      o && c.push(o);
+      a && c.push(a);
     }), c;
   }
   updateText(t, r, i, c, n) {
     n !== void 0 && (this.qualityFactor = n);
-    const o = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * o, d = c * o;
-    this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(o, 0, 0, o, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
+    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, g = Ie.getBaseline(r.font);
     h.forEach((p, v) => {
-      const w = v * f + g;
+      const y = v * f + g;
       let C = 0;
-      r.textAlign === "center" ? C = i / 2 : r.textAlign === "right" && (C = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(p, C, w);
+      r.textAlign === "center" ? C = i / 2 : r.textAlign === "right" && (C = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(p, C, y);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function oe(s, e = 0) {
+function ae(s, e = 0) {
   if (typeof s == "number")
     return s;
   const t = parseFloat(s) || 0;
@@ -274,15 +275,15 @@ function oe(s, e = 0) {
 }
 function le(s) {
   if (!s || s === "transparent")
-    return { color: new y.Color(16777215), alpha: 0 };
+    return { color: new w.Color(16777215), alpha: 0 };
   const e = s.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
     const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new y.Color(`rgb(${t}, ${r}, ${i})`), alpha: c };
+    return { color: new w.Color(`rgb(${t}, ${r}, ${i})`), alpha: c };
   }
-  return { color: new y.Color(s), alpha: 1 };
+  return { color: new w.Color(s), alpha: 1 };
 }
 function Ue(s) {
   const e = [];
@@ -313,42 +314,42 @@ function qe(s) {
   if (n.startsWith("to "))
     n === "to top" ? i = 0 : n === "to right" ? i = Math.PI / 2 : n === "to bottom" ? i = Math.PI : n === "to left" ? i = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? i = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? i = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? i = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (i = Math.PI * 1.75), c = 1;
   else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
-    const o = parseFloat(n);
-    n.endsWith("deg") ? i = o * (Math.PI / 180) : n.endsWith("rad") ? i = o : n.endsWith("turn") && (i = o * Math.PI * 2), c = 1;
+    const a = parseFloat(n);
+    n.endsWith("deg") ? i = a * (Math.PI / 180) : n.endsWith("rad") ? i = a : n.endsWith("turn") && (i = a * Math.PI * 2), c = 1;
   }
-  const a = [];
-  for (let o = c; o < r.length && !(a.length >= 8); o++) {
-    const l = r[o].trim(), d = l.lastIndexOf(" ");
+  const o = [];
+  for (let a = c; a < r.length && !(o.length >= 8); a++) {
+    const l = r[a].trim(), d = l.lastIndexOf(" ");
     let h = l, f = null;
     if (d !== -1 && !l.endsWith(")")) {
       const p = l.substring(d + 1);
       (p.endsWith("%") || p.endsWith("px") || !isNaN(parseFloat(p))) && (h = l.substring(0, d).trim(), f = p);
     }
     const g = le(h);
-    a.push({
+    o.push({
       color: g.color,
       alpha: g.alpha,
       rawStop: f,
       stop: 0
     });
   }
-  if (a.length > 0) {
-    for (let l = 0; l < a.length; l++)
-      a[l].rawStop !== null && (a[l].stop = parseFloat(a[l].rawStop) / 100);
-    a[0].rawStop === null && (a[0].stop = 0), a.length > 1 && a[a.length - 1].rawStop === null && (a[a.length - 1].stop = 1);
-    let o = 0;
-    for (let l = 1; l < a.length; l++)
-      if (a[l].rawStop !== null || l === a.length - 1) {
-        const d = l - o;
+  if (o.length > 0) {
+    for (let l = 0; l < o.length; l++)
+      o[l].rawStop !== null && (o[l].stop = parseFloat(o[l].rawStop) / 100);
+    o[0].rawStop === null && (o[0].stop = 0), o.length > 1 && o[o.length - 1].rawStop === null && (o[o.length - 1].stop = 1);
+    let a = 0;
+    for (let l = 1; l < o.length; l++)
+      if (o[l].rawStop !== null || l === o.length - 1) {
+        const d = l - a;
         if (d > 1) {
-          const h = a[o].stop, g = (a[l].stop - h) / d;
+          const h = o[a].stop, g = (o[l].stop - h) / d;
           for (let p = 1; p < d; p++)
-            a[o + p].stop = h + g * p;
+            o[a + p].stop = h + g * p;
         }
-        o = l;
+        a = l;
       }
   }
-  return { angle: i, stops: a };
+  return { angle: i, stops: o };
 }
 function je(s) {
   if (!s || s === "none")
@@ -363,8 +364,8 @@ function je(s) {
     (g.startsWith("rgb") || g.startsWith("#") || g === "black" || g === "white" || g === "transparent") && (c = g, n = t.replace(g, "").trim());
   }
   n = n.replace("inset", "").trim();
-  const a = n.split(/\s+/).map((g) => parseFloat(g) || 0), o = a[0] || 0, l = a[1] || 0, d = a[2] || 0, h = a[3] || 0, f = le(c);
-  return { offsetX: o, offsetY: l, blurRadius: d, spreadRadius: h, color: f.color, alpha: f.alpha };
+  const o = n.split(/\s+/).map((g) => parseFloat(g) || 0), a = o[0] || 0, l = o[1] || 0, d = o[2] || 0, h = o[3] || 0, f = le(c);
+  return { offsetX: a, offsetY: l, blurRadius: d, spreadRadius: h, color: f.color, alpha: f.alpha };
 }
 const Ke = `varying vec2 vUv;
 varying vec4 vScreenPos;
@@ -550,70 +551,70 @@ function tt(s, e, t, r = null, i) {
   var S;
   const c = r !== null || !!s.imageSrc;
   let n = "";
-  const a = {};
+  const o = {};
   if (i != null && i.uniforms)
     for (const [R, E] of Object.entries(i.uniforms))
       typeof E == "number" ? (n += `uniform float ${R};
-`, a[R] = { value: E }) : Array.isArray(E) ? E.length === 2 ? (n += `uniform vec2 ${R};
-`, a[R] = { value: new y.Vector2(...E) }) : E.length === 3 ? (n += `uniform vec3 ${R};
-`, a[R] = { value: new y.Vector3(...E) }) : E.length === 4 && (n += `uniform vec4 ${R};
-`, a[R] = { value: new y.Vector4(...E) }) : (n += `uniform float ${R};
-`, a[R] = { value: E });
-  const o = i !== void 0, l = (c || o ? Me.declChunk : "") + `
+`, o[R] = { value: E }) : Array.isArray(E) ? E.length === 2 ? (n += `uniform vec2 ${R};
+`, o[R] = { value: new w.Vector2(...E) }) : E.length === 3 ? (n += `uniform vec3 ${R};
+`, o[R] = { value: new w.Vector3(...E) }) : E.length === 4 && (n += `uniform vec4 ${R};
+`, o[R] = { value: new w.Vector4(...E) }) : (n += `uniform float ${R};
+`, o[R] = { value: E });
+  const a = i !== void 0, l = (c || a ? Me.declChunk : "") + `
 ` + n, d = `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;
-`, f = c || o ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", g = c || o ? Me.baseColorChunk : "", p = (i == null ? void 0 : i.colorModifier) || "", v = Le.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", g).replace("#INJECT_COLOR_MODIFIER", p), w = le(s.backgroundColor), C = le(s.borderColor), k = {
-    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) },
+`, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", g = c || a ? Me.baseColorChunk : "", p = (i == null ? void 0 : i.colorModifier) || "", v = Le.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", g).replace("#INJECT_COLOR_MODIFIER", p), y = le(s.backgroundColor), C = le(s.borderColor), k = {
+    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) },
     uShadowBlur: { value: 0 },
     uShadowSpread: { value: 0 },
     uBgColor: {
-      value: new y.Vector4(
-        w.color.r,
-        w.color.g,
-        w.color.b,
-        w.alpha
+      value: new w.Vector4(
+        y.color.r,
+        y.color.g,
+        y.color.b,
+        y.alpha
       )
     },
     uBorderColor: {
-      value: new y.Vector4(
+      value: new w.Vector4(
         C.color.r,
         C.color.g,
         C.color.b,
         C.alpha
       )
     },
-    uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: oe(s.borderWidth) },
+    uBorderRadius: { value: new w.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: ae(s.borderWidth) },
     uOpacity: { value: (S = s.opacity) != null ? S : 1 },
     uTexture: { value: null },
-    uTextureRepeat: { value: new y.Vector2(1, 1) },
-    uTextureOffset: { value: new y.Vector2(0, 0) },
+    uTextureRepeat: { value: new w.Vector2(1, 1) },
+    uTextureOffset: { value: new w.Vector2(0, 0) },
     uGradientCount: { value: 0 },
     uGradientAngle: { value: 0 },
     uGradientColors: {
-      value: Array.from({ length: 8 }, () => new y.Vector4(0, 0, 0, 0))
+      value: Array.from({ length: 8 }, () => new w.Vector4(0, 0, 0, 0))
     },
     uGradientStops: { value: new Float32Array(8) }
   };
   Be(k.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (k.uTexture.value = r);
-  const D = new y.ShaderMaterial({
-    uniforms: te(te({}, k), a),
+  const D = new w.ShaderMaterial({
+    uniforms: te(te({}, k), o),
     vertexShader: Le.vertexShader,
     fragmentShader: v,
     transparent: !0,
-    side: y.FrontSide
+    side: w.FrontSide
     // for better performance
   });
-  return s.backgroundImage && we(D, { backgroundImage: s.backgroundImage }), D;
+  return s.backgroundImage && ye(D, { backgroundImage: s.backgroundImage }), D;
 }
 function rt(s, e, t, r, i) {
-  const c = oe(e.borderWidth);
-  we(s, {
+  const c = ae(e.borderWidth);
+  ye(s, {
     width: t,
     height: r,
     borderRadius: e.borderRadius,
@@ -626,15 +627,15 @@ function rt(s, e, t, r, i) {
     boxShadow: e.boxShadow
   });
 }
-function we(s, e) {
+function ye(s, e) {
   var r, i, c;
   if (e.boxShadow !== void 0) {
     const n = je(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) {
-    const n = s.userData.shadowPadding || 0, a = e.width !== void 0 ? e.width : s.uniforms.uSize.value.x, o = e.height !== void 0 ? e.height : s.uniforms.uSize.value.y;
-    s.uniforms.uMeshSize.value.set(a + n * 2, o + n * 2);
+    const n = s.userData.shadowPadding || 0, o = e.width !== void 0 ? e.width : s.uniforms.uSize.value.x, a = e.height !== void 0 ? e.height : s.uniforms.uSize.value.y;
+    s.uniforms.uMeshSize.value.set(o + n * 2, a + n * 2);
   }
   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);
@@ -642,7 +643,7 @@ function we(s, e) {
   }
   if (e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
-      const n = s.uniforms.uBgColor.value.w;
+      const n = e.backgroundColor[3] !== void 0 ? e.backgroundColor[3] : s.uniforms.uBgColor.value.w;
       s.uniforms.uBgColor.value.set(
         e.backgroundColor[0],
         e.backgroundColor[1],
@@ -695,9 +696,9 @@ function we(s, e) {
   e.opacity !== void 0 && (s.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (s.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (s.uniforms.uBorderColor.value.w = e.borderOpacity), s.uniforms.uTexture && e.texture !== void 0 && (s.uniforms.uTexture.value = e.texture);
   const t = e.texture !== void 0 ? e.texture : (r = s.uniforms.uTexture) == null ? void 0 : r.value;
   if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
-    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, o = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
-    if (n && a && o && l) {
-      const d = n / a, h = o / l;
+    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, o = t.image.naturalHeight || t.image.videoHeight || t.image.height, a = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
+    if (n && o && a && l) {
+      const d = n / o, h = a / l;
       if (d > h) {
         const f = h / d;
         s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
@@ -712,17 +713,17 @@ function we(s, e) {
     const n = qe(e.backgroundImage);
     if (n) {
       s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
-      for (let a = 0; a < 8; a++)
-        if (a < n.stops.length) {
-          const o = n.stops[a];
-          s.uniforms.uGradientColors.value[a].set(
-            o.color.r,
-            o.color.g,
-            o.color.b,
-            o.alpha
-          ), s.uniforms.uGradientStops.value[a] = o.stop;
+      for (let o = 0; o < 8; o++)
+        if (o < n.stops.length) {
+          const a = n.stops[o];
+          s.uniforms.uGradientColors.value[o].set(
+            a.color.r,
+            a.color.g,
+            a.color.b,
+            a.alpha
+          ), s.uniforms.uGradientStops.value[o] = a.stop;
         } else
-          s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
+          s.uniforms.uGradientColors.value[o].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[o] = 1;
     } else
       s.uniforms.uGradientCount.value = 0;
   }
@@ -730,7 +731,7 @@ function we(s, 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 Be(s, e, t = 0) {
-  var o, l, d, h;
+  var a, l, d, h;
   if (e == null) {
     s.set(0, 0, 0, 0);
     return;
@@ -743,32 +744,32 @@ function Be(s, e, t = 0) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const r = e.split("/")[0].trim().split(/\s+/), i = oe(r[0], t), c = oe((o = r[1]) != null ? o : r[0], t), n = oe((l = r[2]) != null ? l : r[0], t), a = oe((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
-  s.set(i, c, n, a);
+  const r = e.split("/")[0].trim().split(/\s+/), i = ae(r[0], t), c = ae((a = r[1]) != null ? a : r[0], t), n = ae((l = r[2]) != null ? l : r[0], t), o = ae((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
+  s.set(i, c, n, o);
 }
 const W = {
-  create(s, e, t, r, i, c = 2, n = null, a) {
+  create(s, e, t, r, i, c = 2, n = null, o) {
     return s === "BOX" ? tt(
       e,
       r,
       i,
       n,
-      a
+      o
     ) : s === "TEXT" ? new $e(
       t || "",
       e,
       r,
       i,
       c
-    ) : new y.MeshBasicMaterial({ visible: !1 });
+    ) : new w.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, r, i, c, n = 2, a) {
+  update(s, e, t, r, i, c, n = 2, o) {
     e === "BOX" ? rt(
       s,
       t,
       i,
       c,
-      a
+      o
     ) : e === "TEXT" && s.updateText(
       r || "",
       t,
@@ -778,7 +779,7 @@ const W = {
     );
   },
   forceUpdateUniforms(s, e) {
-    we(s, e);
+    ye(s, e);
   }
 };
 class it {
@@ -817,8 +818,8 @@ class it {
           let r;
           if (t.startsWith("data:image/svg+xml"))
             r = yield new Promise((c, n) => {
-              const a = new Image();
-              a.onload = () => c(a), a.onerror = n, a.src = t;
+              const o = new Image();
+              o.onload = () => c(o), o.onerror = n, o.src = t;
             });
           else {
             const n = yield (yield fetch(t)).blob();
@@ -828,8 +829,8 @@ class it {
             "close" in r && r.close();
             return;
           }
-          const i = new y.Texture(r);
-          r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = y.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
+          const i = new w.Texture(r);
+          r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = w.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
         } catch (r) {
           console.warn("[MirageEngine] Failed to load texture:", t, r);
         } finally {
@@ -874,26 +875,26 @@ class st {
     u(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
     u(this, "fixedMeshes", /* @__PURE__ */ new Set());
-    var a, o, l, d, h;
-    this.target = e, this.mountContainer = r, this.registry = i, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (o = t.canvasSize) != null ? o : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new it((f, g) => {
+    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 it((f, g) => {
       const p = this.registry.get(f);
-      p && p.material instanceof y.ShaderMaterial && W.forceUpdateUniforms(p.material, { texture: g });
-    }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
+      p && p.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(p.material, { texture: g });
+    }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new w.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(
+    this.camera = new w.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 y.WebGLRenderer({
+    ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new w.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0,
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), 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");
+    }), 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");
   }
   get isViewport() {
     return this.mode === "overlay" && this.canvasSize === "viewport";
@@ -905,13 +906,13 @@ class st {
     for (let e = 0; e < z.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(
+        new w.WebGLRenderTarget(
           t * this.qualityFactor,
           r * this.qualityFactor,
           {
-            minFilter: y.LinearFilter,
-            magFilter: y.LinearFilter,
-            format: y.RGBAFormat,
+            minFilter: w.LinearFilter,
+            magFilter: w.LinearFilter,
+            format: w.RGBAFormat,
             stencilBuffer: !1,
             depthBuffer: !0
           }
@@ -970,8 +971,8 @@ class st {
     this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
   }
   syncScene(e, t) {
-    const r = this.target.getBoundingClientRect(), i = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, o = Math.abs(i - n) > 0.1 || Math.abs(c - a) > 0.1, l = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
-    o ? (this.targetRect = r, this.setSize(i, c), this.updateCanvasLayout()) : l ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
+    const r = this.target.getBoundingClientRect(), i = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, o = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, a = Math.abs(i - n) > 0.1 || Math.abs(c - o) > 0.1, l = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
+    a ? (this.targetRect = r, this.setSize(i, c), this.updateCanvasLayout()) : l ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
       const h = this.registry.get(d);
       if (h) {
         this.scene.remove(h);
@@ -980,7 +981,7 @@ class st {
         this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach(
           (f) => f.dispose()
         ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((f) => {
-          f instanceof y.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((g) => g.dispose()) : f.material.dispose()));
+          f instanceof w.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((g) => g.dispose()) : f.material.dispose()));
         }), this.registry.remove(d), this.textureManager.unregister(d);
       }
     });
@@ -993,18 +994,18 @@ class st {
     var i, c;
     let t = this.registry.get(e.element);
     const r = JSON.stringify(e.shaderHooks || null);
-    if (t && t.userData.shaderHash !== r && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
-      const n = new y.PlaneGeometry(1, 1), a = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = W.create(
+    if (t && t.userData.shaderHash !== r && (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), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = W.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        a,
+        o,
         e.shaderHooks
       );
-      t = new y.Mesh(n, o), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = o, t.userData.domElement = e.element, t.userData.shaderHash = r;
+      t = new w.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 < z.MAX_LAYERS; n++)
@@ -1026,25 +1027,25 @@ class st {
     var l;
     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("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
-    if (t.dirtyMask & ye || n !== a) {
+    ], 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 & we || n !== o) {
       e.children.filter(
         (p) => p.name.startsWith("TEXT_CHILD")
       ).forEach((p) => {
-        var w;
+        var y;
         const v = p;
-        (w = v.material.map) == null || w.dispose(), v.geometry.dispose(), e.remove(v);
+        (y = v.material.map) == null || y.dispose(), v.geometry.dispose(), e.remove(v);
       });
       const h = t.rect, f = h.x + h.width / 2, g = h.y + h.height / 2;
       i.forEach((p, v) => {
-        const w = W.create(
+        const y = W.create(
           "TEXT",
           c,
           p.text,
           p.rect.width,
           p.rect.height,
           this.qualityFactor
-        ), C = new y.PlaneGeometry(1, 1), k = new y.Mesh(C, w);
+        ), C = new w.PlaneGeometry(1, 1), k = new w.Mesh(C, y);
         k.name = `TEXT_CHILD_${v}`;
         const D = t.rect.width === 0 ? 1 : p.rect.width / t.rect.width, S = t.rect.height === 0 ? 1 : p.rect.height / t.rect.height;
         k.scale.set(D, S, 1);
@@ -1064,7 +1065,7 @@ class st {
         h.layers.set(O.HIDDEN), t.visibility & $ && h.layers.enable(O.getCaptureLayer(t.nativeLayer));
       else {
         const f = t.visibility & $ ? O.BASE : O.HIDDEN;
-        if (h.layers.set(f), t.visibility & ae && h.layers.enable(O.SELECTED), t.visibility & $)
+        if (h.layers.set(f), t.visibility & oe && h.layers.enable(O.SELECTED), t.visibility & $)
           if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
             for (let g = t.captureLayer; g <= z.MAX_LAYERS + 1; g++)
               g !== t.nativeLayer && h.layers.enable(O.getCaptureLayer(g));
@@ -1076,10 +1077,10 @@ class st {
   }
   updateMeshProperties(e, t) {
     var S, R, E, V, N;
-    const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, a = this.renderer.domElement.height / 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;
-    let o = ((S = e.material.userData) == null ? void 0 : S.shadowPadding) || 0;
-    e.scale.set(r.width + o * 2, r.height + o * 2, 1), e.userData.domRect = {
+    let a = ((S = e.material.userData) == null ? void 0 : S.shadowPadding) || 0;
+    e.scale.set(r.width + a * 2, r.height + a * 2, 1), e.userData.domRect = {
       x: r.x,
       y: r.y,
       width: r.width,
@@ -1093,7 +1094,7 @@ class st {
       f = r.x - window.innerWidth / 2 + r.width / 2, g = -r.y + window.innerHeight / 2 - r.height / 2;
     else {
       const L = r.x - d, P = r.y - h;
-      f = L - n / 2 + r.width / 2, g = -P + a / 2 - r.height / 2;
+      f = L - n / 2 + r.width / 2, g = -P + o / 2 - r.height / 2;
     }
     e.position.set(
       f,
@@ -1102,7 +1103,7 @@ class st {
     );
     const p = r.x, v = r.y;
     e.userData.basePosition = { x: f, y: g }, e.userData.originalBasePosition = { x: f, y: g }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: v }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
-    const w = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, C = window.getComputedStyle(w);
+    const y = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, C = window.getComputedStyle(y);
     let k = 0, D = 0;
     if (C.transform && C.transform !== "none") {
       const L = new DOMMatrix(C.transform);
@@ -1128,7 +1129,7 @@ class st {
           this.qualityFactor,
           t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), Y = new y.Mesh(e.geometry, X);
+        ), Y = new w.Mesh(e.geometry, X);
         t.type === "TEXT" && (Y.name = "BG_MESH"), this.scene.add(Y), e.userData.nativeMesh = Y;
       }
       const L = e.userData.nativeMesh;
@@ -1137,7 +1138,7 @@ class st {
         P = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, J = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
         const X = t.nativeRect.x - d, Y = t.nativeRect.y - h;
-        P = X - n / 2 + t.nativeRect.width / 2, J = -Y + a / 2 - t.nativeRect.height / 2;
+        P = X - n / 2 + t.nativeRect.width / 2, J = -Y + o / 2 - t.nativeRect.height / 2;
       }
       let Z = t.nativeRect.width, M = t.nativeRect.height, B = P, q = J;
       if (t.nativeStyles.transform) {
@@ -1193,11 +1194,11 @@ class st {
         t.isTraveler ? (N = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : N.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);
+      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);
   }
   updateMeshLayers(e, t) {
     const r = t.visibility & $ ? O.BASE : O.HIDDEN;
-    if (e.layers.set(r), t.visibility & ae && e.layers.enable(O.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    if (e.layers.set(r), t.visibility & oe && e.layers.enable(O.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const i = e.userData.nativeMesh;
       if (i.layers.set(O.HIDDEN), t.visibility & $) {
         i.layers.enable(O.getCaptureLayer(t.nativeLayer));
@@ -1211,15 +1212,15 @@ class st {
   captureRenderTarget(e, t, r) {
     if (e.size === 0 || !r)
       return;
-    const i = new y.Color(), c = this.renderer.getClearAlpha();
+    const i = new w.Color(), c = this.renderer.getClearAlpha();
     this.renderer.getClearColor(i), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(r), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
-    const n = new y.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
+    const n = new w.Vector3(), o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, a = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
     for (const d of e) {
       n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
-      const h = (n.x + 1) / 2 * a, f = (n.y + 1) / 2 * o;
+      const h = (n.x + 1) / 2 * o, f = (n.y + 1) / 2 * a;
       let g = 0, p = 1;
       typeof this.clipArea == "number" ? p = this.clipArea : this.clipArea.endsWith("%") ? p = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (g = parseFloat(this.clipArea));
-      const v = d.scale.x * p + 0.5, w = d.scale.y * p + 0.5, C = h - v / 2, k = f - w / 2, D = (C * this.qualityFactor - g) / l, S = (k * this.qualityFactor - g) / l, R = (v * this.qualityFactor + g * 2) / l, E = (w * this.qualityFactor + g * 2) / l;
+      const v = d.scale.x * p + 0.5, y = d.scale.y * p + 0.5, C = h - v / 2, k = f - y / 2, D = (C * this.qualityFactor - g) / l, S = (k * this.qualityFactor - g) / l, R = (v * this.qualityFactor + g * 2) / l, E = (y * this.qualityFactor + g * 2) / l;
       this.renderer.setScissor(D, S, R, E), 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);
@@ -1239,21 +1240,21 @@ class st {
     const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), i = this.renderer.domElement.width / r, c = this.renderer.domElement.height / r;
     this.scene.children.forEach((n) => {
       var h, f;
-      const a = n;
-      if (!a.userData || !a.userData.domElement)
+      const o = n;
+      if (!o.userData || !o.userData.domElement)
         return;
-      const o = a.userData.domElement;
-      if (!o.isConnected)
+      const a = o.userData.domElement;
+      if (!a.isConnected)
         return;
       let l;
-      if (o.nodeType === Node.TEXT_NODE) {
+      if (a.nodeType === Node.TEXT_NODE) {
         const g = document.createRange();
-        g.selectNode(o), l = g.getBoundingClientRect();
+        g.selectNode(a), l = g.getBoundingClientRect();
       } else
-        l = o.getBoundingClientRect();
-      const d = a.userData.domRect;
+        l = a.getBoundingClientRect();
+      const d = o.userData.domRect;
       if (!d || Math.abs(l.x - d.x) > 0.5 || Math.abs(l.y - d.y) > 0.5 || Math.abs(l.width - d.width) > 0.5 || Math.abs(l.height - d.height) > 0.5) {
-        a.userData.domRect = {
+        o.userData.domRect = {
           x: l.x,
           y: l.y,
           width: l.width,
@@ -1263,19 +1264,19 @@ class st {
         if (this.isViewport)
           g = l.x - window.innerWidth / 2 + l.width / 2, p = -l.y + window.innerHeight / 2 - l.height / 2;
         else {
-          const w = l.x - e, C = l.y - t;
-          g = w - i / 2 + l.width / 2, p = -C + c / 2 - l.height / 2;
+          const y = l.x - e, C = l.y - t;
+          g = y - i / 2 + l.width / 2, p = -C + c / 2 - l.height / 2;
         }
-        a.position.setX(g), a.position.setY(p);
-        let v = ((h = a.material.userData) == null ? void 0 : h.shadowPadding) || 0;
-        if (a.scale.set(l.width + v * 2, l.height + v * 2, 1), a.updateMatrixWorld(), a.material instanceof y.ShaderMaterial && W.forceUpdateUniforms(a.material, {
+        o.position.setX(g), o.position.setY(p);
+        let v = ((h = o.material.userData) == null ? void 0 : h.shadowPadding) || 0;
+        if (o.scale.set(l.width + v * 2, l.height + v * 2, 1), o.updateMatrixWorld(), o.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(o.material, {
           width: l.width,
           height: l.height
-        }), a.userData.nativeMesh) {
-          const w = a.userData.nativeMesh;
+        }), o.userData.nativeMesh) {
+          const y = o.userData.nativeMesh;
           let C = l.width, k = l.height, D = g, S = p;
-          if (a.userData.nativeTransform) {
-            const E = a.userData.nativeTransform, V = E.match(/scale\(([\d.]+%?)\)/);
+          if (o.userData.nativeTransform) {
+            const E = o.userData.nativeTransform, V = E.match(/scale\(([\d.]+%?)\)/);
             if (V) {
               let M = parseFloat(V[1]);
               V[1].includes("%") && (M /= 100), C *= M, k *= M;
@@ -1311,8 +1312,8 @@ class st {
               M.includes("%") && (B = B / 100 * l.height), S -= B;
             }
           }
-          let R = ((f = w.material.userData) == null ? void 0 : f.shadowPadding) || 0;
-          w.position.setX(D), w.position.setY(S), w.scale.set(C + R * 2, k + R * 2, 1), w.updateMatrixWorld(), w.material instanceof y.ShaderMaterial && W.forceUpdateUniforms(w.material, {
+          let R = ((f = y.material.userData) == null ? void 0 : f.shadowPadding) || 0;
+          y.position.setX(D), y.position.setY(S), y.scale.set(C + R * 2, k + R * 2, 1), y.updateMatrixWorld(), y.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(y.material, {
             width: C,
             height: k
           });
@@ -1351,18 +1352,18 @@ function nt(s) {
         p.bottom
       )));
     }
-  }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-  let o = 0;
-  for (const l of a) {
+  }, o = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+  let a = 0;
+  for (const l of o) {
     const d = document.createRange();
-    d.setStart(s, o), d.setEnd(s, o + l.length);
+    d.setStart(s, a), d.setEnd(s, a + l.length);
     const h = d.getClientRects();
     if (h.length > 1)
-      n(l, o);
+      n(l, a);
     else {
       const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
       if (f.width === 0 && f.height === 0) {
-        r += l, o += l.length;
+        r += l, a += l.length;
         continue;
       }
       c === -1 || Math.abs(f.top - c) > f.height / 2 ? (r && i && t.push({
@@ -1383,7 +1384,7 @@ function nt(s) {
         f.bottom
       )));
     }
-    o += l.length;
+    a += l.length;
   }
   return r && i && t.push({
     text: r,
@@ -1413,7 +1414,7 @@ function De(s) {
     letterSpacing: r
   };
 }
-function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
+function Oe(s, e = re | he | Pe | we | fe, t, r = 1, i = 0, c = 2, n, o) {
   var B, q, K, X, Y, ie, se;
   if (s.nodeType === Node.TEXT_NODE) {
     const m = s;
@@ -1466,7 +1467,7 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
       captureLayer: r,
       isFixed: x.position === "fixed",
       nativeLayer: n,
-      nativeStyles: a ? te(te({
+      nativeStyles: o ? te(te({
         backgroundColor: "transparent",
         backgroundImage: "",
         opacity: b && b.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(x.opacity),
@@ -1475,8 +1476,8 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, De(x)), a) : void 0,
-      nativeRect: a ? {
+      }, De(x)), o) : void 0,
+      nativeRect: o ? {
         x: _ + window.scrollX,
         y: F + window.scrollY,
         width: Q - _,
@@ -1487,7 +1488,7 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const o = s, l = o.dataset[G.KEY];
+  const a = s, l = a.dataset[G.KEY];
   let d = t, h = t;
   if (l) {
     const m = new Set(l.split(/\s+/));
@@ -1508,7 +1509,7 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
       );
     m.has(G.VALUES.INCLUDE_TREE) ? d = d | $ : m.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~$), h = d, m.has(G.VALUES.INCLUDE_SELF) ? h = h | $ : m.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~$);
   }
-  const f = o.dataset[j.KEY];
+  const f = a.dataset[j.KEY];
   if (f) {
     const m = new Set(f.split(/\s+/));
     for (const A of m)
@@ -1526,10 +1527,10 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(j.VALUES.INCLUDE_TREE) ? d = d | ae : m.has(j.VALUES.EXCLUDE_TREE) && (d = d & ~ae), h = d, m.has(j.VALUES.INCLUDE_SELF) ? h = h | ae : m.has(j.VALUES.EXCLUDE_SELF) && (h = h & ~ae);
+    m.has(j.VALUES.INCLUDE_TREE) ? d = d | oe : m.has(j.VALUES.EXCLUDE_TREE) && (d = d & ~oe), h = d, m.has(j.VALUES.INCLUDE_SELF) ? h = h | oe : m.has(j.VALUES.EXCLUDE_SELF) && (h = h & ~oe);
   }
-  const g = o.dataset[z.KEY];
-  let p = !1, v = a ? te({}, a) : {}, w = n;
+  const g = a.dataset[z.KEY];
+  let p = !1, v = o ? te({}, o) : {}, y = n;
   if (g) {
     let m = 1;
     const A = g.indexOf("{"), U = g.lastIndexOf("}");
@@ -1562,10 +1563,10 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
     if (Q !== -1) {
       const I = x[Q + 1];
       if (I && !isNaN(parseInt(I, 10)))
-        w = parseInt(I, 10);
+        y = parseInt(I, 10);
       else if (!p) {
         const T = x.find((ne) => !isNaN(parseInt(ne, 10)));
-        T && (w = parseInt(T, 10));
+        T && (y = parseInt(T, 10));
       }
     }
     if (_) {
@@ -1577,20 +1578,20 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
       r = Math.min(I, z.MAX_LAYERS + 1);
     }
   }
-  const C = o.dataset[We.KEY];
+  const C = a.dataset[We.KEY];
   let k;
   C && (k = JSON.parse(C));
-  const D = o.getBoundingClientRect(), S = window.getComputedStyle(o);
+  const D = a.getBoundingClientRect(), S = window.getComputedStyle(a);
   if (D.width === 0 || D.height === 0 || S.display === "none")
     return null;
-  let R = o.getAttribute("data-mid");
-  R || (R = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", R));
+  let R = a.getAttribute("data-mid");
+  R || (R = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", R));
   const E = parseInt(S.zIndex), V = (isNaN(E) ? 0 : E) + i;
   let N;
-  if (o.tagName === "IMG")
-    N = o.src;
-  else if (o.tagName.toLowerCase() === "svg") {
-    const m = o.cloneNode(!0), A = v == null ? void 0 : v.color, U = v == null ? void 0 : v.fill, b = v == null ? void 0 : v.stroke, x = v == null ? void 0 : v.opacity, _ = (T, ne) => {
+  if (a.tagName === "IMG")
+    N = a.src;
+  else if (a.tagName.toLowerCase() === "svg") {
+    const m = a.cloneNode(!0), A = v == null ? void 0 : v.color, U = v == null ? void 0 : v.fill, b = v == null ? void 0 : v.stroke, x = v == null ? void 0 : v.opacity, _ = (T, ne) => {
       const H = window.getComputedStyle(T), ce = ne, Fe = H.fill === H.color, _e = H.stroke === H.color, ge = U || (Fe ? A : void 0) || H.fill;
       ge && ge !== "none" && (ce.style.fill = ge);
       const pe = b || (_e ? A : void 0) || H.stroke;
@@ -1602,8 +1603,8 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
       for (let de = 0; de < T.children.length; de++)
         _(T.children[de], ne.children[de]);
     };
-    _(o, m);
-    const F = o.getBoundingClientRect(), Q = window.devicePixelRatio * c;
+    _(a, m);
+    const F = a.getBoundingClientRect(), Q = window.devicePixelRatio * c;
     m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${F.width} ${F.height}`), m.setAttribute("width", (F.width * Q).toString()), m.setAttribute("height", (F.height * Q).toString());
     let I = new XMLSerializer().serializeToString(m);
     I.includes("xmlns=") || (I = I.replace(
@@ -1617,7 +1618,7 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
   const L = {
     backgroundColor: S.backgroundColor,
     backgroundImage: S.backgroundImage,
-    opacity: o.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(S.opacity),
+    opacity: a.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(S.opacity),
     zIndex: V,
     borderRadius: S.borderRadius,
     borderColor: S.borderColor,
@@ -1628,7 +1629,7 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
   }, P = L;
   let J, Z;
   const M = [];
-  return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((m) => {
+  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((m) => {
     const A = m.nodeType === Node.TEXT_NODE ? h : d, U = Oe(
       m,
       e,
@@ -1636,14 +1637,14 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
       r,
       V,
       c,
-      m.nodeType === Node.TEXT_NODE ? w : void 0,
+      m.nodeType === Node.TEXT_NODE ? y : void 0,
       m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
     );
     U && M.push(U);
   }), {
     id: R,
     type: "BOX",
-    element: o,
+    element: a,
     rect: {
       x: D.left + window.scrollX,
       y: D.top + window.scrollY,
@@ -1657,8 +1658,8 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
     visibility: h,
     isTraveler: p,
     captureLayer: r,
-    nativeLayer: w,
-    nativeStyles: w !== void 0 ? Se(te({}, L), {
+    nativeLayer: y,
+    nativeStyles: y !== void 0 ? Se(te({}, L), {
       backgroundColor: (B = v.backgroundColor) != null ? B : L.backgroundColor,
       backgroundImage: (q = v.backgroundImage) != null ? q : L.backgroundImage,
       opacity: (K = v.opacity) != null ? K : L.opacity,
@@ -1670,7 +1671,7 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
       isTraveler: L.isTraveler,
       transform: v.transform
     }) : void 0,
-    nativeRect: w !== void 0 ? {
+    nativeRect: y !== void 0 ? {
       x: v.x !== void 0 ? parseFloat(v.x) : D.left + window.scrollX,
       y: v.y !== void 0 ? parseFloat(v.y) : D.top + window.scrollY,
       width: v.width !== void 0 ? parseFloat(v.width) : D.width,
@@ -1681,25 +1682,27 @@ function Oe(s, e = re | he | Pe | ye | fe, t, r = 1, i = 0, c = 2, n, a) {
     shaderHooks: k
   };
 }
-function at(s, e) {
+function ot(s, e) {
   e.size !== 0 && e.forEach((t, r) => {
-    var c, n, a, o;
+    var c, n, o, a;
     const i = s.get(r);
     !i || !i.userData.basePosition || (W.forceUpdateUniforms(i.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
+      boxShadow: t.boxShadow,
       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 && W.forceUpdateUniforms(i.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
+      boxShadow: t.boxShadow,
       opacity: t.opacity,
-      borderRadius: (o = t.borderRadius) != null ? o : (a = i.userData.baseStyles) == null ? void 0 : a.borderRadius
+      borderRadius: (a = t.borderRadius) != null ? a : (o = i.userData.baseStyles) == null ? void 0 : o.borderRadius
     }));
   });
 }
-class ot {
+class at {
   constructor(e, t, r, i) {
     u(this, "target");
     u(this, "renderer");
@@ -1710,7 +1713,7 @@ class ot {
       resizeDebounce: i.resizeDebounce
     }), this.tracker.onLayoutChange.add((c, n) => {
       document.querySelector(`[${z.NAME}~='${z.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const o = Oe(
+      const a = Oe(
         this.target,
         c,
         $,
@@ -1718,9 +1721,9 @@ class ot {
         0,
         this.renderer.qualityFactor
       );
-      o && this.renderer.syncScene(o, n);
+      a && this.renderer.syncScene(a, n);
     }), this.tracker.onStyleChange.add((c) => {
-      at(this.registry, c);
+      ot(this.registry, c);
     }), this.tracker.onRender.add(() => {
       this.renderer.syncMeshesByDOM(), this.renderer.render();
     });
@@ -1765,12 +1768,12 @@ class ct {
     u(this, "registry");
     var i, c, n;
     if (this.target = e, this.registry = new lt(), !document.getElementById("mirage-engine-styles")) {
-      const a = document.createElement("style");
-      a.id = "mirage-engine-styles", a.textContent = `
+      const o = document.createElement("style");
+      o.id = "mirage-engine-styles", o.textContent = `
         [${ee.NAME}="${ee.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
-      `, document.head.appendChild(a);
+      `, document.head.appendChild(o);
     }
     let r;
     if (t.mode === "duplicate" ? r = (c = (i = t.container) != null ? i : this.target.parentElement) != null ? c : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
@@ -1780,7 +1783,7 @@ class ct {
       t,
       r,
       this.registry
-    ), this.renderer.mount(), this.syncer = new ot(this.target, this.renderer, this.registry, t);
+    ), this.renderer.mount(), this.syncer = new at(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();