@mirage-engine/core 0.3.8 → 0.3.9

package/dist/mirage-engine.js

@@ -10,21 +10,21 @@ var ae = (s, e, t) => e in s ? Be(s, e, { enumerable: !0, configurable: !0, writ
       Ne.call(e, t) && ae(s, t, e[t]);
   return s;
 }, be = (s, e) => Oe(s, Fe(e));
-var f = (s, e, t) => (ae(s, typeof e != "symbol" ? e + "" : e, t), t);
+var g = (s, e, t) => (ae(s, typeof e != "symbol" ? e + "" : e, t), t);
 var we = (s, e, t) => new Promise((r, i) => {
-  var a = (c) => {
+  var l = (a) => {
     try {
-      o(t.next(c));
-    } catch (l) {
-      i(l);
+      o(t.next(a));
+    } catch (c) {
+      i(c);
     }
-  }, n = (c) => {
+  }, n = (a) => {
     try {
-      o(t.throw(c));
-    } catch (l) {
-      i(l);
+      o(t.throw(a));
+    } catch (c) {
+      i(c);
     }
-  }, o = (c) => c.done ? r(c.value) : Promise.resolve(c.value).then(a, n);
+  }, o = (a) => a.done ? r(a.value) : Promise.resolve(a.value).then(l, n);
   o((t = t.apply(s, e)).next());
 });
 import * as y from "three";
@@ -54,12 +54,12 @@ const Re = {
   CAPTURE_8: "8",
   CAPTURE_9: "9",
   CAPTURE_10: "10"
-}, U = {
+}, O = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
   VALUES: xe,
   MAX_LAYERS: Object.keys(xe).length - 1
-}, N = {
+}, X = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
   VALUES: Re
@@ -67,7 +67,7 @@ const Re = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
   VALUES: Re
-}, ze = {
+}, Xe = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
 }, at = {
@@ -76,7 +76,7 @@ const Re = {
   VALUES: {
     FRONT: "front"
   }
-}, re = 0, $ = 1, Z = 2, Xe = 4, ie = 8, ce = 16;
+}, re = 0, $ = 1, Z = 2, ze = 4, ie = 8, ce = 16;
 function Ve(s) {
   const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
   return e ? {
@@ -99,32 +99,32 @@ function Ye(s) {
 }
 class We {
   constructor(e, t) {
-    f(this, "target");
-    f(this, "observer");
-    f(this, "pendingDeletions", /* @__PURE__ */ new Set());
-    f(this, "pendingStyles", /* @__PURE__ */ new Map());
-    f(this, "isDomDirty", !1);
-    f(this, "isRunning", !1);
-    f(this, "pendingMask", re);
-    f(this, "mutationTimer", null);
-    f(this, "cssTimer", null);
-    f(this, "resizeConfig");
-    f(this, "resizeTimer", null);
-    f(this, "isResizing", !1);
-    f(this, "lastScrollX", 0);
-    f(this, "lastScrollY", 0);
-    f(this, "scrollTimer", null);
-    f(this, "onBeforeRender", /* @__PURE__ */ new Set());
-    f(this, "onLayoutChange", /* @__PURE__ */ new Set());
-    f(this, "onStyleChange", /* @__PURE__ */ new Set());
-    f(this, "onScrollChange", /* @__PURE__ */ new Set());
-    f(this, "onRender", /* @__PURE__ */ new Set());
-    f(this, "onTransitionFinished", (e) => {
+    g(this, "target");
+    g(this, "observer");
+    g(this, "pendingDeletions", /* @__PURE__ */ new Set());
+    g(this, "pendingStyles", /* @__PURE__ */ new Map());
+    g(this, "isDomDirty", !1);
+    g(this, "isRunning", !1);
+    g(this, "pendingMask", re);
+    g(this, "mutationTimer", null);
+    g(this, "cssTimer", null);
+    g(this, "resizeConfig");
+    g(this, "resizeTimer", null);
+    g(this, "isResizing", !1);
+    g(this, "lastScrollX", 0);
+    g(this, "lastScrollY", 0);
+    g(this, "scrollTimer", null);
+    g(this, "onBeforeRender", /* @__PURE__ */ new Set());
+    g(this, "onLayoutChange", /* @__PURE__ */ new Set());
+    g(this, "onStyleChange", /* @__PURE__ */ new Set());
+    g(this, "onScrollChange", /* @__PURE__ */ new Set());
+    g(this, "onRender", /* @__PURE__ */ new Set());
+    g(this, "onTransitionFinished", (e) => {
       this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= $ | Z, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
-    f(this, "onWindowResize", () => {
+    g(this, "onWindowResize", () => {
       if (!this.resizeConfig.enabled) {
         this.isDomDirty = !0;
         return;
@@ -133,7 +133,7 @@ class We {
         this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
       }, this.resizeConfig.delay);
     });
-    f(this, "renderLoop", () => {
+    g(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
       this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = re);
@@ -142,30 +142,30 @@ class We {
         this.pendingMask |= $, this.isDomDirty = !0, this.scrollTimer = null;
       }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
     });
-    var i, a;
+    var i, l;
     this.target = e;
     const r = (i = t.resizeDebounce) != null ? i : !0;
     r === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : r === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
       enabled: !0,
-      delay: (a = r.delay) != null ? a : 150,
+      delay: (l = r.delay) != null ? l : 150,
       onStart: r.onStart,
       onEnd: r.onEnd
     }, this.observer = new MutationObserver((n) => {
       let o = re;
-      for (const c of n)
-        if (c.type === "childList")
-          o |= ie, c.removedNodes.length > 0 && c.removedNodes.forEach((l) => {
-            l instanceof HTMLElement && this.pendingDeletions.add(l);
+      for (const a of n)
+        if (a.type === "childList")
+          o |= ie, a.removedNodes.length > 0 && a.removedNodes.forEach((c) => {
+            c instanceof HTMLElement && this.pendingDeletions.add(c);
           });
-        else if (c.type === "attributes")
-          if (c.attributeName === "style") {
+        else if (a.type === "attributes")
+          if (a.attributeName === "style") {
             o |= $ | Z;
-            const l = c.target, d = Ye(l.style);
-            this.pendingStyles.set(l, d);
+            const c = a.target, d = Ye(c.style);
+            this.pendingStyles.set(c, d);
           } else
-            c.attributeName === "class" ? o |= $ | Z : c.attributeName && c.attributeName.startsWith("data-") && (o |= $ | Z, c.attributeName.startsWith("data-mirage") && (o |= ie));
+            a.attributeName === "class" ? o |= $ | Z : a.attributeName && a.attributeName.startsWith("data-") && (o |= $ | Z, a.attributeName.startsWith("data-mirage") && (o |= ie));
         else
-          c.type === "characterData" && (o |= ce | $);
+          a.type === "characterData" && (o |= ce | $);
       if (o !== re) {
         if (this.pendingMask |= o, o & ie) {
           this.clearTimers(), this.isDomDirty = !0;
@@ -192,12 +192,12 @@ class We {
     this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
   }
 }
-const W = 1, K = 2, ct = 0, D = {
+const W = 1, K = 2, ct = 0, A = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Ee = Object.values(N.VALUES);
+}, Ee = Object.values(X.VALUES);
 class Le {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
@@ -215,51 +215,51 @@ class Le {
       return 0;
     const t = document.createElement("div"), r = document.createElement("span"), i = 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", i.width = 1, i.height = 1, i.style.verticalAlign = "baseline", r.appendChild(document.createTextNode("Hidden Text")), t.appendChild(r), t.appendChild(i), document.body.appendChild(t);
-    const a = i.offsetTop - r.offsetTop;
-    return document.body.removeChild(t), a;
+    const l = i.offsetTop - r.offsetTop;
+    return document.body.removeChild(t), l;
   }
 }
-f(Le, "cache", /* @__PURE__ */ new Map());
+g(Le, "cache", /* @__PURE__ */ new Map());
 class He extends y.MeshBasicMaterial {
-  constructor(t, r, i, a, n = 2) {
+  constructor(t, r, i, l, n = 2) {
     super({
       transparent: !0,
       side: y.FrontSide,
       color: 16777215
     });
-    f(this, "canvas");
-    f(this, "ctx");
-    f(this, "qualityFactor");
+    g(this, "canvas");
+    g(this, "ctx");
+    g(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, a);
+    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, l);
   }
   wrapText(t, r) {
     const i = t.split(`
-`), a = [];
+`), l = [];
     return i.forEach((n) => {
       const o = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
       if (o.length === 0) {
-        a.push("");
+        l.push("");
         return;
       }
-      let c = o[0];
-      for (let l = 1; l < o.length; l++) {
-        const d = o[l];
-        this.ctx.measureText(c + d).width <= r + 2 ? c += d : (c && a.push(c), c = d.trimStart());
+      let a = o[0];
+      for (let c = 1; c < o.length; c++) {
+        const d = o[c];
+        this.ctx.measureText(a + d).width <= r + 2 ? a += d : (a && l.push(a), a = d.trimStart());
       }
-      c && a.push(c);
-    }), a;
+      a && l.push(a);
+    }), l;
   }
-  updateText(t, r, i, a, n) {
+  updateText(t, r, i, l, n) {
     n !== void 0 && (this.qualityFactor = n);
-    const c = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * c, d = a * c;
-    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(c, 0, 0, c, 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, c = i * a, d = l * a;
+    this.canvas.width !== c || this.canvas.height !== d ? (this.canvas.width = c, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(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), u = r.lineHeight, p = Le.getBaseline(r.font);
-    h.forEach((g, v) => {
-      const x = v * u + p;
-      let M = 0;
-      r.textAlign === "center" ? M = i / 2 : r.textAlign === "right" && (M = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, M, x);
+    h.forEach((f, m) => {
+      const x = m * u + p;
+      let S = 0;
+      r.textAlign === "center" ? S = i / 2 : r.textAlign === "right" && (S = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(f, S, x);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
@@ -279,8 +279,8 @@ function ee(s) {
     /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), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new y.Color(`rgb(${t}, ${r}, ${i})`), alpha: a };
+    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), l = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new y.Color(`rgb(${t}, ${r}, ${i})`), alpha: l };
   }
   return { color: new y.Color(s), alpha: 1 };
 }
@@ -288,16 +288,16 @@ function Pe(s) {
   const e = [];
   let t = "", r = 0;
   for (let i = 0; i < s.length; i++) {
-    const a = s[i];
-    if (a === "(")
+    const l = s[i];
+    if (l === "(")
       r++;
-    else if (a === ")")
+    else if (l === ")")
       r--;
-    else if (a === "," && r === 0) {
+    else if (l === "," && r === 0) {
       e.push(t.trim()), t = "";
       continue;
     }
-    t += a;
+    t += l;
   }
   return t && e.push(t.trim()), e;
 }
@@ -308,21 +308,21 @@ function Ge(s) {
   if (!e)
     return null;
   const t = e[1], r = Pe(t);
-  let i = Math.PI, a = 0;
+  let i = Math.PI, l = 0;
   const n = r[0].trim();
   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), a = 1;
+    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), l = 1;
   else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
-    const c = parseFloat(n);
-    n.endsWith("deg") ? i = c * (Math.PI / 180) : n.endsWith("rad") ? i = c : n.endsWith("turn") && (i = c * Math.PI * 2), a = 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), l = 1;
   }
   const o = [];
-  for (let c = a; c < r.length && !(o.length >= 8); c++) {
-    const l = r[c].trim(), d = l.lastIndexOf(" ");
-    let h = l, u = null;
-    if (d !== -1 && !l.endsWith(")")) {
-      const g = l.substring(d + 1);
-      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, d).trim(), u = g);
+  for (let a = l; a < r.length && !(o.length >= 8); a++) {
+    const c = r[a].trim(), d = c.lastIndexOf(" ");
+    let h = c, u = null;
+    if (d !== -1 && !c.endsWith(")")) {
+      const f = c.substring(d + 1);
+      (f.endsWith("%") || f.endsWith("px") || !isNaN(parseFloat(f))) && (h = c.substring(0, d).trim(), u = f);
     }
     const p = ee(h);
     o.push({
@@ -333,19 +333,19 @@ function Ge(s) {
     });
   }
   if (o.length > 0) {
-    for (let l = 0; l < o.length; l++)
-      o[l].rawStop !== null && (o[l].stop = parseFloat(o[l].rawStop) / 100);
+    for (let c = 0; c < o.length; c++)
+      o[c].rawStop !== null && (o[c].stop = parseFloat(o[c].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 c = 0;
-    for (let l = 1; l < o.length; l++)
-      if (o[l].rawStop !== null || l === o.length - 1) {
-        const d = l - c;
+    let a = 0;
+    for (let c = 1; c < o.length; c++)
+      if (o[c].rawStop !== null || c === o.length - 1) {
+        const d = c - a;
         if (d > 1) {
-          const h = o[c].stop, p = (o[l].stop - h) / d;
-          for (let g = 1; g < d; g++)
-            o[c + g].stop = h + p * g;
+          const h = o[a].stop, p = (o[c].stop - h) / d;
+          for (let f = 1; f < d; f++)
+            o[a + f].stop = h + p * f;
         }
-        c = l;
+        a = c;
       }
   }
   return { angle: i, stops: o };
@@ -513,22 +513,22 @@ baseColor = blendSrcOver(baseColor, texColor);`, Ce = {
 };
 function Qe(s, e, t, r = null, i) {
   var E;
-  const a = r !== null || !!s.imageSrc;
+  const l = r !== null || !!s.imageSrc;
   let n = "";
   const o = {};
   if (i != null && i.uniforms)
-    for (const [C, b] of Object.entries(i.uniforms))
-      typeof b == "number" ? (n += `uniform float ${C};
-`, o[C] = { value: b }) : Array.isArray(b) ? b.length === 2 ? (n += `uniform vec2 ${C};
-`, o[C] = { value: new y.Vector2(...b) }) : b.length === 3 ? (n += `uniform vec3 ${C};
-`, o[C] = { value: new y.Vector3(...b) }) : b.length === 4 && (n += `uniform vec4 ${C};
-`, o[C] = { value: new y.Vector4(...b) }) : (n += `uniform float ${C};
-`, o[C] = { value: b });
-  const c = i !== void 0, l = (a || c ? Te.declChunk : "") + `
+    for (const [b, w] of Object.entries(i.uniforms))
+      typeof w == "number" ? (n += `uniform float ${b};
+`, o[b] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${b};
+`, o[b] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${b};
+`, o[b] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${b};
+`, o[b] = { value: new y.Vector4(...w) }) : (n += `uniform float ${b};
+`, o[b] = { value: w });
+  const a = i !== void 0, c = (l || a ? Te.declChunk : "") + `
 ` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 `, h = s.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, u = a || c ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = a || c ? Te.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", v = Ce.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), x = ee(s.backgroundColor), M = ee(s.borderColor), A = {
+`, u = l || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = l || a ? Te.baseColorChunk : "", f = (i == null ? void 0 : i.colorModifier) || "", m = Ce.fragmentShader.replace("#INJECT_DECLARATIONS", c).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", f), x = ee(s.backgroundColor), S = ee(s.borderColor), L = {
     uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
       value: new y.Vector4(
@@ -540,10 +540,10 @@ function Qe(s, e, t, r = null, i) {
     },
     uBorderColor: {
       value: new y.Vector4(
-        M.color.r,
-        M.color.g,
-        M.color.b,
-        M.alpha
+        S.color.r,
+        S.color.g,
+        S.color.b,
+        S.alpha
       )
     },
     uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
@@ -559,24 +559,24 @@ function Qe(s, e, t, r = null, i) {
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  Me(A.uBorderRadius.value, s.borderRadius, Math.min(e, t)), a && (A.uTexture.value = r);
-  const S = new y.ShaderMaterial({
-    uniforms: q(q({}, A), o),
+  Me(L.uBorderRadius.value, s.borderRadius, Math.min(e, t)), l && (L.uTexture.value = r);
+  const T = new y.ShaderMaterial({
+    uniforms: q(q({}, L), o),
     vertexShader: Ce.vertexShader,
-    fragmentShader: v,
+    fragmentShader: m,
     transparent: !0,
     side: y.FrontSide
     // for better performance
   });
-  return s.backgroundImage && le(S, { backgroundImage: s.backgroundImage }), S;
+  return s.backgroundImage && le(T, { backgroundImage: s.backgroundImage }), T;
 }
 function Ze(s, e, t, r, i) {
-  const a = J(e.borderWidth);
+  const l = J(e.borderWidth);
   le(s, {
     width: t,
     height: r,
     borderRadius: e.borderRadius,
-    borderWidth: a,
+    borderWidth: l,
     backgroundColor: e.backgroundColor,
     borderColor: e.borderColor,
     opacity: e.opacity,
@@ -585,7 +585,7 @@ function Ze(s, e, t, r, i) {
   });
 }
 function le(s, e) {
-  var r, i, a;
+  var r, i, l;
   if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0) {
     const n = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(s.uniforms.uSize.value.x, s.uniforms.uSize.value.y);
     Me(s.uniforms.uBorderRadius.value, e.borderRadius, n);
@@ -645,9 +645,9 @@ function le(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, o = t.image.naturalHeight || t.image.videoHeight || t.image.height, c = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (a = e.height) != null ? a : s.uniforms.uSize.value.y;
-    if (n && o && c && l) {
-      const d = n / o, h = c / 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, c = (l = e.height) != null ? l : s.uniforms.uSize.value.y;
+    if (n && o && a && c) {
+      const d = n / o, h = a / c;
       if (d > h) {
         const u = h / d;
         s.uniforms.uTextureRepeat.value.set(u, 1), s.uniforms.uTextureOffset.value.set((1 - u) / 2, 0);
@@ -664,13 +664,13 @@ function le(s, e) {
       s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
       for (let o = 0; o < 8; o++)
         if (o < n.stops.length) {
-          const c = n.stops[o];
+          const a = n.stops[o];
           s.uniforms.uGradientColors.value[o].set(
-            c.color.r,
-            c.color.g,
-            c.color.b,
-            c.alpha
-          ), s.uniforms.uGradientStops.value[o] = c.stop;
+            a.color.r,
+            a.color.g,
+            a.color.b,
+            a.alpha
+          ), s.uniforms.uGradientStops.value[o] = a.stop;
         } else
           s.uniforms.uGradientColors.value[o].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[o] = 1;
     } else
@@ -680,7 +680,7 @@ function le(s, e) {
     n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
 }
 function Me(s, e, t = 0) {
-  var c, l, d, h;
+  var a, c, d, h;
   if (e == null) {
     s.set(0, 0, 0, 0);
     return;
@@ -693,11 +693,11 @@ function Me(s, e, t = 0) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const r = e.split("/")[0].trim().split(/\s+/), i = J(r[0], t), a = J((c = r[1]) != null ? c : r[0], t), n = J((l = r[2]) != null ? l : r[0], t), o = J((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
-  s.set(i, a, n, o);
+  const r = e.split("/")[0].trim().split(/\s+/), i = J(r[0], t), l = J((a = r[1]) != null ? a : r[0], t), n = J((c = r[2]) != null ? c : r[0], t), o = J((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
+  s.set(i, l, n, o);
 }
 const z = {
-  create(s, e, t, r, i, a = 2, n = null, o) {
+  create(s, e, t, r, i, l = 2, n = null, o) {
     return s === "BOX" ? Qe(
       e,
       r,
@@ -709,21 +709,21 @@ const z = {
       e,
       r,
       i,
-      a
+      l
     ) : new y.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, r, i, a, n = 2, o) {
+  update(s, e, t, r, i, l, n = 2, o) {
     e === "BOX" ? Ze(
       s,
       t,
       i,
-      a,
+      l,
       o
     ) : e === "TEXT" && s.updateText(
       r || "",
       t,
       i,
-      a,
+      l,
       n
     );
   },
@@ -733,16 +733,16 @@ const z = {
 };
 class et {
   constructor(e, t = !0) {
-    f(this, "observer");
-    f(this, "textures", /* @__PURE__ */ new WeakMap());
-    f(this, "loadStatus", /* @__PURE__ */ new WeakMap());
-    f(this, "elementUrls", /* @__PURE__ */ new WeakMap());
-    f(this, "onUpdate");
+    g(this, "observer");
+    g(this, "textures", /* @__PURE__ */ new WeakMap());
+    g(this, "loadStatus", /* @__PURE__ */ new WeakMap());
+    g(this, "elementUrls", /* @__PURE__ */ new WeakMap());
+    g(this, "onUpdate");
     this.onUpdate = e, t && (this.observer = new IntersectionObserver(
       (r) => {
         for (const i of r) {
-          const a = i.target;
-          i.isIntersecting ? this.loadTexture(a) : this.disposeTexture(a);
+          const l = i.target;
+          i.isIntersecting ? this.loadTexture(l) : this.disposeTexture(l);
         }
       },
       { rootMargin: "300px" }
@@ -766,9 +766,9 @@ class et {
         try {
           let r;
           if (t.startsWith("data:image/svg+xml"))
-            r = yield new Promise((a, n) => {
+            r = yield new Promise((l, n) => {
               const o = new Image();
-              o.onload = () => a(o), o.onerror = n, o.src = t;
+              o.onload = () => l(o), o.onerror = n, o.src = t;
             });
           else {
             const n = yield (yield fetch(t)).blob();
@@ -801,38 +801,38 @@ class et {
 }
 class tt {
   constructor(e, t, r, i) {
-    f(this, "canvas");
-    f(this, "scene");
-    f(this, "camera");
-    f(this, "renderer");
-    f(this, "renderTargets", []);
-    f(this, "renderOrder", 0);
-    f(this, "qualityFactor", 2);
-    f(this, "mode", "overlay");
-    f(this, "canvasSize", "viewport");
-    f(this, "clipArea", 1);
-    f(this, "targetLayer", "base");
-    f(this, "overscan", 200);
-    f(this, "target");
-    f(this, "mountContainer");
-    f(this, "registry");
-    f(this, "targetRect");
-    f(this, "travelersByLayer", Array.from(
-      { length: U.MAX_LAYERS },
+    g(this, "canvas");
+    g(this, "scene");
+    g(this, "camera");
+    g(this, "renderer");
+    g(this, "renderTargets", []);
+    g(this, "renderOrder", 0);
+    g(this, "qualityFactor", 2);
+    g(this, "mode", "overlay");
+    g(this, "canvasSize", "viewport");
+    g(this, "clipArea", 1);
+    g(this, "targetLayer", "base");
+    g(this, "overscan", 200);
+    g(this, "target");
+    g(this, "mountContainer");
+    g(this, "registry");
+    g(this, "targetRect");
+    g(this, "travelersByLayer", Array.from(
+      { length: O.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
-    f(this, "textureManager");
+    g(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
-    f(this, "fixedMeshes", /* @__PURE__ */ new Set());
-    var o, c, l, d, h;
-    this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (c = t.canvasSize) != null ? c : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new et((u, p) => {
-      const g = this.registry.get(u);
-      g && g.material instanceof y.ShaderMaterial && z.forceUpdateUniforms(g.material, { texture: p });
+    g(this, "fixedMeshes", /* @__PURE__ */ new Set());
+    var o, a, c, 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 = (c = t.travelerClipArea) != null ? c : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new et((u, p) => {
+      const f = this.registry.get(u);
+      f && f.material instanceof y.ShaderMaterial && z.forceUpdateUniforms(f.material, { texture: p });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    const l = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
     this.camera = new y.OrthographicCamera(
-      a / -2,
-      a / 2,
+      l / -2,
+      l / 2,
       n / 2,
       n / -2,
       1,
@@ -843,16 +843,16 @@ class tt {
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(a, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
+    }), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(l, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
   }
   get isViewport() {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? D.SELECTED : D.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? A.SELECTED : A.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < U.MAX_LAYERS; e++) {
+    for (let e = 0; e < O.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(
@@ -920,8 +920,8 @@ class tt {
     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, a = 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, c = Math.abs(i - n) > 0.1 || Math.abs(a - 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);
-    c ? (this.targetRect = r, this.setSize(i, a), 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, l = 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(l - o) > 0.1, c = 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, l), this.updateCanvasLayout()) : c ? (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);
@@ -940,31 +940,31 @@ class tt {
   // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
   // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
   reconcileNode(e) {
-    var i;
+    var i, l;
     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 a = new y.PlaneGeometry(1, 1), n = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = z.create(
+      const n = new y.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = z.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        n,
+        o,
         e.shaderHooks
       );
-      t = new y.Mesh(a, 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 y.Mesh(n, a), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = a, t.userData.domElement = e.element, t.userData.shaderHash = r;
     }
-    if (this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
-      for (let a = 0; a < U.MAX_LAYERS; a++)
-        a === e.captureLayer - 2 ? this.travelersByLayer[a].add(t) : this.travelersByLayer[a].delete(t);
+    if ((l = e.nativeStyles) != null && l.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
+      for (let n = 0; n < O.MAX_LAYERS; n++)
+        n === e.captureLayer - 2 ? this.travelersByLayer[n].add(t) : this.travelersByLayer[n].delete(t);
     else
-      for (const a of this.travelersByLayer)
-        a.delete(t);
+      for (const n of this.travelersByLayer)
+        n.delete(t);
     if (e.isFixed ? this.fixedMeshes.add(t) : this.fixedMeshes.delete(t), e.styles.imageSrc ? this.textureManager.register(e.element, e.styles.imageSrc) : this.textureManager.unregister(e.element), e.type === "BOX")
-      for (const a of e.children)
-        this.reconcileNode(a);
+      for (const n of e.children)
+        this.reconcileNode(n);
     else
       e.type === "TEXT" && (this.reconcileTextChild(t, e, !1), t.userData.nativeMesh && e.nativeStyles && this.reconcileTextChild(
         t.userData.nativeMesh,
@@ -973,88 +973,88 @@ class tt {
       ));
   }
   reconcileTextChild(e, t, r) {
-    var l;
+    var c;
     const i = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], a = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(a) + t.textContent + i.map((d) => d.text).join("|"), o = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
+    ], l = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(l) + t.textContent + i.map((d) => d.text).join("|"), o = (c = e.userData) == null ? void 0 : c.textChildStyleHash;
     if (t.dirtyMask & ce || n !== o) {
       e.children.filter(
-        (g) => g.name.startsWith("TEXT_CHILD")
-      ).forEach((g) => {
+        (f) => f.name.startsWith("TEXT_CHILD")
+      ).forEach((f) => {
         var x;
-        const v = g;
-        (x = v.material.map) == null || x.dispose(), v.geometry.dispose(), e.remove(v);
+        const m = f;
+        (x = m.material.map) == null || x.dispose(), m.geometry.dispose(), e.remove(m);
       });
       const h = t.rect, u = h.x + h.width / 2, p = h.y + h.height / 2;
-      i.forEach((g, v) => {
+      i.forEach((f, m) => {
         const x = z.create(
           "TEXT",
-          a,
-          g.text,
-          g.rect.width,
-          g.rect.height,
+          l,
+          f.text,
+          f.rect.width,
+          f.rect.height,
           this.qualityFactor
-        ), M = new y.PlaneGeometry(1, 1), A = new y.Mesh(M, x);
-        A.name = `TEXT_CHILD_${v}`;
-        const S = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, E = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
-        A.scale.set(S, E, 1);
-        const C = g.rect.x + g.rect.width / 2, b = g.rect.y + g.rect.height / 2, O = C - u, X = -(b - p);
-        A.position.set(
-          t.rect.width === 0 ? 0 : O / t.rect.width,
-          t.rect.height === 0 ? 0 : X / t.rect.height,
+        ), S = new y.PlaneGeometry(1, 1), L = new y.Mesh(S, x);
+        L.name = `TEXT_CHILD_${m}`;
+        const T = t.rect.width === 0 ? 1 : f.rect.width / t.rect.width, E = t.rect.height === 0 ? 1 : f.rect.height / t.rect.height;
+        L.scale.set(T, E, 1);
+        const b = f.rect.x + f.rect.width / 2, w = f.rect.y + f.rect.height / 2, I = b - u, U = -(w - p);
+        L.position.set(
+          t.rect.width === 0 ? 0 : I / t.rect.width,
+          t.rect.height === 0 ? 0 : U / t.rect.height,
           5e-3
-        ), e.add(A);
+        ), e.add(L);
       }), e.userData.textChildStyleHash = n;
     }
     e.children.forEach((d) => {
       if (!d.name.startsWith("TEXT_CHILD"))
         return;
-      const h = d, u = t.visibility & W ? D.BASE : D.HIDDEN;
-      if (h.layers.set(u), t.visibility & K && h.layers.enable(D.SELECTED), t.visibility & W)
+      const h = d, u = t.visibility & W ? A.BASE : A.HIDDEN;
+      if (h.layers.set(u), t.visibility & K && h.layers.enable(A.SELECTED), t.visibility & W)
         if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
           for (let p = t.captureLayer; p < t.nativeLayer; p++)
-            h.layers.enable(D.getCaptureLayer(p));
+            h.layers.enable(A.getCaptureLayer(p));
         else if (r && t.nativeLayer !== void 0)
-          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= U.MAX_LAYERS + 1; p++)
-            h.layers.enable(D.getCaptureLayer(p));
+          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= O.MAX_LAYERS + 1; p++)
+            h.layers.enable(A.getCaptureLayer(p));
         else
-          for (let p = t.captureLayer; p <= U.MAX_LAYERS + 1; p++)
-            h.layers.enable(D.getCaptureLayer(p));
+          for (let p = t.captureLayer; p <= O.MAX_LAYERS + 1; p++)
+            h.layers.enable(A.getCaptureLayer(p));
     });
   }
   updateMeshProperties(e, t) {
-    var S, E, C;
-    const { rect: r, styles: i } = t, a = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / a, o = this.renderer.domElement.height / a;
+    var T, E, b;
+    const { rect: r, styles: i } = t, l = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / l, o = this.renderer.domElement.height / l;
     e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
       x: r.x,
       y: r.y,
       width: r.width,
       height: r.height
     };
-    const c = 1e-3;
+    const a = 1e-3;
     this.renderOrder++;
-    const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
+    const c = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
     let h, u;
     if (this.isViewport)
       h = r.x - window.innerWidth / 2 + r.width / 2, u = -r.y + window.innerHeight / 2 - r.height / 2;
     else {
-      const b = r.x - l, O = r.y - d;
-      h = b - n / 2 + r.width / 2, u = -O + o / 2 - r.height / 2;
+      const w = r.x - c, I = r.y - d;
+      h = w - n / 2 + r.width / 2, u = -I + o / 2 - r.height / 2;
     }
     e.position.set(
       h,
       u,
-      i.zIndex + this.renderOrder * c
+      i.zIndex + this.renderOrder * a
     );
-    const p = r.x, g = r.y;
-    e.userData.basePosition = { x: h, y: u }, e.userData.originalBasePosition = { x: h, y: u }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
-    const v = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, x = window.getComputedStyle(v);
-    let M = 0, A = 0;
+    const p = r.x, f = r.y;
+    e.userData.basePosition = { x: h, y: u }, e.userData.originalBasePosition = { x: h, y: u }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: f }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, x = window.getComputedStyle(m);
+    let S = 0, L = 0;
     if (x.transform && x.transform !== "none") {
-      const b = new DOMMatrix(x.transform);
-      M = b.m41, A = b.m42;
+      const w = new DOMMatrix(x.transform);
+      S = w.m41, L = w.m42;
     }
-    if (e.userData.baseTransform = { x: M, y: A }, delete e.userData.originRatioX, delete e.userData.originRatioY, z.update(
+    if (e.userData.baseTransform = { x: S, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, z.update(
       e.userData.baseMaterial,
       "BOX",
       i,
@@ -1062,10 +1062,10 @@ class tt {
       r.width,
       r.height,
       this.qualityFactor,
-      t.isTraveler ? (S = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : S.texture : this.textureManager.get(t.element)
+      t.isTraveler ? (T = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : T.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const k = z.create(
+        const B = z.create(
           "BOX",
           t.nativeStyles,
           "",
@@ -1074,111 +1074,127 @@ class tt {
           this.qualityFactor,
           t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), G = new y.Mesh(e.geometry, k);
+        ), G = new y.Mesh(e.geometry, B);
         t.type === "TEXT" && (G.name = "BG_MESH"), this.scene.add(G), e.userData.nativeMesh = G;
       }
-      const b = e.userData.nativeMesh;
-      let O, X;
+      const w = e.userData.nativeMesh;
+      let I, U;
       if (this.isViewport)
-        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, X = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        I = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, U = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const k = t.nativeRect.x - l, G = t.nativeRect.y - d;
-        O = k - n / 2 + t.nativeRect.width / 2, X = -G + o / 2 - t.nativeRect.height / 2;
+        const B = t.nativeRect.x - c, G = t.nativeRect.y - d;
+        I = B - n / 2 + t.nativeRect.width / 2, U = -G + o / 2 - t.nativeRect.height / 2;
       }
-      b.scale.set(t.nativeRect.width, t.nativeRect.height, 1), b.position.set(
-        O,
-        X,
-        t.nativeStyles.zIndex + this.renderOrder * c
+      w.scale.set(t.nativeRect.width, t.nativeRect.height, 1), w.position.set(
+        I,
+        U,
+        t.nativeStyles.zIndex + this.renderOrder * a
       ), z.update(
-        b.material,
+        w.material,
         "BOX",
         t.nativeStyles,
         "",
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (C = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : C.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element)
       );
     } else
       e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const r = t.visibility & W ? D.BASE : D.HIDDEN;
-    if (e.layers.set(r), t.visibility & K && e.layers.enable(D.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    const r = t.visibility & W ? A.BASE : A.HIDDEN;
+    if (e.layers.set(r), t.visibility & K && e.layers.enable(A.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const i = e.userData.nativeMesh;
-      if (i.layers.set(D.HIDDEN), t.visibility & W) {
-        for (let a = t.captureLayer; a < t.nativeLayer; a++)
-          e.layers.enable(D.getCaptureLayer(a));
-        for (let a = Math.max(t.captureLayer, t.nativeLayer); a <= U.MAX_LAYERS + 1; a++)
-          i.layers.enable(D.getCaptureLayer(a));
+      if (i.layers.set(A.HIDDEN), t.visibility & W) {
+        for (let l = t.captureLayer; l < t.nativeLayer; l++)
+          e.layers.enable(A.getCaptureLayer(l));
+        for (let l = Math.max(t.captureLayer, t.nativeLayer); l <= O.MAX_LAYERS + 1; l++)
+          i.layers.enable(A.getCaptureLayer(l));
       }
     } else if (t.visibility & W)
-      for (let i = t.captureLayer; i <= U.MAX_LAYERS + 1; i++)
-        e.layers.enable(D.getCaptureLayer(i));
+      for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
+        e.layers.enable(A.getCaptureLayer(i));
   }
   captureRenderTarget(e, t, r) {
     if (e.size === 0 || !r)
       return;
-    const i = new y.Color(), a = this.renderer.getClearAlpha();
+    const i = new y.Color(), l = 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(), o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
+    const n = new y.Vector3(), o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, a = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, c = this.renderer.getPixelRatio();
     for (const d of e) {
       n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
-      const h = (n.x + 1) / 2 * o, u = (n.y + 1) / 2 * c;
-      let p = 0, g = 1;
-      typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
-      const v = d.scale.x * g + 0.5, x = d.scale.y * g + 0.5, M = h - v / 2, A = u - x / 2, S = (M * this.qualityFactor - p) / l, E = (A * this.qualityFactor - p) / l, C = (v * this.qualityFactor + p * 2) / l, b = (x * this.qualityFactor + p * 2) / l;
-      this.renderer.setScissor(S, E, C, b), this.renderer.render(this.scene, this.camera);
+      const h = (n.x + 1) / 2 * o, u = (n.y + 1) / 2 * a;
+      let p = 0, f = 1;
+      typeof this.clipArea == "number" ? f = this.clipArea : this.clipArea.endsWith("%") ? f = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
+      const m = d.scale.x * f + 0.5, x = d.scale.y * f + 0.5, S = h - m / 2, L = u - x / 2, T = (S * this.qualityFactor - p) / c, E = (L * this.qualityFactor - p) / c, b = (m * this.qualityFactor + p * 2) / c, w = (x * this.qualityFactor + p * 2) / c;
+      this.renderer.setScissor(T, E, b, w), this.renderer.render(this.scene, this.camera);
     }
-    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, a);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, l);
   }
   render() {
-    for (let e = 0; e < U.MAX_LAYERS; e++) {
+    for (let e = 0; e < O.MAX_LAYERS; e++) {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        D.getCaptureLayer(t),
+        A.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(), i = this.renderer.domElement.width / r, a = this.renderer.domElement.height / r;
+    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), i = this.renderer.domElement.width / r, l = this.renderer.domElement.height / r;
     this.scene.children.forEach((n) => {
       const o = n;
       if (!o.userData || !o.userData.domElement)
         return;
-      const c = o.userData.domElement;
-      if (!c.isConnected)
+      const a = o.userData.domElement;
+      if (!a.isConnected)
         return;
-      let l;
-      if (c.nodeType === Node.TEXT_NODE) {
+      let c;
+      if (a.nodeType === Node.TEXT_NODE) {
         const h = document.createRange();
-        h.selectNode(c), l = h.getBoundingClientRect();
+        h.selectNode(a), c = h.getBoundingClientRect();
       } else
-        l = c.getBoundingClientRect();
+        c = 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) {
+      if (!d || Math.abs(c.x - d.x) > 0.5 || Math.abs(c.y - d.y) > 0.5 || Math.abs(c.width - d.width) > 0.5 || Math.abs(c.height - d.height) > 0.5) {
         o.userData.domRect = {
-          x: l.x,
-          y: l.y,
-          width: l.width,
-          height: l.height
+          x: c.x,
+          y: c.y,
+          width: c.width,
+          height: c.height
         };
         let h, u;
         if (this.isViewport)
-          h = l.x - window.innerWidth / 2 + l.width / 2, u = -l.y + window.innerHeight / 2 - l.height / 2;
+          h = c.x - window.innerWidth / 2 + c.width / 2, u = -c.y + window.innerHeight / 2 - c.height / 2;
         else {
-          const p = l.x - e, g = l.y - t;
-          h = p - i / 2 + l.width / 2, u = -g + a / 2 - l.height / 2;
+          const p = c.x - e, f = c.y - t;
+          h = p - i / 2 + c.width / 2, u = -f + l / 2 - c.height / 2;
         }
-        if (o.position.setX(h), o.position.setY(u), o.scale.set(l.width, l.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && z.forceUpdateUniforms(o.material, {
-          width: l.width,
-          height: l.height
+        if (o.position.setX(h), o.position.setY(u), o.scale.set(c.width, c.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && z.forceUpdateUniforms(o.material, {
+          width: c.width,
+          height: c.height
         }), o.userData.nativeMesh) {
           const p = o.userData.nativeMesh;
-          p.position.setX(h), p.position.setY(u), p.scale.set(l.width, l.height, 1), p.updateMatrixWorld();
+          let f = c.width, m = c.height, x = h, S = u;
+          if (o.userData.nativeTransform) {
+            const L = o.userData.nativeTransform, T = L.match(/scale\(([\d.]+%?)\)/);
+            if (T) {
+              let b = parseFloat(T[1]);
+              T[1].includes("%") && (b /= 100), f *= b, m *= b;
+            }
+            const E = L.match(/translate\(([^,]+),\s*([^)]+)\)/);
+            if (E) {
+              const b = E[1].trim(), w = E[2].trim();
+              let I = parseFloat(b);
+              b.includes("%") && (I = I / 100 * c.width);
+              let U = parseFloat(w);
+              w.includes("%") && (U = U / 100 * c.height), x += I, S -= U;
+            }
+          }
+          p.position.setX(x), p.position.setY(S), p.scale.set(f, m, 1), p.updateMatrixWorld();
         }
       }
     });
@@ -1186,17 +1202,17 @@ class tt {
 }
 function rt(s) {
   const e = s.textContent || "", t = [];
-  let r = "", i = null, a = -1;
-  const n = (l, d) => {
-    for (let h = 0; h < l.length; h++) {
-      const u = l[h], p = document.createRange();
+  let r = "", i = null, l = -1;
+  const n = (c, d) => {
+    for (let h = 0; h < c.length; h++) {
+      const u = c[h], p = document.createRange();
       p.setStart(s, d + h), p.setEnd(s, d + h + 1);
-      const g = p.getBoundingClientRect();
-      if (g.width === 0 && g.height === 0) {
+      const f = p.getBoundingClientRect();
+      if (f.width === 0 && f.height === 0) {
         r += u;
         continue;
       }
-      a === -1 || Math.abs(g.top - a) > g.height / 2 ? (r && i && t.push({
+      l === -1 || Math.abs(f.top - l) > f.height / 2 ? (r && i && t.push({
         text: r,
         rect: {
           left: i.left,
@@ -1205,30 +1221,30 @@ function rt(s) {
           height: i.bottom - i.top
         }
       }), r = u, i = {
-        left: g.left,
-        top: g.top,
-        right: g.right,
-        bottom: g.bottom
-      }, a = g.top) : (r += u, i && (i.left = Math.min(i.left, g.left), i.top = Math.min(i.top, g.top), i.right = Math.max(i.right, g.right), i.bottom = Math.max(
+        left: f.left,
+        top: f.top,
+        right: f.right,
+        bottom: f.bottom
+      }, l = f.top) : (r += u, i && (i.left = Math.min(i.left, f.left), i.top = Math.min(i.top, f.top), i.right = Math.max(i.right, f.right), i.bottom = Math.max(
         i.bottom,
-        g.bottom
+        f.bottom
       )));
     }
   }, o = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-  let c = 0;
-  for (const l of o) {
+  let a = 0;
+  for (const c of o) {
     const d = document.createRange();
-    d.setStart(s, c), d.setEnd(s, c + l.length);
+    d.setStart(s, a), d.setEnd(s, a + c.length);
     const h = d.getClientRects();
     if (h.length > 1)
-      n(l, c);
+      n(c, a);
     else {
       const u = h.length === 1 ? h[0] : d.getBoundingClientRect();
       if (u.width === 0 && u.height === 0) {
-        r += l, c += l.length;
+        r += c, a += c.length;
         continue;
       }
-      a === -1 || Math.abs(u.top - a) > u.height / 2 ? (r && i && t.push({
+      l === -1 || Math.abs(u.top - l) > u.height / 2 ? (r && i && t.push({
         text: r,
         rect: {
           left: i.left,
@@ -1236,17 +1252,17 @@ function rt(s) {
           width: i.right - i.left,
           height: i.bottom - i.top
         }
-      }), r = l, i = {
+      }), r = c, i = {
         left: u.left,
         top: u.top,
         right: u.right,
         bottom: u.bottom
-      }, a = u.top) : (r += l, i && (i.left = Math.min(i.left, u.left), i.top = Math.min(i.top, u.top), i.right = Math.max(i.right, u.right), i.bottom = Math.max(
+      }, l = u.top) : (r += c, i && (i.left = Math.min(i.left, u.left), i.top = Math.min(i.top, u.top), i.right = Math.max(i.right, u.right), i.bottom = Math.max(
         i.bottom,
         u.bottom
       )));
     }
-    c += l.length;
+    a += c.length;
   }
   return r && i && t.push({
     text: r,
@@ -1257,7 +1273,7 @@ function rt(s) {
       height: i.bottom - i.top
     }
   }), t.filter(
-    (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
+    (c) => c.text.trim().length > 0 && c.rect.width > 0 && c.rect.height > 0
   );
 }
 function Se(s) {
@@ -1276,311 +1292,312 @@ function Se(s) {
     letterSpacing: r
   };
 }
-function Ae(s, e = $ | Z | Xe | ce | ie, t, r = 1, i = 0, a = 2, n, o) {
+function De(s, e = $ | Z | ze | ce | ie, t, r = 1, i = 0, l = 2, n, o) {
   var de, ue, fe, ge, pe, me;
   if (s.nodeType === Node.TEXT_NODE) {
-    const m = s;
-    if (!m.textContent || !m.textContent.trim())
+    const v = s;
+    if (!v.textContent || !v.textContent.trim())
       return null;
-    const R = m.textContent.replace(/\s+/g, " ");
-    if (R.length === 0)
+    const M = v.textContent.replace(/\s+/g, " ");
+    if (M.length === 0)
       return null;
-    const I = rt(m);
-    if (I.length === 0)
+    const k = rt(v);
+    if (k.length === 0)
       return null;
-    const F = m.parentElement, L = F ? window.getComputedStyle(F) : null;
-    if (!L)
+    const _ = v.parentElement, D = _ ? window.getComputedStyle(_) : null;
+    if (!D)
       return null;
-    const V = Math.min(...I.map((w) => w.rect.left)), B = Math.min(...I.map((w) => w.rect.top)), H = Math.max(...I.map((w) => w.rect.left + w.rect.width)), T = Math.max(...I.map((w) => w.rect.top + w.rect.height));
+    const V = Math.min(...k.map((C) => C.rect.left)), F = Math.min(...k.map((C) => C.rect.top)), H = Math.max(...k.map((C) => C.rect.left + C.rect.width)), R = Math.max(...k.map((C) => C.rect.top + C.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: m,
+      element: v,
       rect: {
         x: V + window.scrollX,
-        y: B + window.scrollY,
+        y: F + window.scrollY,
         width: H - V,
-        height: T - B
+        height: R - F
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(L.opacity),
-        zIndex: (isNaN(parseInt(L.zIndex)) ? 0 : parseInt(L.zIndex)) + i,
+        opacity: _ && _.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(D.opacity),
+        zIndex: (isNaN(parseInt(D.zIndex)) ? 0 : parseInt(D.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: R,
-      textLines: I.map((w) => ({
-        text: w.text.trim(),
+      textContent: M,
+      textLines: k.map((C) => ({
+        text: C.text.trim(),
         rect: {
-          x: w.rect.left + window.scrollX,
-          y: w.rect.top + window.scrollY,
-          width: w.rect.width,
-          height: w.rect.height
+          x: C.rect.left + window.scrollX,
+          y: C.rect.top + window.scrollY,
+          width: C.rect.width,
+          height: C.rect.height
         }
       })),
-      textStyles: Se(L),
+      textStyles: Se(D),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
       captureLayer: r,
-      isFixed: L.position === "fixed",
+      isFixed: D.position === "fixed",
       nativeLayer: n,
       nativeStyles: o ? q(q({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(L.opacity),
-        zIndex: (isNaN(parseInt(L.zIndex)) ? 0 : parseInt(L.zIndex)) + i,
+        opacity: _ && _.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(D.opacity),
+        zIndex: (isNaN(parseInt(D.zIndex)) ? 0 : parseInt(D.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, Se(L)), o) : void 0,
+      }, Se(D)), o) : void 0,
       nativeRect: o ? {
         x: V + window.scrollX,
-        y: B + window.scrollY,
+        y: F + window.scrollY,
         width: H - V,
-        height: T - B
+        height: R - F
       } : void 0,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const c = s, l = c.dataset[N.KEY];
+  const a = s, c = a.dataset[X.KEY];
   let d = t, h = t;
-  if (l) {
-    const m = new Set(l.split(/\s+/));
-    for (const R of m)
-      if (!Ee.includes(R))
+  if (c) {
+    const v = new Set(c.split(/\s+/));
+    for (const M of v)
+      if (!Ee.includes(M))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(N.VALUES.END))
+    if (v.has(X.VALUES.END))
       return null;
-    if (m.has(N.VALUES.INCLUDE_TREE) && m.has(N.VALUES.EXCLUDE_TREE))
+    if (v.has(X.VALUES.INCLUDE_TREE) && v.has(X.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (m.has(N.VALUES.INCLUDE_SELF) && m.has(N.VALUES.EXCLUDE_SELF))
+    if (v.has(X.VALUES.INCLUDE_SELF) && v.has(X.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(N.VALUES.INCLUDE_TREE) ? d = d | W : m.has(N.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, m.has(N.VALUES.INCLUDE_SELF) ? h = h | W : m.has(N.VALUES.EXCLUDE_SELF) && (h = h & ~W);
+    v.has(X.VALUES.INCLUDE_TREE) ? d = d | W : v.has(X.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, v.has(X.VALUES.INCLUDE_SELF) ? h = h | W : v.has(X.VALUES.EXCLUDE_SELF) && (h = h & ~W);
   }
-  const u = c.dataset[Y.KEY];
+  const u = a.dataset[Y.KEY];
   if (u) {
-    const m = new Set(u.split(/\s+/));
-    for (const R of m)
-      if (!Ee.includes(R))
+    const v = new Set(u.split(/\s+/));
+    for (const M of v)
+      if (!Ee.includes(M))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(Y.VALUES.END))
+    if (v.has(Y.VALUES.END))
       return null;
-    if (m.has(Y.VALUES.INCLUDE_TREE) && m.has(Y.VALUES.EXCLUDE_TREE))
+    if (v.has(Y.VALUES.INCLUDE_TREE) && v.has(Y.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (m.has(Y.VALUES.INCLUDE_SELF) && m.has(Y.VALUES.EXCLUDE_SELF))
+    if (v.has(Y.VALUES.INCLUDE_SELF) && v.has(Y.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(Y.VALUES.INCLUDE_TREE) ? d = d | K : m.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~K), h = d, m.has(Y.VALUES.INCLUDE_SELF) ? h = h | K : m.has(Y.VALUES.EXCLUDE_SELF) && (h = h & ~K);
+    v.has(Y.VALUES.INCLUDE_TREE) ? d = d | K : v.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~K), h = d, v.has(Y.VALUES.INCLUDE_SELF) ? h = h | K : v.has(Y.VALUES.EXCLUDE_SELF) && (h = h & ~K);
   }
-  const p = c.dataset[U.KEY];
-  let g = !1, v = o ? q({}, o) : {}, x = n;
+  const p = a.dataset[O.KEY];
+  let f = !1, m = o ? q({}, o) : {}, x = n;
   if (p) {
-    let m = 1;
-    const R = p.indexOf("{"), I = p.lastIndexOf("}");
-    let F = p;
-    if (R !== -1 && I !== -1 && I > R) {
-      F = p.substring(0, R).trim();
-      const T = p.substring(R, I + 1);
+    let v = 1;
+    const M = p.indexOf("{"), k = p.lastIndexOf("}");
+    let _ = p;
+    if (M !== -1 && k !== -1 && k > M) {
+      _ = p.substring(0, M).trim();
+      const R = p.substring(M, k + 1);
       try {
-        v = new Function("return " + T)();
-      } catch (w) {
+        m = new Function("return " + R)();
+      } catch (C) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${T}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${R}`
         );
       }
     }
-    const L = F.split(/\s+/);
+    const D = _.split(/\s+/);
     let V = !1;
-    const B = L.indexOf(U.VALUES.TRAVELER);
-    if (B !== -1) {
-      g = !0, V = !0;
-      const T = L[B + 1];
-      if (T && !isNaN(parseInt(T, 10)))
-        m = parseInt(T, 10);
+    const F = D.indexOf(O.VALUES.TRAVELER);
+    if (F !== -1) {
+      f = !0, V = !0;
+      const R = D[F + 1];
+      if (R && !isNaN(parseInt(R, 10)))
+        v = parseInt(R, 10);
       else {
-        const w = L.find((j) => !isNaN(parseInt(j, 10)));
-        w && (m = parseInt(w, 10));
+        const C = D.find((j) => !isNaN(parseInt(j, 10)));
+        C && (v = parseInt(C, 10));
       }
     }
-    const H = L.indexOf(U.VALUES.NATIVE);
+    const H = D.indexOf(O.VALUES.NATIVE);
     if (H !== -1) {
-      const T = L[H + 1];
-      if (T && !isNaN(parseInt(T, 10)))
-        x = parseInt(T, 10);
-      else if (!g) {
-        const w = L.find((j) => !isNaN(parseInt(j, 10)));
-        w && (x = parseInt(w, 10));
+      const R = D[H + 1];
+      if (R && !isNaN(parseInt(R, 10)))
+        x = parseInt(R, 10);
+      else if (!f) {
+        const C = D.find((j) => !isNaN(parseInt(j, 10)));
+        C && (x = parseInt(C, 10));
       }
     }
     if (V) {
-      const T = m + 1;
-      if (T < r)
+      const R = v + 1;
+      if (R < r)
         throw new Error(
-          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${r - 1}).`
+          `[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${r - 1}).`
         );
-      r = Math.min(T, U.MAX_LAYERS + 1);
+      r = Math.min(R, O.MAX_LAYERS + 1);
     }
   }
-  const M = c.dataset[ze.KEY];
-  let A;
-  M && (A = JSON.parse(M));
-  const S = c.getBoundingClientRect(), E = window.getComputedStyle(c);
-  if (S.width === 0 || S.height === 0 || E.display === "none")
+  const S = a.dataset[Xe.KEY];
+  let L;
+  S && (L = JSON.parse(S));
+  const T = a.getBoundingClientRect(), E = window.getComputedStyle(a);
+  if (T.width === 0 || T.height === 0 || E.display === "none")
     return null;
-  let C = c.getAttribute("data-mid");
-  C || (C = Math.random().toString(36).substring(2, 11), c.setAttribute("data-mid", C));
-  const b = parseInt(E.zIndex), O = (isNaN(b) ? 0 : b) + i;
-  let X;
-  if (c.tagName === "IMG")
-    X = c.src;
-  else if (c.tagName.toLowerCase() === "svg") {
-    const m = c.cloneNode(!0), R = v == null ? void 0 : v.color, I = v == null ? void 0 : v.fill, F = v == null ? void 0 : v.stroke, L = v == null ? void 0 : v.opacity, V = (w, j) => {
-      const _ = window.getComputedStyle(w), Q = j, ke = _.fill === _.color, Ue = _.stroke === _.color, se = I || (ke ? R : void 0) || _.fill;
+  let b = a.getAttribute("data-mid");
+  b || (b = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", b));
+  const w = parseInt(E.zIndex), I = (isNaN(w) ? 0 : w) + i;
+  let U;
+  if (a.tagName === "IMG")
+    U = a.src;
+  else if (a.tagName.toLowerCase() === "svg") {
+    const v = a.cloneNode(!0), M = m == null ? void 0 : m.color, k = m == null ? void 0 : m.fill, _ = m == null ? void 0 : m.stroke, D = m == null ? void 0 : m.opacity, V = (C, j) => {
+      const N = window.getComputedStyle(C), Q = j, ke = N.fill === N.color, Ue = N.stroke === N.color, se = k || (ke ? M : void 0) || N.fill;
       se && se !== "none" && (Q.style.fill = se);
-      const ne = F || (Ue ? R : void 0) || _.stroke;
-      ne && ne !== "none" && (Q.style.stroke = ne), _.strokeWidth && _.strokeWidth !== "0px" && (Q.style.strokeWidth = _.strokeWidth);
-      const ve = R || _.color;
+      const ne = _ || (Ue ? M : void 0) || N.stroke;
+      ne && ne !== "none" && (Q.style.stroke = ne), N.strokeWidth && N.strokeWidth !== "0px" && (Q.style.strokeWidth = N.strokeWidth);
+      const ve = M || N.color;
       ve && (Q.style.color = ve);
-      const oe = L || _.opacity;
+      const oe = D || N.opacity;
       oe && oe !== "1" && (Q.style.opacity = oe);
-      for (let te = 0; te < w.children.length; te++)
-        V(w.children[te], j.children[te]);
+      for (let te = 0; te < C.children.length; te++)
+        V(C.children[te], j.children[te]);
     };
-    V(c, m);
-    const B = c.getBoundingClientRect(), H = window.devicePixelRatio * a;
-    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${B.width} ${B.height}`), m.setAttribute("width", (B.width * H).toString()), m.setAttribute("height", (B.height * H).toString());
-    let T = new XMLSerializer().serializeToString(m);
-    T.includes("xmlns=") || (T = T.replace(
+    V(a, v);
+    const F = a.getBoundingClientRect(), H = window.devicePixelRatio * l;
+    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${F.width} ${F.height}`), v.setAttribute("width", (F.width * H).toString()), v.setAttribute("height", (F.height * H).toString());
+    let R = new XMLSerializer().serializeToString(v);
+    R.includes("xmlns=") || (R = R.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), X = `data:image/svg+xml;utf8,${encodeURIComponent(T)}`;
+    )), U = `data:image/svg+xml;utf8,${encodeURIComponent(R)}`;
   } else if (E.backgroundImage && E.backgroundImage !== "none") {
-    const m = E.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    m && (X = m[1]);
+    const v = E.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    v && (U = v[1]);
   }
-  const k = {
+  const B = {
     backgroundColor: E.backgroundColor,
     backgroundImage: E.backgroundImage,
-    opacity: c.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(E.opacity),
-    zIndex: O,
+    opacity: a.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(E.opacity),
+    zIndex: I,
     borderRadius: E.borderRadius,
     borderColor: E.borderColor,
     borderWidth: E.borderWidth,
-    imageSrc: X,
-    isTraveler: g
-  }, G = k;
-  let De, Ie;
+    imageSrc: U,
+    isTraveler: f
+  }, G = B;
+  let Ae, Ie;
   const he = [];
-  return c.tagName.toLowerCase() !== "svg" && Array.from(c.childNodes).forEach((m) => {
-    const R = m.nodeType === Node.TEXT_NODE ? h : d, I = Ae(
-      m,
+  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((v) => {
+    const M = v.nodeType === Node.TEXT_NODE ? h : d, k = De(
+      v,
       e,
-      R,
+      M,
       r,
-      O,
-      a,
-      m.nodeType === Node.TEXT_NODE ? x : void 0,
-      m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
+      I,
+      l,
+      v.nodeType === Node.TEXT_NODE ? x : void 0,
+      v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
     );
-    I && he.push(I);
+    k && he.push(k);
   }), {
-    id: C,
+    id: b,
     type: "BOX",
-    element: c,
+    element: a,
     rect: {
-      x: S.left + window.scrollX,
-      y: S.top + window.scrollY,
-      width: S.width,
-      height: S.height
+      x: T.left + window.scrollX,
+      y: T.top + window.scrollY,
+      width: T.width,
+      height: T.height
     },
     styles: G,
-    textContent: De,
+    textContent: Ae,
     textStyles: Ie,
     dirtyMask: e,
     visibility: h,
-    isTraveler: g,
+    isTraveler: f,
     captureLayer: r,
     nativeLayer: x,
-    nativeStyles: x !== void 0 ? be(q({}, k), {
-      backgroundColor: (de = v.backgroundColor) != null ? de : k.backgroundColor,
-      backgroundImage: (ue = v.backgroundImage) != null ? ue : k.backgroundImage,
-      opacity: (fe = v.opacity) != null ? fe : k.opacity,
-      zIndex: v.zIndex !== void 0 ? v.zIndex + O : k.zIndex,
-      borderRadius: (ge = v.borderRadius) != null ? ge : k.borderRadius,
-      borderColor: (pe = v.borderColor) != null ? pe : k.borderColor,
-      borderWidth: (me = v.borderWidth) != null ? me : k.borderWidth,
-      isTraveler: k.isTraveler
+    nativeStyles: x !== void 0 ? be(q({}, B), {
+      backgroundColor: (de = m.backgroundColor) != null ? de : B.backgroundColor,
+      backgroundImage: (ue = m.backgroundImage) != null ? ue : B.backgroundImage,
+      opacity: (fe = m.opacity) != null ? fe : B.opacity,
+      zIndex: m.zIndex !== void 0 ? m.zIndex + I : B.zIndex,
+      borderRadius: (ge = m.borderRadius) != null ? ge : B.borderRadius,
+      borderColor: (pe = m.borderColor) != null ? pe : B.borderColor,
+      borderWidth: (me = m.borderWidth) != null ? me : B.borderWidth,
+      isTraveler: B.isTraveler,
+      transform: m.transform
     }) : void 0,
     nativeRect: x !== void 0 ? {
-      x: v.x !== void 0 ? parseFloat(v.x) : S.left + window.scrollX,
-      y: v.y !== void 0 ? parseFloat(v.y) : S.top + window.scrollY,
-      width: v.width !== void 0 ? parseFloat(v.width) : S.width,
-      height: v.height !== void 0 ? parseFloat(v.height) : S.height
+      x: m.x !== void 0 ? parseFloat(m.x) : T.left + window.scrollX,
+      y: m.y !== void 0 ? parseFloat(m.y) : T.top + window.scrollY,
+      width: m.width !== void 0 ? parseFloat(m.width) : T.width,
+      height: m.height !== void 0 ? parseFloat(m.height) : T.height
     } : void 0,
     isFixed: E.position === "fixed",
     children: he,
-    shaderHooks: A
+    shaderHooks: L
   };
 }
 function it(s, e) {
   e.size !== 0 && e.forEach((t, r) => {
-    var a, n, o, c;
+    var l, n, o, a;
     const i = s.get(r);
     !i || !i.userData.basePosition || (z.forceUpdateUniforms(i.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
-      borderRadius: (n = t.borderRadius) != null ? n : (a = i.userData.baseStyles) == null ? void 0 : a.borderRadius
+      borderRadius: (n = t.borderRadius) != null ? n : (l = i.userData.baseStyles) == null ? void 0 : l.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
     }), i.userData.nativeMesh && z.forceUpdateUniforms(i.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
-      borderRadius: (c = t.borderRadius) != null ? c : (o = i.userData.baseStyles) == null ? void 0 : o.borderRadius
+      borderRadius: (a = t.borderRadius) != null ? a : (o = i.userData.baseStyles) == null ? void 0 : o.borderRadius
     }));
   });
 }
 class st {
   constructor(e, t, r, i) {
-    f(this, "target");
-    f(this, "renderer");
-    f(this, "registry");
-    f(this, "isTravelEnabled", !1);
-    f(this, "tracker");
+    g(this, "target");
+    g(this, "renderer");
+    g(this, "registry");
+    g(this, "isTravelEnabled", !1);
+    g(this, "tracker");
     this.target = e, this.renderer = t, this.registry = r, this.tracker = new We(e, {
       resizeDebounce: i.resizeDebounce
-    }), this.tracker.onLayoutChange.add((a, n) => {
-      document.querySelector(`[${U.NAME}~='${U.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const c = Ae(
+    }), this.tracker.onLayoutChange.add((l, n) => {
+      document.querySelector(`[${O.NAME}~='${O.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const a = De(
         this.target,
-        a,
+        l,
         W,
         1,
         0,
         this.renderer.qualityFactor
       );
-      c && this.renderer.syncScene(c, n);
-    }), this.tracker.onStyleChange.add((a) => {
-      it(this.registry, a);
+      a && this.renderer.syncScene(a, n);
+    }), this.tracker.onStyleChange.add((l) => {
+      it(this.registry, l);
     }), this.tracker.onRender.add(() => {
       this.renderer.syncMeshesByDOM(), this.renderer.render();
     });
@@ -1594,7 +1611,7 @@ class st {
 }
 class nt {
   constructor() {
-    f(this, "store");
+    g(this, "store");
     this.store = /* @__PURE__ */ new WeakMap();
   }
   register(e, t) {
@@ -1619,11 +1636,11 @@ class nt {
 }
 class lt {
   constructor(e, t) {
-    f(this, "renderer");
-    f(this, "syncer");
-    f(this, "target");
-    f(this, "registry");
-    var i, a, n;
+    g(this, "renderer");
+    g(this, "syncer");
+    g(this, "target");
+    g(this, "registry");
+    var i, l, n;
     if (this.target = e, this.registry = new nt(), !document.getElementById("mirage-engine-styles")) {
       const o = document.createElement("style");
       o.id = "mirage-engine-styles", o.textContent = `
@@ -1633,7 +1650,7 @@ class lt {
       `, document.head.appendChild(o);
     }
     let r;
-    if (t.mode === "duplicate" ? r = (a = (i = t.container) != null ? i : this.target.parentElement) != null ? a : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
+    if (t.mode === "duplicate" ? r = (l = (i = t.container) != null ? i : this.target.parentElement) != null ? l : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
     this.renderer = new tt(
       this.target,
@@ -1672,10 +1689,10 @@ class lt {
       ArrowUp: !1,
       ArrowDown: !1
     };
-    window.addEventListener("keydown", (a) => {
-      t[a.key] !== void 0 && (t[a.key] = !0);
-    }), window.addEventListener("keyup", (a) => {
-      t[a.key] !== void 0 && (t[a.key] = !1);
+    window.addEventListener("keydown", (l) => {
+      t[l.key] !== void 0 && (t[l.key] = !0);
+    }), window.addEventListener("keyup", (l) => {
+      t[l.key] !== void 0 && (t[l.key] = !1);
     });
     const r = 2, i = () => {
       requestAnimationFrame(i), 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);
@@ -1686,21 +1703,21 @@ class lt {
 export {
   Ee as ALLOWED_FILTERS,
   P as ATTR_DOM,
-  N as ATTR_FILTER,
+  X as ATTR_FILTER,
   at as ATTR_SANDWICH,
   Y as ATTR_SELECT,
-  ze as ATTR_SHADER,
-  U as ATTR_TRAVEL,
+  Xe as ATTR_SHADER,
+  O as ATTR_TRAVEL,
   ce as DIRTY_CONTENT,
   re as DIRTY_NONE,
   $ as DIRTY_RECT,
   ie as DIRTY_STRUCTURE,
   Z as DIRTY_STYLE,
-  Xe as DIRTY_ZINDEX,
+  ze as DIRTY_ZINDEX,
   ct as EXCLUDED,
   lt as Engine,
   K as SELECT_LAYER,
-  D as THREE_LAYERS,
+  A as THREE_LAYERS,
   xe as TRAVEL_VALUES,
   We as Tracker,
   W as USER_LAYER,