npm - mirage-engine - Versions diffs - 0.3.6 → 0.3.8 - Mend

mirage-engine 0.3.6 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/mirage-engine.js +507 -468
package/dist/mirage-engine.umd.js +27 -14
package/package.json +4 -4

package/dist/mirage-engine.js CHANGED Viewed

@@ -1,40 +1,40 @@
 var _e = Object.defineProperty, Fe = Object.defineProperties;
 var Ne = Object.getOwnPropertyDescriptors;
-var be = Object.getOwnPropertySymbols;
+var ye = Object.getOwnPropertySymbols;
 var ze = Object.prototype.hasOwnProperty, Xe = Object.prototype.propertyIsEnumerable;
-var oe = (s, e, t) => e in s ? _e(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, $ = (s, e) => {
+var ae = (s, e, t) => e in s ? _e(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, $ = (s, e) => {
   for (var t in e || (e = {}))
-    ze.call(e, t) && oe(s, t, e[t]);
-  if (be)
-    for (var t of be(e))
-      Xe.call(e, t) && oe(s, t, e[t]);
+    ze.call(e, t) && ae(s, t, e[t]);
+  if (ye)
+    for (var t of ye(e))
+      Xe.call(e, t) && ae(s, t, e[t]);
   return s;
-}, we = (s, e) => Fe(s, Ne(e));
-var u = (s, e, t) => (oe(s, typeof e != "symbol" ? e + "" : e, t), t);
-var Ee = (s, e, t) => new Promise((i, r) => {
+}, be = (s, e) => Fe(s, Ne(e));
+var u = (s, e, t) => (ae(s, typeof e != "symbol" ? e + "" : e, t), t);
+var we = (s, e, t) => new Promise((r, i) => {
   var o = (c) => {
     try {
       a(t.next(c));
     } catch (l) {
-      r(l);
+      i(l);
     }
   }, n = (c) => {
     try {
       a(t.throw(c));
     } catch (l) {
-      r(l);
+      i(l);
     }
-  }, a = (c) => c.done ? i(c.value) : Promise.resolve(c.value).then(o, n);
+  }, a = (c) => c.done ? r(c.value) : Promise.resolve(c.value).then(o, n);
   a((t = t.apply(s, e)).next());
 });
 import * as y from "three";
-const Re = {
+const Le = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
   INCLUDE_SELF: "include-self",
   EXCLUDE_SELF: "exclude-self",
   END: "end"
-}, H = {
+}, P = {
   NAME: "data-mirage-dom",
   KEY: "mirageDom",
   VALUES: {
@@ -48,30 +48,35 @@ const Re = {
   CAPTURE_2: "2",
   CAPTURE_3: "3",
   CAPTURE_4: "4",
-  CAPTURE_5: "5"
-}, I = {
+  CAPTURE_5: "5",
+  CAPTURE_6: "6",
+  CAPTURE_7: "7",
+  CAPTURE_8: "8",
+  CAPTURE_9: "9",
+  CAPTURE_10: "10"
+}, U = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
   VALUES: xe,
   MAX_LAYERS: Object.keys(xe).length - 1
-}, F = {
+}, N = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
-  VALUES: Re
+  VALUES: Le
 }, Y = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
-  VALUES: Re
+  VALUES: Le
 }, Ve = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
-}, Ce = {
+}, Ee = {
   NAME: "data-mirage-sandwich",
   KEY: "mirageSandwich",
   VALUES: {
     FRONT: "front"
   }
-}, te = 0, q = 1, Q = 2, Ye = 4, re = 8, ce = 16;
+}, re = 0, q = 1, Z = 2, Ye = 4, ie = 8, ce = 16;
 function We(s) {
   const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
   return e ? {
@@ -100,7 +105,7 @@ class Me {
     u(this, "pendingStyles", /* @__PURE__ */ new Map());
     u(this, "isDomDirty", !1);
     u(this, "isRunning", !1);
-    u(this, "pendingMask", te);
+    u(this, "pendingMask", re);
     u(this, "mutationTimer", null);
     u(this, "cssTimer", null);
     u(this, "resizeConfig");
@@ -115,7 +120,7 @@ class Me {
     u(this, "onScrollChange", /* @__PURE__ */ new Set());
     u(this, "onRender", /* @__PURE__ */ new Set());
     u(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= q | Q, this.cssTimer = window.setTimeout(() => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= q | Z, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
@@ -131,38 +136,38 @@ class Me {
     u(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
-      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = te);
+      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);
       const e = window.scrollX, t = window.scrollY;
-      (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((i) => i(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
+      (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((r) => r(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
         this.pendingMask |= q, this.isDomDirty = !0, this.scrollTimer = null;
-      }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((i) => i(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((i) => i()), requestAnimationFrame(this.renderLoop);
+      }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
     });
-    var r, o;
+    var i, o;
     this.target = e;
-    const i = (r = t.resizeDebounce) != null ? r : !0;
-    i === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : i === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
+    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: (o = i.delay) != null ? o : 150,
-      onStart: i.onStart,
-      onEnd: i.onEnd
+      delay: (o = r.delay) != null ? o : 150,
+      onStart: r.onStart,
+      onEnd: r.onEnd
     }, this.observer = new MutationObserver((n) => {
-      let a = te;
+      let a = re;
       for (const c of n)
         if (c.type === "childList")
-          a |= re, c.removedNodes.length > 0 && c.removedNodes.forEach((l) => {
+          a |= ie, c.removedNodes.length > 0 && c.removedNodes.forEach((l) => {
             l instanceof HTMLElement && this.pendingDeletions.add(l);
           });
         else if (c.type === "attributes")
           if (c.attributeName === "style") {
-            a |= q | Q;
+            a |= q | Z;
             const l = c.target, d = He(l.style);
             this.pendingStyles.set(l, d);
           } else
-            c.attributeName === "class" ? a |= q | Q : c.attributeName && c.attributeName.startsWith("data-") && (a |= q | Q, c.attributeName.startsWith("data-mirage") && (a |= re));
+            c.attributeName === "class" ? a |= q | Z : c.attributeName && c.attributeName.startsWith("data-") && (a |= q | Z, c.attributeName.startsWith("data-mirage") && (a |= ie));
         else
           c.type === "characterData" && (a |= ce | q);
-      if (a !== te) {
-        if (this.pendingMask |= a, a & re) {
+      if (a !== re) {
+        if (this.pendingMask |= a, a & ie) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -187,12 +192,12 @@ class Me {
     this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
   }
 }
-const W = 1, j = 2, R = {
+const W = 1, K = 2, D = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Te = Object.values(F.VALUES);
+}, Ce = Object.values(N.VALUES);
 class Ae {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
@@ -208,15 +213,15 @@ class Ae {
   static calculateBaselineFromDOM(e) {
     if (typeof document == "undefined")
       return 0;
-    const t = document.createElement("div"), i = document.createElement("span"), r = 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", r.width = 1, r.height = 1, r.style.verticalAlign = "baseline", i.appendChild(document.createTextNode("Hidden Text")), t.appendChild(i), t.appendChild(r), document.body.appendChild(t);
-    const o = r.offsetTop - i.offsetTop;
+    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 o = i.offsetTop - r.offsetTop;
     return document.body.removeChild(t), o;
   }
 }
 u(Ae, "cache", /* @__PURE__ */ new Map());
 class Pe extends y.MeshBasicMaterial {
-  constructor(t, i, r, o, n = 2) {
+  constructor(t, r, i, o, n = 2) {
     super({
       transparent: !0,
       side: y.FrontSide,
@@ -227,12 +232,12 @@ class Pe extends y.MeshBasicMaterial {
     u(this, "qualityFactor");
     if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
       throw new Error("[Mirage] Failed to create canvas context");
-    this.qualityFactor = n, this.map = new y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t, i, r, o);
+    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, o);
   }
-  wrapText(t, i) {
-    const r = t.split(`
+  wrapText(t, r) {
+    const i = t.split(`
 `), o = [];
-    return r.forEach((n) => {
+    return i.forEach((n) => {
       const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
       if (a.length === 0) {
         o.push("");
@@ -241,51 +246,54 @@ class Pe extends y.MeshBasicMaterial {
       let c = a[0];
       for (let l = 1; l < a.length; l++) {
         const d = a[l];
-        this.ctx.measureText(c + d).width <= i + 2 ? c += d : (c && o.push(c), c = d.trimStart());
+        this.ctx.measureText(c + d).width <= r + 2 ? c += d : (c && o.push(c), c = d.trimStart());
       }
       c && o.push(c);
     }), o;
   }
-  updateText(t, i, r, o, n) {
+  updateText(t, r, i, o, n) {
     n !== void 0 && (this.qualityFactor = n);
-    const c = (window.devicePixelRatio || 1) * this.qualityFactor, l = r * c, d = o * 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 = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const h = this.wrapText(t, r), f = i.lineHeight, p = Ae.getBaseline(i.font);
-    h.forEach((g, m) => {
-      const E = m * f + p;
-      let L = 0;
-      i.textAlign === "center" ? L = r / 2 : i.textAlign === "right" && (L = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(g, L, E);
+    const c = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * c, d = o * 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 h = this.wrapText(t, i), f = r.lineHeight, p = Ae.getBaseline(r.font);
+    h.forEach((g, v) => {
+      const x = v * f + 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);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function K(s) {
-  return typeof s == "number" ? s : parseFloat(s) || 0;
+function J(s, e = 0) {
+  if (typeof s == "number")
+    return s;
+  const t = parseFloat(s) || 0;
+  return typeof s == "string" && s.includes("%") ? t / 100 * e : t;
 }
-function Z(s) {
+function ee(s) {
   if (!s || s === "transparent")
     return { color: new y.Color(16777215), alpha: 0 };
   const e = s.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
-    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), o = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new y.Color(`rgb(${t}, ${i}, ${r})`), alpha: o };
+    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), o = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new y.Color(`rgb(${t}, ${r}, ${i})`), alpha: o };
   }
   return { color: new y.Color(s), alpha: 1 };
 }
 function Ge(s) {
   const e = [];
-  let t = "", i = 0;
-  for (let r = 0; r < s.length; r++) {
-    const o = s[r];
+  let t = "", r = 0;
+  for (let i = 0; i < s.length; i++) {
+    const o = s[i];
     if (o === "(")
-      i++;
+      r++;
     else if (o === ")")
-      i--;
-    else if (o === "," && i === 0) {
+      r--;
+    else if (o === "," && r === 0) {
       e.push(t.trim()), t = "";
       continue;
     }
@@ -299,24 +307,24 @@ function $e(s) {
   const e = s.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], i = Ge(t);
-  let r = Math.PI, o = 0;
-  const n = i[0].trim();
+  const t = e[1], r = Ge(t);
+  let i = Math.PI, o = 0;
+  const n = r[0].trim();
   if (n.startsWith("to "))
-    n === "to top" ? r = 0 : n === "to right" ? r = Math.PI / 2 : n === "to bottom" ? r = Math.PI : n === "to left" ? r = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? r = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? r = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? r = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (r = Math.PI * 1.75), o = 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), o = 1;
   else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
     const c = parseFloat(n);
-    n.endsWith("deg") ? r = c * (Math.PI / 180) : n.endsWith("rad") ? r = c : n.endsWith("turn") && (r = c * Math.PI * 2), o = 1;
+    n.endsWith("deg") ? i = c * (Math.PI / 180) : n.endsWith("rad") ? i = c : n.endsWith("turn") && (i = c * Math.PI * 2), o = 1;
   }
   const a = [];
-  for (let c = o; c < i.length && !(a.length >= 8); c++) {
-    const l = i[c].trim(), d = l.lastIndexOf(" ");
+  for (let c = o; c < r.length && !(a.length >= 8); c++) {
+    const l = r[c].trim(), d = l.lastIndexOf(" ");
     let h = l, f = 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(), f = g);
     }
-    const p = Z(h);
+    const p = ee(h);
     a.push({
       color: p.color,
       alpha: p.alpha,
@@ -340,7 +348,7 @@ function $e(s) {
         c = l;
       }
   }
-  return { angle: r, stops: a };
+  return { angle: i, stops: a };
 }
 const qe = `varying vec2 vUv;
 varying vec4 vScreenPos;
@@ -431,6 +439,18 @@ void main() {
   vec2 p = (vUv - 0.5) * uSize;
   vec2 halfSize = uSize * 0.5;
+  // CSS Proportional Border-Radius Clamping
+  float tl = uBorderRadius.x;
+  float tr = uBorderRadius.y;
+  float br = uBorderRadius.z;
+  float bl = uBorderRadius.w;
+  float fTop = uSize.x / max(tl + tr, 0.0001);
+  float fBottom = uSize.x / max(bl + br, 0.0001);
+  float fLeft = uSize.y / max(tl + bl, 0.0001);
+  float fRight = uSize.y / max(tr + br, 0.0001);
+  float f = min(1.0, min(min(fTop, fBottom), min(fLeft, fRight)));
+  vec4 clampedRadius = uBorderRadius * f;
   #INJECT_UV_MODIFIER
   // color decision pipeline
@@ -444,9 +464,8 @@ void main() {
   #INJECT_BASE_COLOR
   // Hybrid SDF
-  vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+  vec2 xRadii = mix(clampedRadius.xw, clampedRadius.yz, step(0.0, p.x));
   float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
-  r = min(r, min(halfSize.x, halfSize.y));
   float d = sdRoundedBox(p, halfSize, r);
@@ -484,50 +503,52 @@ uniform vec2 uTextureOffset;`, Je = `vec2 screenUv = (vScreenPos.xy / vScreenPos
 vec2 resultUv = screenUv;
 `, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`, Se = {
+baseColor = blendSrcOver(baseColor, texColor);`, Te = {
   vertexShader: qe,
   fragmentShader: je
-}, ae = {
+}, Se = {
   declChunk: Ke,
   uvChunk: Je,
   baseColorChunk: Qe
 };
-function Ze(s, e, t, i = null, r) {
-  var M;
-  const o = i !== null || !!s.imageSrc;
+function Ze(s, e, t, r = null, i) {
+  var E;
+  const o = r !== null || !!s.imageSrc;
   let n = "";
   const a = {};
-  if (r != null && r.uniforms)
-    for (const [w, b] of Object.entries(r.uniforms))
-      typeof b == "number" ? (n += `uniform float ${w};
-`, a[w] = { value: b }) : Array.isArray(b) ? b.length === 2 ? (n += `uniform vec2 ${w};
-`, a[w] = { value: new y.Vector2(...b) }) : b.length === 3 ? (n += `uniform vec3 ${w};
-`, a[w] = { value: new y.Vector3(...b) }) : b.length === 4 && (n += `uniform vec4 ${w};
-`, a[w] = { value: new y.Vector4(...b) }) : (n += `uniform float ${w};
-`, a[w] = { value: b });
-  const c = (o ? ae.declChunk : "") + `
-` + n, l = s.isTraveler ? ae.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, d = o ? l + ((r == null ? void 0 : r.uvModifier) || "") : "", h = o ? ae.baseColorChunk : "", f = (r == null ? void 0 : r.colorModifier) || "", p = Se.fragmentShader.replace("#INJECT_DECLARATIONS", c).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", h).replace("#INJECT_COLOR_MODIFIER", f), g = Z(s.backgroundColor), m = Z(s.borderColor), E = {
+  if (i != null && i.uniforms)
+    for (const [C, b] of Object.entries(i.uniforms))
+      typeof b == "number" ? (n += `uniform float ${C};
+`, a[C] = { value: b }) : Array.isArray(b) ? b.length === 2 ? (n += `uniform vec2 ${C};
+`, a[C] = { value: new y.Vector2(...b) }) : b.length === 3 ? (n += `uniform vec3 ${C};
+`, a[C] = { value: new y.Vector3(...b) }) : b.length === 4 && (n += `uniform vec4 ${C};
+`, a[C] = { value: new y.Vector4(...b) }) : (n += `uniform float ${C};
+`, a[C] = { value: b });
+  const c = i !== void 0, l = (o || c ? Se.declChunk : "") + `
+` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+`, h = s.isTraveler ? `vec2 resultUv = screenUv;
+` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
+`, f = o || c ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = o || c ? Se.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", v = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), x = ee(s.backgroundColor), M = ee(s.borderColor), A = {
     uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
       value: new y.Vector4(
-        g.color.r,
-        g.color.g,
-        g.color.b,
-        g.alpha
+        x.color.r,
+        x.color.g,
+        x.color.b,
+        x.alpha
       )
     },
     uBorderColor: {
       value: new y.Vector4(
-        m.color.r,
-        m.color.g,
-        m.color.b,
-        m.alpha
+        M.color.r,
+        M.color.g,
+        M.color.b,
+        M.alpha
       )
     },
     uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: K(s.borderWidth) },
-    uOpacity: { value: (M = s.opacity) != null ? M : 1 },
+    uBorderWidth: { value: J(s.borderWidth) },
+    uOpacity: { value: (E = s.opacity) != null ? E : 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new y.Vector2(1, 1) },
     uTextureOffset: { value: new y.Vector2(0, 0) },
@@ -538,34 +559,38 @@ function Ze(s, e, t, i = null, r) {
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  De(E.uBorderRadius.value, s.borderRadius), o && (E.uTexture.value = i);
-  const L = new y.ShaderMaterial({
-    uniforms: $($({}, E), a),
-    vertexShader: Se.vertexShader,
-    fragmentShader: p,
+  De(A.uBorderRadius.value, s.borderRadius, Math.min(e, t)), o && (A.uTexture.value = r);
+  const S = new y.ShaderMaterial({
+    uniforms: $($({}, A), a),
+    vertexShader: Te.vertexShader,
+    fragmentShader: v,
     transparent: !0,
     side: y.FrontSide
     // for better performance
   });
-  return s.backgroundImage && le(L, { backgroundImage: s.backgroundImage }), L;
+  return s.backgroundImage && le(S, { backgroundImage: s.backgroundImage }), S;
 }
-function et(s, e, t, i, r) {
-  const o = K(e.borderWidth);
+function et(s, e, t, r, i) {
+  const o = J(e.borderWidth);
   le(s, {
     width: t,
-    height: i,
+    height: r,
     borderRadius: e.borderRadius,
     borderWidth: o,
     backgroundColor: e.backgroundColor,
     borderColor: e.borderColor,
     opacity: e.opacity,
-    texture: r,
+    texture: i,
     backgroundImage: e.backgroundImage
   });
 }
 function le(s, e) {
-  var i, r, o;
-  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && De(s.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
+  var r, i, o;
+  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0) {
+    const n = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(s.uniforms.uSize.value.x, s.uniforms.uSize.value.y);
+    De(s.uniforms.uBorderRadius.value, e.borderRadius, n);
+  }
+  if (e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
       const n = s.uniforms.uBgColor.value.w;
       s.uniforms.uBgColor.value.set(
@@ -575,7 +600,7 @@ function le(s, e) {
         n
       );
     } else if (typeof e.backgroundColor == "string") {
-      const n = Z(e.backgroundColor);
+      const n = ee(e.backgroundColor);
       s.uniforms.uBgColor.value.set(
         n.color.r,
         n.color.g,
@@ -601,7 +626,7 @@ function le(s, e) {
         n
       );
     } else if (typeof e.borderColor == "string") {
-      const n = Z(e.borderColor);
+      const n = ee(e.borderColor);
       s.uniforms.uBorderColor.value.set(
         n.color.r,
         n.color.g,
@@ -618,9 +643,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 : (i = s.uniforms.uTexture) == null ? void 0 : i.value;
+  const t = e.texture !== void 0 ? e.texture : (r = s.uniforms.uTexture) == null ? void 0 : r.value;
   if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
-    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, c = (r = e.width) != null ? r : s.uniforms.uSize.value.x, l = (o = e.height) != null ? o : s.uniforms.uSize.value.y;
+    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, c = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (o = e.height) != null ? o : s.uniforms.uSize.value.y;
     if (n && a && c && l) {
       const d = n / a, h = c / l;
       if (d > h) {
@@ -654,8 +679,8 @@ function le(s, e) {
   for (const n of Object.keys(e))
     n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
 }
-function De(s, e) {
-  var a, c, l, d;
+function De(s, e, t = 0) {
+  var c, l, d, h;
   if (e == null) {
     s.set(0, 0, 0, 0);
     return;
@@ -668,36 +693,36 @@ function De(s, e) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const t = e.split("/")[0].trim().split(/\s+/), i = K(t[0]), r = K((a = t[1]) != null ? a : t[0]), o = K((c = t[2]) != null ? c : t[0]), n = K((d = (l = t[3]) != null ? l : t[1]) != null ? d : t[0]);
-  s.set(i, r, o, n);
+  const r = e.split("/")[0].trim().split(/\s+/), i = J(r[0], t), o = J((c = r[1]) != null ? c : r[0], t), n = J((l = r[2]) != null ? l : r[0], t), a = J((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
+  s.set(i, o, n, a);
 }
-const N = {
-  create(s, e, t, i, r, o = 2, n = null, a) {
+const z = {
+  create(s, e, t, r, i, o = 2, n = null, a) {
     return s === "BOX" ? Ze(
       e,
-      i,
       r,
+      i,
       n,
       a
     ) : s === "TEXT" ? new Pe(
       t || "",
       e,
-      i,
       r,
+      i,
       o
     ) : new y.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, i, r, o, n = 2, a) {
+  update(s, e, t, r, i, o, n = 2, a) {
     e === "BOX" ? et(
       s,
       t,
-      r,
+      i,
       o,
       a
     ) : e === "TEXT" && s.updateText(
-      i || "",
+      r || "",
       t,
-      r,
+      i,
       o,
       n
     );
@@ -714,10 +739,10 @@ class tt {
     u(this, "elementUrls", /* @__PURE__ */ new WeakMap());
     u(this, "onUpdate");
     this.onUpdate = e, t && (this.observer = new IntersectionObserver(
-      (i) => {
-        for (const r of i) {
-          const o = r.target;
-          r.isIntersecting ? this.loadTexture(o) : this.disposeTexture(o);
+      (r) => {
+        for (const i of r) {
+          const o = i.target;
+          i.isIntersecting ? this.loadTexture(o) : this.disposeTexture(o);
         }
       },
       { rootMargin: "300px" }
@@ -732,31 +757,31 @@ class tt {
     e.nodeType === Node.ELEMENT_NODE && this.observer && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
   }
   loadTexture(e) {
-    return Ee(this, null, function* () {
+    return we(this, null, function* () {
       if (this.loadStatus.get(e) || this.textures.has(e))
         return;
       const t = this.elementUrls.get(e);
       if (t) {
         this.loadStatus.set(e, !0);
         try {
-          let i;
+          let r;
           if (t.startsWith("data:image/svg+xml"))
-            i = yield new Promise((o, n) => {
+            r = yield new Promise((o, n) => {
               const a = new Image();
               a.onload = () => o(a), a.onerror = n, a.src = t;
             });
           else {
             const n = yield (yield fetch(t)).blob();
-            i = yield createImageBitmap(n, { imageOrientation: "flipY" });
+            r = yield createImageBitmap(n, { imageOrientation: "flipY" });
           }
           if (this.elementUrls.get(e) !== t) {
-            "close" in i && i.close();
+            "close" in r && r.close();
             return;
           }
-          const r = new y.Texture(i);
-          i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = y.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
-        } catch (i) {
-          console.warn("[MirageEngine] Failed to load texture:", t, i);
+          const i = new y.Texture(r);
+          r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = y.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
+        } catch (r) {
+          console.warn("[MirageEngine] Failed to load texture:", t, r);
         } finally {
           this.elementUrls.has(e) && this.loadStatus.set(e, !1);
         }
@@ -775,7 +800,7 @@ class tt {
   }
 }
 class rt {
-  constructor(e, t, i, r) {
+  constructor(e, t, r, i) {
     u(this, "canvas");
     u(this, "scene");
     u(this, "camera");
@@ -793,16 +818,16 @@ class rt {
     u(this, "registry");
     u(this, "targetRect");
     u(this, "travelersByLayer", Array.from(
-      { length: I.MAX_LAYERS },
+      { length: U.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
     u(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
     u(this, "fixedMeshes", /* @__PURE__ */ new Set());
     var a, c, l, d, h;
-    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (a = t.mode) != null ? a : "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 tt((f, p) => {
+    this.target = e, this.mountContainer = r, this.registry = i, this.mode = (a = t.mode) != null ? a : "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 tt((f, p) => {
       const g = this.registry.get(f);
-      g && g.material instanceof y.ShaderMaterial && N.forceUpdateUniforms(g.material, { texture: p });
+      g && g.material instanceof y.ShaderMaterial && z.forceUpdateUniforms(g.material, { texture: p });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
     const o = 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(
@@ -824,15 +849,15 @@ class rt {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? R.SELECTED : R.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? D.SELECTED : D.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < I.MAX_LAYERS; e++) {
-      const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, i = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    for (let e = 0; e < U.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(
           t * this.qualityFactor,
-          i * this.qualityFactor,
+          r * this.qualityFactor,
           {
             minFilter: y.LinearFilter,
             magFilter: y.LinearFilter,
@@ -872,15 +897,15 @@ class rt {
     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 i = this.registry.get(e);
-    i && (i.traverse((r) => {
-      r.isMesh && r.material && N.forceUpdateUniforms(
-        r.material,
+    const r = this.registry.get(e);
+    r && (r.traverse((i) => {
+      i.isMesh && i.material && z.forceUpdateUniforms(
+        i.material,
         t
       );
-    }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((r) => {
-      r.isMesh && r.material && N.forceUpdateUniforms(
-        r.material,
+    }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
+      i.isMesh && i.material && z.forceUpdateUniforms(
+        i.material,
         t
       );
     }));
@@ -890,13 +915,13 @@ class rt {
   }
   setSize(e, t) {
     this.renderer.setSize(e, t);
-    for (const i of this.renderTargets)
-      i.setSize(e * this.qualityFactor, t * this.qualityFactor);
+    for (const r of this.renderTargets)
+      r.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 i = this.target.getBoundingClientRect(), r = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, c = Math.abs(r - n) > 0.1 || Math.abs(o - 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);
-    c ? (this.targetRect = i, this.setSize(r, o), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, 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, o = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, c = Math.abs(i - n) > 0.1 || Math.abs(o - 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);
+    c ? (this.targetRect = r, this.setSize(i, o), this.updateCanvasLayout()) : l ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
       const h = this.registry.get(d);
       if (h) {
         this.scene.remove(h);
@@ -915,11 +940,11 @@ class rt {
   // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
   // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
   reconcileNode(e) {
-    var r;
+    var i;
     let t = this.registry.get(e.element);
-    const i = JSON.stringify(e.shaderHooks || null);
-    if (t && t.userData.shaderHash !== i && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
-      const o = new y.PlaneGeometry(1, 1), n = e.isTraveler ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), a = N.create(
+    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 o = new y.PlaneGeometry(1, 1), n = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = z.create(
         "BOX",
         e.styles,
         "",
@@ -929,10 +954,10 @@ class rt {
         n,
         e.shaderHooks
       );
-      t = new y.Mesh(o, 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 = i;
+      t = new y.Mesh(o, 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 o = 0; o < I.MAX_LAYERS; o++)
+      for (let o = 0; o < U.MAX_LAYERS; o++)
         o === e.captureLayer - 2 ? this.travelersByLayer[o].add(t) : this.travelersByLayer[o].delete(t);
     else
       for (const o of this.travelersByLayer)
@@ -947,184 +972,186 @@ class rt {
         !0
       ));
   }
-  reconcileTextChild(e, t, i) {
+  reconcileTextChild(e, t, r) {
     var l;
-    const r = t.textLines || [
+    const i = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], o = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(o) + t.textContent + r.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
+    ], o = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(o) + t.textContent + i.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
     if (t.dirtyMask & ce || n !== a) {
       e.children.filter(
         (g) => g.name.startsWith("TEXT_CHILD")
       ).forEach((g) => {
-        var E;
-        const m = g;
-        (E = m.material.map) == null || E.dispose(), m.geometry.dispose(), e.remove(m);
+        var x;
+        const v = g;
+        (x = v.material.map) == null || x.dispose(), v.geometry.dispose(), e.remove(v);
       });
       const h = t.rect, f = h.x + h.width / 2, p = h.y + h.height / 2;
-      r.forEach((g, m) => {
-        const E = N.create(
+      i.forEach((g, v) => {
+        const x = z.create(
           "TEXT",
           o,
           g.text,
           g.rect.width,
           g.rect.height,
           this.qualityFactor
-        ), L = new y.PlaneGeometry(1, 1), M = new y.Mesh(L, E);
-        M.name = `TEXT_CHILD_${m}`;
-        const w = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, b = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
-        M.scale.set(w, b, 1);
-        const U = g.rect.x + g.rect.width / 2, A = g.rect.y + g.rect.height / 2, O = U - f, z = -(A - p);
-        M.position.set(
+        ), 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 - f, X = -(b - p);
+        A.position.set(
           t.rect.width === 0 ? 0 : O / t.rect.width,
-          t.rect.height === 0 ? 0 : z / t.rect.height,
+          t.rect.height === 0 ? 0 : X / t.rect.height,
           5e-3
-        ), e.add(M);
+        ), e.add(A);
       }), e.userData.textChildStyleHash = n;
     }
     e.children.forEach((d) => {
       if (!d.name.startsWith("TEXT_CHILD"))
         return;
-      const h = d, f = t.visibility & W ? R.BASE : R.HIDDEN;
-      if (h.layers.set(f), t.visibility & j && h.layers.enable(R.SELECTED), t.visibility & W)
-        if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
+      const h = d, f = t.visibility & W ? D.BASE : D.HIDDEN;
+      if (h.layers.set(f), t.visibility & K && h.layers.enable(D.SELECTED), t.visibility & W)
+        if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
           for (let p = t.captureLayer; p < t.nativeLayer; p++)
-            h.layers.enable(R.getCaptureLayer(p));
-        else if (i && t.nativeLayer !== void 0)
-          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= I.MAX_LAYERS + 1; p++)
-            h.layers.enable(R.getCaptureLayer(p));
+            h.layers.enable(D.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));
         else
-          for (let p = t.captureLayer; p <= I.MAX_LAYERS + 1; p++)
-            h.layers.enable(R.getCaptureLayer(p));
+          for (let p = t.captureLayer; p <= U.MAX_LAYERS + 1; p++)
+            h.layers.enable(D.getCaptureLayer(p));
     });
   }
   updateMeshProperties(e, t) {
-    var w, b, U;
-    const { rect: i, styles: r } = t, o = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / o, a = this.renderer.domElement.height / o;
-    e.material = e.userData.baseMaterial, e.scale.set(i.width, i.height, 1), e.userData.domRect = {
-      x: i.x,
-      y: i.y,
-      width: i.width,
-      height: i.height
+    var S, E, C;
+    const { rect: r, styles: i } = t, o = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / o, a = this.renderer.domElement.height / o;
+    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;
     this.renderOrder++;
     const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
     let h, f;
     if (this.isViewport)
-      h = i.x - window.innerWidth / 2 + i.width / 2, f = -i.y + window.innerHeight / 2 - i.height / 2;
+      h = r.x - window.innerWidth / 2 + r.width / 2, f = -r.y + window.innerHeight / 2 - r.height / 2;
     else {
-      const A = i.x - l, O = i.y - d;
-      h = A - n / 2 + i.width / 2, f = -O + a / 2 - i.height / 2;
+      const b = r.x - l, O = r.y - d;
+      h = b - n / 2 + r.width / 2, f = -O + a / 2 - r.height / 2;
     }
     e.position.set(
       h,
       f,
-      r.zIndex + this.renderOrder * c
+      i.zIndex + this.renderOrder * c
     );
-    const p = i.x, g = i.y;
-    e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: p, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
-    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(m);
-    let L = 0, M = 0;
-    if (E.transform && E.transform !== "none") {
-      const A = new DOMMatrix(E.transform);
-      L = A.m41, M = A.m42;
+    const p = r.x, g = r.y;
+    e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const v = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, x = window.getComputedStyle(v);
+    let M = 0, A = 0;
+    if (x.transform && x.transform !== "none") {
+      const b = new DOMMatrix(x.transform);
+      M = b.m41, A = b.m42;
     }
-    if (e.userData.baseTransform = { x: L, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, N.update(
+    if (e.userData.baseTransform = { x: M, y: A }, delete e.userData.originRatioX, delete e.userData.originRatioY, z.update(
       e.userData.baseMaterial,
       "BOX",
-      r,
+      i,
       "",
-      i.width,
-      i.height,
+      r.width,
+      r.height,
       this.qualityFactor,
-      t.isTraveler ? (w = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : w.texture : this.textureManager.get(t.element)
+      t.isTraveler ? (S = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : S.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const k = N.create(
+        const I = z.create(
           "BOX",
           t.nativeStyles,
           "",
           t.nativeRect.width,
           t.nativeRect.height,
           this.qualityFactor,
-          t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element),
+          t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), P = new y.Mesh(e.geometry, k);
-        t.type === "TEXT" && (P.name = "BG_MESH"), this.scene.add(P), e.userData.nativeMesh = P;
+        ), G = new y.Mesh(e.geometry, I);
+        t.type === "TEXT" && (G.name = "BG_MESH"), this.scene.add(G), e.userData.nativeMesh = G;
       }
-      const A = e.userData.nativeMesh;
-      let O, z;
+      const b = e.userData.nativeMesh;
+      let O, X;
       if (this.isViewport)
-        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, z = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, X = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const k = t.nativeRect.x - l, P = t.nativeRect.y - d;
-        O = k - n / 2 + t.nativeRect.width / 2, z = -P + a / 2 - t.nativeRect.height / 2;
+        const I = t.nativeRect.x - l, G = t.nativeRect.y - d;
+        O = I - n / 2 + t.nativeRect.width / 2, X = -G + a / 2 - t.nativeRect.height / 2;
       }
-      A.scale.set(t.nativeRect.width, t.nativeRect.height, 1), A.position.set(
+      b.scale.set(t.nativeRect.width, t.nativeRect.height, 1), b.position.set(
         O,
-        z,
+        X,
         t.nativeStyles.zIndex + this.renderOrder * c
-      ), N.update(
-        A.material,
+      ), z.update(
+        b.material,
         "BOX",
         t.nativeStyles,
         "",
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (U = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : U.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (C = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : C.texture : this.textureManager.get(t.element)
       );
     } else
       e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const i = t.visibility & W ? R.BASE : R.HIDDEN;
-    if (e.layers.set(i), t.visibility & j && e.layers.enable(R.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
-      const r = e.userData.nativeMesh;
-      if (r.layers.set(R.HIDDEN), t.visibility & W) {
+    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 i = e.userData.nativeMesh;
+      if (i.layers.set(D.HIDDEN), t.visibility & W) {
         for (let o = t.captureLayer; o < t.nativeLayer; o++)
-          e.layers.enable(R.getCaptureLayer(o));
-        for (let o = Math.max(t.captureLayer, t.nativeLayer); o <= I.MAX_LAYERS + 1; o++)
-          r.layers.enable(R.getCaptureLayer(o));
+          e.layers.enable(D.getCaptureLayer(o));
+        for (let o = Math.max(t.captureLayer, t.nativeLayer); o <= U.MAX_LAYERS + 1; o++)
+          i.layers.enable(D.getCaptureLayer(o));
       }
     } else if (t.visibility & W)
-      for (let r = t.captureLayer; r <= I.MAX_LAYERS + 1; r++)
-        e.layers.enable(R.getCaptureLayer(r));
+      for (let i = t.captureLayer; i <= U.MAX_LAYERS + 1; i++)
+        e.layers.enable(D.getCaptureLayer(i));
   }
-  captureRenderTarget(e, t, i) {
-    if (e.size === 0 || !i)
+  captureRenderTarget(e, t, r) {
+    if (e.size === 0 || !r)
       return;
-    const r = new y.Color(), o = this.renderer.getClearAlpha();
-    this.renderer.getClearColor(r), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(i), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
+    const i = new y.Color(), o = this.renderer.getClearAlpha();
+    this.renderer.getClearColor(i), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(r), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
     const n = new y.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
     for (const d of e) {
       n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
       const h = (n.x + 1) / 2 * a, f = (n.y + 1) / 2 * 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 m = d.scale.x * g + 0.5, E = d.scale.y * g + 0.5, L = h - m / 2, M = f - E / 2, w = (L * this.qualityFactor - p) / l, b = (M * this.qualityFactor - p) / l, U = (m * this.qualityFactor + p * 2) / l, A = (E * this.qualityFactor + p * 2) / l;
-      this.renderer.setScissor(w, b, U, A), this.renderer.render(this.scene, this.camera);
+      const v = d.scale.x * g + 0.5, x = d.scale.y * g + 0.5, M = h - v / 2, A = f - 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);
     }
-    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, o);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, o);
   }
   render() {
-    for (let e = 0; e < I.MAX_LAYERS; e++) {
+    for (let e = 0; e < U.MAX_LAYERS; e++) {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        R.getCaptureLayer(t),
+        D.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, i = this.renderer.getPixelRatio(), r = this.renderer.domElement.width / i, o = this.renderer.domElement.height / i;
+    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), i = this.renderer.domElement.width / r, o = this.renderer.domElement.height / r;
     this.scene.children.forEach((n) => {
       const a = n;
       if (!a.userData || !a.userData.domElement)
         return;
       const c = a.userData.domElement;
+      if (!c.isConnected)
+        return;
       let l;
       if (c.nodeType === Node.TEXT_NODE) {
         const h = document.createRange();
@@ -1144,14 +1171,14 @@ class rt {
           h = l.x - window.innerWidth / 2 + l.width / 2, f = -l.y + window.innerHeight / 2 - l.height / 2;
         else {
           const p = l.x - e, g = l.y - t;
-          h = p - r / 2 + l.width / 2, f = -g + o / 2 - l.height / 2;
+          h = p - i / 2 + l.width / 2, f = -g + o / 2 - l.height / 2;
         }
-        if (a.position.setX(h), a.position.setY(f), a.scale.set(l.width, l.height, 1), a.material instanceof y.ShaderMaterial && N.forceUpdateUniforms(a.material, {
+        if (a.position.setX(h), a.position.setY(f), a.scale.set(l.width, l.height, 1), a.updateMatrixWorld(), a.material instanceof y.ShaderMaterial && z.forceUpdateUniforms(a.material, {
           width: l.width,
           height: l.height
         }), a.userData.nativeMesh) {
           const p = a.userData.nativeMesh;
-          p.position.setX(h), p.position.setY(f), p.scale.set(l.width, l.height, 1);
+          p.position.setX(h), p.position.setY(f), p.scale.set(l.width, l.height, 1), p.updateMatrixWorld();
         }
       }
     });
@@ -1159,31 +1186,31 @@ class rt {
 }
 function it(s) {
   const e = s.textContent || "", t = [];
-  let i = "", r = null, o = -1;
+  let r = "", i = null, o = -1;
   const n = (l, d) => {
     for (let h = 0; h < l.length; h++) {
       const f = l[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) {
-        i += f;
+        r += f;
         continue;
       }
-      o === -1 || Math.abs(g.top - o) > g.height / 2 ? (i && r && t.push({
-        text: i,
+      o === -1 || Math.abs(g.top - o) > g.height / 2 ? (r && i && t.push({
+        text: r,
         rect: {
-          left: r.left,
-          top: r.top,
-          width: r.right - r.left,
-          height: r.bottom - r.top
+          left: i.left,
+          top: i.top,
+          width: i.right - i.left,
+          height: i.bottom - i.top
         }
-      }), i = f, r = {
+      }), r = f, i = {
         left: g.left,
         top: g.top,
         right: g.right,
         bottom: g.bottom
-      }, o = g.top) : (i += f, r && (r.left = Math.min(r.left, g.left), r.top = Math.min(r.top, g.top), r.right = Math.max(r.right, g.right), r.bottom = Math.max(
-        r.bottom,
+      }, o = g.top) : (r += f, 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(
+        i.bottom,
         g.bottom
       )));
     }
@@ -1198,47 +1225,47 @@ function it(s) {
     else {
       const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
       if (f.width === 0 && f.height === 0) {
-        i += l, c += l.length;
+        r += l, c += l.length;
         continue;
       }
-      o === -1 || Math.abs(f.top - o) > f.height / 2 ? (i && r && t.push({
-        text: i,
+      o === -1 || Math.abs(f.top - o) > f.height / 2 ? (r && i && t.push({
+        text: r,
         rect: {
-          left: r.left,
-          top: r.top,
-          width: r.right - r.left,
-          height: r.bottom - r.top
+          left: i.left,
+          top: i.top,
+          width: i.right - i.left,
+          height: i.bottom - i.top
         }
-      }), i = l, r = {
+      }), r = l, i = {
         left: f.left,
         top: f.top,
         right: f.right,
         bottom: f.bottom
-      }, o = f.top) : (i += l, r && (r.left = Math.min(r.left, f.left), r.top = Math.min(r.top, f.top), r.right = Math.max(r.right, f.right), r.bottom = Math.max(
-        r.bottom,
+      }, o = f.top) : (r += l, 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,
         f.bottom
       )));
     }
     c += l.length;
   }
-  return i && r && t.push({
-    text: i,
+  return r && i && t.push({
+    text: r,
     rect: {
-      left: r.left,
-      top: r.top,
-      width: r.right - r.left,
-      height: r.bottom - r.top
+      left: i.left,
+      top: i.top,
+      width: i.right - i.left,
+      height: i.bottom - i.top
     }
   }), t.filter(
     (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
   );
 }
-function Le(s) {
+function Re(s) {
   const e = parseFloat(s.fontSize);
   let t = parseFloat(s.lineHeight);
   isNaN(t) && (t = e * 1.2);
-  let i = parseFloat(s.letterSpacing);
-  return isNaN(i) && (i = 0), {
+  let r = parseFloat(s.letterSpacing);
+  return isNaN(r) && (r = 0), {
     font: `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,
     fontSize: s.fontSize,
     color: s.color,
@@ -1246,291 +1273,303 @@ function Le(s) {
     textBaseline: "alphabetic",
     direction: s.direction || "inherit",
     lineHeight: t,
-    letterSpacing: i
+    letterSpacing: r
   };
 }
-function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
+function ke(s, e = q | Z | Ye | ce | ie, t, r = 1, i = 0, o = 2, n, a) {
   var de, ue, fe, ge, pe, me;
   if (s.nodeType === Node.TEXT_NODE) {
-    const v = s;
-    if (!v.textContent || !v.textContent.trim())
+    const m = s;
+    if (!m.textContent || !m.textContent.trim())
       return null;
-    const C = v.textContent.replace(/\s+/g, " ");
-    if (C.length === 0)
+    const R = m.textContent.replace(/\s+/g, " ");
+    if (R.length === 0)
       return null;
-    const D = it(v);
-    if (D.length === 0)
+    const k = it(m);
+    if (k.length === 0)
       return null;
-    const B = v.parentElement, S = B ? window.getComputedStyle(B) : null;
-    if (!S)
+    const _ = m.parentElement, L = _ ? window.getComputedStyle(_) : null;
+    if (!L)
       return null;
-    const X = Math.min(...D.map((T) => T.rect.left)), x = Math.min(...D.map((T) => T.rect.top)), V = Math.max(...D.map((T) => T.rect.left + T.rect.width)), G = Math.max(...D.map((T) => T.rect.top + T.rect.height));
+    const V = Math.min(...k.map((w) => w.rect.left)), B = Math.min(...k.map((w) => w.rect.top)), H = Math.max(...k.map((w) => w.rect.left + w.rect.width)), T = Math.max(...k.map((w) => w.rect.top + w.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: v,
+      element: m,
       rect: {
-        x: X + window.scrollX,
-        y: x + window.scrollY,
-        width: V - X,
-        height: G - x
+        x: V + window.scrollX,
+        y: B + window.scrollY,
+        width: H - V,
+        height: T - B
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: B && B.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(S.opacity),
-        zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + r,
+        opacity: _ && _.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(L.opacity),
+        zIndex: (isNaN(parseInt(L.zIndex)) ? 0 : parseInt(L.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: C,
-      textLines: D.map((T) => ({
-        text: T.text.trim(),
+      textContent: R,
+      textLines: k.map((w) => ({
+        text: w.text.trim(),
         rect: {
-          x: T.rect.left + window.scrollX,
-          y: T.rect.top + window.scrollY,
-          width: T.rect.width,
-          height: T.rect.height
+          x: w.rect.left + window.scrollX,
+          y: w.rect.top + window.scrollY,
+          width: w.rect.width,
+          height: w.rect.height
         }
       })),
-      textStyles: Le(S),
+      textStyles: Re(L),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
-      captureLayer: i,
-      isFixed: S.position === "fixed",
+      captureLayer: r,
+      isFixed: L.position === "fixed",
       nativeLayer: n,
       nativeStyles: a ? $($({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: B && B.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(S.opacity),
-        zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + r,
+        opacity: _ && _.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(L.opacity),
+        zIndex: (isNaN(parseInt(L.zIndex)) ? 0 : parseInt(L.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, Le(S)), a) : void 0,
+      }, Re(L)), a) : void 0,
       nativeRect: a ? {
-        x: X + window.scrollX,
-        y: x + window.scrollY,
-        width: V - X,
-        height: G - x
+        x: V + window.scrollX,
+        y: B + window.scrollY,
+        width: H - V,
+        height: T - B
       } : void 0,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const c = s, l = c.dataset[F.KEY];
+  const c = s, l = c.dataset[N.KEY];
   let d = t, h = t;
   if (l) {
-    const v = new Set(l.split(/\s+/));
-    for (const C of v)
-      if (!Te.includes(C))
+    const m = new Set(l.split(/\s+/));
+    for (const R of m)
+      if (!Ce.includes(R))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(F.VALUES.END))
+    if (m.has(N.VALUES.END))
       return null;
-    if (v.has(F.VALUES.INCLUDE_TREE) && v.has(F.VALUES.EXCLUDE_TREE))
+    if (m.has(N.VALUES.INCLUDE_TREE) && m.has(N.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (v.has(F.VALUES.INCLUDE_SELF) && v.has(F.VALUES.EXCLUDE_SELF))
+    if (m.has(N.VALUES.INCLUDE_SELF) && m.has(N.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(F.VALUES.INCLUDE_TREE) ? d = d | W : v.has(F.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, v.has(F.VALUES.INCLUDE_SELF) ? h = h | W : v.has(F.VALUES.EXCLUDE_SELF) && (h = h & ~W);
+    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);
   }
   const f = c.dataset[Y.KEY];
   if (f) {
-    const v = new Set(f.split(/\s+/));
-    for (const C of v)
-      if (!Te.includes(C))
+    const m = new Set(f.split(/\s+/));
+    for (const R of m)
+      if (!Ce.includes(R))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(Y.VALUES.END))
+    if (m.has(Y.VALUES.END))
       return null;
-    if (v.has(Y.VALUES.INCLUDE_TREE) && v.has(Y.VALUES.EXCLUDE_TREE))
+    if (m.has(Y.VALUES.INCLUDE_TREE) && m.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 (v.has(Y.VALUES.INCLUDE_SELF) && v.has(Y.VALUES.EXCLUDE_SELF))
+    if (m.has(Y.VALUES.INCLUDE_SELF) && m.has(Y.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(Y.VALUES.INCLUDE_TREE) ? d = d | j : v.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~j), h = d, v.has(Y.VALUES.INCLUDE_SELF) ? h = h | j : v.has(Y.VALUES.EXCLUDE_SELF) && (h = h & ~j);
+    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);
   }
-  const p = c.dataset[I.KEY];
-  let g = !1, m = a ? $({}, a) : {}, E = n;
+  const p = c.dataset[U.KEY];
+  let g = !1, v = a ? $({}, a) : {}, x = n;
   if (p) {
-    let v = 1;
-    const C = p.indexOf("{"), D = p.lastIndexOf("}");
-    let B = p;
-    if (C !== -1 && D !== -1 && D > C) {
-      B = p.substring(0, C).trim();
-      const x = p.substring(C, D + 1);
+    let m = 1;
+    const R = p.indexOf("{"), k = p.lastIndexOf("}");
+    let _ = p;
+    if (R !== -1 && k !== -1 && k > R) {
+      _ = p.substring(0, R).trim();
+      const T = p.substring(R, k + 1);
       try {
-        m = new Function("return " + x)();
-      } catch (V) {
+        v = new Function("return " + T)();
+      } catch (w) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${x}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${T}`
         );
       }
     }
-    const S = B.split(/\s+/);
-    let X = !1;
-    if (S.includes(I.VALUES.TRAVELER)) {
-      g = !0, X = !0;
-      const x = S.find((V) => !isNaN(parseInt(V, 10)));
-      x && (v = parseInt(x, 10));
-    } else if (S.includes(I.VALUES.NATIVE)) {
-      g = !1;
-      const x = S.find((V) => !isNaN(parseInt(V, 10)));
-      x && (E = parseInt(x, 10));
+    const L = _.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);
+      else {
+        const w = L.find((j) => !isNaN(parseInt(j, 10)));
+        w && (m = parseInt(w, 10));
+      }
+    }
+    const H = L.indexOf(U.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));
+      }
     }
-    if (X) {
-      const x = v + 1;
-      if (x < i)
+    if (V) {
+      const T = m + 1;
+      if (T < r)
         throw new Error(
-          `[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${i - 1}).`
+          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${r - 1}).`
         );
-      i = Math.min(x, I.MAX_LAYERS + 1);
+      r = Math.min(T, U.MAX_LAYERS + 1);
     }
   }
-  const L = c.dataset[Ve.KEY];
-  let M;
-  L && (M = JSON.parse(L));
-  const w = c.getBoundingClientRect(), b = window.getComputedStyle(c);
-  if (w.width === 0 || w.height === 0 || b.display === "none")
+  const M = c.dataset[Ve.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")
     return null;
-  let U = c.getAttribute("data-mid");
-  U || (U = Math.random().toString(36).substring(2, 11), c.setAttribute("data-mid", U));
-  const A = parseInt(b.zIndex), O = (isNaN(A) ? 0 : A) + r;
-  let z;
+  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")
-    z = c.src;
+    X = c.src;
   else if (c.tagName.toLowerCase() === "svg") {
-    const v = c.cloneNode(!0), C = m == null ? void 0 : m.color, D = m == null ? void 0 : m.fill, B = m == null ? void 0 : m.stroke, S = m == null ? void 0 : m.opacity, X = (T, ve) => {
-      const _ = window.getComputedStyle(T), J = ve, Oe = _.fill === _.color, Be = _.stroke === _.color, ie = D || (Oe ? C : void 0) || _.fill;
-      ie && ie !== "none" && (J.style.fill = ie);
-      const se = B || (Be ? C : void 0) || _.stroke;
-      se && se !== "none" && (J.style.stroke = se), _.strokeWidth && _.strokeWidth !== "0px" && (J.style.strokeWidth = _.strokeWidth);
-      const ye = C || _.color;
-      ye && (J.style.color = ye);
-      const ne = S || _.opacity;
-      ne && ne !== "1" && (J.style.opacity = ne);
-      for (let ee = 0; ee < T.children.length; ee++)
-        X(T.children[ee], ve.children[ee]);
+    const m = c.cloneNode(!0), R = v == null ? void 0 : v.color, k = v == null ? void 0 : v.fill, _ = v == null ? void 0 : v.stroke, L = v == null ? void 0 : v.opacity, V = (w, j) => {
+      const F = window.getComputedStyle(w), Q = j, Be = F.fill === F.color, Oe = F.stroke === F.color, se = k || (Be ? R : void 0) || F.fill;
+      se && se !== "none" && (Q.style.fill = se);
+      const ne = _ || (Oe ? R : void 0) || F.stroke;
+      ne && ne !== "none" && (Q.style.stroke = ne), F.strokeWidth && F.strokeWidth !== "0px" && (Q.style.strokeWidth = F.strokeWidth);
+      const ve = R || F.color;
+      ve && (Q.style.color = ve);
+      const oe = L || F.opacity;
+      oe && oe !== "1" && (Q.style.opacity = oe);
+      for (let te = 0; te < w.children.length; te++)
+        V(w.children[te], j.children[te]);
     };
-    X(c, v);
-    const x = c.getBoundingClientRect(), V = window.devicePixelRatio * o;
-    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${x.width} ${x.height}`), v.setAttribute("width", (x.width * V).toString()), v.setAttribute("height", (x.height * V).toString());
-    let G = new XMLSerializer().serializeToString(v);
-    G.includes("xmlns=") || (G = G.replace(
+    V(c, m);
+    const B = c.getBoundingClientRect(), H = window.devicePixelRatio * o;
+    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(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), z = `data:image/svg+xml;utf8,${encodeURIComponent(G)}`;
-  } else if (b.backgroundImage && b.backgroundImage !== "none") {
-    const v = b.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    v && (z = v[1]);
-  }
-  const k = {
-    backgroundColor: b.backgroundColor,
-    backgroundImage: b.backgroundImage,
-    opacity: c.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(b.opacity),
+    )), X = `data:image/svg+xml;utf8,${encodeURIComponent(T)}`;
+  } else if (E.backgroundImage && E.backgroundImage !== "none") {
+    const m = E.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    m && (X = m[1]);
+  }
+  const I = {
+    backgroundColor: E.backgroundColor,
+    backgroundImage: E.backgroundImage,
+    opacity: c.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(E.opacity),
     zIndex: O,
-    borderRadius: b.borderRadius,
-    borderColor: b.borderColor,
-    borderWidth: b.borderWidth,
-    imageSrc: z,
+    borderRadius: E.borderRadius,
+    borderColor: E.borderColor,
+    borderWidth: E.borderWidth,
+    imageSrc: X,
     isTraveler: g
-  }, P = k;
+  }, G = I;
   let Ie, Ue;
   const he = [];
-  return c.tagName.toLowerCase() !== "svg" && Array.from(c.childNodes).forEach((v) => {
-    const C = v.nodeType === Node.TEXT_NODE ? h : d, D = ke(
-      v,
+  return c.tagName.toLowerCase() !== "svg" && Array.from(c.childNodes).forEach((m) => {
+    const R = m.nodeType === Node.TEXT_NODE ? h : d, k = ke(
+      m,
       e,
-      C,
-      i,
+      R,
+      r,
       O,
       o,
-      E,
-      v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
+      m.nodeType === Node.TEXT_NODE ? x : void 0,
+      m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
     );
-    D && he.push(D);
+    k && he.push(k);
   }), {
-    id: U,
+    id: C,
     type: "BOX",
     element: c,
     rect: {
-      x: w.left + window.scrollX,
-      y: w.top + window.scrollY,
-      width: w.width,
-      height: w.height
+      x: S.left + window.scrollX,
+      y: S.top + window.scrollY,
+      width: S.width,
+      height: S.height
     },
-    styles: P,
+    styles: G,
     textContent: Ie,
     textStyles: Ue,
     dirtyMask: e,
     visibility: h,
     isTraveler: g,
-    captureLayer: i,
-    nativeLayer: E,
-    nativeStyles: E !== void 0 ? we($({}, k), {
-      backgroundColor: (de = m.backgroundColor) != null ? de : k.backgroundColor,
-      backgroundImage: (ue = m.backgroundImage) != null ? ue : k.backgroundImage,
-      opacity: (fe = m.opacity) != null ? fe : k.opacity,
-      zIndex: m.zIndex !== void 0 ? m.zIndex + O : k.zIndex,
-      borderRadius: (ge = m.borderRadius) != null ? ge : k.borderRadius,
-      borderColor: (pe = m.borderColor) != null ? pe : k.borderColor,
-      borderWidth: (me = m.borderWidth) != null ? me : k.borderWidth,
-      isTraveler: k.isTraveler
+    captureLayer: r,
+    nativeLayer: x,
+    nativeStyles: x !== void 0 ? be($({}, I), {
+      backgroundColor: (de = v.backgroundColor) != null ? de : I.backgroundColor,
+      backgroundImage: (ue = v.backgroundImage) != null ? ue : I.backgroundImage,
+      opacity: (fe = v.opacity) != null ? fe : I.opacity,
+      zIndex: v.zIndex !== void 0 ? v.zIndex + O : I.zIndex,
+      borderRadius: (ge = v.borderRadius) != null ? ge : I.borderRadius,
+      borderColor: (pe = v.borderColor) != null ? pe : I.borderColor,
+      borderWidth: (me = v.borderWidth) != null ? me : I.borderWidth,
+      isTraveler: I.isTraveler
     }) : void 0,
-    nativeRect: E !== void 0 ? {
-      x: m.x !== void 0 ? parseFloat(m.x) : w.left + window.scrollX,
-      y: m.y !== void 0 ? parseFloat(m.y) : w.top + window.scrollY,
-      width: m.width !== void 0 ? parseFloat(m.width) : w.width,
-      height: m.height !== void 0 ? parseFloat(m.height) : w.height
+    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
     } : void 0,
-    isFixed: b.position === "fixed",
+    isFixed: E.position === "fixed",
     children: he,
-    shaderHooks: M
+    shaderHooks: A
   };
 }
 function st(s, e) {
-  e.size !== 0 && e.forEach((t, i) => {
+  e.size !== 0 && e.forEach((t, r) => {
     var o, n, a, c;
-    const r = s.get(i);
-    !r || !r.userData.basePosition || (N.forceUpdateUniforms(r.material, {
+    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 : (o = r.userData.baseStyles) == null ? void 0 : o.borderRadius
+      borderRadius: (n = t.borderRadius) != null ? n : (o = i.userData.baseStyles) == null ? void 0 : o.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    }), r.userData.nativeMesh && N.forceUpdateUniforms(r.userData.nativeMesh.material, {
+    }), i.userData.nativeMesh && z.forceUpdateUniforms(i.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
-      borderRadius: (c = t.borderRadius) != null ? c : (a = r.userData.baseStyles) == null ? void 0 : a.borderRadius
+      borderRadius: (c = t.borderRadius) != null ? c : (a = i.userData.baseStyles) == null ? void 0 : a.borderRadius
     }));
   });
 }
 class nt {
-  constructor(e, t, i, r) {
+  constructor(e, t, r, i) {
     u(this, "target");
     u(this, "renderer");
     u(this, "registry");
     u(this, "isTravelEnabled", !1);
     u(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = i, this.tracker = new Me(e, {
-      resizeDebounce: r.resizeDebounce
+    this.target = e, this.renderer = t, this.registry = r, this.tracker = new Me(e, {
+      resizeDebounce: i.resizeDebounce
     }), this.tracker.onLayoutChange.add((o, n) => {
-      document.querySelector(`[${I.NAME}~='${I.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      document.querySelector(`[${U.NAME}~='${U.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
       const c = ke(
         this.target,
         o,
@@ -1584,22 +1623,22 @@ class at {
     u(this, "syncer");
     u(this, "target");
     u(this, "registry");
-    var r, o, n;
+    var i, o, n;
     if (this.target = e, this.registry = new ot(), !document.getElementById("mirage-engine-styles")) {
       const a = document.createElement("style");
       a.id = "mirage-engine-styles", a.textContent = `
-        [${H.NAME}="${H.VALUES.HIDE}"] {
+        [${P.NAME}="${P.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
       `, document.head.appendChild(a);
     }
-    let i;
-    if (t.mode === "duplicate" ? i = (o = (r = t.container) != null ? r : this.target.parentElement) != null ? o : void 0 : i = (n = this.target.parentElement) != null ? n : void 0, !i)
+    let r;
+    if (t.mode === "duplicate" ? r = (o = (i = t.container) != null ? i : this.target.parentElement) != null ? o : 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 rt(
       this.target,
       t,
-      i,
+      r,
       this.registry
     ), this.renderer.mount(), this.syncer = new nt(this.target, this.renderer, this.registry, t);
   }
@@ -1638,10 +1677,10 @@ class at {
     }), window.addEventListener("keyup", (o) => {
       t[o.key] !== void 0 && (t[o.key] = !1);
     });
-    const i = 2, r = () => {
-      requestAnimationFrame(r), 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);
+    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);
     };
-    r();
+    i();
   }
 }
 class ct {
@@ -1683,24 +1722,24 @@ class ct {
     const e = document.querySelectorAll(this.frontSelector);
     this.frontLayer && e.forEach((t) => {
       var n;
-      const i = t.getBoundingClientRect(), r = window.getComputedStyle(t), o = document.createElement("div");
+      const r = t.getBoundingClientRect(), i = window.getComputedStyle(t), o = document.createElement("div");
       o.className = "sand-placeholder", Object.assign(o.style, {
-        display: r.display === "inline" ? "inline-block" : r.display,
-        width: `${i.width}px`,
-        height: `${i.height}px`,
+        display: i.display === "inline" ? "inline-block" : i.display,
+        width: `${r.width}px`,
+        height: `${r.height}px`,
         boxSizing: "border-box",
-        marginTop: r.marginTop,
-        marginBottom: r.marginBottom,
-        marginLeft: r.marginLeft,
-        marginRight: r.marginRight,
+        marginTop: i.marginTop,
+        marginBottom: i.marginBottom,
+        marginLeft: i.marginLeft,
+        marginRight: i.marginRight,
         visibility: "hidden",
         pointerEvents: "none"
       }), (n = t.parentNode) == null || n.insertBefore(o, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
         position: "fixed",
         margin: "0",
         boxSizing: "border-box",
-        width: `${i.width}px`,
-        height: `${i.height}px`,
+        width: `${r.width}px`,
+        height: `${r.height}px`,
         pointerEvents: "auto"
       }), this.items.push({ placeholder: o, original: t });
     });
@@ -1708,9 +1747,9 @@ class ct {
   setupHooks() {
     this.tracker && this.tracker.onBeforeRender.add(() => {
       const e = this.items.map(({ placeholder: t }) => t.getBoundingClientRect());
-      this.items.forEach(({ original: t }, i) => {
-        const r = e[i];
-        t.style.top = `${r.top}px`, t.style.left = `${r.left}px`, t.style.width = `${r.width}px`, t.style.height = `${r.height}px`;
+      this.items.forEach(({ original: t }, r) => {
+        const i = e[r];
+        t.style.top = `${i.top}px`, t.style.left = `${i.left}px`, t.style.width = `${i.width}px`, t.style.height = `${i.height}px`;
       });
     });
   }
@@ -1722,9 +1761,9 @@ class ht {
     if (!e)
       throw new Error("[Mirage] Target element is required.");
     if (this._engine = new at(e, t), t.sandwich !== !1) {
-      const i = typeof t.sandwich == "object" ? t.sandwich : {};
+      const r = typeof t.sandwich == "object" ? t.sandwich : {};
       this._sandwich = new ct({
-        frontSelector: i.frontSelector || `[${Ce.NAME}='${Ce.VALUES.FRONT}']`
+        frontSelector: r.frontSelector || `[${Ee.NAME}='${Ee.VALUES.FRONT}']`
       }), this._sandwich.useTracker(this._engine.getTracker());
     }
   }