mirage-engine 0.3.16 → 0.3.18

package/dist/mirage-engine.js

@@ -1,34 +1,34 @@
-var ze = Object.defineProperty, Ne = Object.defineProperties;
-var Xe = Object.getOwnPropertyDescriptors;
-var xe = Object.getOwnPropertySymbols;
-var Ve = Object.prototype.hasOwnProperty, Ye = Object.prototype.propertyIsEnumerable;
-var ve = (s, e, t) => e in s ? ze(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, te = (s, e) => {
+var Xe = Object.defineProperty, Ve = Object.defineProperties;
+var Ye = Object.getOwnPropertyDescriptors;
+var Ee = Object.getOwnPropertySymbols;
+var Pe = Object.prototype.hasOwnProperty, We = Object.prototype.propertyIsEnumerable;
+var ye = (s, e, t) => e in s ? Xe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, te = (s, e) => {
   for (var t in e || (e = {}))
-    Ve.call(e, t) && ve(s, t, e[t]);
-  if (xe)
-    for (var t of xe(e))
-      Ye.call(e, t) && ve(s, t, e[t]);
+    Pe.call(e, t) && ye(s, t, e[t]);
+  if (Ee)
+    for (var t of Ee(e))
+      We.call(e, t) && ye(s, t, e[t]);
   return s;
-}, Se = (s, e) => Ne(s, Xe(e));
-var u = (s, e, t) => (ve(s, typeof e != "symbol" ? e + "" : e, t), t);
-var Ee = (s, e, t) => new Promise((r, i) => {
-  var c = (a) => {
+}, Ce = (s, e) => Ve(s, Ye(e));
+var u = (s, e, t) => (ye(s, typeof e != "symbol" ? e + "" : e, t), t);
+var Te = (s, e, t) => new Promise((i, r) => {
+  var l = (c) => {
     try {
-      o(t.next(a));
-    } catch (l) {
-      i(l);
+      o(t.next(c));
+    } catch (a) {
+      r(a);
     }
-  }, n = (a) => {
+  }, n = (c) => {
     try {
-      o(t.throw(a));
-    } catch (l) {
-      i(l);
+      o(t.throw(c));
+    } catch (a) {
+      r(a);
     }
-  }, o = (a) => a.done ? r(a.value) : Promise.resolve(a.value).then(c, n);
+  }, o = (c) => c.done ? i(c.value) : Promise.resolve(c.value).then(l, n);
   o((t = t.apply(s, e)).next());
 });
 import * as w from "three";
-const Ae = {
+const Ie = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
   INCLUDE_SELF: "include-self",
@@ -41,7 +41,7 @@ const Ae = {
     HIDE: "hide",
     SHOW: "show"
   }
-}, Ce = {
+}, Re = {
   TRAVELER: "traveler",
   NATIVE: "native",
   CAPTURE_1: "1",
@@ -54,42 +54,43 @@ const Ae = {
   CAPTURE_8: "8",
   CAPTURE_9: "9",
   CAPTURE_10: "10"
-}, z = {
+}, N = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
-  VALUES: Ce,
-  MAX_LAYERS: Object.keys(Ce).length - 1
-}, G = {
+  VALUES: Re,
+  MAX_LAYERS: Object.keys(Re).length - 1
+}, H = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
-  VALUES: Ae
-}, j = {
+  VALUES: Ie
+}, q = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
-  VALUES: Ae
-}, We = {
+  VALUES: Ie
+}, He = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
-}, Te = {
+}, Le = {
   NAME: "data-mirage-sandwich",
   KEY: "mirageSandwich",
   VALUES: {
     FRONT: "front"
   }
-}, ue = 0, re = 1, he = 2, Pe = 4, fe = 8, we = 16;
-function He(s) {
-  const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+}, ge = 0, re = 1, ue = 2, Ge = 4, pe = 8, be = 16;
+function $e(s) {
+  const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
   return e ? {
     r: parseInt(e[1]) / 255,
     g: parseInt(e[2]) / 255,
-    b: parseInt(e[3]) / 255
-  } : { r: 1, g: 1, b: 1 };
+    b: parseInt(e[3]) / 255,
+    a: e[4] !== void 0 ? parseFloat(e[4]) : 1
+  } : { r: 1, g: 1, b: 1, a: 1 };
 }
-function Ge(s) {
+function qe(s) {
   const e = {};
-  if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
-    const t = He(s.backgroundColor);
-    e.backgroundColor = [t.r, t.g, t.b];
+  if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor) {
+    const t = $e(s.backgroundColor);
+    e.backgroundColor = [t.r, t.g, t.b, t.a];
   }
   if (s.backgroundImage ? e.backgroundImage = s.backgroundImage : s.background && (e.backgroundImage = s.background), s.boxShadow && (e.boxShadow = s.boxShadow), s.borderRadius && (e.borderRadius = parseFloat(s.borderRadius)), s.width && (e.width = parseFloat(s.width)), s.height && (e.height = parseFloat(s.height)), s.transform && s.transform !== "none") {
     const t = new DOMMatrix(s.transform);
@@ -97,7 +98,7 @@ function Ge(s) {
   }
   return e;
 }
-class ke {
+class Be {
   constructor(e, t) {
     u(this, "target");
     u(this, "observer");
@@ -105,7 +106,7 @@ class ke {
     u(this, "pendingStyles", /* @__PURE__ */ new Map());
     u(this, "isDomDirty", !1);
     u(this, "isRunning", !1);
-    u(this, "pendingMask", ue);
+    u(this, "pendingMask", ge);
     u(this, "mutationTimer", null);
     u(this, "cssTimer", null);
     u(this, "resizeConfig");
@@ -120,7 +121,7 @@ class ke {
     u(this, "onScrollChange", /* @__PURE__ */ new Set());
     u(this, "onRender", /* @__PURE__ */ new Set());
     u(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= re | he, this.cssTimer = window.setTimeout(() => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= re | ue, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
@@ -136,38 +137,38 @@ class ke {
     u(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
-      this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = ue);
+      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = ge);
       const e = window.scrollX, t = window.scrollY;
-      (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((r) => r(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
+      (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((i) => i(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
         this.pendingMask |= re, this.isDomDirty = !0, this.scrollTimer = null;
-      }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
+      }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((i) => i(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((i) => i()), requestAnimationFrame(this.renderLoop);
     });
-    var i, c;
+    var r, 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 = {
+    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 = {
       enabled: !0,
-      delay: (c = r.delay) != null ? c : 150,
-      onStart: r.onStart,
-      onEnd: r.onEnd
+      delay: (l = i.delay) != null ? l : 150,
+      onStart: i.onStart,
+      onEnd: i.onEnd
     }, this.observer = new MutationObserver((n) => {
-      let o = ue;
-      for (const a of n)
-        if (a.type === "childList")
-          o |= fe, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
-            l instanceof HTMLElement && this.pendingDeletions.add(l);
+      let o = ge;
+      for (const c of n)
+        if (c.type === "childList")
+          o |= pe, c.removedNodes.length > 0 && c.removedNodes.forEach((a) => {
+            a instanceof HTMLElement && this.pendingDeletions.add(a);
           });
-        else if (a.type === "attributes")
-          if (a.attributeName === "style") {
-            o |= re | he;
-            const l = a.target, d = Ge(l.style);
-            this.pendingStyles.set(l, d);
+        else if (c.type === "attributes")
+          if (c.attributeName === "style") {
+            o |= re | ue;
+            const a = c.target, f = qe(a.style);
+            this.pendingStyles.set(a, f);
           } else
-            a.attributeName === "class" ? o |= re | he : a.attributeName && a.attributeName.startsWith("data-") && (o |= re | he, a.attributeName.startsWith("data-mirage") && (o |= fe));
+            c.attributeName === "class" ? o |= re | ue : c.attributeName && c.attributeName.startsWith("data-") && (o |= re | ue, c.attributeName.startsWith("data-mirage") && (o |= pe));
         else
-          a.type === "characterData" && (o |= we | re);
-      if (o !== ue) {
-        if (this.pendingMask |= o, o & fe) {
+          c.type === "characterData" && (o |= be | re);
+      if (o !== ge) {
+        if (this.pendingMask |= o, o & pe) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -192,13 +193,13 @@ class ke {
     this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
   }
 }
-const $ = 1, oe = 2, O = {
+const G = 1, ae = 2, O = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Re = Object.values(G.VALUES);
-class Ie {
+}, Me = Object.values(H.VALUES);
+class Ue {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
    * @param font CSS font shorthand string (e.g., "400 16px Inter")
@@ -213,15 +214,15 @@ class Ie {
   static calculateBaselineFromDOM(e) {
     if (typeof document == "undefined")
       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 c = i.offsetTop - r.offsetTop;
-    return document.body.removeChild(t), c;
+    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 l = r.offsetTop - i.offsetTop;
+    return document.body.removeChild(t), l;
   }
 }
-u(Ie, "cache", /* @__PURE__ */ new Map());
-class $e extends w.MeshBasicMaterial {
-  constructor(t, r, i, c, n = 2) {
+u(Ue, "cache", /* @__PURE__ */ new Map());
+class je extends w.MeshBasicMaterial {
+  constructor(t, i, r, l, n = 2) {
     super({
       transparent: !0,
       side: w.FrontSide,
@@ -232,41 +233,41 @@ class $e extends w.MeshBasicMaterial {
     u(this, "qualityFactor");
     if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
       throw new Error("[Mirage] Failed to create canvas context");
-    this.qualityFactor = n, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t, r, i, c);
+    this.qualityFactor = n, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t, i, r, l);
   }
-  wrapText(t, r) {
-    const i = t.split(`
-`), c = [];
-    return i.forEach((n) => {
+  wrapText(t, i) {
+    const r = t.split(`
+`), l = [];
+    return r.forEach((n) => {
       const o = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
       if (o.length === 0) {
-        c.push("");
+        l.push("");
         return;
       }
-      let a = o[0];
-      for (let l = 1; l < o.length; l++) {
-        const d = o[l];
-        this.ctx.measureText(a + d).width <= r + 2 ? a += d : (a && c.push(a), a = d.trimStart());
+      let c = o[0];
+      for (let a = 1; a < o.length; a++) {
+        const f = o[a];
+        this.ctx.measureText(c + f).width <= i + 2 ? c += f : (c && l.push(c), c = f.trimStart());
       }
-      a && c.push(a);
-    }), c;
+      c && l.push(c);
+    }), l;
   }
-  updateText(t, r, i, c, n) {
+  updateText(t, i, r, l, n) {
     n !== void 0 && (this.qualityFactor = n);
-    const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * a, d = c * a;
-    this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(a, 0, 0, a, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const h = this.wrapText(t, i), f = r.lineHeight, g = Ie.getBaseline(r.font);
-    h.forEach((p, v) => {
-      const y = v * f + g;
-      let C = 0;
-      r.textAlign === "center" ? C = i / 2 : r.textAlign === "right" && (C = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(p, C, y);
+    const c = (window.devicePixelRatio || 1) * this.qualityFactor, a = r * c, f = l * c;
+    this.canvas.width !== a || this.canvas.height !== f ? (this.canvas.width = a, this.canvas.height = f) : 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), d = i.lineHeight, p = Ue.getBaseline(i.font);
+    h.forEach((g, M) => {
+      const m = M * d + p;
+      let y = 0;
+      i.textAlign === "center" ? y = r / 2 : i.textAlign === "right" && (y = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(g, y, m);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function ae(s, e = 0) {
+function ce(s, e = 0) {
   if (typeof s == "number")
     return s;
   const t = parseFloat(s) || 0;
@@ -279,100 +280,100 @@ function le(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), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new w.Color(`rgb(${t}, ${r}, ${i})`), alpha: c };
+    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), l = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new w.Color(`rgb(${t}, ${i}, ${r})`), alpha: l };
   }
   return { color: new w.Color(s), alpha: 1 };
 }
-function Ue(s) {
+function Oe(s) {
   const e = [];
-  let t = "", r = 0;
-  for (let i = 0; i < s.length; i++) {
-    const c = s[i];
-    if (c === "(")
-      r++;
-    else if (c === ")")
-      r--;
-    else if (c === "," && r === 0) {
+  let t = "", i = 0;
+  for (let r = 0; r < s.length; r++) {
+    const l = s[r];
+    if (l === "(")
+      i++;
+    else if (l === ")")
+      i--;
+    else if (l === "," && i === 0) {
       e.push(t.trim()), t = "";
       continue;
     }
-    t += c;
+    t += l;
   }
   return t && e.push(t.trim()), e;
 }
-function qe(s) {
+function Ke(s) {
   if (!s || typeof s != "string" || !s.includes("linear-gradient"))
     return null;
   const e = s.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], r = Ue(t);
-  let i = Math.PI, c = 0;
-  const n = r[0].trim();
+  const t = e[1], i = Oe(t);
+  let r = Math.PI, l = 0;
+  const n = i[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), c = 1;
+    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), l = 1;
   else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
-    const a = parseFloat(n);
-    n.endsWith("deg") ? i = a * (Math.PI / 180) : n.endsWith("rad") ? i = a : n.endsWith("turn") && (i = a * Math.PI * 2), c = 1;
+    const c = parseFloat(n);
+    n.endsWith("deg") ? r = c * (Math.PI / 180) : n.endsWith("rad") ? r = c : n.endsWith("turn") && (r = c * Math.PI * 2), l = 1;
   }
   const o = [];
-  for (let a = c; a < r.length && !(o.length >= 8); a++) {
-    const l = r[a].trim(), d = l.lastIndexOf(" ");
-    let h = l, f = null;
-    if (d !== -1 && !l.endsWith(")")) {
-      const p = l.substring(d + 1);
-      (p.endsWith("%") || p.endsWith("px") || !isNaN(parseFloat(p))) && (h = l.substring(0, d).trim(), f = p);
+  for (let c = l; c < i.length && !(o.length >= 8); c++) {
+    const a = i[c].trim(), f = a.lastIndexOf(" ");
+    let h = a, d = null;
+    if (f !== -1 && !a.endsWith(")")) {
+      const g = a.substring(f + 1);
+      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = a.substring(0, f).trim(), d = g);
     }
-    const g = le(h);
+    const p = le(h);
     o.push({
-      color: g.color,
-      alpha: g.alpha,
-      rawStop: f,
+      color: p.color,
+      alpha: p.alpha,
+      rawStop: d,
       stop: 0
     });
   }
   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 a = 0; a < o.length; a++)
+      o[a].rawStop !== null && (o[a].stop = parseFloat(o[a].rawStop) / 100);
     o[0].rawStop === null && (o[0].stop = 0), o.length > 1 && o[o.length - 1].rawStop === null && (o[o.length - 1].stop = 1);
-    let a = 0;
-    for (let l = 1; l < o.length; l++)
-      if (o[l].rawStop !== null || l === o.length - 1) {
-        const d = l - a;
-        if (d > 1) {
-          const h = o[a].stop, g = (o[l].stop - h) / d;
-          for (let p = 1; p < d; p++)
-            o[a + p].stop = h + g * p;
+    let c = 0;
+    for (let a = 1; a < o.length; a++)
+      if (o[a].rawStop !== null || a === o.length - 1) {
+        const f = a - c;
+        if (f > 1) {
+          const h = o[c].stop, p = (o[a].stop - h) / f;
+          for (let g = 1; g < f; g++)
+            o[c + g].stop = h + p * g;
         }
-        a = l;
+        c = a;
       }
   }
-  return { angle: i, stops: o };
+  return { angle: r, stops: o };
 }
-function je(s) {
+function Je(s) {
   if (!s || s === "none")
     return null;
-  const e = Ue(s);
+  const e = Oe(s);
   if (e.length === 0)
     return null;
-  const t = e[0].trim(), r = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, i = t.match(r);
-  let c = "transparent", n = t;
-  if (i && i[1] !== "inset") {
-    const g = i[1];
-    (g.startsWith("rgb") || g.startsWith("#") || g === "black" || g === "white" || g === "transparent") && (c = g, n = t.replace(g, "").trim());
+  const t = e[0].trim(), i = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, r = t.match(i);
+  let l = "transparent", n = t;
+  if (r && r[1] !== "inset") {
+    const p = r[1];
+    (p.startsWith("rgb") || p.startsWith("#") || p === "black" || p === "white" || p === "transparent") && (l = p, n = t.replace(p, "").trim());
   }
   n = n.replace("inset", "").trim();
-  const o = n.split(/\s+/).map((g) => parseFloat(g) || 0), a = o[0] || 0, l = o[1] || 0, d = o[2] || 0, h = o[3] || 0, f = le(c);
-  return { offsetX: a, offsetY: l, blurRadius: d, spreadRadius: h, color: f.color, alpha: f.alpha };
+  const o = n.split(/\s+/).map((p) => parseFloat(p) || 0), c = o[0] || 0, a = o[1] || 0, f = o[2] || 0, h = o[3] || 0, d = le(l);
+  return { offsetX: c, offsetY: a, blurRadius: f, spreadRadius: h, color: d.color, alpha: d.alpha };
 }
-const Ke = `varying vec2 vUv;
+const Ze = `varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   vScreenPos = gl_Position;
-}`, Je = `varying vec2 vUv;
+}`, Qe = `varying vec2 vUv;
 uniform vec2 uSize;
 uniform vec2 uMeshSize;
 uniform vec4 uShadowColor;
@@ -531,40 +532,40 @@ void main() {
 
   // #include <colorspace_fragment>
 }
-`, Ze = `uniform sampler2D uTexture;
+`, et = `uniform sampler2D uTexture;
 varying vec4 vScreenPos;
 uniform vec2 uTextureRepeat;
-uniform vec2 uTextureOffset;`, Qe = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+uniform vec2 uTextureOffset;`, tt = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 vec2 resultUv = screenUv;
 
-`, et = `vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`, Le = {
-  vertexShader: Ke,
-  fragmentShader: Je
-}, Me = {
-  declChunk: Ze,
-  uvChunk: Qe,
-  baseColorChunk: et
+`, rt = `vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`, De = {
+  vertexShader: Ze,
+  fragmentShader: Qe
+}, Ae = {
+  declChunk: et,
+  uvChunk: tt,
+  baseColorChunk: rt
 };
-function tt(s, e, t, r = null, i) {
-  var S;
-  const c = r !== null || !!s.imageSrc;
+function it(s, e, t, i = null, r) {
+  var C;
+  const l = i !== null || !!s.imageSrc;
   let n = "";
   const o = {};
-  if (i != null && i.uniforms)
-    for (const [R, E] of Object.entries(i.uniforms))
-      typeof E == "number" ? (n += `uniform float ${R};
-`, o[R] = { value: E }) : Array.isArray(E) ? E.length === 2 ? (n += `uniform vec2 ${R};
-`, o[R] = { value: new w.Vector2(...E) }) : E.length === 3 ? (n += `uniform vec3 ${R};
-`, o[R] = { value: new w.Vector3(...E) }) : E.length === 4 && (n += `uniform vec4 ${R};
-`, o[R] = { value: new w.Vector4(...E) }) : (n += `uniform float ${R};
-`, o[R] = { value: E });
-  const a = i !== void 0, l = (c || a ? Me.declChunk : "") + `
-` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+  if (r != null && r.uniforms)
+    for (const [b, S] of Object.entries(r.uniforms))
+      typeof S == "number" ? (n += `uniform float ${b};
+`, o[b] = { value: S }) : Array.isArray(S) ? S.length === 2 ? (n += `uniform vec2 ${b};
+`, o[b] = { value: new w.Vector2(...S) }) : S.length === 3 ? (n += `uniform vec3 ${b};
+`, o[b] = { value: new w.Vector3(...S) }) : S.length === 4 && (n += `uniform vec4 ${b};
+`, o[b] = { value: new w.Vector4(...S) }) : (n += `uniform float ${b};
+`, o[b] = { value: S });
+  const c = r !== void 0, a = (l || c ? Ae.declChunk : "") + `
+` + n, f = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 `, h = s.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 localUv = (p / uSize) + 0.5;
 vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
-`, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", g = c || a ? Me.baseColorChunk : "", p = (i == null ? void 0 : i.colorModifier) || "", v = Le.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", g).replace("#INJECT_COLOR_MODIFIER", p), y = le(s.backgroundColor), C = le(s.borderColor), k = {
+`, d = l || c ? f + h + ((r == null ? void 0 : r.uvModifier) || "") : "", p = l || c ? Ae.baseColorChunk : "", g = (r == null ? void 0 : r.colorModifier) || "", M = De.fragmentShader.replace("#INJECT_DECLARATIONS", a).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), m = le(s.backgroundColor), y = le(s.borderColor), E = {
     uSize: { value: new w.Vector2(e, t) },
     uMeshSize: { value: new w.Vector2(e, t) },
     uShadowColor: { value: new w.Vector4(0, 0, 0, 0) },
@@ -573,23 +574,23 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
     uShadowSpread: { value: 0 },
     uBgColor: {
       value: new w.Vector4(
-        y.color.r,
-        y.color.g,
-        y.color.b,
-        y.alpha
+        m.color.r,
+        m.color.g,
+        m.color.b,
+        m.alpha
       )
     },
     uBorderColor: {
       value: new w.Vector4(
-        C.color.r,
-        C.color.g,
-        C.color.b,
-        C.alpha
+        y.color.r,
+        y.color.g,
+        y.color.b,
+        y.alpha
       )
     },
     uBorderRadius: { value: new w.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: ae(s.borderWidth) },
-    uOpacity: { value: (S = s.opacity) != null ? S : 1 },
+    uBorderWidth: { value: ce(s.borderWidth) },
+    uOpacity: { value: (C = s.opacity) != null ? C : 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new w.Vector2(1, 1) },
     uTextureOffset: { value: new w.Vector2(0, 0) },
@@ -600,49 +601,49 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  Be(k.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (k.uTexture.value = r);
-  const D = new w.ShaderMaterial({
-    uniforms: te(te({}, k), o),
-    vertexShader: Le.vertexShader,
-    fragmentShader: v,
+  _e(E.uBorderRadius.value, s.borderRadius, Math.min(e, t)), l && (E.uTexture.value = i);
+  const A = new w.ShaderMaterial({
+    uniforms: te(te({}, E), o),
+    vertexShader: De.vertexShader,
+    fragmentShader: M,
     transparent: !0,
     side: w.FrontSide
     // for better performance
   });
-  return s.backgroundImage && ye(D, { backgroundImage: s.backgroundImage }), D;
+  return s.backgroundImage && xe(A, { backgroundImage: s.backgroundImage }), A;
 }
-function rt(s, e, t, r, i) {
-  const c = ae(e.borderWidth);
-  ye(s, {
+function st(s, e, t, i, r) {
+  const l = ce(e.borderWidth);
+  xe(s, {
     width: t,
-    height: r,
+    height: i,
     borderRadius: e.borderRadius,
-    borderWidth: c,
+    borderWidth: l,
     backgroundColor: e.backgroundColor,
     borderColor: e.borderColor,
     opacity: e.opacity,
-    texture: i,
+    texture: r,
     backgroundImage: e.backgroundImage,
     boxShadow: e.boxShadow
   });
 }
-function ye(s, e) {
-  var r, i, c;
+function xe(s, e) {
+  var i, r, l;
   if (e.boxShadow !== void 0) {
-    const n = je(e.boxShadow);
+    const n = Je(e.boxShadow);
     n ? (s.uniforms.uShadowColor.value.set(n.color.r, n.color.g, n.color.b, n.alpha), s.uniforms.uShadowOffset.value.set(n.offsetX, n.offsetY), s.uniforms.uShadowBlur.value = n.blurRadius, s.uniforms.uShadowSpread.value = n.spreadRadius, s.userData.shadowPadding = n.blurRadius + n.spreadRadius + Math.max(Math.abs(n.offsetX), Math.abs(n.offsetY))) : (s.uniforms.uShadowColor.value.w = 0, s.userData.shadowPadding = 0);
   }
   if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), s.uniforms.uMeshSize) {
-    const n = s.userData.shadowPadding || 0, o = e.width !== void 0 ? e.width : s.uniforms.uSize.value.x, a = e.height !== void 0 ? e.height : s.uniforms.uSize.value.y;
-    s.uniforms.uMeshSize.value.set(o + n * 2, a + n * 2);
+    const n = s.userData.shadowPadding || 0, o = e.width !== void 0 ? e.width : s.uniforms.uSize.value.x, c = e.height !== void 0 ? e.height : s.uniforms.uSize.value.y;
+    s.uniforms.uMeshSize.value.set(o + n * 2, c + n * 2);
   }
   if (e.borderRadius !== void 0) {
     const n = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(s.uniforms.uSize.value.x, s.uniforms.uSize.value.y);
-    Be(s.uniforms.uBorderRadius.value, e.borderRadius, n);
+    _e(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;
+      const n = e.backgroundColor[3] !== void 0 ? e.backgroundColor[3] : s.uniforms.uBgColor.value.w;
       s.uniforms.uBgColor.value.set(
         e.backgroundColor[0],
         e.backgroundColor[1],
@@ -693,34 +694,34 @@ function ye(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;
+  const t = e.texture !== void 0 ? e.texture : (i = s.uniforms.uTexture) == null ? void 0 : i.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, a = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
-    if (n && o && a && l) {
-      const d = n / o, h = a / l;
-      if (d > h) {
-        const f = h / d;
-        s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
+    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, o = t.image.naturalHeight || t.image.videoHeight || t.image.height, c = (r = e.width) != null ? r : s.uniforms.uSize.value.x, a = (l = e.height) != null ? l : s.uniforms.uSize.value.y;
+    if (n && o && c && a) {
+      const f = n / o, h = c / a;
+      if (f > h) {
+        const d = h / f;
+        s.uniforms.uTextureRepeat.value.set(d, 1), s.uniforms.uTextureOffset.value.set((1 - d) / 2, 0);
       } else {
-        const f = d / h;
-        s.uniforms.uTextureRepeat.value.set(1, f), s.uniforms.uTextureOffset.value.set(0, (1 - f) / 2);
+        const d = f / h;
+        s.uniforms.uTextureRepeat.value.set(1, d), s.uniforms.uTextureOffset.value.set(0, (1 - d) / 2);
       }
     }
   } else
     s.uniforms.uTextureRepeat && (s.uniforms.uTextureRepeat.value.set(1, 1), s.uniforms.uTextureOffset.value.set(0, 0));
   if (e.backgroundImage !== void 0) {
-    const n = qe(e.backgroundImage);
+    const n = Ke(e.backgroundImage);
     if (n) {
       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 a = n.stops[o];
+          const c = n.stops[o];
           s.uniforms.uGradientColors.value[o].set(
-            a.color.r,
-            a.color.g,
-            a.color.b,
-            a.alpha
-          ), s.uniforms.uGradientStops.value[o] = a.stop;
+            c.color.r,
+            c.color.g,
+            c.color.b,
+            c.alpha
+          ), s.uniforms.uGradientStops.value[o] = c.stop;
         } else
           s.uniforms.uGradientColors.value[o].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[o] = 1;
     } else
@@ -729,8 +730,8 @@ function ye(s, e) {
   for (const n of Object.keys(e))
     n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && n !== "boxShadow" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
 }
-function Be(s, e, t = 0) {
-  var a, l, d, h;
+function _e(s, e, t = 0) {
+  var c, a, f, h;
   if (e == null) {
     s.set(0, 0, 0, 0);
     return;
@@ -743,45 +744,45 @@ function Be(s, e, t = 0) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const r = e.split("/")[0].trim().split(/\s+/), i = ae(r[0], t), c = ae((a = r[1]) != null ? a : r[0], t), n = ae((l = r[2]) != null ? l : r[0], t), o = ae((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
-  s.set(i, c, n, o);
+  const i = e.split("/")[0].trim().split(/\s+/), r = ce(i[0], t), l = ce((c = i[1]) != null ? c : i[0], t), n = ce((a = i[2]) != null ? a : i[0], t), o = ce((h = (f = i[3]) != null ? f : i[1]) != null ? h : i[0], t);
+  s.set(r, l, n, o);
 }
-const W = {
-  create(s, e, t, r, i, c = 2, n = null, o) {
-    return s === "BOX" ? tt(
+const P = {
+  create(s, e, t, i, r, l = 2, n = null, o) {
+    return s === "BOX" ? it(
       e,
-      r,
       i,
+      r,
       n,
       o
-    ) : s === "TEXT" ? new $e(
+    ) : s === "TEXT" ? new je(
       t || "",
       e,
-      r,
       i,
-      c
+      r,
+      l
     ) : new w.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, r, i, c, n = 2, o) {
-    e === "BOX" ? rt(
+  update(s, e, t, i, r, l, n = 2, o) {
+    e === "BOX" ? st(
       s,
       t,
-      i,
-      c,
+      r,
+      l,
       o
     ) : e === "TEXT" && s.updateText(
-      r || "",
+      i || "",
       t,
-      i,
-      c,
+      r,
+      l,
       n
     );
   },
   forceUpdateUniforms(s, e) {
-    ye(s, e);
+    xe(s, e);
   }
 };
-class it {
+class nt {
   constructor(e, t = !0) {
     u(this, "observer");
     u(this, "textures", /* @__PURE__ */ new WeakMap());
@@ -789,10 +790,10 @@ class it {
     u(this, "elementUrls", /* @__PURE__ */ new WeakMap());
     u(this, "onUpdate");
     this.onUpdate = e, t && (this.observer = new IntersectionObserver(
-      (r) => {
-        for (const i of r) {
-          const c = i.target;
-          i.isIntersecting ? this.loadTexture(c) : this.disposeTexture(c);
+      (i) => {
+        for (const r of i) {
+          const l = r.target;
+          r.isIntersecting ? this.loadTexture(l) : this.disposeTexture(l);
         }
       },
       { rootMargin: "300px" }
@@ -807,31 +808,31 @@ class it {
     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 Te(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 r;
+          let i;
           if (t.startsWith("data:image/svg+xml"))
-            r = yield new Promise((c, n) => {
+            i = yield new Promise((l, n) => {
               const o = new Image();
-              o.onload = () => c(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();
-            r = yield createImageBitmap(n, { imageOrientation: "flipY" });
+            i = yield createImageBitmap(n, { imageOrientation: "flipY" });
           }
           if (this.elementUrls.get(e) !== t) {
-            "close" in r && r.close();
+            "close" in i && i.close();
             return;
           }
-          const i = new w.Texture(r);
-          r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = w.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
-        } catch (r) {
-          console.warn("[MirageEngine] Failed to load texture:", t, r);
+          const r = new w.Texture(i);
+          i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = w.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
+        } catch (i) {
+          console.warn("[MirageEngine] Failed to load texture:", t, i);
         } finally {
           this.elementUrls.has(e) && this.loadStatus.set(e, !1);
         }
@@ -849,8 +850,8 @@ class it {
     this.observer && this.observer.disconnect();
   }
 }
-class st {
-  constructor(e, t, r, i) {
+class ot {
+  constructor(e, t, i, r) {
     u(this, "canvas");
     u(this, "scene");
     u(this, "camera");
@@ -868,21 +869,21 @@ class st {
     u(this, "registry");
     u(this, "targetRect");
     u(this, "travelersByLayer", Array.from(
-      { length: z.MAX_LAYERS },
+      { length: N.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
     u(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
     u(this, "fixedMeshes", /* @__PURE__ */ new Set());
-    var o, a, l, d, h;
-    this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new it((f, g) => {
-      const p = this.registry.get(f);
-      p && p.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(p.material, { texture: g });
+    var o, c, a, f, h;
+    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (c = t.canvasSize) != null ? c : "viewport", this.clipArea = (a = t.travelerClipArea) != null ? a : 1, this.targetLayer = (f = t.layer) != null ? f : "base", this.textureManager = new nt((d, p) => {
+      const g = this.registry.get(d);
+      g && g.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(g.material, { texture: p });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new w.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    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 w.OrthographicCamera(
-      c / -2,
-      c / 2,
+      l / -2,
+      l / 2,
       n / 2,
       n / -2,
       1,
@@ -893,7 +894,7 @@ class st {
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
+    }), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.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";
@@ -902,12 +903,12 @@ class st {
     return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? O.SELECTED : O.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < z.MAX_LAYERS; e++) {
-      const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, r = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    for (let e = 0; e < N.MAX_LAYERS; e++) {
+      const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, i = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
       this.renderTargets.push(
         new w.WebGLRenderTarget(
           t * this.qualityFactor,
-          r * this.qualityFactor,
+          i * this.qualityFactor,
           {
             minFilter: w.LinearFilter,
             magFilter: w.LinearFilter,
@@ -947,15 +948,15 @@ class st {
     this.canvas.style.width = `${e}px`, this.canvas.style.height = `${t}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = this.isViewport ? "fixed" : "absolute", this.canvas.style.top = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetTop}px`, this.canvas.style.left = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
   }
   updateUniforms(e, t) {
-    const r = this.registry.get(e);
-    r && (r.traverse((i) => {
-      i.isMesh && i.material && W.forceUpdateUniforms(
-        i.material,
+    const i = this.registry.get(e);
+    i && (i.traverse((r) => {
+      r.isMesh && r.material && P.forceUpdateUniforms(
+        r.material,
         t
       );
-    }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
-      i.isMesh && i.material && W.forceUpdateUniforms(
-        i.material,
+    }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((r) => {
+      r.isMesh && r.material && P.forceUpdateUniforms(
+        r.material,
         t
       );
     }));
@@ -965,23 +966,23 @@ class st {
   }
   setSize(e, t) {
     this.renderer.setSize(e, t);
-    for (const r of this.renderTargets)
-      r.setSize(e * this.qualityFactor, t * this.qualityFactor);
+    for (const i of this.renderTargets)
+      i.setSize(e * this.qualityFactor, t * this.qualityFactor);
     this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
   }
   syncScene(e, t) {
-    const r = this.target.getBoundingClientRect(), i = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, o = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, a = Math.abs(i - n) > 0.1 || Math.abs(c - o) > 0.1, l = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
-    a ? (this.targetRect = r, this.setSize(i, c), this.updateCanvasLayout()) : l ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
-      const h = this.registry.get(d);
+    const i = this.target.getBoundingClientRect(), r = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, l = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, o = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, c = Math.abs(r - n) > 0.1 || Math.abs(l - o) > 0.1, a = 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, l), this.updateCanvasLayout()) : a ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((f) => {
+      const h = this.registry.get(f);
       if (h) {
         this.scene.remove(h);
-        for (const f of this.travelersByLayer)
-          f.delete(h);
+        for (const d of this.travelersByLayer)
+          d.delete(h);
         this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach(
-          (f) => f.dispose()
-        ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((f) => {
-          f instanceof w.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((g) => g.dispose()) : f.material.dispose()));
-        }), this.registry.remove(d), this.textureManager.unregister(d);
+          (d) => d.dispose()
+        ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((d) => {
+          d instanceof w.Mesh && (d.geometry && d.geometry.dispose(), d.material && (Array.isArray(d.material) ? d.material.forEach((p) => p.dispose()) : d.material.dispose()));
+        }), this.registry.remove(f), this.textureManager.unregister(f);
       }
     });
   }
@@ -990,11 +991,11 @@ class st {
   // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
   // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
   reconcileNode(e) {
-    var i, c;
+    var r, 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 w.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
-      const n = new w.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = W.create(
+    const i = JSON.stringify(e.shaderHooks || null);
+    if (t && t.userData.shaderHash !== i && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof w.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
+      const n = new w.PlaneGeometry(1, 1), o = e.isTraveler ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), c = P.create(
         "BOX",
         e.styles,
         "",
@@ -1004,10 +1005,10 @@ class st {
         o,
         e.shaderHooks
       );
-      t = new w.Mesh(n, a), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = a, t.userData.domElement = e.element, t.userData.shaderHash = r;
+      t = new w.Mesh(n, c), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = c, t.userData.domElement = e.element, t.userData.shaderHash = i;
     }
-    if ((c = e.nativeStyles) != null && c.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
-      for (let n = 0; n < z.MAX_LAYERS; n++)
+    if (t.userData.clipElements = e.clipElements, (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 < N.MAX_LAYERS; n++)
         n === e.captureLayer - 2 ? this.travelersByLayer[n].add(t) : this.travelersByLayer[n].delete(t);
     else
       for (const n of this.travelersByLayer)
@@ -1022,387 +1023,420 @@ class st {
         !0
       ));
   }
-  reconcileTextChild(e, t, r) {
-    var l;
-    const i = t.textLines || [
+  reconcileTextChild(e, t, i) {
+    var a;
+    const r = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], c = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + i.map((d) => d.text).join("|"), o = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
-    if (t.dirtyMask & we || n !== o) {
+    ], l = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(l) + t.textContent + r.map((f) => f.text).join("|"), o = (a = e.userData) == null ? void 0 : a.textChildStyleHash;
+    if (t.dirtyMask & be || n !== o) {
       e.children.filter(
-        (p) => p.name.startsWith("TEXT_CHILD")
-      ).forEach((p) => {
-        var y;
-        const v = p;
-        (y = v.material.map) == null || y.dispose(), v.geometry.dispose(), e.remove(v);
+        (g) => g.name.startsWith("TEXT_CHILD")
+      ).forEach((g) => {
+        var m;
+        const M = g;
+        (m = M.material.map) == null || m.dispose(), M.geometry.dispose(), e.remove(M);
       });
-      const h = t.rect, f = h.x + h.width / 2, g = h.y + h.height / 2;
-      i.forEach((p, v) => {
-        const y = W.create(
+      const h = t.rect, d = h.x + h.width / 2, p = h.y + h.height / 2;
+      r.forEach((g, M) => {
+        const m = P.create(
           "TEXT",
-          c,
-          p.text,
-          p.rect.width,
-          p.rect.height,
+          l,
+          g.text,
+          g.rect.width,
+          g.rect.height,
           this.qualityFactor
-        ), C = new w.PlaneGeometry(1, 1), k = new w.Mesh(C, y);
-        k.name = `TEXT_CHILD_${v}`;
-        const D = t.rect.width === 0 ? 1 : p.rect.width / t.rect.width, S = t.rect.height === 0 ? 1 : p.rect.height / t.rect.height;
-        k.scale.set(D, S, 1);
-        const R = p.rect.x + p.rect.width / 2, E = p.rect.y + p.rect.height / 2, V = R - f, N = -(E - g);
-        k.position.set(
-          t.rect.width === 0 ? 0 : V / t.rect.width,
-          t.rect.height === 0 ? 0 : N / t.rect.height,
+        ), y = new w.PlaneGeometry(1, 1), E = new w.Mesh(y, m);
+        E.name = `TEXT_CHILD_${M}`;
+        const A = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, C = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
+        E.scale.set(A, C, 1);
+        const b = g.rect.x + g.rect.width / 2, S = g.rect.y + g.rect.height / 2, z = b - d, X = -(S - p);
+        E.position.set(
+          t.rect.width === 0 ? 0 : z / t.rect.width,
+          t.rect.height === 0 ? 0 : X / t.rect.height,
           5e-3
-        ), e.add(k);
+        ), e.add(E);
       }), e.userData.textChildStyleHash = n;
     }
-    e.children.forEach((d) => {
-      if (!d.name.startsWith("TEXT_CHILD"))
+    e.children.forEach((f) => {
+      if (!f.name.startsWith("TEXT_CHILD"))
         return;
-      const h = d;
-      if (r && t.nativeLayer !== void 0)
-        h.layers.set(O.HIDDEN), t.visibility & $ && h.layers.enable(O.getCaptureLayer(t.nativeLayer));
+      const h = f;
+      if (i && t.nativeLayer !== void 0)
+        h.layers.set(O.HIDDEN), t.visibility & G && h.layers.enable(O.getCaptureLayer(t.nativeLayer));
       else {
-        const f = t.visibility & $ ? O.BASE : O.HIDDEN;
-        if (h.layers.set(f), t.visibility & oe && h.layers.enable(O.SELECTED), t.visibility & $)
-          if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
-            for (let g = t.captureLayer; g <= z.MAX_LAYERS + 1; g++)
-              g !== t.nativeLayer && h.layers.enable(O.getCaptureLayer(g));
+        const d = t.visibility & G ? O.BASE : O.HIDDEN;
+        if (h.layers.set(d), t.visibility & ae && h.layers.enable(O.SELECTED), t.visibility & G)
+          if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
+            for (let p = t.captureLayer; p <= N.MAX_LAYERS + 1; p++)
+              p !== t.nativeLayer && h.layers.enable(O.getCaptureLayer(p));
           else
-            for (let g = t.captureLayer; g <= z.MAX_LAYERS + 1; g++)
-              h.layers.enable(O.getCaptureLayer(g));
+            for (let p = t.captureLayer; p <= N.MAX_LAYERS + 1; p++)
+              h.layers.enable(O.getCaptureLayer(p));
       }
     });
   }
   updateMeshProperties(e, t) {
-    var S, R, E, V, N;
-    const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, o = this.renderer.domElement.height / c;
+    var C, b, S, z, X;
+    const { rect: i, styles: r } = t, l = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / l, o = this.renderer.domElement.height / l;
     e.material = e.userData.baseMaterial;
-    let a = ((S = e.material.userData) == null ? void 0 : S.shadowPadding) || 0;
-    e.scale.set(r.width + a * 2, r.height + a * 2, 1), e.userData.domRect = {
-      x: r.x,
-      y: r.y,
-      width: r.width,
-      height: r.height
+    let c = ((C = e.material.userData) == null ? void 0 : C.shadowPadding) || 0;
+    e.scale.set(i.width + c * 2, i.height + c * 2, 1), e.userData.domRect = {
+      x: i.x,
+      y: i.y,
+      width: i.width,
+      height: i.height
     };
-    const l = 1e-3;
+    const a = 1e-3;
     this.renderOrder++;
-    const d = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY;
-    let f, g;
+    const f = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY;
+    let d, p;
     if (this.isViewport)
-      f = r.x - window.innerWidth / 2 + r.width / 2, g = -r.y + window.innerHeight / 2 - r.height / 2;
+      d = i.x - window.innerWidth / 2 + i.width / 2, p = -i.y + window.innerHeight / 2 - i.height / 2;
     else {
-      const L = r.x - d, P = r.y - h;
-      f = L - n / 2 + r.width / 2, g = -P + o / 2 - r.height / 2;
+      const B = i.x - f, k = i.y - h;
+      d = B - n / 2 + i.width / 2, p = -k + o / 2 - i.height / 2;
     }
     e.position.set(
-      f,
-      g,
-      i.zIndex + this.renderOrder * l
+      d,
+      p,
+      r.zIndex + this.renderOrder * a
     );
-    const p = r.x, v = r.y;
-    e.userData.basePosition = { x: f, y: g }, e.userData.originalBasePosition = { x: f, y: g }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: v }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
-    const y = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, C = window.getComputedStyle(y);
-    let k = 0, D = 0;
-    if (C.transform && C.transform !== "none") {
-      const L = new DOMMatrix(C.transform);
-      k = L.m41, D = L.m42;
+    const g = i.x, M = i.y;
+    e.userData.basePosition = { x: d, y: p }, e.userData.originalBasePosition = { x: d, y: p }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: g, y: M }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, y = window.getComputedStyle(m);
+    let E = 0, A = 0;
+    if (y.transform && y.transform !== "none") {
+      const B = new DOMMatrix(y.transform);
+      E = B.m41, A = B.m42;
     }
-    if (e.userData.baseTransform = { x: k, y: D }, delete e.userData.originRatioX, delete e.userData.originRatioY, W.update(
+    if (e.userData.baseTransform = { x: E, y: A }, delete e.userData.originRatioX, delete e.userData.originRatioY, P.update(
       e.userData.baseMaterial,
       "BOX",
-      i,
+      r,
       "",
-      r.width,
-      r.height,
+      i.width,
+      i.height,
       this.qualityFactor,
-      t.isTraveler ? (R = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : R.texture : this.textureManager.get(t.element)
+      t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const X = W.create(
+        const U = P.create(
           "BOX",
           t.nativeStyles,
           "",
           t.nativeRect.width,
           t.nativeRect.height,
           this.qualityFactor,
-          t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.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.shaderHooks
-        ), Y = new w.Mesh(e.geometry, X);
-        t.type === "TEXT" && (Y.name = "BG_MESH"), this.scene.add(Y), e.userData.nativeMesh = Y;
+        ), V = new w.Mesh(e.geometry, U);
+        t.type === "TEXT" && (V.name = "BG_MESH"), this.scene.add(V), e.userData.nativeMesh = V;
       }
-      const L = e.userData.nativeMesh;
-      let P, J;
+      const B = e.userData.nativeMesh;
+      let k, j;
       if (this.isViewport)
-        P = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, J = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        k = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, j = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const X = t.nativeRect.x - d, Y = t.nativeRect.y - h;
-        P = X - n / 2 + t.nativeRect.width / 2, J = -Y + o / 2 - t.nativeRect.height / 2;
+        const U = t.nativeRect.x - f, V = t.nativeRect.y - h;
+        k = U - n / 2 + t.nativeRect.width / 2, j = -V + o / 2 - t.nativeRect.height / 2;
       }
-      let Z = t.nativeRect.width, M = t.nativeRect.height, B = P, q = J;
+      let J = t.nativeRect.width, Z = t.nativeRect.height, L = k, _ = j;
       if (t.nativeStyles.transform) {
-        const X = t.nativeStyles.transform, Y = X.match(/scale\(([\d.]+%?)\)/);
-        if (Y) {
-          let b = parseFloat(Y[1]);
-          Y[1].includes("%") && (b /= 100), Z *= b, M *= b;
+        const U = t.nativeStyles.transform, V = U.match(/scale\(([\d.]+%?)\)/);
+        if (V) {
+          let x = parseFloat(V[1]);
+          V[1].includes("%") && (x /= 100), J *= x, Z *= x;
         }
-        const ie = X.match(/scaleX\(([\d.]+%?)\)/);
+        const ie = U.match(/scaleX\(([\d.]+%?)\)/);
         if (ie) {
-          let b = parseFloat(ie[1]);
-          ie[1].includes("%") && (b /= 100), Z *= b;
+          let x = parseFloat(ie[1]);
+          ie[1].includes("%") && (x /= 100), J *= x;
         }
-        const se = X.match(/scaleY\(([\d.]+%?)\)/);
+        const se = U.match(/scaleY\(([\d.]+%?)\)/);
         if (se) {
-          let b = parseFloat(se[1]);
-          se[1].includes("%") && (b /= 100), M *= b;
+          let x = parseFloat(se[1]);
+          se[1].includes("%") && (x /= 100), Z *= x;
         }
-        const m = X.match(/translate\(([^,]+),\s*([^)]+)\)/);
-        if (m) {
-          const b = m[1].trim(), x = m[2].trim();
-          let _ = parseFloat(b);
-          b.includes("%") && (_ = _ / 100 * t.nativeRect.width);
+        const ne = U.match(/translate\(([^,]+),\s*([^)]+)\)/);
+        if (ne) {
+          const x = ne[1].trim(), T = ne[2].trim();
           let F = parseFloat(x);
-          x.includes("%") && (F = F / 100 * t.nativeRect.height), B += _, q -= F;
+          x.includes("%") && (F = F / 100 * t.nativeRect.width);
+          let D = parseFloat(T);
+          T.includes("%") && (D = D / 100 * t.nativeRect.height), L += F, _ -= D;
         }
-        const A = X.match(/translateX\(([^)]+)\)/);
-        if (A) {
-          const b = A[1].trim();
-          let x = parseFloat(b);
-          b.includes("%") && (x = x / 100 * t.nativeRect.width), B += x;
+        const he = U.match(/translateX\(([^)]+)\)/);
+        if (he) {
+          const x = he[1].trim();
+          let T = parseFloat(x);
+          x.includes("%") && (T = T / 100 * t.nativeRect.width), L += T;
         }
-        const U = X.match(/translateY\(([^)]+)\)/);
-        if (U) {
-          const b = U[1].trim();
-          let x = parseFloat(b);
-          b.includes("%") && (x = x / 100 * t.nativeRect.height), q -= x;
+        const v = U.match(/translateY\(([^)]+)\)/);
+        if (v) {
+          const x = v[1].trim();
+          let T = parseFloat(x);
+          x.includes("%") && (T = T / 100 * t.nativeRect.height), _ -= T;
         }
       }
-      let K = ((V = L.material.userData) == null ? void 0 : V.shadowPadding) || 0;
-      L.scale.set(Z + K * 2, M + K * 2, 1), L.position.set(
-        B,
-        q,
-        t.nativeStyles.zIndex + this.renderOrder * l
-      ), W.update(
-        L.material,
+      let K = ((z = B.material.userData) == null ? void 0 : z.shadowPadding) || 0;
+      B.scale.set(J + K * 2, Z + K * 2, 1), B.position.set(
+        L,
+        _,
+        t.nativeStyles.zIndex + this.renderOrder * a
+      ), P.update(
+        B.material,
         "BOX",
         t.nativeStyles,
         "",
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (N = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : N.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (X = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : X.texture : this.textureManager.get(t.element)
       );
     } else
       e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof w.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const r = t.visibility & $ ? O.BASE : O.HIDDEN;
-    if (e.layers.set(r), t.visibility & oe && e.layers.enable(O.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
-      const i = e.userData.nativeMesh;
-      if (i.layers.set(O.HIDDEN), t.visibility & $) {
-        i.layers.enable(O.getCaptureLayer(t.nativeLayer));
-        for (let c = t.captureLayer; c <= z.MAX_LAYERS + 1; c++)
-          c !== t.nativeLayer && e.layers.enable(O.getCaptureLayer(c));
+    const i = t.visibility & G ? O.BASE : O.HIDDEN;
+    if (e.layers.set(i), t.visibility & ae && e.layers.enable(O.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+      const r = e.userData.nativeMesh;
+      if (r.layers.set(O.HIDDEN), t.visibility & G) {
+        r.layers.enable(O.getCaptureLayer(t.nativeLayer));
+        for (let l = t.captureLayer; l <= N.MAX_LAYERS + 1; l++)
+          l !== t.nativeLayer && e.layers.enable(O.getCaptureLayer(l));
       }
-    } else if (t.visibility & $)
-      for (let i = t.captureLayer; i <= z.MAX_LAYERS + 1; i++)
-        e.layers.enable(O.getCaptureLayer(i));
+    } else if (t.visibility & G)
+      for (let r = t.captureLayer; r <= N.MAX_LAYERS + 1; r++)
+        e.layers.enable(O.getCaptureLayer(r));
   }
-  captureRenderTarget(e, t, r) {
-    if (e.size === 0 || !r)
+  captureRenderTarget(e, t, i) {
+    if (e.size === 0 || !i)
       return;
-    const i = new w.Color(), c = this.renderer.getClearAlpha();
-    this.renderer.getClearColor(i), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(r), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
-    const n = new w.Vector3(), o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, a = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
-    for (const d of e) {
-      n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
-      const h = (n.x + 1) / 2 * o, f = (n.y + 1) / 2 * a;
-      let g = 0, p = 1;
-      typeof this.clipArea == "number" ? p = this.clipArea : this.clipArea.endsWith("%") ? p = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (g = parseFloat(this.clipArea));
-      const v = d.scale.x * p + 0.5, y = d.scale.y * p + 0.5, C = h - v / 2, k = f - y / 2, D = (C * this.qualityFactor - g) / l, S = (k * this.qualityFactor - g) / l, R = (v * this.qualityFactor + g * 2) / l, E = (y * this.qualityFactor + g * 2) / l;
-      this.renderer.setScissor(D, S, R, E), this.renderer.render(this.scene, this.camera);
+    const r = new w.Color(), l = this.renderer.getClearAlpha();
+    this.renderer.getClearColor(r), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(i), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
+    const n = new w.Vector3(), o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, a = this.renderer.getPixelRatio();
+    for (const f of e) {
+      n.setFromMatrixPosition(f.matrixWorld), n.project(this.camera);
+      const h = (n.x + 1) / 2 * o, d = (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 = f.scale.x * g + 0.5, m = f.scale.y * g + 0.5, y = h - M / 2, E = d - m / 2, A = (y * this.qualityFactor - p) / a, C = (E * this.qualityFactor - p) / a, b = (M * this.qualityFactor + p * 2) / a, S = (m * this.qualityFactor + p * 2) / a;
+      this.renderer.setScissor(A, C, b, S), this.renderer.render(this.scene, this.camera);
     }
-    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, c);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, l);
   }
   render() {
-    for (let e = 0; e < z.MAX_LAYERS; e++) {
-      const t = e + 1;
+    for (let o = 0; o < N.MAX_LAYERS; o++) {
+      const c = o + 1;
       this.captureRenderTarget(
-        this.travelersByLayer[e],
-        O.getCaptureLayer(t),
-        this.renderTargets[e]
+        this.travelersByLayer[o],
+        O.getCaptureLayer(c),
+        this.renderTargets[o]
       );
     }
-    this.renderer.render(this.scene, this.camera);
+    const e = this.renderer.getContext(), t = this.renderer.getPixelRatio(), i = this.renderer.domElement.height / t, r = this.renderer.domElement, l = r.getBoundingClientRect().top, n = r.getBoundingClientRect().left;
+    this.scene.children.forEach((o) => {
+      var f;
+      const c = o, a = (f = c.userData) == null ? void 0 : f.scissorRect;
+      if (a && a.width > 0 && a.height > 0) {
+        const h = Math.floor((a.x - n) * t), d = Math.floor(
+          (i - (a.y - l + a.height)) * t
+        ), p = Math.ceil(a.width * t), g = Math.ceil(a.height * t);
+        c.onBeforeRender = () => {
+          e.enable(e.SCISSOR_TEST), e.scissor(h, d, p, g);
+        }, c.onAfterRender = () => {
+          e.disable(e.SCISSOR_TEST);
+        };
+      } else
+        c.onBeforeRender && c.__hasScissorHook && (c.onBeforeRender = () => {
+        }, c.onAfterRender = () => {
+        }, c.__hasScissorHook = !1);
+      a && (c.__hasScissorHook = !0);
+    }), 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, c = this.renderer.domElement.height / r;
+    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, i = this.renderer.getPixelRatio(), r = this.renderer.domElement.width / i, l = this.renderer.domElement.height / i;
     this.scene.children.forEach((n) => {
-      var h, f;
+      var h, d;
       const o = n;
       if (!o.userData || !o.userData.domElement)
         return;
-      const a = o.userData.domElement;
-      if (!a.isConnected)
+      const c = o.userData.domElement;
+      if (!c.isConnected)
         return;
-      let l;
-      if (a.nodeType === Node.TEXT_NODE) {
-        const g = document.createRange();
-        g.selectNode(a), l = g.getBoundingClientRect();
+      let a;
+      if (c.nodeType === Node.TEXT_NODE) {
+        const p = document.createRange();
+        p.selectNode(c), a = p.getBoundingClientRect();
       } else
-        l = a.getBoundingClientRect();
-      const d = o.userData.domRect;
-      if (!d || Math.abs(l.x - d.x) > 0.5 || Math.abs(l.y - d.y) > 0.5 || Math.abs(l.width - d.width) > 0.5 || Math.abs(l.height - d.height) > 0.5) {
+        a = c.getBoundingClientRect();
+      const f = o.userData.domRect;
+      if (!f || Math.abs(a.x - f.x) > 0.5 || Math.abs(a.y - f.y) > 0.5 || Math.abs(a.width - f.width) > 0.5 || Math.abs(a.height - f.height) > 0.5) {
         o.userData.domRect = {
-          x: l.x,
-          y: l.y,
-          width: l.width,
-          height: l.height
+          x: a.x,
+          y: a.y,
+          width: a.width,
+          height: a.height
         };
-        let g, p;
+        const p = o.userData.clipElements;
+        if (p && p.length > 0) {
+          let y = -1 / 0, E = -1 / 0, A = 1 / 0, C = 1 / 0;
+          for (const b of p) {
+            const S = b.getBoundingClientRect();
+            y = Math.max(y, S.left), E = Math.max(E, S.top), A = Math.min(A, S.right), C = Math.min(C, S.bottom);
+          }
+          o.userData.scissorRect = {
+            x: y,
+            y: E,
+            width: Math.max(0, A - y),
+            height: Math.max(0, C - E)
+          };
+        } else
+          o.userData.scissorRect = void 0;
+        let g, M;
         if (this.isViewport)
-          g = l.x - window.innerWidth / 2 + l.width / 2, p = -l.y + window.innerHeight / 2 - l.height / 2;
+          g = a.x - window.innerWidth / 2 + a.width / 2, M = -a.y + window.innerHeight / 2 - a.height / 2;
         else {
-          const y = l.x - e, C = l.y - t;
-          g = y - i / 2 + l.width / 2, p = -C + c / 2 - l.height / 2;
+          const y = a.x - e, E = a.y - t;
+          g = y - r / 2 + a.width / 2, M = -E + l / 2 - a.height / 2;
         }
-        o.position.setX(g), o.position.setY(p);
-        let v = ((h = o.material.userData) == null ? void 0 : h.shadowPadding) || 0;
-        if (o.scale.set(l.width + v * 2, l.height + v * 2, 1), o.updateMatrixWorld(), o.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(o.material, {
-          width: l.width,
-          height: l.height
+        o.position.setX(g), o.position.setY(M);
+        let m = ((h = o.material.userData) == null ? void 0 : h.shadowPadding) || 0;
+        if (o.scale.set(a.width + m * 2, a.height + m * 2, 1), o.updateMatrixWorld(), o.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(o.material, {
+          width: a.width,
+          height: a.height
         }), o.userData.nativeMesh) {
           const y = o.userData.nativeMesh;
-          let C = l.width, k = l.height, D = g, S = p;
+          let E = a.width, A = a.height, C = g, b = M;
           if (o.userData.nativeTransform) {
-            const E = o.userData.nativeTransform, V = E.match(/scale\(([\d.]+%?)\)/);
-            if (V) {
-              let M = parseFloat(V[1]);
-              V[1].includes("%") && (M /= 100), C *= M, k *= M;
+            const z = o.userData.nativeTransform, X = z.match(/scale\(([\d.]+%?)\)/);
+            if (X) {
+              let L = parseFloat(X[1]);
+              X[1].includes("%") && (L /= 100), E *= L, A *= L;
             }
-            const N = E.match(/scaleX\(([\d.]+%?)\)/);
-            if (N) {
-              let M = parseFloat(N[1]);
-              N[1].includes("%") && (M /= 100), C *= M;
+            const B = z.match(/scaleX\(([\d.]+%?)\)/);
+            if (B) {
+              let L = parseFloat(B[1]);
+              B[1].includes("%") && (L /= 100), E *= L;
             }
-            const L = E.match(/scaleY\(([\d.]+%?)\)/);
-            if (L) {
-              let M = parseFloat(L[1]);
-              L[1].includes("%") && (M /= 100), k *= M;
+            const k = z.match(/scaleY\(([\d.]+%?)\)/);
+            if (k) {
+              let L = parseFloat(k[1]);
+              k[1].includes("%") && (L /= 100), A *= L;
             }
-            const P = E.match(/translate\(([^,]+),\s*([^)]+)\)/);
-            if (P) {
-              const M = P[1].trim(), B = P[2].trim();
-              let q = parseFloat(M);
-              M.includes("%") && (q = q / 100 * l.width);
-              let K = parseFloat(B);
-              B.includes("%") && (K = K / 100 * l.height), D += q, S -= K;
+            const j = z.match(/translate\(([^,]+),\s*([^)]+)\)/);
+            if (j) {
+              const L = j[1].trim(), _ = j[2].trim();
+              let K = parseFloat(L);
+              L.includes("%") && (K = K / 100 * a.width);
+              let U = parseFloat(_);
+              _.includes("%") && (U = U / 100 * a.height), C += K, b -= U;
             }
-            const J = E.match(/translateX\(([^)]+)\)/);
+            const J = z.match(/translateX\(([^)]+)\)/);
             if (J) {
-              const M = J[1].trim();
-              let B = parseFloat(M);
-              M.includes("%") && (B = B / 100 * l.width), D += B;
+              const L = J[1].trim();
+              let _ = parseFloat(L);
+              L.includes("%") && (_ = _ / 100 * a.width), C += _;
             }
-            const Z = E.match(/translateY\(([^)]+)\)/);
+            const Z = z.match(/translateY\(([^)]+)\)/);
             if (Z) {
-              const M = Z[1].trim();
-              let B = parseFloat(M);
-              M.includes("%") && (B = B / 100 * l.height), S -= B;
+              const L = Z[1].trim();
+              let _ = parseFloat(L);
+              L.includes("%") && (_ = _ / 100 * a.height), b -= _;
             }
           }
-          let R = ((f = y.material.userData) == null ? void 0 : f.shadowPadding) || 0;
-          y.position.setX(D), y.position.setY(S), y.scale.set(C + R * 2, k + R * 2, 1), y.updateMatrixWorld(), y.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(y.material, {
-            width: C,
-            height: k
+          let S = ((d = y.material.userData) == null ? void 0 : d.shadowPadding) || 0;
+          y.position.setX(C), y.position.setY(b), y.scale.set(E + S * 2, A + S * 2, 1), y.updateMatrixWorld(), y.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(y.material, {
+            width: E,
+            height: A
           });
         }
       }
     });
   }
 }
-function nt(s) {
+function at(s) {
   const e = s.textContent || "", t = [];
-  let r = "", i = null, c = -1;
-  const n = (l, d) => {
-    for (let h = 0; h < l.length; h++) {
-      const f = l[h], g = document.createRange();
-      g.setStart(s, d + h), g.setEnd(s, d + h + 1);
-      const p = g.getBoundingClientRect();
-      if (p.width === 0 && p.height === 0) {
-        r += f;
+  let i = "", r = null, l = -1;
+  const n = (a, f) => {
+    for (let h = 0; h < a.length; h++) {
+      const d = a[h], p = document.createRange();
+      p.setStart(s, f + h), p.setEnd(s, f + h + 1);
+      const g = p.getBoundingClientRect();
+      if (g.width === 0 && g.height === 0) {
+        i += d;
         continue;
       }
-      c === -1 || Math.abs(p.top - c) > p.height / 2 ? (r && i && t.push({
-        text: r,
+      l === -1 || Math.abs(g.top - l) > g.height / 2 ? (i && r && t.push({
+        text: i,
         rect: {
-          left: i.left,
-          top: i.top,
-          width: i.right - i.left,
-          height: i.bottom - i.top
+          left: r.left,
+          top: r.top,
+          width: r.right - r.left,
+          height: r.bottom - r.top
         }
-      }), r = f, i = {
-        left: p.left,
-        top: p.top,
-        right: p.right,
-        bottom: p.bottom
-      }, c = p.top) : (r += f, i && (i.left = Math.min(i.left, p.left), i.top = Math.min(i.top, p.top), i.right = Math.max(i.right, p.right), i.bottom = Math.max(
-        i.bottom,
-        p.bottom
+      }), i = d, r = {
+        left: g.left,
+        top: g.top,
+        right: g.right,
+        bottom: g.bottom
+      }, l = g.top) : (i += d, r && (r.left = Math.min(r.left, g.left), r.top = Math.min(r.top, g.top), r.right = Math.max(r.right, g.right), r.bottom = Math.max(
+        r.bottom,
+        g.bottom
       )));
     }
   }, o = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-  let a = 0;
-  for (const l of o) {
-    const d = document.createRange();
-    d.setStart(s, a), d.setEnd(s, a + l.length);
-    const h = d.getClientRects();
+  let c = 0;
+  for (const a of o) {
+    const f = document.createRange();
+    f.setStart(s, c), f.setEnd(s, c + a.length);
+    const h = f.getClientRects();
     if (h.length > 1)
-      n(l, a);
+      n(a, c);
     else {
-      const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
-      if (f.width === 0 && f.height === 0) {
-        r += l, a += l.length;
+      const d = h.length === 1 ? h[0] : f.getBoundingClientRect();
+      if (d.width === 0 && d.height === 0) {
+        i += a, c += a.length;
         continue;
       }
-      c === -1 || Math.abs(f.top - c) > f.height / 2 ? (r && i && t.push({
-        text: r,
+      l === -1 || Math.abs(d.top - l) > d.height / 2 ? (i && r && t.push({
+        text: i,
         rect: {
-          left: i.left,
-          top: i.top,
-          width: i.right - i.left,
-          height: i.bottom - i.top
+          left: r.left,
+          top: r.top,
+          width: r.right - r.left,
+          height: r.bottom - r.top
         }
-      }), r = l, i = {
-        left: f.left,
-        top: f.top,
-        right: f.right,
-        bottom: f.bottom
-      }, c = 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
+      }), i = a, r = {
+        left: d.left,
+        top: d.top,
+        right: d.right,
+        bottom: d.bottom
+      }, l = d.top) : (i += a, r && (r.left = Math.min(r.left, d.left), r.top = Math.min(r.top, d.top), r.right = Math.max(r.right, d.right), r.bottom = Math.max(
+        r.bottom,
+        d.bottom
       )));
     }
-    a += l.length;
+    c += a.length;
   }
-  return r && i && t.push({
-    text: r,
+  return i && r && t.push({
+    text: i,
     rect: {
-      left: i.left,
-      top: i.top,
-      width: i.right - i.left,
-      height: i.bottom - i.top
+      left: r.left,
+      top: r.top,
+      width: r.right - r.left,
+      height: r.bottom - r.top
     }
   }), t.filter(
-    (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
+    (a) => a.text.trim().length > 0 && a.rect.width > 0 && a.rect.height > 0
   );
 }
-function De(s) {
+function ke(s) {
   const e = parseFloat(s.fontSize);
   let t = parseFloat(s.lineHeight);
   isNaN(t) && (t = e * 1.2);
-  let r = parseFloat(s.letterSpacing);
-  return isNaN(r) && (r = 0), {
+  let i = parseFloat(s.letterSpacing);
+  return isNaN(i) && (i = 0), {
     font: `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,
     fontSize: s.fontSize,
     color: s.color,
@@ -1410,319 +1444,322 @@ function De(s) {
     textBaseline: "alphabetic",
     direction: s.direction || "inherit",
     lineHeight: t,
-    letterSpacing: r
+    letterSpacing: i
   };
 }
-function Oe(s, e = re | he | Pe | we | fe, t, r = 1, i = 0, c = 2, n, o) {
-  var B, q, K, X, Y, ie, se;
+function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
+  var K, U, V, ie, se, ne, he;
   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 A = m.textContent.replace(/\s+/g, " ");
-    if (A.length === 0)
+    const x = v.textContent.replace(/\s+/g, " ");
+    if (x.length === 0)
       return null;
-    const U = nt(m);
-    if (U.length === 0)
+    const T = at(v);
+    if (T.length === 0)
       return null;
-    const b = m.parentElement, x = b ? window.getComputedStyle(b) : null;
-    if (!x)
+    const F = v.parentElement, D = F ? window.getComputedStyle(F) : null;
+    if (!D)
       return null;
-    const _ = Math.min(...U.map((T) => T.rect.left)), F = Math.min(...U.map((T) => T.rect.top)), Q = Math.max(...U.map((T) => T.rect.left + T.rect.width)), I = Math.max(...U.map((T) => T.rect.top + T.rect.height));
+    const $ = Math.min(...T.map((R) => R.rect.left)), Y = Math.min(...T.map((R) => R.rect.top)), Q = Math.max(...T.map((R) => R.rect.left + R.rect.width)), I = Math.max(...T.map((R) => R.rect.top + R.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: m,
+      element: v,
       rect: {
-        x: _ + window.scrollX,
-        y: F + window.scrollY,
-        width: Q - _,
-        height: I - F
+        x: $ + window.scrollX,
+        y: Y + window.scrollY,
+        width: Q - $,
+        height: I - Y
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: b && b.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(x.opacity),
-        zIndex: (isNaN(parseInt(x.zIndex)) ? 0 : parseInt(x.zIndex)) + i,
+        opacity: F && F.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(D.opacity),
+        zIndex: (isNaN(parseInt(D.zIndex)) ? 0 : parseInt(D.zIndex)) + r,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: A,
-      textLines: U.map((T) => ({
-        text: T.text.trim(),
+      textContent: x,
+      textLines: T.map((R) => ({
+        text: R.text.trim(),
         rect: {
-          x: T.rect.left + window.scrollX,
-          y: T.rect.top + window.scrollY,
-          width: T.rect.width,
-          height: T.rect.height
+          x: R.rect.left + window.scrollX,
+          y: R.rect.top + window.scrollY,
+          width: R.rect.width,
+          height: R.rect.height
         }
       })),
-      textStyles: De(x),
+      textStyles: ke(D),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
-      captureLayer: r,
-      isFixed: x.position === "fixed",
+      captureLayer: i,
+      isFixed: D.position === "fixed",
       nativeLayer: n,
       nativeStyles: o ? te(te({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: b && b.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(x.opacity),
-        zIndex: (isNaN(parseInt(x.zIndex)) ? 0 : parseInt(x.zIndex)) + i,
+        opacity: F && F.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(D.opacity),
+        zIndex: (isNaN(parseInt(D.zIndex)) ? 0 : parseInt(D.zIndex)) + r,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, De(x)), o) : void 0,
+      }, ke(D)), o) : void 0,
       nativeRect: o ? {
-        x: _ + window.scrollX,
-        y: F + window.scrollY,
-        width: Q - _,
-        height: I - F
+        x: $ + window.scrollX,
+        y: Y + window.scrollY,
+        width: Q - $,
+        height: I - Y
       } : void 0,
+      clipElements: c,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const a = s, l = a.dataset[G.KEY];
-  let d = t, h = t;
-  if (l) {
-    const m = new Set(l.split(/\s+/));
-    for (const A of m)
-      if (!Re.includes(A))
+  const a = s, f = a.dataset[H.KEY];
+  let h = t, d = t;
+  if (f) {
+    const v = new Set(f.split(/\s+/));
+    for (const x of v)
+      if (!Me.includes(x))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${A}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(G.VALUES.END))
+    if (v.has(H.VALUES.END))
       return null;
-    if (m.has(G.VALUES.INCLUDE_TREE) && m.has(G.VALUES.EXCLUDE_TREE))
+    if (v.has(H.VALUES.INCLUDE_TREE) && v.has(H.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(G.VALUES.INCLUDE_SELF) && m.has(G.VALUES.EXCLUDE_SELF))
+    if (v.has(H.VALUES.INCLUDE_SELF) && v.has(H.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(G.VALUES.INCLUDE_TREE) ? d = d | $ : m.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~$), h = d, m.has(G.VALUES.INCLUDE_SELF) ? h = h | $ : m.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~$);
+    v.has(H.VALUES.INCLUDE_TREE) ? h = h | G : v.has(H.VALUES.EXCLUDE_TREE) && (h = h & ~G), d = h, v.has(H.VALUES.INCLUDE_SELF) ? d = d | G : v.has(H.VALUES.EXCLUDE_SELF) && (d = d & ~G);
   }
-  const f = a.dataset[j.KEY];
-  if (f) {
-    const m = new Set(f.split(/\s+/));
-    for (const A of m)
-      if (!Re.includes(A))
+  const p = a.dataset[q.KEY];
+  if (p) {
+    const v = new Set(p.split(/\s+/));
+    for (const x of v)
+      if (!Me.includes(x))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${A}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(j.VALUES.END))
+    if (v.has(q.VALUES.END))
       return null;
-    if (m.has(j.VALUES.INCLUDE_TREE) && m.has(j.VALUES.EXCLUDE_TREE))
+    if (v.has(q.VALUES.INCLUDE_TREE) && v.has(q.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(j.VALUES.INCLUDE_SELF) && m.has(j.VALUES.EXCLUDE_SELF))
+    if (v.has(q.VALUES.INCLUDE_SELF) && v.has(q.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(j.VALUES.INCLUDE_TREE) ? d = d | oe : m.has(j.VALUES.EXCLUDE_TREE) && (d = d & ~oe), h = d, m.has(j.VALUES.INCLUDE_SELF) ? h = h | oe : m.has(j.VALUES.EXCLUDE_SELF) && (h = h & ~oe);
+    v.has(q.VALUES.INCLUDE_TREE) ? h = h | ae : v.has(q.VALUES.EXCLUDE_TREE) && (h = h & ~ae), d = h, v.has(q.VALUES.INCLUDE_SELF) ? d = d | ae : v.has(q.VALUES.EXCLUDE_SELF) && (d = d & ~ae);
   }
-  const g = a.dataset[z.KEY];
-  let p = !1, v = o ? te({}, o) : {}, y = n;
+  const g = a.dataset[N.KEY];
+  let M = !1, m = o ? te({}, o) : {}, y = n;
   if (g) {
-    let m = 1;
-    const A = g.indexOf("{"), U = g.lastIndexOf("}");
-    let b = g;
-    if (A !== -1 && U !== -1 && U > A) {
-      b = g.substring(0, A).trim();
-      const I = g.substring(A, U + 1);
+    let v = 1;
+    const x = g.indexOf("{"), T = g.lastIndexOf("}");
+    let F = g;
+    if (x !== -1 && T !== -1 && T > x) {
+      F = g.substring(0, x).trim();
+      const I = g.substring(x, T + 1);
       try {
-        v = new Function("return " + I)();
-      } catch (T) {
+        m = new Function("return " + I)();
+      } catch (R) {
         console.warn(
           `[MirageEngine] Failed to parse travel styles JSON: ${I}`
         );
       }
     }
-    const x = b.split(/\s+/);
-    let _ = !1;
-    const F = x.indexOf(z.VALUES.TRAVELER);
-    if (F !== -1) {
-      p = !0, _ = !0;
-      const I = x[F + 1];
+    const D = F.split(/\s+/);
+    let $ = !1;
+    const Y = D.indexOf(N.VALUES.TRAVELER);
+    if (Y !== -1) {
+      M = !0, $ = !0;
+      const I = D[Y + 1];
       if (I && !isNaN(parseInt(I, 10)))
-        m = parseInt(I, 10);
+        v = parseInt(I, 10);
       else {
-        const T = x.find((ne) => !isNaN(parseInt(ne, 10)));
-        T && (m = parseInt(T, 10));
+        const R = D.find((oe) => !isNaN(parseInt(oe, 10)));
+        R && (v = parseInt(R, 10));
       }
     }
-    const Q = x.indexOf(z.VALUES.NATIVE);
+    const Q = D.indexOf(N.VALUES.NATIVE);
     if (Q !== -1) {
-      const I = x[Q + 1];
+      const I = D[Q + 1];
       if (I && !isNaN(parseInt(I, 10)))
         y = parseInt(I, 10);
-      else if (!p) {
-        const T = x.find((ne) => !isNaN(parseInt(ne, 10)));
-        T && (y = parseInt(T, 10));
+      else if (!M) {
+        const R = D.find((oe) => !isNaN(parseInt(oe, 10)));
+        R && (y = parseInt(R, 10));
       }
     }
-    if (_) {
-      const I = m + 1;
-      if (I < r)
+    if ($) {
+      const I = v + 1;
+      if (I < i)
         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 (${i - 1}).`
         );
-      r = Math.min(I, z.MAX_LAYERS + 1);
+      i = Math.min(I, N.MAX_LAYERS + 1);
     }
   }
-  const C = a.dataset[We.KEY];
-  let k;
-  C && (k = JSON.parse(C));
-  const D = a.getBoundingClientRect(), S = window.getComputedStyle(a);
-  if (D.width === 0 || D.height === 0 || S.display === "none")
+  const E = a.dataset[He.KEY];
+  let A;
+  E && (A = JSON.parse(E));
+  const C = a.getBoundingClientRect(), b = window.getComputedStyle(a);
+  if (C.width === 0 || C.height === 0 || b.display === "none")
     return null;
-  let R = a.getAttribute("data-mid");
-  R || (R = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", R));
-  const E = parseInt(S.zIndex), V = (isNaN(E) ? 0 : E) + i;
-  let N;
+  let S = a.getAttribute("data-mid");
+  S || (S = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", S));
+  const z = parseInt(b.zIndex), X = (isNaN(z) ? 0 : z) + r;
+  let B;
   if (a.tagName === "IMG")
-    N = a.src;
+    B = a.src;
   else if (a.tagName.toLowerCase() === "svg") {
-    const m = a.cloneNode(!0), A = v == null ? void 0 : v.color, U = v == null ? void 0 : v.fill, b = v == null ? void 0 : v.stroke, x = v == null ? void 0 : v.opacity, _ = (T, ne) => {
-      const H = window.getComputedStyle(T), ce = ne, Fe = H.fill === H.color, _e = H.stroke === H.color, ge = U || (Fe ? A : void 0) || H.fill;
-      ge && ge !== "none" && (ce.style.fill = ge);
-      const pe = b || (_e ? A : void 0) || H.stroke;
-      pe && pe !== "none" && (ce.style.stroke = pe), H.strokeWidth && H.strokeWidth !== "0px" && (ce.style.strokeWidth = H.strokeWidth);
-      const be = A || H.color;
-      be && (ce.style.color = be);
-      const me = x || H.opacity;
-      me && me !== "1" && (ce.style.opacity = me);
-      for (let de = 0; de < T.children.length; de++)
-        _(T.children[de], ne.children[de]);
+    const v = a.cloneNode(!0), x = m == null ? void 0 : m.color, T = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, D = m == null ? void 0 : m.opacity, $ = (R, oe) => {
+      const W = window.getComputedStyle(R), de = oe, ze = W.fill === W.color, Ne = W.stroke === W.color, me = T || (ze ? x : void 0) || W.fill;
+      me && me !== "none" && (de.style.fill = me);
+      const ve = F || (Ne ? x : void 0) || W.stroke;
+      ve && ve !== "none" && (de.style.stroke = ve), W.strokeWidth && W.strokeWidth !== "0px" && (de.style.strokeWidth = W.strokeWidth);
+      const Se = x || W.color;
+      Se && (de.style.color = Se);
+      const we = D || W.opacity;
+      we && we !== "1" && (de.style.opacity = we);
+      for (let fe = 0; fe < R.children.length; fe++)
+        $(R.children[fe], oe.children[fe]);
     };
-    _(a, m);
-    const F = a.getBoundingClientRect(), Q = window.devicePixelRatio * c;
-    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${F.width} ${F.height}`), m.setAttribute("width", (F.width * Q).toString()), m.setAttribute("height", (F.height * Q).toString());
-    let I = new XMLSerializer().serializeToString(m);
+    $(a, v);
+    const Y = a.getBoundingClientRect(), Q = window.devicePixelRatio * l;
+    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${Y.width} ${Y.height}`), v.setAttribute("width", (Y.width * Q).toString()), v.setAttribute("height", (Y.height * Q).toString());
+    let I = new XMLSerializer().serializeToString(v);
     I.includes("xmlns=") || (I = I.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), N = `data:image/svg+xml;utf8,${encodeURIComponent(I)}`;
-  } else if (S.backgroundImage && S.backgroundImage !== "none") {
-    const m = S.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    m && (N = m[1]);
-  }
-  const L = {
-    backgroundColor: S.backgroundColor,
-    backgroundImage: S.backgroundImage,
-    opacity: a.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(S.opacity),
-    zIndex: V,
-    borderRadius: S.borderRadius,
-    borderColor: S.borderColor,
-    borderWidth: S.borderWidth,
-    boxShadow: S.boxShadow,
-    imageSrc: N,
-    isTraveler: p
-  }, P = L;
+    )), B = `data:image/svg+xml;utf8,${encodeURIComponent(I)}`;
+  } else if (b.backgroundImage && b.backgroundImage !== "none") {
+    const v = b.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    v && (B = v[1]);
+  }
+  const k = {
+    backgroundColor: b.backgroundColor,
+    backgroundImage: b.backgroundImage,
+    opacity: a.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(b.opacity),
+    zIndex: X,
+    borderRadius: b.borderRadius,
+    borderColor: b.borderColor,
+    borderWidth: b.borderWidth,
+    boxShadow: b.boxShadow,
+    imageSrc: B,
+    isTraveler: M
+  }, j = k;
   let J, Z;
-  const M = [];
-  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((m) => {
-    const A = m.nodeType === Node.TEXT_NODE ? h : d, U = Oe(
-      m,
+  const L = [], _ = b.overflow === "hidden" ? [...c || [], a] : c;
+  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((v) => {
+    const x = v.nodeType === Node.TEXT_NODE ? d : h, T = Fe(
+      v,
       e,
-      A,
-      r,
-      V,
-      c,
-      m.nodeType === Node.TEXT_NODE ? y : void 0,
-      m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
+      x,
+      i,
+      X,
+      l,
+      v.nodeType === Node.TEXT_NODE ? y : void 0,
+      v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0,
+      _
     );
-    U && M.push(U);
+    T && L.push(T);
   }), {
-    id: R,
+    id: S,
     type: "BOX",
     element: a,
     rect: {
-      x: D.left + window.scrollX,
-      y: D.top + window.scrollY,
-      width: D.width,
-      height: D.height
+      x: C.left + window.scrollX,
+      y: C.top + window.scrollY,
+      width: C.width,
+      height: C.height
     },
-    styles: P,
+    styles: j,
     textContent: J,
     textStyles: Z,
     dirtyMask: e,
-    visibility: h,
-    isTraveler: p,
-    captureLayer: r,
+    visibility: d,
+    isTraveler: M,
+    captureLayer: i,
     nativeLayer: y,
-    nativeStyles: y !== void 0 ? Se(te({}, L), {
-      backgroundColor: (B = v.backgroundColor) != null ? B : L.backgroundColor,
-      backgroundImage: (q = v.backgroundImage) != null ? q : L.backgroundImage,
-      opacity: (K = v.opacity) != null ? K : L.opacity,
-      zIndex: v.zIndex !== void 0 ? v.zIndex + V : L.zIndex,
-      borderRadius: (X = v.borderRadius) != null ? X : L.borderRadius,
-      borderColor: (Y = v.borderColor) != null ? Y : L.borderColor,
-      borderWidth: (ie = v.borderWidth) != null ? ie : L.borderWidth,
-      boxShadow: (se = v.boxShadow) != null ? se : L.boxShadow,
-      isTraveler: L.isTraveler,
-      transform: v.transform
+    nativeStyles: y !== void 0 ? Ce(te({}, k), {
+      backgroundColor: (K = m.backgroundColor) != null ? K : k.backgroundColor,
+      backgroundImage: (U = m.backgroundImage) != null ? U : k.backgroundImage,
+      opacity: (V = m.opacity) != null ? V : k.opacity,
+      zIndex: m.zIndex !== void 0 ? m.zIndex + X : k.zIndex,
+      borderRadius: (ie = m.borderRadius) != null ? ie : k.borderRadius,
+      borderColor: (se = m.borderColor) != null ? se : k.borderColor,
+      borderWidth: (ne = m.borderWidth) != null ? ne : k.borderWidth,
+      boxShadow: (he = m.boxShadow) != null ? he : k.boxShadow,
+      isTraveler: k.isTraveler,
+      transform: m.transform
     }) : void 0,
     nativeRect: y !== void 0 ? {
-      x: v.x !== void 0 ? parseFloat(v.x) : D.left + window.scrollX,
-      y: v.y !== void 0 ? parseFloat(v.y) : D.top + window.scrollY,
-      width: v.width !== void 0 ? parseFloat(v.width) : D.width,
-      height: v.height !== void 0 ? parseFloat(v.height) : D.height
+      x: m.x !== void 0 ? parseFloat(m.x) : C.left + window.scrollX,
+      y: m.y !== void 0 ? parseFloat(m.y) : C.top + window.scrollY,
+      width: m.width !== void 0 ? parseFloat(m.width) : C.width,
+      height: m.height !== void 0 ? parseFloat(m.height) : C.height
     } : void 0,
-    isFixed: S.position === "fixed",
-    children: M,
-    shaderHooks: k
+    isFixed: b.position === "fixed",
+    clipElements: c,
+    children: L,
+    shaderHooks: A
   };
 }
-function ot(s, e) {
-  e.size !== 0 && e.forEach((t, r) => {
-    var c, n, o, a;
-    const i = s.get(r);
-    !i || !i.userData.basePosition || (W.forceUpdateUniforms(i.material, {
+function ct(s, e) {
+  e.size !== 0 && e.forEach((t, i) => {
+    var l, n, o, c;
+    const r = s.get(i);
+    !r || !r.userData.basePosition || (P.forceUpdateUniforms(r.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       boxShadow: t.boxShadow,
       opacity: t.opacity,
-      borderRadius: (n = t.borderRadius) != null ? n : (c = i.userData.baseStyles) == null ? void 0 : c.borderRadius
+      borderRadius: (n = t.borderRadius) != null ? n : (l = r.userData.baseStyles) == null ? void 0 : l.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    }), i.userData.nativeMesh && W.forceUpdateUniforms(i.userData.nativeMesh.material, {
+    }), r.userData.nativeMesh && P.forceUpdateUniforms(r.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       boxShadow: t.boxShadow,
       opacity: t.opacity,
-      borderRadius: (a = t.borderRadius) != null ? a : (o = i.userData.baseStyles) == null ? void 0 : o.borderRadius
+      borderRadius: (c = t.borderRadius) != null ? c : (o = r.userData.baseStyles) == null ? void 0 : o.borderRadius
     }));
   });
 }
-class at {
-  constructor(e, t, r, i) {
+class lt {
+  constructor(e, t, i, r) {
     u(this, "target");
     u(this, "renderer");
     u(this, "registry");
     u(this, "isTravelEnabled", !1);
     u(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = r, this.tracker = new ke(e, {
-      resizeDebounce: i.resizeDebounce
-    }), this.tracker.onLayoutChange.add((c, n) => {
-      document.querySelector(`[${z.NAME}~='${z.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const a = Oe(
+    this.target = e, this.renderer = t, this.registry = i, this.tracker = new Be(e, {
+      resizeDebounce: r.resizeDebounce
+    }), this.tracker.onLayoutChange.add((l, n) => {
+      document.querySelector(`[${N.NAME}~='${N.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const c = Fe(
         this.target,
-        c,
-        $,
+        l,
+        G,
         1,
         0,
         this.renderer.qualityFactor
       );
-      a && this.renderer.syncScene(a, n);
-    }), this.tracker.onStyleChange.add((c) => {
-      ot(this.registry, c);
+      c && this.renderer.syncScene(c, n);
+    }), this.tracker.onStyleChange.add((l) => {
+      ct(this.registry, l);
     }), this.tracker.onRender.add(() => {
       this.renderer.syncMeshesByDOM(), this.renderer.render();
     });
@@ -1734,7 +1771,7 @@ class at {
     this.tracker.stop();
   }
 }
-class lt {
+class ht {
   constructor() {
     u(this, "store");
     this.store = /* @__PURE__ */ new WeakMap();
@@ -1759,14 +1796,14 @@ class lt {
     this.store.delete(e);
   }
 }
-class ct {
+class dt {
   constructor(e, t) {
     u(this, "renderer");
     u(this, "syncer");
     u(this, "target");
     u(this, "registry");
-    var i, c, n;
-    if (this.target = e, this.registry = new lt(), !document.getElementById("mirage-engine-styles")) {
+    var r, l, n;
+    if (this.target = e, this.registry = new ht(), !document.getElementById("mirage-engine-styles")) {
       const o = document.createElement("style");
       o.id = "mirage-engine-styles", o.textContent = `
         [${ee.NAME}="${ee.VALUES.HIDE}"] {
@@ -1774,15 +1811,15 @@ class ct {
         }
       `, document.head.appendChild(o);
     }
-    let r;
-    if (t.mode === "duplicate" ? r = (c = (i = t.container) != null ? i : this.target.parentElement) != null ? c : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
+    let i;
+    if (t.mode === "duplicate" ? i = (l = (r = t.container) != null ? r : this.target.parentElement) != null ? l : void 0 : i = (n = this.target.parentElement) != null ? n : void 0, !i)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new st(
+    this.renderer = new ot(
       this.target,
       t,
-      r,
+      i,
       this.registry
-    ), this.renderer.mount(), this.syncer = new at(this.target, this.renderer, this.registry, t);
+    ), this.renderer.mount(), this.syncer = new lt(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();
@@ -1814,18 +1851,18 @@ class ct {
       ArrowUp: !1,
       ArrowDown: !1
     };
-    window.addEventListener("keydown", (c) => {
-      t[c.key] !== void 0 && (t[c.key] = !0);
-    }), window.addEventListener("keyup", (c) => {
-      t[c.key] !== void 0 && (t[c.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);
+    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);
     };
-    i();
+    r();
   }
 }
-class ht {
+class ut {
   constructor(e = {}) {
     u(this, "frontSelector");
     u(this, "midLayerElement");
@@ -1834,7 +1871,7 @@ class ht {
     u(this, "midLayer", null);
     u(this, "frontLayer", null);
     u(this, "tracker", null);
-    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new ke(document.body, e.trackerConfig || { resizeDebounce: !0 });
+    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new Be(document.body, e.trackerConfig || { resizeDebounce: !0 });
   }
   init() {
     var e;
@@ -1864,48 +1901,48 @@ class ht {
     const e = document.querySelectorAll(this.frontSelector);
     this.frontLayer && e.forEach((t) => {
       var n;
-      const r = t.getBoundingClientRect(), i = window.getComputedStyle(t), c = document.createElement("div");
-      c.className = "sand-placeholder", Object.assign(c.style, {
-        display: i.display === "inline" ? "inline-block" : i.display,
-        width: `${r.width}px`,
-        height: `${r.height}px`,
+      const i = t.getBoundingClientRect(), r = window.getComputedStyle(t), l = document.createElement("div");
+      l.className = "sand-placeholder", Object.assign(l.style, {
+        display: r.display === "inline" ? "inline-block" : r.display,
+        width: `${i.width}px`,
+        height: `${i.height}px`,
         boxSizing: "border-box",
-        marginTop: i.marginTop,
-        marginBottom: i.marginBottom,
-        marginLeft: i.marginLeft,
-        marginRight: i.marginRight,
+        marginTop: r.marginTop,
+        marginBottom: r.marginBottom,
+        marginLeft: r.marginLeft,
+        marginRight: r.marginRight,
         visibility: "hidden",
         pointerEvents: "none"
-      }), (n = t.parentNode) == null || n.insertBefore(c, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
+      }), (n = t.parentNode) == null || n.insertBefore(l, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
         position: "fixed",
         margin: "0",
         boxSizing: "border-box",
-        width: `${r.width}px`,
-        height: `${r.height}px`,
+        width: `${i.width}px`,
+        height: `${i.height}px`,
         pointerEvents: "auto"
-      }), this.items.push({ placeholder: c, original: t });
+      }), this.items.push({ placeholder: l, original: t });
     });
   }
   setupHooks() {
     this.tracker && this.tracker.onBeforeRender.add(() => {
       const e = this.items.map(({ placeholder: t }) => t.getBoundingClientRect());
-      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`;
+      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`;
       });
     });
   }
 }
-class ut {
+class gt {
   constructor(e, t) {
     u(this, "_engine");
     u(this, "_sandwich");
     if (!e)
       throw new Error("[Mirage] Target element is required.");
-    if (this._engine = new ct(e, t), t.sandwich !== !1) {
-      const r = typeof t.sandwich == "object" ? t.sandwich : {};
-      this._sandwich = new ht({
-        frontSelector: r.frontSelector || `[${Te.NAME}='${Te.VALUES.FRONT}']`
+    if (this._engine = new dt(e, t), t.sandwich !== !1) {
+      const i = typeof t.sandwich == "object" ? t.sandwich : {};
+      this._sandwich = new ut({
+        frontSelector: i.frontSelector || `[${Le.NAME}='${Le.VALUES.FRONT}']`
       }), this._sandwich.useTracker(this._engine.getTracker());
     }
   }
@@ -1932,5 +1969,5 @@ class ut {
   }
 }
 export {
-  ut as Mirage
+  gt as Mirage
 };