@mirage-engine/core 0.3.15 → 0.3.17

package/dist/mirage-engine.js

@@ -2,16 +2,16 @@ var Oe = Object.defineProperty, Xe = Object.defineProperties;
 var _e = Object.getOwnPropertyDescriptors;
 var xe = Object.getOwnPropertySymbols;
 var Ne = Object.prototype.hasOwnProperty, ze = Object.prototype.propertyIsEnumerable;
-var ve = (i, e, t) => e in i ? Oe(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, te = (i, e) => {
+var ve = (r, e, t) => e in r ? Oe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, te = (r, e) => {
   for (var t in e || (e = {}))
-    Ne.call(e, t) && ve(i, t, e[t]);
+    Ne.call(e, t) && ve(r, t, e[t]);
   if (xe)
     for (var t of xe(e))
-      ze.call(e, t) && ve(i, t, e[t]);
-  return i;
-}, Se = (i, e) => Xe(i, _e(e));
-var p = (i, e, t) => (ve(i, typeof e != "symbol" ? e + "" : e, t), t);
-var Ee = (i, e, t) => new Promise((r, s) => {
+      ze.call(e, t) && ve(r, t, e[t]);
+  return r;
+}, Se = (r, e) => Xe(r, _e(e));
+var p = (r, e, t) => (ve(r, typeof e != "symbol" ? e + "" : e, t), t);
+var Ee = (r, e, t) => new Promise((i, s) => {
   var c = (n) => {
     try {
       a(t.next(n));
@@ -24,8 +24,8 @@ var Ee = (i, e, t) => new Promise((r, s) => {
     } catch (l) {
       s(l);
     }
-  }, a = (n) => n.done ? r(n.value) : Promise.resolve(n.value).then(c, o);
-  a((t = t.apply(i, e)).next());
+  }, a = (n) => n.done ? i(n.value) : Promise.resolve(n.value).then(c, o);
+  a((t = t.apply(r, e)).next());
 });
 import * as w from "three";
 const De = {
@@ -77,22 +77,23 @@ const De = {
     FRONT: "front"
   }
 }, ue = 0, re = 1, he = 2, Ye = 4, fe = 8, we = 16;
-function We(i) {
-  const e = i.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+function We(r) {
+  const e = r.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 Pe(i) {
+function Pe(r) {
   const e = {};
-  if (i.opacity && (e.opacity = parseFloat(i.opacity)), i.backgroundColor && i.backgroundColor !== "rgba(0, 0, 0, 0)") {
-    const t = We(i.backgroundColor);
-    e.backgroundColor = [t.r, t.g, t.b];
+  if (r.opacity && (e.opacity = parseFloat(r.opacity)), r.backgroundColor) {
+    const t = We(r.backgroundColor);
+    e.backgroundColor = [t.r, t.g, t.b, t.a];
   }
-  if (i.backgroundImage ? e.backgroundImage = i.backgroundImage : i.background && (e.backgroundImage = i.background), i.borderRadius && (e.borderRadius = parseFloat(i.borderRadius)), i.width && (e.width = parseFloat(i.width)), i.height && (e.height = parseFloat(i.height)), i.transform && i.transform !== "none") {
-    const t = new DOMMatrix(i.transform);
+  if (r.backgroundImage ? e.backgroundImage = r.backgroundImage : r.background && (e.backgroundImage = r.background), r.boxShadow && (e.boxShadow = r.boxShadow), r.borderRadius && (e.borderRadius = parseFloat(r.borderRadius)), r.width && (e.width = parseFloat(r.width)), r.height && (e.height = parseFloat(r.height)), r.transform && r.transform !== "none") {
+    const t = new DOMMatrix(r.transform);
     e.x = t.m41, e.y = t.m42, e.z = t.m43;
   }
   return e;
@@ -136,20 +137,20 @@ class He {
     p(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
-      this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = ue);
+      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = ue);
       const e = window.scrollX, t = window.scrollY;
-      (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((r) => r(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
+      (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;
-      }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
+      }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((i) => i(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((i) => i()), requestAnimationFrame(this.renderLoop);
     });
     var s, c;
     this.target = e;
-    const r = (s = t.resizeDebounce) != null ? s : !0;
-    r === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : r === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
+    const i = (s = t.resizeDebounce) != null ? s : !0;
+    i === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : i === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
       enabled: !0,
-      delay: (c = r.delay) != null ? c : 150,
-      onStart: r.onStart,
-      onEnd: r.onEnd
+      delay: (c = i.delay) != null ? c : 150,
+      onStart: i.onStart,
+      onEnd: i.onEnd
     }, this.observer = new MutationObserver((o) => {
       let a = ue;
       for (const n of o)
@@ -192,10 +193,10 @@ class He {
     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 q = 1, ae = 2, ht = 0, F = {
+const q = 1, ae = 2, ht = 0, B = {
   BASE: 0,
   SELECTED: 1,
-  getCaptureLayer: (i) => 31 - i,
+  getCaptureLayer: (r) => 31 - r,
   HIDDEN: 31
 }, Te = Object.values(G.VALUES);
 class Ae {
@@ -213,15 +214,15 @@ class Ae {
   static calculateBaselineFromDOM(e) {
     if (typeof document == "undefined")
       return 0;
-    const t = document.createElement("div"), r = document.createElement("span"), s = document.createElement("img");
-    t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", r.style.margin = "0", r.style.padding = "0", r.style.border = "none", r.style.lineHeight = "normal", s.width = 1, s.height = 1, s.style.verticalAlign = "baseline", r.appendChild(document.createTextNode("Hidden Text")), t.appendChild(r), t.appendChild(s), document.body.appendChild(t);
-    const c = s.offsetTop - r.offsetTop;
+    const t = document.createElement("div"), i = document.createElement("span"), s = document.createElement("img");
+    t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", i.style.margin = "0", i.style.padding = "0", i.style.border = "none", i.style.lineHeight = "normal", s.width = 1, s.height = 1, s.style.verticalAlign = "baseline", i.appendChild(document.createTextNode("Hidden Text")), t.appendChild(i), t.appendChild(s), document.body.appendChild(t);
+    const c = s.offsetTop - i.offsetTop;
     return document.body.removeChild(t), c;
   }
 }
 p(Ae, "cache", /* @__PURE__ */ new Map());
 class Ge extends w.MeshBasicMaterial {
-  constructor(t, r, s, c, o = 2) {
+  constructor(t, i, s, c, o = 2) {
     super({
       transparent: !0,
       side: w.FrontSide,
@@ -232,9 +233,9 @@ class Ge extends w.MeshBasicMaterial {
     p(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 = o, 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, s, c);
+    this.qualityFactor = o, 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, s, c);
   }
-  wrapText(t, r) {
+  wrapText(t, i) {
     const s = t.split(`
 `), c = [];
     return s.forEach((o) => {
@@ -246,54 +247,54 @@ class Ge extends w.MeshBasicMaterial {
       let n = a[0];
       for (let l = 1; l < a.length; l++) {
         const d = a[l];
-        this.ctx.measureText(n + d).width <= r + 2 ? n += d : (n && c.push(n), n = d.trimStart());
+        this.ctx.measureText(n + d).width <= i + 2 ? n += d : (n && c.push(n), n = d.trimStart());
       }
       n && c.push(n);
     }), c;
   }
-  updateText(t, r, s, c, o) {
+  updateText(t, i, s, c, o) {
     o !== void 0 && (this.qualityFactor = o);
     const n = (window.devicePixelRatio || 1) * this.qualityFactor, l = s * n, d = c * n;
-    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(n, 0, 0, n, 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, s), u = r.lineHeight, f = Ae.getBaseline(r.font);
+    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(n, 0, 0, n, 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, s), u = i.lineHeight, f = Ae.getBaseline(i.font);
     h.forEach((g, v) => {
       const b = v * u + f;
       let C = 0;
-      r.textAlign === "center" ? C = s / 2 : r.textAlign === "right" && (C = s), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, C, b);
+      i.textAlign === "center" ? C = s / 2 : i.textAlign === "right" && (C = s), this.ctx.textAlign = i.textAlign, this.ctx.fillText(g, C, b);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function ne(i, e = 0) {
-  if (typeof i == "number")
-    return i;
-  const t = parseFloat(i) || 0;
-  return typeof i == "string" && i.includes("%") ? t / 100 * e : t;
+function ne(r, e = 0) {
+  if (typeof r == "number")
+    return r;
+  const t = parseFloat(r) || 0;
+  return typeof r == "string" && r.includes("%") ? t / 100 * e : t;
 }
-function le(i) {
-  if (!i || i === "transparent")
+function le(r) {
+  if (!r || r === "transparent")
     return { color: new w.Color(16777215), alpha: 0 };
-  const e = i.match(
+  const e = r.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
-    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), s = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new w.Color(`rgb(${t}, ${r}, ${s})`), alpha: c };
+    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), s = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new w.Color(`rgb(${t}, ${i}, ${s})`), alpha: c };
   }
-  return { color: new w.Color(i), alpha: 1 };
+  return { color: new w.Color(r), alpha: 1 };
 }
-function Ie(i) {
+function Ie(r) {
   const e = [];
-  let t = "", r = 0;
-  for (let s = 0; s < i.length; s++) {
-    const c = i[s];
+  let t = "", i = 0;
+  for (let s = 0; s < r.length; s++) {
+    const c = r[s];
     if (c === "(")
-      r++;
+      i++;
     else if (c === ")")
-      r--;
-    else if (c === "," && r === 0) {
+      i--;
+    else if (c === "," && i === 0) {
       e.push(t.trim()), t = "";
       continue;
     }
@@ -301,15 +302,15 @@ function Ie(i) {
   }
   return t && e.push(t.trim()), e;
 }
-function qe(i) {
-  if (!i || typeof i != "string" || !i.includes("linear-gradient"))
+function qe(r) {
+  if (!r || typeof r != "string" || !r.includes("linear-gradient"))
     return null;
-  const e = i.match(/linear-gradient\((.*)\)/);
+  const e = r.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], r = Ie(t);
+  const t = e[1], i = Ie(t);
   let s = Math.PI, c = 0;
-  const o = r[0].trim();
+  const o = i[0].trim();
   if (o.startsWith("to "))
     o === "to top" ? s = 0 : o === "to right" ? s = Math.PI / 2 : o === "to bottom" ? s = Math.PI : o === "to left" ? s = Math.PI * 1.5 : o === "to top right" || o === "to right top" ? s = Math.PI / 4 : o === "to bottom right" || o === "to right bottom" ? s = Math.PI * 0.75 : o === "to bottom left" || o === "to left bottom" ? s = Math.PI * 1.25 : (o === "to top left" || o === "to left top") && (s = Math.PI * 1.75), c = 1;
   else if (o.endsWith("deg") || o.endsWith("rad") || o.endsWith("turn")) {
@@ -317,8 +318,8 @@ function qe(i) {
     o.endsWith("deg") ? s = n * (Math.PI / 180) : o.endsWith("rad") ? s = n : o.endsWith("turn") && (s = n * Math.PI * 2), c = 1;
   }
   const a = [];
-  for (let n = c; n < r.length && !(a.length >= 8); n++) {
-    const l = r[n].trim(), d = l.lastIndexOf(" ");
+  for (let n = c; n < i.length && !(a.length >= 8); n++) {
+    const l = i[n].trim(), d = l.lastIndexOf(" ");
     let h = l, u = null;
     if (d !== -1 && !l.endsWith(")")) {
       const g = l.substring(d + 1);
@@ -350,13 +351,13 @@ function qe(i) {
   }
   return { angle: s, stops: a };
 }
-function $e(i) {
-  if (!i || i === "none")
+function $e(r) {
+  if (!r || r === "none")
     return null;
-  const e = Ie(i);
+  const e = Ie(r);
   if (e.length === 0)
     return null;
-  const t = e[0].trim(), r = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, s = t.match(r);
+  const t = e[0].trim(), i = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, s = t.match(i);
   let c = "transparent", o = t;
   if (s && s[1] !== "inset") {
     const f = s[1];
@@ -546,9 +547,9 @@ baseColor = blendSrcOver(baseColor, texColor);`, Re = {
   uvChunk: Ze,
   baseColorChunk: Qe
 };
-function et(i, e, t, r = null, s) {
+function et(r, e, t, i = null, s) {
   var S;
-  const c = r !== null || !!i.imageSrc;
+  const c = i !== null || !!r.imageSrc;
   let o = "";
   const a = {};
   if (s != null && s.uniforms)
@@ -561,10 +562,10 @@ function et(i, e, t, r = null, s) {
 `, a[R] = { value: E });
   const n = s !== void 0, l = (c || n ? Me.declChunk : "") + `
 ` + o, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-`, h = i.isTraveler ? `vec2 resultUv = screenUv;
+`, h = r.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 localUv = (p / uSize) + 0.5;
 vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
-`, u = c || n ? d + h + ((s == null ? void 0 : s.uvModifier) || "") : "", f = c || n ? Me.baseColorChunk : "", g = (s == null ? void 0 : s.colorModifier) || "", v = Re.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", g), b = le(i.backgroundColor), C = le(i.borderColor), I = {
+`, u = c || n ? d + h + ((s == null ? void 0 : s.uvModifier) || "") : "", f = c || n ? Me.baseColorChunk : "", g = (s == null ? void 0 : s.colorModifier) || "", v = Re.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", g), b = le(r.backgroundColor), C = le(r.borderColor), I = {
     uSize: { value: new w.Vector2(e, t) },
     uMeshSize: { value: new w.Vector2(e, t) },
     uShadowColor: { value: new w.Vector4(0, 0, 0, 0) },
@@ -588,8 +589,8 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
       )
     },
     uBorderRadius: { value: new w.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: ne(i.borderWidth) },
-    uOpacity: { value: (S = i.opacity) != null ? S : 1 },
+    uBorderWidth: { value: ne(r.borderWidth) },
+    uOpacity: { value: (S = r.opacity) != null ? S : 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new w.Vector2(1, 1) },
     uTextureOffset: { value: new w.Vector2(0, 0) },
@@ -600,7 +601,7 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  ke(I.uBorderRadius.value, i.borderRadius, Math.min(e, t)), c && (I.uTexture.value = r);
+  ke(I.uBorderRadius.value, r.borderRadius, Math.min(e, t)), c && (I.uTexture.value = i);
   const D = new w.ShaderMaterial({
     uniforms: te(te({}, I), a),
     vertexShader: Re.vertexShader,
@@ -609,13 +610,13 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
     side: w.FrontSide
     // for better performance
   });
-  return i.backgroundImage && be(D, { backgroundImage: i.backgroundImage }), D;
+  return r.backgroundImage && be(D, { backgroundImage: r.backgroundImage }), D;
 }
-function tt(i, e, t, r, s) {
+function tt(r, e, t, i, s) {
   const c = ne(e.borderWidth);
-  be(i, {
+  be(r, {
     width: t,
-    height: r,
+    height: i,
     borderRadius: e.borderRadius,
     borderWidth: c,
     backgroundColor: e.backgroundColor,
@@ -626,24 +627,24 @@ function tt(i, e, t, r, s) {
     boxShadow: e.boxShadow
   });
 }
-function be(i, e) {
-  var r, s, c;
+function be(r, e) {
+  var i, s, c;
   if (e.boxShadow !== void 0) {
     const o = $e(e.boxShadow);
-    o ? (i.uniforms.uShadowColor.value.set(o.color.r, o.color.g, o.color.b, o.alpha), i.uniforms.uShadowOffset.value.set(o.offsetX, o.offsetY), i.uniforms.uShadowBlur.value = o.blurRadius, i.uniforms.uShadowSpread.value = o.spreadRadius, i.userData.shadowPadding = o.blurRadius + o.spreadRadius + Math.max(Math.abs(o.offsetX), Math.abs(o.offsetY))) : (i.uniforms.uShadowColor.value.w = 0, i.userData.shadowPadding = 0);
+    o ? (r.uniforms.uShadowColor.value.set(o.color.r, o.color.g, o.color.b, o.alpha), r.uniforms.uShadowOffset.value.set(o.offsetX, o.offsetY), r.uniforms.uShadowBlur.value = o.blurRadius, r.uniforms.uShadowSpread.value = o.spreadRadius, r.userData.shadowPadding = o.blurRadius + o.spreadRadius + Math.max(Math.abs(o.offsetX), Math.abs(o.offsetY))) : (r.uniforms.uShadowColor.value.w = 0, r.userData.shadowPadding = 0);
   }
-  if (e.width !== void 0 && e.height !== void 0 && i.uniforms.uSize.value.set(e.width, e.height), i.uniforms.uMeshSize) {
-    const o = i.userData.shadowPadding || 0, a = e.width !== void 0 ? e.width : i.uniforms.uSize.value.x, n = e.height !== void 0 ? e.height : i.uniforms.uSize.value.y;
-    i.uniforms.uMeshSize.value.set(a + o * 2, n + o * 2);
+  if (e.width !== void 0 && e.height !== void 0 && r.uniforms.uSize.value.set(e.width, e.height), r.uniforms.uMeshSize) {
+    const o = r.userData.shadowPadding || 0, a = e.width !== void 0 ? e.width : r.uniforms.uSize.value.x, n = e.height !== void 0 ? e.height : r.uniforms.uSize.value.y;
+    r.uniforms.uMeshSize.value.set(a + o * 2, n + o * 2);
   }
   if (e.borderRadius !== void 0) {
-    const o = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(i.uniforms.uSize.value.x, i.uniforms.uSize.value.y);
-    ke(i.uniforms.uBorderRadius.value, e.borderRadius, o);
+    const o = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(r.uniforms.uSize.value.x, r.uniforms.uSize.value.y);
+    ke(r.uniforms.uBorderRadius.value, e.borderRadius, o);
   }
-  if (e.borderWidth !== void 0 && (i.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
+  if (e.borderWidth !== void 0 && (r.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
-      const o = i.uniforms.uBgColor.value.w;
-      i.uniforms.uBgColor.value.set(
+      const o = e.backgroundColor[3] !== void 0 ? e.backgroundColor[3] : r.uniforms.uBgColor.value.w;
+      r.uniforms.uBgColor.value.set(
         e.backgroundColor[0],
         e.backgroundColor[1],
         e.backgroundColor[2],
@@ -651,15 +652,15 @@ function be(i, e) {
       );
     } else if (typeof e.backgroundColor == "string") {
       const o = le(e.backgroundColor);
-      i.uniforms.uBgColor.value.set(
+      r.uniforms.uBgColor.value.set(
         o.color.r,
         o.color.g,
         o.color.b,
         o.alpha
       );
     } else {
-      const o = i.uniforms.uBgColor.value.w;
-      i.uniforms.uBgColor.value.set(
+      const o = r.uniforms.uBgColor.value.w;
+      r.uniforms.uBgColor.value.set(
         e.backgroundColor.r,
         e.backgroundColor.g,
         e.backgroundColor.b,
@@ -668,8 +669,8 @@ function be(i, e) {
     }
   if (e.borderColor !== void 0)
     if (Array.isArray(e.borderColor)) {
-      const o = i.uniforms.uBorderColor.value.w;
-      i.uniforms.uBorderColor.value.set(
+      const o = r.uniforms.uBorderColor.value.w;
+      r.uniforms.uBorderColor.value.set(
         e.borderColor[0],
         e.borderColor[1],
         e.borderColor[2],
@@ -677,108 +678,108 @@ function be(i, e) {
       );
     } else if (typeof e.borderColor == "string") {
       const o = le(e.borderColor);
-      i.uniforms.uBorderColor.value.set(
+      r.uniforms.uBorderColor.value.set(
         o.color.r,
         o.color.g,
         o.color.b,
         o.alpha
       );
     } else {
-      const o = i.uniforms.uBorderColor.value.w;
-      i.uniforms.uBorderColor.value.set(
+      const o = r.uniforms.uBorderColor.value.w;
+      r.uniforms.uBorderColor.value.set(
         e.borderColor.r,
         e.borderColor.g,
         e.borderColor.b,
         o
       );
     }
-  e.opacity !== void 0 && (i.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (i.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (i.uniforms.uBorderColor.value.w = e.borderOpacity), i.uniforms.uTexture && e.texture !== void 0 && (i.uniforms.uTexture.value = e.texture);
-  const t = e.texture !== void 0 ? e.texture : (r = i.uniforms.uTexture) == null ? void 0 : r.value;
+  e.opacity !== void 0 && (r.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (r.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (r.uniforms.uBorderColor.value.w = e.borderOpacity), r.uniforms.uTexture && e.texture !== void 0 && (r.uniforms.uTexture.value = e.texture);
+  const t = e.texture !== void 0 ? e.texture : (i = r.uniforms.uTexture) == null ? void 0 : i.value;
   if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
-    const o = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, n = (s = e.width) != null ? s : i.uniforms.uSize.value.x, l = (c = e.height) != null ? c : i.uniforms.uSize.value.y;
+    const o = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, n = (s = e.width) != null ? s : r.uniforms.uSize.value.x, l = (c = e.height) != null ? c : r.uniforms.uSize.value.y;
     if (o && a && n && l) {
       const d = o / a, h = n / l;
       if (d > h) {
         const u = h / d;
-        i.uniforms.uTextureRepeat.value.set(u, 1), i.uniforms.uTextureOffset.value.set((1 - u) / 2, 0);
+        r.uniforms.uTextureRepeat.value.set(u, 1), r.uniforms.uTextureOffset.value.set((1 - u) / 2, 0);
       } else {
         const u = d / h;
-        i.uniforms.uTextureRepeat.value.set(1, u), i.uniforms.uTextureOffset.value.set(0, (1 - u) / 2);
+        r.uniforms.uTextureRepeat.value.set(1, u), r.uniforms.uTextureOffset.value.set(0, (1 - u) / 2);
       }
     }
   } else
-    i.uniforms.uTextureRepeat && (i.uniforms.uTextureRepeat.value.set(1, 1), i.uniforms.uTextureOffset.value.set(0, 0));
+    r.uniforms.uTextureRepeat && (r.uniforms.uTextureRepeat.value.set(1, 1), r.uniforms.uTextureOffset.value.set(0, 0));
   if (e.backgroundImage !== void 0) {
     const o = qe(e.backgroundImage);
     if (o) {
-      i.uniforms.uGradientCount.value = o.stops.length, i.uniforms.uGradientAngle.value = o.angle;
+      r.uniforms.uGradientCount.value = o.stops.length, r.uniforms.uGradientAngle.value = o.angle;
       for (let a = 0; a < 8; a++)
         if (a < o.stops.length) {
           const n = o.stops[a];
-          i.uniforms.uGradientColors.value[a].set(
+          r.uniforms.uGradientColors.value[a].set(
             n.color.r,
             n.color.g,
             n.color.b,
             n.alpha
-          ), i.uniforms.uGradientStops.value[a] = n.stop;
+          ), r.uniforms.uGradientStops.value[a] = n.stop;
         } else
-          i.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), i.uniforms.uGradientStops.value[a] = 1;
+          r.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), r.uniforms.uGradientStops.value[a] = 1;
     } else
-      i.uniforms.uGradientCount.value = 0;
+      r.uniforms.uGradientCount.value = 0;
   }
   for (const o of Object.keys(e))
-    o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && o !== "boxShadow" && i.uniforms[o] !== void 0 && (i.uniforms[o].value !== void 0 && i.uniforms[o].value !== null && typeof i.uniforms[o].value.set == "function" ? Array.isArray(e[o]) ? i.uniforms[o].value.set(...e[o]) : e[o] !== void 0 && (e[o].copy ? i.uniforms[o].value.copy(e[o]) : i.uniforms[o].value = e[o]) : i.uniforms[o].value = e[o]);
+    o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && o !== "boxShadow" && r.uniforms[o] !== void 0 && (r.uniforms[o].value !== void 0 && r.uniforms[o].value !== null && typeof r.uniforms[o].value.set == "function" ? Array.isArray(e[o]) ? r.uniforms[o].value.set(...e[o]) : e[o] !== void 0 && (e[o].copy ? r.uniforms[o].value.copy(e[o]) : r.uniforms[o].value = e[o]) : r.uniforms[o].value = e[o]);
 }
-function ke(i, e, t = 0) {
+function ke(r, e, t = 0) {
   var n, l, d, h;
   if (e == null) {
-    i.set(0, 0, 0, 0);
+    r.set(0, 0, 0, 0);
     return;
   }
   if (typeof e == "number") {
-    i.set(e, e, e, e);
+    r.set(e, e, e, e);
     return;
   }
   if (Array.isArray(e)) {
-    i.set(e[0], e[1], e[2], e[3]);
+    r.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const r = e.split("/")[0].trim().split(/\s+/), s = ne(r[0], t), c = ne((n = r[1]) != null ? n : r[0], t), o = ne((l = r[2]) != null ? l : r[0], t), a = ne((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
-  i.set(s, c, o, a);
+  const i = e.split("/")[0].trim().split(/\s+/), s = ne(i[0], t), c = ne((n = i[1]) != null ? n : i[0], t), o = ne((l = i[2]) != null ? l : i[0], t), a = ne((h = (d = i[3]) != null ? d : i[1]) != null ? h : i[0], t);
+  r.set(s, c, o, a);
 }
 const W = {
-  create(i, e, t, r, s, c = 2, o = null, a) {
-    return i === "BOX" ? et(
+  create(r, e, t, i, s, c = 2, o = null, a) {
+    return r === "BOX" ? et(
       e,
-      r,
+      i,
       s,
       o,
       a
-    ) : i === "TEXT" ? new Ge(
+    ) : r === "TEXT" ? new Ge(
       t || "",
       e,
-      r,
+      i,
       s,
       c
     ) : new w.MeshBasicMaterial({ visible: !1 });
   },
-  update(i, e, t, r, s, c, o = 2, a) {
+  update(r, e, t, i, s, c, o = 2, a) {
     e === "BOX" ? tt(
-      i,
+      r,
       t,
       s,
       c,
       a
-    ) : e === "TEXT" && i.updateText(
-      r || "",
+    ) : e === "TEXT" && r.updateText(
+      i || "",
       t,
       s,
       c,
       o
     );
   },
-  forceUpdateUniforms(i, e) {
-    be(i, e);
+  forceUpdateUniforms(r, e) {
+    be(r, e);
   }
 };
 class rt {
@@ -789,8 +790,8 @@ class rt {
     p(this, "elementUrls", /* @__PURE__ */ new WeakMap());
     p(this, "onUpdate");
     this.onUpdate = e, t && (this.observer = new IntersectionObserver(
-      (r) => {
-        for (const s of r) {
+      (i) => {
+        for (const s of i) {
           const c = s.target;
           s.isIntersecting ? this.loadTexture(c) : this.disposeTexture(c);
         }
@@ -814,24 +815,24 @@ class rt {
       if (t) {
         this.loadStatus.set(e, !0);
         try {
-          let r;
+          let i;
           if (t.startsWith("data:image/svg+xml"))
-            r = yield new Promise((c, o) => {
+            i = yield new Promise((c, o) => {
               const a = new Image();
               a.onload = () => c(a), a.onerror = o, a.src = t;
             });
           else {
             const o = yield (yield fetch(t)).blob();
-            r = yield createImageBitmap(o, { imageOrientation: "flipY" });
+            i = yield createImageBitmap(o, { imageOrientation: "flipY" });
           }
           if (this.elementUrls.get(e) !== t) {
-            "close" in r && r.close();
+            "close" in i && i.close();
             return;
           }
-          const s = new w.Texture(r);
-          r instanceof HTMLImageElement || (s.flipY = !1), s.colorSpace = w.LinearSRGBColorSpace, s.needsUpdate = !0, this.textures.set(e, s), this.onUpdate(e, s);
-        } catch (r) {
-          console.warn("[MirageEngine] Failed to load texture:", t, r);
+          const s = new w.Texture(i);
+          i instanceof HTMLImageElement || (s.flipY = !1), s.colorSpace = w.LinearSRGBColorSpace, s.needsUpdate = !0, this.textures.set(e, s), this.onUpdate(e, s);
+        } catch (i) {
+          console.warn("[MirageEngine] Failed to load texture:", t, i);
         } finally {
           this.elementUrls.has(e) && this.loadStatus.set(e, !1);
         }
@@ -850,7 +851,7 @@ class rt {
   }
 }
 class it {
-  constructor(e, t, r, s) {
+  constructor(e, t, i, s) {
     p(this, "canvas");
     p(this, "scene");
     p(this, "camera");
@@ -875,7 +876,7 @@ class it {
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
     p(this, "fixedMeshes", /* @__PURE__ */ new Set());
     var a, n, l, d, h;
-    this.target = e, this.mountContainer = r, this.registry = s, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (n = t.canvasSize) != null ? n : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new rt((u, f) => {
+    this.target = e, this.mountContainer = i, this.registry = s, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (n = t.canvasSize) != null ? n : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new rt((u, f) => {
       const g = this.registry.get(u);
       g && g.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(g.material, { texture: f });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new w.Scene(), this.targetRect = this.target.getBoundingClientRect();
@@ -899,15 +900,15 @@ class it {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? F.SELECTED : F.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? B.SELECTED : B.BASE;
   }
   createRenderTarget() {
     for (let e = 0; e < _.MAX_LAYERS; e++) {
-      const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, r = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+      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(
           t * this.qualityFactor,
-          r * this.qualityFactor,
+          i * this.qualityFactor,
           {
             minFilter: w.LinearFilter,
             magFilter: w.LinearFilter,
@@ -947,13 +948,13 @@ class it {
     this.canvas.style.width = `${e}px`, this.canvas.style.height = `${t}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = this.isViewport ? "fixed" : "absolute", this.canvas.style.top = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetTop}px`, this.canvas.style.left = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
   }
   updateUniforms(e, t) {
-    const r = this.registry.get(e);
-    r && (r.traverse((s) => {
+    const i = this.registry.get(e);
+    i && (i.traverse((s) => {
       s.isMesh && s.material && W.forceUpdateUniforms(
         s.material,
         t
       );
-    }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((s) => {
+    }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((s) => {
       s.isMesh && s.material && W.forceUpdateUniforms(
         s.material,
         t
@@ -965,13 +966,13 @@ class it {
   }
   setSize(e, t) {
     this.renderer.setSize(e, t);
-    for (const r of this.renderTargets)
-      r.setSize(e * this.qualityFactor, t * this.qualityFactor);
+    for (const i of this.renderTargets)
+      i.setSize(e * this.qualityFactor, t * this.qualityFactor);
     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(), s = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, o = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, n = Math.abs(s - o) > 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);
-    n ? (this.targetRect = r, this.setSize(s, 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 i = this.target.getBoundingClientRect(), s = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, o = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, n = Math.abs(s - o) > 0.1 || Math.abs(c - a) > 0.1, l = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
+    n ? (this.targetRect = i, this.setSize(s, c), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
       const h = this.registry.get(d);
       if (h) {
         this.scene.remove(h);
@@ -992,8 +993,8 @@ class it {
   reconcileNode(e) {
     var s, 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 w.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
+    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 o = new w.PlaneGeometry(1, 1), a = e.isTraveler ? (s = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : s.texture : this.textureManager.get(e.element), n = W.create(
         "BOX",
         e.styles,
@@ -1004,7 +1005,7 @@ class it {
         a,
         e.shaderHooks
       );
-      t = new w.Mesh(o, n), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = n, t.userData.domElement = e.element, t.userData.shaderHash = r;
+      t = new w.Mesh(o, n), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = n, t.userData.domElement = e.element, t.userData.shaderHash = i;
     }
     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 o = 0; o < _.MAX_LAYERS; o++)
@@ -1022,11 +1023,11 @@ class it {
         !0
       ));
   }
-  reconcileTextChild(e, t, r) {
+  reconcileTextChild(e, t, i) {
     var l;
     const s = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], c = r ? t.nativeStyles : t.textStyles, o = JSON.stringify(c) + t.textContent + s.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
+    ], c = i ? t.nativeStyles : t.textStyles, o = JSON.stringify(c) + t.textContent + s.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
     if (t.dirtyMask & we || o !== a) {
       e.children.filter(
         (g) => g.name.startsWith("TEXT_CHILD")
@@ -1060,48 +1061,48 @@ class it {
       if (!d.name.startsWith("TEXT_CHILD"))
         return;
       const h = d;
-      if (r && t.nativeLayer !== void 0)
-        h.layers.set(F.HIDDEN), t.visibility & q && h.layers.enable(F.getCaptureLayer(t.nativeLayer));
+      if (i && t.nativeLayer !== void 0)
+        h.layers.set(B.HIDDEN), t.visibility & q && h.layers.enable(B.getCaptureLayer(t.nativeLayer));
       else {
-        const u = t.visibility & q ? F.BASE : F.HIDDEN;
-        if (h.layers.set(u), t.visibility & ae && h.layers.enable(F.SELECTED), t.visibility & q)
-          if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
+        const u = t.visibility & q ? B.BASE : B.HIDDEN;
+        if (h.layers.set(u), t.visibility & ae && h.layers.enable(B.SELECTED), t.visibility & q)
+          if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
             for (let f = t.captureLayer; f <= _.MAX_LAYERS + 1; f++)
-              f !== t.nativeLayer && h.layers.enable(F.getCaptureLayer(f));
+              f !== t.nativeLayer && h.layers.enable(B.getCaptureLayer(f));
           else
             for (let f = t.captureLayer; f <= _.MAX_LAYERS + 1; f++)
-              h.layers.enable(F.getCaptureLayer(f));
+              h.layers.enable(B.getCaptureLayer(f));
       }
     });
   }
   updateMeshProperties(e, t) {
     var S, R, E, V, N;
-    const { rect: r, styles: s } = t, c = this.renderer.getPixelRatio(), o = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
+    const { rect: i, styles: s } = t, c = this.renderer.getPixelRatio(), o = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
     e.material = e.userData.baseMaterial;
     let n = ((S = e.material.userData) == null ? void 0 : S.shadowPadding) || 0;
-    e.scale.set(r.width + n * 2, r.height + n * 2, 1), e.userData.domRect = {
-      x: r.x,
-      y: r.y,
-      width: r.width,
-      height: r.height
+    e.scale.set(i.width + n * 2, i.height + n * 2, 1), e.userData.domRect = {
+      x: i.x,
+      y: i.y,
+      width: i.width,
+      height: i.height
     };
     const l = 1e-3;
     this.renderOrder++;
     const d = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY;
     let u, f;
     if (this.isViewport)
-      u = r.x - window.innerWidth / 2 + r.width / 2, f = -r.y + window.innerHeight / 2 - r.height / 2;
+      u = i.x - window.innerWidth / 2 + i.width / 2, f = -i.y + window.innerHeight / 2 - i.height / 2;
     else {
-      const M = r.x - d, P = r.y - h;
-      u = M - o / 2 + r.width / 2, f = -P + a / 2 - r.height / 2;
+      const M = i.x - d, P = i.y - h;
+      u = M - o / 2 + i.width / 2, f = -P + a / 2 - i.height / 2;
     }
     e.position.set(
       u,
       f,
       s.zIndex + this.renderOrder * l
     );
-    const g = r.x, v = r.y;
-    e.userData.basePosition = { x: u, y: f }, e.userData.originalBasePosition = { x: u, y: f }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: g, y: v }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const g = i.x, v = i.y;
+    e.userData.basePosition = { x: u, y: f }, e.userData.originalBasePosition = { x: u, y: f }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: g, y: v }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
     const b = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, C = window.getComputedStyle(b);
     let I = 0, D = 0;
     if (C.transform && C.transform !== "none") {
@@ -1113,8 +1114,8 @@ class it {
       "BOX",
       s,
       "",
-      r.width,
-      r.height,
+      i.width,
+      i.height,
       this.qualityFactor,
       t.isTraveler ? (R = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : R.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
@@ -1139,7 +1140,7 @@ class it {
         const z = t.nativeRect.x - d, Y = t.nativeRect.y - h;
         P = z - o / 2 + t.nativeRect.width / 2, J = -Y + a / 2 - t.nativeRect.height / 2;
       }
-      let Z = t.nativeRect.width, L = t.nativeRect.height, B = P, $ = J;
+      let Z = t.nativeRect.width, L = t.nativeRect.height, F = P, $ = J;
       if (t.nativeStyles.transform) {
         const z = t.nativeStyles.transform, Y = z.match(/scale\(([\d.]+%?)\)/);
         if (Y) {
@@ -1162,13 +1163,13 @@ class it {
           let X = parseFloat(y);
           y.includes("%") && (X = X / 100 * t.nativeRect.width);
           let O = parseFloat(x);
-          x.includes("%") && (O = O / 100 * t.nativeRect.height), B += X, $ -= O;
+          x.includes("%") && (O = O / 100 * t.nativeRect.height), F += X, $ -= O;
         }
         const A = z.match(/translateX\(([^)]+)\)/);
         if (A) {
           const y = A[1].trim();
           let x = parseFloat(y);
-          y.includes("%") && (x = x / 100 * t.nativeRect.width), B += x;
+          y.includes("%") && (x = x / 100 * t.nativeRect.width), F += x;
         }
         const U = z.match(/translateY\(([^)]+)\)/);
         if (U) {
@@ -1179,7 +1180,7 @@ class it {
       }
       let K = ((V = M.material.userData) == null ? void 0 : V.shadowPadding) || 0;
       M.scale.set(Z + K * 2, L + K * 2, 1), M.position.set(
-        B,
+        F,
         $,
         t.nativeStyles.zIndex + this.renderOrder * l
       ), W.update(
@@ -1196,23 +1197,23 @@ class it {
       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 & q ? F.BASE : F.HIDDEN;
-    if (e.layers.set(r), t.visibility & ae && e.layers.enable(F.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    const i = t.visibility & q ? B.BASE : B.HIDDEN;
+    if (e.layers.set(i), t.visibility & ae && e.layers.enable(B.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const s = e.userData.nativeMesh;
-      if (s.layers.set(F.HIDDEN), t.visibility & q) {
-        s.layers.enable(F.getCaptureLayer(t.nativeLayer));
+      if (s.layers.set(B.HIDDEN), t.visibility & q) {
+        s.layers.enable(B.getCaptureLayer(t.nativeLayer));
         for (let c = t.captureLayer; c <= _.MAX_LAYERS + 1; c++)
-          c !== t.nativeLayer && e.layers.enable(F.getCaptureLayer(c));
+          c !== t.nativeLayer && e.layers.enable(B.getCaptureLayer(c));
       }
     } else if (t.visibility & q)
       for (let s = t.captureLayer; s <= _.MAX_LAYERS + 1; s++)
-        e.layers.enable(F.getCaptureLayer(s));
+        e.layers.enable(B.getCaptureLayer(s));
   }
-  captureRenderTarget(e, t, r) {
-    if (e.size === 0 || !r)
+  captureRenderTarget(e, t, i) {
+    if (e.size === 0 || !i)
       return;
     const s = new w.Color(), c = this.renderer.getClearAlpha();
-    this.renderer.getClearColor(s), 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);
+    this.renderer.getClearColor(s), 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 o = new w.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
     for (const d of e) {
       o.setFromMatrixPosition(d.matrixWorld), o.project(this.camera);
@@ -1229,14 +1230,14 @@ class it {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        F.getCaptureLayer(t),
+        B.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
     this.renderer.render(this.scene, this.camera);
   }
   syncMeshesByDOM() {
-    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), s = this.renderer.domElement.width / r, c = this.renderer.domElement.height / r;
+    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, i = this.renderer.getPixelRatio(), s = this.renderer.domElement.width / i, c = this.renderer.domElement.height / i;
     this.scene.children.forEach((o) => {
       var h, u;
       const a = o;
@@ -1292,23 +1293,23 @@ class it {
             }
             const P = E.match(/translate\(([^,]+),\s*([^)]+)\)/);
             if (P) {
-              const L = P[1].trim(), B = P[2].trim();
+              const L = P[1].trim(), F = P[2].trim();
               let $ = parseFloat(L);
               L.includes("%") && ($ = $ / 100 * l.width);
-              let K = parseFloat(B);
-              B.includes("%") && (K = K / 100 * l.height), D += $, S -= K;
+              let K = parseFloat(F);
+              F.includes("%") && (K = K / 100 * l.height), D += $, S -= K;
             }
             const J = E.match(/translateX\(([^)]+)\)/);
             if (J) {
               const L = J[1].trim();
-              let B = parseFloat(L);
-              L.includes("%") && (B = B / 100 * l.width), D += B;
+              let F = parseFloat(L);
+              L.includes("%") && (F = F / 100 * l.width), D += F;
             }
             const Z = E.match(/translateY\(([^)]+)\)/);
             if (Z) {
               const L = Z[1].trim();
-              let B = parseFloat(L);
-              L.includes("%") && (B = B / 100 * l.height), S -= B;
+              let F = parseFloat(L);
+              L.includes("%") && (F = F / 100 * l.height), S -= F;
             }
           }
           let R = ((u = b.material.userData) == null ? void 0 : u.shadowPadding) || 0;
@@ -1321,32 +1322,32 @@ class it {
     });
   }
 }
-function st(i) {
-  const e = i.textContent || "", t = [];
-  let r = "", s = null, c = -1;
+function st(r) {
+  const e = r.textContent || "", t = [];
+  let i = "", s = null, c = -1;
   const o = (l, d) => {
     for (let h = 0; h < l.length; h++) {
       const u = l[h], f = document.createRange();
-      f.setStart(i, d + h), f.setEnd(i, d + h + 1);
+      f.setStart(r, d + h), f.setEnd(r, d + h + 1);
       const g = f.getBoundingClientRect();
       if (g.width === 0 && g.height === 0) {
-        r += u;
+        i += u;
         continue;
       }
-      c === -1 || Math.abs(g.top - c) > g.height / 2 ? (r && s && t.push({
-        text: r,
+      c === -1 || Math.abs(g.top - c) > g.height / 2 ? (i && s && t.push({
+        text: i,
         rect: {
           left: s.left,
           top: s.top,
           width: s.right - s.left,
           height: s.bottom - s.top
         }
-      }), r = u, s = {
+      }), i = u, s = {
         left: g.left,
         top: g.top,
         right: g.right,
         bottom: g.bottom
-      }, c = g.top) : (r += u, s && (s.left = Math.min(s.left, g.left), s.top = Math.min(s.top, g.top), s.right = Math.max(s.right, g.right), s.bottom = Math.max(
+      }, c = g.top) : (i += u, s && (s.left = Math.min(s.left, g.left), s.top = Math.min(s.top, g.top), s.right = Math.max(s.right, g.right), s.bottom = Math.max(
         s.bottom,
         g.bottom
       )));
@@ -1355,38 +1356,38 @@ function st(i) {
   let n = 0;
   for (const l of a) {
     const d = document.createRange();
-    d.setStart(i, n), d.setEnd(i, n + l.length);
+    d.setStart(r, n), d.setEnd(r, n + l.length);
     const h = d.getClientRects();
     if (h.length > 1)
       o(l, n);
     else {
       const u = h.length === 1 ? h[0] : d.getBoundingClientRect();
       if (u.width === 0 && u.height === 0) {
-        r += l, n += l.length;
+        i += l, n += l.length;
         continue;
       }
-      c === -1 || Math.abs(u.top - c) > u.height / 2 ? (r && s && t.push({
-        text: r,
+      c === -1 || Math.abs(u.top - c) > u.height / 2 ? (i && s && t.push({
+        text: i,
         rect: {
           left: s.left,
           top: s.top,
           width: s.right - s.left,
           height: s.bottom - s.top
         }
-      }), r = l, s = {
+      }), i = l, s = {
         left: u.left,
         top: u.top,
         right: u.right,
         bottom: u.bottom
-      }, c = u.top) : (r += l, s && (s.left = Math.min(s.left, u.left), s.top = Math.min(s.top, u.top), s.right = Math.max(s.right, u.right), s.bottom = Math.max(
+      }, c = u.top) : (i += l, s && (s.left = Math.min(s.left, u.left), s.top = Math.min(s.top, u.top), s.right = Math.max(s.right, u.right), s.bottom = Math.max(
         s.bottom,
         u.bottom
       )));
     }
     n += l.length;
   }
-  return r && s && t.push({
-    text: r,
+  return i && s && t.push({
+    text: i,
     rect: {
       left: s.left,
       top: s.top,
@@ -1397,26 +1398,26 @@ function st(i) {
     (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
   );
 }
-function Le(i) {
-  const e = parseFloat(i.fontSize);
-  let t = parseFloat(i.lineHeight);
+function Le(r) {
+  const e = parseFloat(r.fontSize);
+  let t = parseFloat(r.lineHeight);
   isNaN(t) && (t = e * 1.2);
-  let r = parseFloat(i.letterSpacing);
-  return isNaN(r) && (r = 0), {
-    font: `${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,
-    fontSize: i.fontSize,
-    color: i.color,
-    textAlign: i.textAlign || "start",
+  let i = parseFloat(r.letterSpacing);
+  return isNaN(i) && (i = 0), {
+    font: `${r.fontStyle} ${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,
+    fontSize: r.fontSize,
+    color: r.color,
+    textAlign: r.textAlign || "start",
     textBaseline: "alphabetic",
-    direction: i.direction || "inherit",
+    direction: r.direction || "inherit",
     lineHeight: t,
-    letterSpacing: r
+    letterSpacing: i
   };
 }
-function Ue(i, e = re | he | Ye | we | fe, t, r = 1, s = 0, c = 2, o, a) {
-  var B, $, K, z, Y, ie, se;
-  if (i.nodeType === Node.TEXT_NODE) {
-    const m = i;
+function Ue(r, e = re | he | Ye | we | fe, t, i = 1, s = 0, c = 2, o, a) {
+  var F, $, K, z, Y, ie, se;
+  if (r.nodeType === Node.TEXT_NODE) {
+    const m = r;
     if (!m.textContent || !m.textContent.trim())
       return null;
     const A = m.textContent.replace(/\s+/g, " ");
@@ -1463,7 +1464,7 @@ function Ue(i, e = re | he | Ye | we | fe, t, r = 1, s = 0, c = 2, o, a) {
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
-      captureLayer: r,
+      captureLayer: i,
       isFixed: x.position === "fixed",
       nativeLayer: o,
       nativeStyles: a ? te(te({
@@ -1485,9 +1486,9 @@ function Ue(i, e = re | he | Ye | we | fe, t, r = 1, s = 0, c = 2, o, a) {
       children: []
     };
   }
-  if (i.nodeType !== Node.ELEMENT_NODE)
+  if (r.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const n = i, l = n.dataset[G.KEY];
+  const n = r, l = n.dataset[G.KEY];
   let d = t, h = t;
   if (l) {
     const m = new Set(l.split(/\s+/));
@@ -1570,11 +1571,11 @@ function Ue(i, e = re | he | Ye | we | fe, t, r = 1, s = 0, c = 2, o, a) {
     }
     if (X) {
       const k = m + 1;
-      if (k < r)
+      if (k < i)
         throw new Error(
-          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${r - 1}).`
+          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${i - 1}).`
         );
-      r = Math.min(k, _.MAX_LAYERS + 1);
+      i = Math.min(k, _.MAX_LAYERS + 1);
     }
   }
   const C = n.dataset[Ve.KEY];
@@ -1591,9 +1592,9 @@ function Ue(i, e = re | he | Ye | we | fe, t, r = 1, s = 0, c = 2, o, a) {
     N = n.src;
   else if (n.tagName.toLowerCase() === "svg") {
     const m = n.cloneNode(!0), A = v == null ? void 0 : v.color, U = v == null ? void 0 : v.fill, y = v == null ? void 0 : v.stroke, x = v == null ? void 0 : v.opacity, X = (T, oe) => {
-      const H = window.getComputedStyle(T), ce = oe, Be = H.fill === H.color, Fe = H.stroke === H.color, ge = U || (Be ? A : void 0) || H.fill;
+      const H = window.getComputedStyle(T), ce = oe, Fe = H.fill === H.color, Be = H.stroke === H.color, ge = U || (Fe ? A : void 0) || H.fill;
       ge && ge !== "none" && (ce.style.fill = ge);
-      const pe = y || (Fe ? A : void 0) || H.stroke;
+      const pe = y || (Be ? A : void 0) || H.stroke;
       pe && pe !== "none" && (ce.style.stroke = pe), H.strokeWidth && H.strokeWidth !== "0px" && (ce.style.strokeWidth = H.strokeWidth);
       const ye = A || H.color;
       ye && (ce.style.color = ye);
@@ -1633,7 +1634,7 @@ function Ue(i, e = re | he | Ye | we | fe, t, r = 1, s = 0, c = 2, o, a) {
       m,
       e,
       A,
-      r,
+      i,
       V,
       c,
       m.nodeType === Node.TEXT_NODE ? b : void 0,
@@ -1656,10 +1657,10 @@ function Ue(i, e = re | he | Ye | we | fe, t, r = 1, s = 0, c = 2, o, a) {
     dirtyMask: e,
     visibility: h,
     isTraveler: g,
-    captureLayer: r,
+    captureLayer: i,
     nativeLayer: b,
     nativeStyles: b !== void 0 ? Se(te({}, M), {
-      backgroundColor: (B = v.backgroundColor) != null ? B : M.backgroundColor,
+      backgroundColor: (F = v.backgroundColor) != null ? F : M.backgroundColor,
       backgroundImage: ($ = v.backgroundImage) != null ? $ : M.backgroundImage,
       opacity: (K = v.opacity) != null ? K : M.opacity,
       zIndex: v.zIndex !== void 0 ? v.zIndex + V : M.zIndex,
@@ -1681,32 +1682,34 @@ function Ue(i, e = re | he | Ye | we | fe, t, r = 1, s = 0, c = 2, o, a) {
     shaderHooks: I
   };
 }
-function ot(i, e) {
-  e.size !== 0 && e.forEach((t, r) => {
+function ot(r, e) {
+  e.size !== 0 && e.forEach((t, i) => {
     var c, o, a, n;
-    const s = i.get(r);
+    const s = r.get(i);
     !s || !s.userData.basePosition || (W.forceUpdateUniforms(s.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
+      boxShadow: t.boxShadow,
       opacity: t.opacity,
       borderRadius: (o = t.borderRadius) != null ? o : (c = s.userData.baseStyles) == null ? void 0 : c.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
     }), s.userData.nativeMesh && W.forceUpdateUniforms(s.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
+      boxShadow: t.boxShadow,
       opacity: t.opacity,
       borderRadius: (n = t.borderRadius) != null ? n : (a = s.userData.baseStyles) == null ? void 0 : a.borderRadius
     }));
   });
 }
 class at {
-  constructor(e, t, r, s) {
+  constructor(e, t, i, s) {
     p(this, "target");
     p(this, "renderer");
     p(this, "registry");
     p(this, "isTravelEnabled", !1);
     p(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = r, this.tracker = new He(e, {
+    this.target = e, this.renderer = t, this.registry = i, this.tracker = new He(e, {
       resizeDebounce: s.resizeDebounce
     }), this.tracker.onLayoutChange.add((c, o) => {
       document.querySelector(`[${_.NAME}~='${_.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
@@ -1772,13 +1775,13 @@ class dt {
         }
       `, document.head.appendChild(a);
     }
-    let r;
-    if (t.mode === "duplicate" ? r = (c = (s = t.container) != null ? s : this.target.parentElement) != null ? c : void 0 : r = (o = this.target.parentElement) != null ? o : void 0, !r)
+    let i;
+    if (t.mode === "duplicate" ? i = (c = (s = t.container) != null ? s : this.target.parentElement) != null ? c : void 0 : i = (o = this.target.parentElement) != null ? o : void 0, !i)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
     this.renderer = new it(
       this.target,
       t,
-      r,
+      i,
       this.registry
     ), this.renderer.mount(), this.syncer = new at(this.target, this.renderer, this.registry, t);
   }
@@ -1817,8 +1820,8 @@ class dt {
     }), window.addEventListener("keyup", (c) => {
       t[c.key] !== void 0 && (t[c.key] = !1);
     });
-    const r = 2, s = () => {
-      requestAnimationFrame(s), t.ArrowRight && e.position.setX(e.position.x + r), t.ArrowLeft && e.position.setX(e.position.x - r), t.ArrowUp && e.position.setY(e.position.y + r), t.ArrowDown && e.position.setY(e.position.y - r);
+    const i = 2, s = () => {
+      requestAnimationFrame(s), t.ArrowRight && e.position.setX(e.position.x + i), t.ArrowLeft && e.position.setX(e.position.x - i), t.ArrowUp && e.position.setY(e.position.y + i), t.ArrowDown && e.position.setY(e.position.y - i);
     };
     s();
   }
@@ -1840,7 +1843,7 @@ export {
   ht as EXCLUDED,
   dt as Engine,
   ae as SELECT_LAYER,
-  F as THREE_LAYERS,
+  B as THREE_LAYERS,
   Ce as TRAVEL_VALUES,
   He as Tracker,
   q as USER_LAYER,