@mirage-engine/core 0.3.14 → 0.3.16

package/dist/mirage-engine.js

@@ -1,40 +1,40 @@
-var Fe = Object.defineProperty, Be = Object.defineProperties;
-var Oe = Object.getOwnPropertyDescriptors;
-var we = Object.getOwnPropertySymbols;
-var _e = Object.prototype.hasOwnProperty, Ne = Object.prototype.propertyIsEnumerable;
-var me = (s, e, t) => e in s ? Fe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, J = (s, e) => {
+var Oe = Object.defineProperty, Xe = Object.defineProperties;
+var _e = Object.getOwnPropertyDescriptors;
+var xe = Object.getOwnPropertySymbols;
+var Ne = Object.prototype.hasOwnProperty, ze = Object.prototype.propertyIsEnumerable;
+var ve = (r, e, t) => e in r ? Oe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, te = (r, e) => {
   for (var t in e || (e = {}))
-    _e.call(e, t) && me(s, t, e[t]);
-  if (we)
-    for (var t of we(e))
-      Ne.call(e, t) && me(s, t, e[t]);
-  return s;
-}, xe = (s, e) => Be(s, Oe(e));
-var p = (s, e, t) => (me(s, typeof e != "symbol" ? e + "" : e, t), t);
-var Ee = (s, e, t) => new Promise((r, i) => {
-  var c = (o) => {
+    Ne.call(e, t) && ve(r, t, e[t]);
+  if (xe)
+    for (var t of xe(e))
+      ze.call(e, t) && ve(r, t, e[t]);
+  return r;
+}, Se = (r, e) => Xe(r, _e(e));
+var p = (r, e, t) => (ve(r, typeof e != "symbol" ? e + "" : e, t), t);
+var Ee = (r, e, t) => new Promise((i, s) => {
+  var c = (n) => {
     try {
-      a(t.next(o));
+      a(t.next(n));
     } catch (l) {
-      i(l);
+      s(l);
     }
-  }, n = (o) => {
+  }, o = (n) => {
     try {
-      a(t.throw(o));
+      a(t.throw(n));
     } catch (l) {
-      i(l);
+      s(l);
     }
-  }, a = (o) => o.done ? r(o.value) : Promise.resolve(o.value).then(c, n);
-  a((t = t.apply(s, e)).next());
+  }, a = (n) => n.done ? i(n.value) : Promise.resolve(n.value).then(c, o);
+  a((t = t.apply(r, e)).next());
 });
-import * as y from "three";
-const Le = {
+import * as w from "three";
+const De = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
   INCLUDE_SELF: "include-self",
   EXCLUDE_SELF: "exclude-self",
   END: "end"
-}, K = {
+}, ee = {
   NAME: "data-mirage-dom",
   KEY: "mirageDom",
   VALUES: {
@@ -54,50 +54,50 @@ const Le = {
   CAPTURE_8: "8",
   CAPTURE_9: "9",
   CAPTURE_10: "10"
-}, O = {
+}, _ = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
   VALUES: Ce,
   MAX_LAYERS: Object.keys(Ce).length - 1
-}, W = {
+}, G = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
-  VALUES: Le
-}, G = {
+  VALUES: De
+}, j = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
-  VALUES: Le
-}, Xe = {
+  VALUES: De
+}, Ve = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
-}, ot = {
+}, ct = {
   NAME: "data-mirage-sandwich",
   KEY: "mirageSandwich",
   VALUES: {
     FRONT: "front"
   }
-}, de = 0, Q = 1, le = 2, ze = 4, ue = 8, ve = 16;
-function Ve(s) {
-  const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+}, ue = 0, re = 1, he = 2, Ye = 4, fe = 8, we = 16;
+function We(r) {
+  const e = r.match(/rgba?\((\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 };
 }
-function Ye(s) {
+function Pe(r) {
   const e = {};
-  if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
-    const t = Ve(s.backgroundColor);
+  if (r.opacity && (e.opacity = parseFloat(r.opacity)), r.backgroundColor && r.backgroundColor !== "rgba(0, 0, 0, 0)") {
+    const t = We(r.backgroundColor);
     e.backgroundColor = [t.r, t.g, t.b];
   }
-  if (s.backgroundImage ? e.backgroundImage = s.backgroundImage : s.background && (e.backgroundImage = s.background), s.borderRadius && (e.borderRadius = parseFloat(s.borderRadius)), s.width && (e.width = parseFloat(s.width)), s.height && (e.height = parseFloat(s.height)), s.transform && s.transform !== "none") {
-    const t = new DOMMatrix(s.transform);
+  if (r.backgroundImage ? e.backgroundImage = r.backgroundImage : r.background && (e.backgroundImage = r.background), r.boxShadow && (e.boxShadow = r.boxShadow), r.borderRadius && (e.borderRadius = parseFloat(r.borderRadius)), r.width && (e.width = parseFloat(r.width)), r.height && (e.height = parseFloat(r.height)), r.transform && r.transform !== "none") {
+    const t = new DOMMatrix(r.transform);
     e.x = t.m41, e.y = t.m42, e.z = t.m43;
   }
   return e;
 }
-class We {
+class He {
   constructor(e, t) {
     p(this, "target");
     p(this, "observer");
@@ -105,7 +105,7 @@ class We {
     p(this, "pendingStyles", /* @__PURE__ */ new Map());
     p(this, "isDomDirty", !1);
     p(this, "isRunning", !1);
-    p(this, "pendingMask", de);
+    p(this, "pendingMask", ue);
     p(this, "mutationTimer", null);
     p(this, "cssTimer", null);
     p(this, "resizeConfig");
@@ -120,7 +120,7 @@ class We {
     p(this, "onScrollChange", /* @__PURE__ */ new Set());
     p(this, "onRender", /* @__PURE__ */ new Set());
     p(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= Q | le, this.cssTimer = window.setTimeout(() => {
+      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.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
@@ -136,38 +136,38 @@ class We {
     p(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
-      this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = de);
+      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = ue);
       const e = window.scrollX, t = window.scrollY;
-      (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((r) => r(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
-        this.pendingMask |= Q, 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);
+      (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((i) => i(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((i) => i()), requestAnimationFrame(this.renderLoop);
     });
-    var i, c;
+    var s, c;
     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 = (s = t.resizeDebounce) != null ? s : !0;
+    i === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : i === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
       enabled: !0,
-      delay: (c = r.delay) != null ? c : 150,
-      onStart: r.onStart,
-      onEnd: r.onEnd
-    }, this.observer = new MutationObserver((n) => {
-      let a = de;
-      for (const o of n)
-        if (o.type === "childList")
-          a |= ue, o.removedNodes.length > 0 && o.removedNodes.forEach((l) => {
+      delay: (c = i.delay) != null ? c : 150,
+      onStart: i.onStart,
+      onEnd: i.onEnd
+    }, this.observer = new MutationObserver((o) => {
+      let a = ue;
+      for (const n of o)
+        if (n.type === "childList")
+          a |= fe, n.removedNodes.length > 0 && n.removedNodes.forEach((l) => {
             l instanceof HTMLElement && this.pendingDeletions.add(l);
           });
-        else if (o.type === "attributes")
-          if (o.attributeName === "style") {
-            a |= Q | le;
-            const l = o.target, d = Ye(l.style);
+        else if (n.type === "attributes")
+          if (n.attributeName === "style") {
+            a |= re | he;
+            const l = n.target, d = Pe(l.style);
             this.pendingStyles.set(l, d);
           } else
-            o.attributeName === "class" ? a |= Q | le : o.attributeName && o.attributeName.startsWith("data-") && (a |= Q | le, o.attributeName.startsWith("data-mirage") && (a |= ue));
+            n.attributeName === "class" ? a |= re | he : n.attributeName && n.attributeName.startsWith("data-") && (a |= re | he, n.attributeName.startsWith("data-mirage") && (a |= fe));
         else
-          o.type === "characterData" && (a |= ve | Q);
-      if (a !== de) {
-        if (this.pendingMask |= a, a & ue) {
+          n.type === "characterData" && (a |= we | re);
+      if (a !== ue) {
+        if (this.pendingMask |= a, a & fe) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -192,13 +192,13 @@ class We {
     this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
   }
 }
-const H = 1, ie = 2, lt = 0, k = {
+const q = 1, ae = 2, ht = 0, F = {
   BASE: 0,
   SELECTED: 1,
-  getCaptureLayer: (s) => 31 - s,
+  getCaptureLayer: (r) => 31 - r,
   HIDDEN: 31
-}, Se = Object.values(W.VALUES);
-class De {
+}, Te = Object.values(G.VALUES);
+class Ae {
   /**
    * 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,18 +213,18 @@ class De {
   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;
+    const t = document.createElement("div"), i = document.createElement("span"), s = document.createElement("img");
+    t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", i.style.margin = "0", i.style.padding = "0", i.style.border = "none", i.style.lineHeight = "normal", s.width = 1, s.height = 1, s.style.verticalAlign = "baseline", i.appendChild(document.createTextNode("Hidden Text")), t.appendChild(i), t.appendChild(s), document.body.appendChild(t);
+    const c = s.offsetTop - i.offsetTop;
     return document.body.removeChild(t), c;
   }
 }
-p(De, "cache", /* @__PURE__ */ new Map());
-class He extends y.MeshBasicMaterial {
-  constructor(t, r, i, c, n = 2) {
+p(Ae, "cache", /* @__PURE__ */ new Map());
+class Ge extends w.MeshBasicMaterial {
+  constructor(t, i, s, c, o = 2) {
     super({
       transparent: !0,
-      side: y.FrontSide,
+      side: w.FrontSide,
       color: 16777215
     });
     p(this, "canvas");
@@ -232,68 +232,68 @@ class He extends y.MeshBasicMaterial {
     p(this, "qualityFactor");
     if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
       throw new Error("[Mirage] Failed to create canvas context");
-    this.qualityFactor = n, this.map = new y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t, r, i, c);
+    this.qualityFactor = o, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t, i, s, c);
   }
-  wrapText(t, r) {
-    const i = t.split(`
+  wrapText(t, i) {
+    const s = t.split(`
 `), c = [];
-    return i.forEach((n) => {
-      const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+    return s.forEach((o) => {
+      const a = o.match(/[^\s\-]+\-?|\-|\s+/g) || [];
       if (a.length === 0) {
         c.push("");
         return;
       }
-      let o = a[0];
+      let n = a[0];
       for (let l = 1; l < a.length; l++) {
         const d = a[l];
-        this.ctx.measureText(o + d).width <= r + 2 ? o += d : (o && c.push(o), o = d.trimStart());
+        this.ctx.measureText(n + d).width <= i + 2 ? n += d : (n && c.push(n), n = d.trimStart());
       }
-      o && c.push(o);
+      n && c.push(n);
     }), c;
   }
-  updateText(t, r, i, c, n) {
-    n !== void 0 && (this.qualityFactor = n);
-    const o = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * o, d = c * o;
-    this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(o, 0, 0, o, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const h = this.wrapText(t, i), f = r.lineHeight, v = De.getBaseline(r.font);
-    h.forEach((g, m) => {
-      const E = m * f + v;
-      let L = 0;
-      r.textAlign === "center" ? L = i / 2 : r.textAlign === "right" && (L = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, L, E);
+  updateText(t, i, s, c, o) {
+    o !== void 0 && (this.qualityFactor = o);
+    const n = (window.devicePixelRatio || 1) * this.qualityFactor, l = s * n, d = c * n;
+    this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(n, 0, 0, n, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
+    const h = this.wrapText(t, s), u = i.lineHeight, f = Ae.getBaseline(i.font);
+    h.forEach((g, v) => {
+      const b = v * u + f;
+      let C = 0;
+      i.textAlign === "center" ? C = s / 2 : i.textAlign === "right" && (C = s), this.ctx.textAlign = i.textAlign, this.ctx.fillText(g, C, b);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function se(s, e = 0) {
-  if (typeof s == "number")
-    return s;
-  const t = parseFloat(s) || 0;
-  return typeof s == "string" && s.includes("%") ? t / 100 * e : t;
+function ne(r, e = 0) {
+  if (typeof r == "number")
+    return r;
+  const t = parseFloat(r) || 0;
+  return typeof r == "string" && r.includes("%") ? t / 100 * e : t;
 }
-function ce(s) {
-  if (!s || s === "transparent")
-    return { color: new y.Color(16777215), alpha: 0 };
-  const e = s.match(
+function le(r) {
+  if (!r || r === "transparent")
+    return { color: new w.Color(16777215), alpha: 0 };
+  const e = r.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
-    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new y.Color(`rgb(${t}, ${r}, ${i})`), alpha: c };
+    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), s = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new w.Color(`rgb(${t}, ${i}, ${s})`), alpha: c };
   }
-  return { color: new y.Color(s), alpha: 1 };
+  return { color: new w.Color(r), alpha: 1 };
 }
-function Pe(s) {
+function Ie(r) {
   const e = [];
-  let t = "", r = 0;
-  for (let i = 0; i < s.length; i++) {
-    const c = s[i];
+  let t = "", i = 0;
+  for (let s = 0; s < r.length; s++) {
+    const c = r[s];
     if (c === "(")
-      r++;
+      i++;
     else if (c === ")")
-      r--;
-    else if (c === "," && r === 0) {
+      i--;
+    else if (c === "," && i === 0) {
       e.push(t.trim()), t = "";
       continue;
     }
@@ -301,34 +301,34 @@ function Pe(s) {
   }
   return t && e.push(t.trim()), e;
 }
-function Ge(s) {
-  if (!s || typeof s != "string" || !s.includes("linear-gradient"))
+function qe(r) {
+  if (!r || typeof r != "string" || !r.includes("linear-gradient"))
     return null;
-  const e = s.match(/linear-gradient\((.*)\)/);
+  const e = r.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], r = Pe(t);
-  let i = Math.PI, c = 0;
-  const n = r[0].trim();
-  if (n.startsWith("to "))
-    n === "to top" ? i = 0 : n === "to right" ? i = Math.PI / 2 : n === "to bottom" ? i = Math.PI : n === "to left" ? i = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? i = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? i = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? i = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (i = Math.PI * 1.75), c = 1;
-  else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
-    const o = parseFloat(n);
-    n.endsWith("deg") ? i = o * (Math.PI / 180) : n.endsWith("rad") ? i = o : n.endsWith("turn") && (i = o * Math.PI * 2), c = 1;
+  const t = e[1], i = Ie(t);
+  let s = Math.PI, c = 0;
+  const o = i[0].trim();
+  if (o.startsWith("to "))
+    o === "to top" ? s = 0 : o === "to right" ? s = Math.PI / 2 : o === "to bottom" ? s = Math.PI : o === "to left" ? s = Math.PI * 1.5 : o === "to top right" || o === "to right top" ? s = Math.PI / 4 : o === "to bottom right" || o === "to right bottom" ? s = Math.PI * 0.75 : o === "to bottom left" || o === "to left bottom" ? s = Math.PI * 1.25 : (o === "to top left" || o === "to left top") && (s = Math.PI * 1.75), c = 1;
+  else if (o.endsWith("deg") || o.endsWith("rad") || o.endsWith("turn")) {
+    const n = parseFloat(o);
+    o.endsWith("deg") ? s = n * (Math.PI / 180) : o.endsWith("rad") ? s = n : o.endsWith("turn") && (s = n * Math.PI * 2), c = 1;
   }
   const a = [];
-  for (let o = c; o < r.length && !(a.length >= 8); o++) {
-    const l = r[o].trim(), d = l.lastIndexOf(" ");
-    let h = l, f = null;
+  for (let n = c; n < i.length && !(a.length >= 8); n++) {
+    const l = i[n].trim(), d = l.lastIndexOf(" ");
+    let h = l, u = null;
     if (d !== -1 && !l.endsWith(")")) {
       const g = l.substring(d + 1);
-      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, d).trim(), f = g);
+      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, d).trim(), u = g);
     }
-    const v = ce(h);
+    const f = le(h);
     a.push({
-      color: v.color,
-      alpha: v.alpha,
-      rawStop: f,
+      color: f.color,
+      alpha: f.alpha,
+      rawStop: u,
       stop: 0
     });
   }
@@ -336,28 +336,49 @@ function Ge(s) {
     for (let l = 0; l < a.length; l++)
       a[l].rawStop !== null && (a[l].stop = parseFloat(a[l].rawStop) / 100);
     a[0].rawStop === null && (a[0].stop = 0), a.length > 1 && a[a.length - 1].rawStop === null && (a[a.length - 1].stop = 1);
-    let o = 0;
+    let n = 0;
     for (let l = 1; l < a.length; l++)
       if (a[l].rawStop !== null || l === a.length - 1) {
-        const d = l - o;
+        const d = l - n;
         if (d > 1) {
-          const h = a[o].stop, v = (a[l].stop - h) / d;
+          const h = a[n].stop, f = (a[l].stop - h) / d;
           for (let g = 1; g < d; g++)
-            a[o + g].stop = h + v * g;
+            a[n + g].stop = h + f * g;
         }
-        o = l;
+        n = l;
       }
   }
-  return { angle: i, stops: a };
+  return { angle: s, stops: a };
+}
+function $e(r) {
+  if (!r || r === "none")
+    return null;
+  const e = Ie(r);
+  if (e.length === 0)
+    return null;
+  const t = e[0].trim(), i = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, s = t.match(i);
+  let c = "transparent", o = t;
+  if (s && s[1] !== "inset") {
+    const f = s[1];
+    (f.startsWith("rgb") || f.startsWith("#") || f === "black" || f === "white" || f === "transparent") && (c = f, o = t.replace(f, "").trim());
+  }
+  o = o.replace("inset", "").trim();
+  const a = o.split(/\s+/).map((f) => parseFloat(f) || 0), n = a[0] || 0, l = a[1] || 0, d = a[2] || 0, h = a[3] || 0, u = le(c);
+  return { offsetX: n, offsetY: l, blurRadius: d, spreadRadius: h, color: u.color, alpha: u.alpha };
 }
-const qe = `varying vec2 vUv;
+const je = `varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   vScreenPos = gl_Position;
-}`, $e = `varying vec2 vUv;
+}`, Ke = `varying vec2 vUv;
 uniform vec2 uSize;
+uniform vec2 uMeshSize;
+uniform vec4 uShadowColor;
+uniform vec2 uShadowOffset;
+uniform float uShadowBlur;
+uniform float uShadowSpread;
 uniform vec4 uBorderRadius;
 uniform float uBorderWidth;
 uniform vec4 uBgColor;
@@ -413,11 +434,10 @@ float sdVisualBox(vec2 p, vec2 b, float r) {
   return min(max(q.x, q.y), 0.0) + d;
 }
 
-vec4 calculateGradientLayer(vec2 uv) {
+vec4 calculateGradientLayer(vec2 p) {
   if (uGradientCount < 2) return uGradientColors[0];
 
   vec2 dir = vec2(sin(uGradientAngle), cos(uGradientAngle));
-  vec2 p = (uv - 0.5) * uSize;
   float proj = dot(p, dir);
   float L = abs(uSize.x * dir.x) + abs(uSize.y * dir.y);
   float t = clamp((proj / L) + 0.5, 0.0, 1.0);
@@ -436,7 +456,7 @@ vec4 calculateGradientLayer(vec2 uv) {
 }
 
 void main() {
-  vec2 p = (vUv - 0.5) * uSize;
+  vec2 p = (vUv - 0.5) * uMeshSize;
   vec2 halfSize = uSize * 0.5;
 
   // CSS Proportional Border-Radius Clamping
@@ -457,7 +477,7 @@ void main() {
   vec4 baseColor = vec4(uBgColor.rgb, uBgColor.a);
 
   if (uGradientCount > 0) {
-    vec4 gradColor = calculateGradientLayer(vUv);
+    vec4 gradColor = calculateGradientLayer(p);
     baseColor = blendSrcOver(gradColor, baseColor);
   }
 
@@ -484,11 +504,26 @@ void main() {
 
   // final blending (border + background) using blendSrcOver
   vec4 borderLayer = vec4(uBorderColor.rgb, borderAlpha);
-  vec4 finalColor = blendSrcOver(borderLayer, baseColor);
+  vec4 mainColor = blendSrcOver(borderLayer, baseColor);
+  mainColor.a *= bgMask;
+
+  vec4 shadowLayer = vec4(0.0);
+  if (uShadowColor.a > 0.001) {
+    vec2 shadowP = p - vec2(uShadowOffset.x, -uShadowOffset.y);
+    float shadowRadius = max(r + uShadowSpread, 0.0);
+    vec2 shadowHalfSize = max(halfSize + vec2(uShadowSpread), vec2(0.0));
+    float shadowD = sdRoundedBox(shadowP, shadowHalfSize, shadowRadius);
+    float blur = max(uShadowBlur, 1.0);
+    float shadowMask = 1.0 - smoothstep(-blur * 0.5, blur * 0.5, shadowD);
+    shadowLayer = vec4(uShadowColor.rgb, uShadowColor.a * shadowMask);
+  }
+
+  vec4 finalColor = blendSrcOver(mainColor, shadowLayer);
+
   // final color control (Tint, Noise)
   #INJECT_COLOR_MODIFIER
 
-  float finalOpacity = finalColor.a * bgMask * uOpacity;
+  float finalOpacity = finalColor.a * uOpacity;
   if (finalOpacity < 0.001) discard;
 
   gl_FragColor = vec4(finalColor.rgb, finalOpacity);
@@ -496,242 +531,257 @@ void main() {
 
   // #include <colorspace_fragment>
 }
-`, je = `uniform sampler2D uTexture;
+`, Je = `uniform sampler2D uTexture;
 varying vec4 vScreenPos;
 uniform vec2 uTextureRepeat;
-uniform vec2 uTextureOffset;`, Ke = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+uniform vec2 uTextureOffset;`, Ze = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 vec2 resultUv = screenUv;
 
-`, Je = `vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`, Te = {
-  vertexShader: qe,
-  fragmentShader: $e
-}, Re = {
-  declChunk: je,
-  uvChunk: Ke,
-  baseColorChunk: Je
+`, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`, Re = {
+  vertexShader: je,
+  fragmentShader: Ke
+}, Me = {
+  declChunk: Je,
+  uvChunk: Ze,
+  baseColorChunk: Qe
 };
-function Qe(s, e, t, r = null, i) {
-  var C;
-  const c = r !== null || !!s.imageSrc;
-  let n = "";
+function et(r, e, t, i = null, s) {
+  var S;
+  const c = i !== null || !!r.imageSrc;
+  let o = "";
   const a = {};
-  if (i != null && i.uniforms)
-    for (const [S, w] of Object.entries(i.uniforms))
-      typeof w == "number" ? (n += `uniform float ${S};
-`, a[S] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${S};
-`, a[S] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${S};
-`, a[S] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${S};
-`, a[S] = { value: new y.Vector4(...w) }) : (n += `uniform float ${S};
-`, a[S] = { value: w });
-  const o = i !== void 0, l = (c || o ? Re.declChunk : "") + `
-` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-`, h = s.isTraveler ? `vec2 resultUv = screenUv;
-` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, f = c || o ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", v = c || o ? Re.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", m = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", v).replace("#INJECT_COLOR_MODIFIER", g), E = ce(s.backgroundColor), L = ce(s.borderColor), M = {
-    uSize: { value: new y.Vector2(e, t) },
+  if (s != null && s.uniforms)
+    for (const [R, E] of Object.entries(s.uniforms))
+      typeof E == "number" ? (o += `uniform float ${R};
+`, a[R] = { value: E }) : Array.isArray(E) ? E.length === 2 ? (o += `uniform vec2 ${R};
+`, a[R] = { value: new w.Vector2(...E) }) : E.length === 3 ? (o += `uniform vec3 ${R};
+`, a[R] = { value: new w.Vector3(...E) }) : E.length === 4 && (o += `uniform vec4 ${R};
+`, a[R] = { value: new w.Vector4(...E) }) : (o += `uniform float ${R};
+`, a[R] = { value: E });
+  const n = s !== void 0, l = (c || n ? Me.declChunk : "") + `
+` + o, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+`, h = r.isTraveler ? `vec2 resultUv = screenUv;
+` : `vec2 localUv = (p / uSize) + 0.5;
+vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
+`, u = c || n ? d + h + ((s == null ? void 0 : s.uvModifier) || "") : "", f = c || n ? Me.baseColorChunk : "", g = (s == null ? void 0 : s.colorModifier) || "", v = Re.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", g), b = le(r.backgroundColor), C = le(r.borderColor), I = {
+    uSize: { value: new w.Vector2(e, t) },
+    uMeshSize: { value: new w.Vector2(e, t) },
+    uShadowColor: { value: new w.Vector4(0, 0, 0, 0) },
+    uShadowOffset: { value: new w.Vector2(0, 0) },
+    uShadowBlur: { value: 0 },
+    uShadowSpread: { value: 0 },
     uBgColor: {
-      value: new y.Vector4(
-        E.color.r,
-        E.color.g,
-        E.color.b,
-        E.alpha
+      value: new w.Vector4(
+        b.color.r,
+        b.color.g,
+        b.color.b,
+        b.alpha
       )
     },
     uBorderColor: {
-      value: new y.Vector4(
-        L.color.r,
-        L.color.g,
-        L.color.b,
-        L.alpha
+      value: new w.Vector4(
+        C.color.r,
+        C.color.g,
+        C.color.b,
+        C.alpha
       )
     },
-    uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: se(s.borderWidth) },
-    uOpacity: { value: (C = s.opacity) != null ? C : 1 },
+    uBorderRadius: { value: new w.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: ne(r.borderWidth) },
+    uOpacity: { value: (S = r.opacity) != null ? S : 1 },
     uTexture: { value: null },
-    uTextureRepeat: { value: new y.Vector2(1, 1) },
-    uTextureOffset: { value: new y.Vector2(0, 0) },
+    uTextureRepeat: { value: new w.Vector2(1, 1) },
+    uTextureOffset: { value: new w.Vector2(0, 0) },
     uGradientCount: { value: 0 },
     uGradientAngle: { value: 0 },
     uGradientColors: {
-      value: Array.from({ length: 8 }, () => new y.Vector4(0, 0, 0, 0))
+      value: Array.from({ length: 8 }, () => new w.Vector4(0, 0, 0, 0))
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  Ae(M.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (M.uTexture.value = r);
-  const R = new y.ShaderMaterial({
-    uniforms: J(J({}, M), a),
-    vertexShader: Te.vertexShader,
-    fragmentShader: m,
+  ke(I.uBorderRadius.value, r.borderRadius, Math.min(e, t)), c && (I.uTexture.value = i);
+  const D = new w.ShaderMaterial({
+    uniforms: te(te({}, I), a),
+    vertexShader: Re.vertexShader,
+    fragmentShader: v,
     transparent: !0,
-    side: y.FrontSide
+    side: w.FrontSide
     // for better performance
   });
-  return s.backgroundImage && ye(R, { backgroundImage: s.backgroundImage }), R;
+  return r.backgroundImage && be(D, { backgroundImage: r.backgroundImage }), D;
 }
-function Ze(s, e, t, r, i) {
-  const c = se(e.borderWidth);
-  ye(s, {
+function tt(r, e, t, i, s) {
+  const c = ne(e.borderWidth);
+  be(r, {
     width: t,
-    height: r,
+    height: i,
     borderRadius: e.borderRadius,
     borderWidth: c,
     backgroundColor: e.backgroundColor,
     borderColor: e.borderColor,
     opacity: e.opacity,
-    texture: i,
-    backgroundImage: e.backgroundImage
+    texture: s,
+    backgroundImage: e.backgroundImage,
+    boxShadow: e.boxShadow
   });
 }
-function ye(s, e) {
-  var r, i, c;
-  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0) {
-    const n = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(s.uniforms.uSize.value.x, s.uniforms.uSize.value.y);
-    Ae(s.uniforms.uBorderRadius.value, e.borderRadius, n);
+function be(r, e) {
+  var i, s, c;
+  if (e.boxShadow !== void 0) {
+    const o = $e(e.boxShadow);
+    o ? (r.uniforms.uShadowColor.value.set(o.color.r, o.color.g, o.color.b, o.alpha), r.uniforms.uShadowOffset.value.set(o.offsetX, o.offsetY), r.uniforms.uShadowBlur.value = o.blurRadius, r.uniforms.uShadowSpread.value = o.spreadRadius, r.userData.shadowPadding = o.blurRadius + o.spreadRadius + Math.max(Math.abs(o.offsetX), Math.abs(o.offsetY))) : (r.uniforms.uShadowColor.value.w = 0, r.userData.shadowPadding = 0);
   }
-  if (e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
+  if (e.width !== void 0 && e.height !== void 0 && r.uniforms.uSize.value.set(e.width, e.height), r.uniforms.uMeshSize) {
+    const o = r.userData.shadowPadding || 0, a = e.width !== void 0 ? e.width : r.uniforms.uSize.value.x, n = e.height !== void 0 ? e.height : r.uniforms.uSize.value.y;
+    r.uniforms.uMeshSize.value.set(a + o * 2, n + o * 2);
+  }
+  if (e.borderRadius !== void 0) {
+    const o = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(r.uniforms.uSize.value.x, r.uniforms.uSize.value.y);
+    ke(r.uniforms.uBorderRadius.value, e.borderRadius, o);
+  }
+  if (e.borderWidth !== void 0 && (r.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
-      const n = s.uniforms.uBgColor.value.w;
-      s.uniforms.uBgColor.value.set(
+      const o = r.uniforms.uBgColor.value.w;
+      r.uniforms.uBgColor.value.set(
         e.backgroundColor[0],
         e.backgroundColor[1],
         e.backgroundColor[2],
-        n
+        o
       );
     } else if (typeof e.backgroundColor == "string") {
-      const n = ce(e.backgroundColor);
-      s.uniforms.uBgColor.value.set(
-        n.color.r,
-        n.color.g,
-        n.color.b,
-        n.alpha
+      const o = le(e.backgroundColor);
+      r.uniforms.uBgColor.value.set(
+        o.color.r,
+        o.color.g,
+        o.color.b,
+        o.alpha
       );
     } else {
-      const n = s.uniforms.uBgColor.value.w;
-      s.uniforms.uBgColor.value.set(
+      const o = r.uniforms.uBgColor.value.w;
+      r.uniforms.uBgColor.value.set(
         e.backgroundColor.r,
         e.backgroundColor.g,
         e.backgroundColor.b,
-        n
+        o
       );
     }
   if (e.borderColor !== void 0)
     if (Array.isArray(e.borderColor)) {
-      const n = s.uniforms.uBorderColor.value.w;
-      s.uniforms.uBorderColor.value.set(
+      const o = r.uniforms.uBorderColor.value.w;
+      r.uniforms.uBorderColor.value.set(
         e.borderColor[0],
         e.borderColor[1],
         e.borderColor[2],
-        n
+        o
       );
     } else if (typeof e.borderColor == "string") {
-      const n = ce(e.borderColor);
-      s.uniforms.uBorderColor.value.set(
-        n.color.r,
-        n.color.g,
-        n.color.b,
-        n.alpha
+      const o = le(e.borderColor);
+      r.uniforms.uBorderColor.value.set(
+        o.color.r,
+        o.color.g,
+        o.color.b,
+        o.alpha
       );
     } else {
-      const n = s.uniforms.uBorderColor.value.w;
-      s.uniforms.uBorderColor.value.set(
+      const o = r.uniforms.uBorderColor.value.w;
+      r.uniforms.uBorderColor.value.set(
         e.borderColor.r,
         e.borderColor.g,
         e.borderColor.b,
-        n
+        o
       );
     }
-  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;
+  e.opacity !== void 0 && (r.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (r.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (r.uniforms.uBorderColor.value.w = e.borderOpacity), r.uniforms.uTexture && e.texture !== void 0 && (r.uniforms.uTexture.value = e.texture);
+  const t = e.texture !== void 0 ? e.texture : (i = r.uniforms.uTexture) == null ? void 0 : i.value;
   if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
-    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, o = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
-    if (n && a && o && l) {
-      const d = n / a, h = o / l;
+    const o = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, n = (s = e.width) != null ? s : r.uniforms.uSize.value.x, l = (c = e.height) != null ? c : r.uniforms.uSize.value.y;
+    if (o && a && n && l) {
+      const d = o / a, h = n / l;
       if (d > h) {
-        const f = h / d;
-        s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
+        const u = h / d;
+        r.uniforms.uTextureRepeat.value.set(u, 1), r.uniforms.uTextureOffset.value.set((1 - u) / 2, 0);
       } else {
-        const f = d / h;
-        s.uniforms.uTextureRepeat.value.set(1, f), s.uniforms.uTextureOffset.value.set(0, (1 - f) / 2);
+        const u = d / h;
+        r.uniforms.uTextureRepeat.value.set(1, u), r.uniforms.uTextureOffset.value.set(0, (1 - u) / 2);
       }
     }
   } else
-    s.uniforms.uTextureRepeat && (s.uniforms.uTextureRepeat.value.set(1, 1), s.uniforms.uTextureOffset.value.set(0, 0));
+    r.uniforms.uTextureRepeat && (r.uniforms.uTextureRepeat.value.set(1, 1), r.uniforms.uTextureOffset.value.set(0, 0));
   if (e.backgroundImage !== void 0) {
-    const n = Ge(e.backgroundImage);
-    if (n) {
-      s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
+    const o = qe(e.backgroundImage);
+    if (o) {
+      r.uniforms.uGradientCount.value = o.stops.length, r.uniforms.uGradientAngle.value = o.angle;
       for (let a = 0; a < 8; a++)
-        if (a < n.stops.length) {
-          const o = n.stops[a];
-          s.uniforms.uGradientColors.value[a].set(
-            o.color.r,
-            o.color.g,
-            o.color.b,
-            o.alpha
-          ), s.uniforms.uGradientStops.value[a] = o.stop;
+        if (a < o.stops.length) {
+          const n = o.stops[a];
+          r.uniforms.uGradientColors.value[a].set(
+            n.color.r,
+            n.color.g,
+            n.color.b,
+            n.alpha
+          ), r.uniforms.uGradientStops.value[a] = n.stop;
         } else
-          s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
+          r.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), r.uniforms.uGradientStops.value[a] = 1;
     } else
-      s.uniforms.uGradientCount.value = 0;
+      r.uniforms.uGradientCount.value = 0;
   }
-  for (const n of Object.keys(e))
-    n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
+  for (const o of Object.keys(e))
+    o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && o !== "boxShadow" && r.uniforms[o] !== void 0 && (r.uniforms[o].value !== void 0 && r.uniforms[o].value !== null && typeof r.uniforms[o].value.set == "function" ? Array.isArray(e[o]) ? r.uniforms[o].value.set(...e[o]) : e[o] !== void 0 && (e[o].copy ? r.uniforms[o].value.copy(e[o]) : r.uniforms[o].value = e[o]) : r.uniforms[o].value = e[o]);
 }
-function Ae(s, e, t = 0) {
-  var o, l, d, h;
+function ke(r, e, t = 0) {
+  var n, l, d, h;
   if (e == null) {
-    s.set(0, 0, 0, 0);
+    r.set(0, 0, 0, 0);
     return;
   }
   if (typeof e == "number") {
-    s.set(e, e, e, e);
+    r.set(e, e, e, e);
     return;
   }
   if (Array.isArray(e)) {
-    s.set(e[0], e[1], e[2], e[3]);
+    r.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const r = e.split("/")[0].trim().split(/\s+/), i = se(r[0], t), c = se((o = r[1]) != null ? o : r[0], t), n = se((l = r[2]) != null ? l : r[0], t), a = se((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
-  s.set(i, c, n, a);
+  const i = e.split("/")[0].trim().split(/\s+/), s = ne(i[0], t), c = ne((n = i[1]) != null ? n : i[0], t), o = ne((l = i[2]) != null ? l : i[0], t), a = ne((h = (d = i[3]) != null ? d : i[1]) != null ? h : i[0], t);
+  r.set(s, c, o, a);
 }
-const V = {
-  create(s, e, t, r, i, c = 2, n = null, a) {
-    return s === "BOX" ? Qe(
+const W = {
+  create(r, e, t, i, s, c = 2, o = null, a) {
+    return r === "BOX" ? et(
       e,
-      r,
       i,
-      n,
+      s,
+      o,
       a
-    ) : s === "TEXT" ? new He(
+    ) : r === "TEXT" ? new Ge(
       t || "",
       e,
-      r,
       i,
+      s,
       c
-    ) : new y.MeshBasicMaterial({ visible: !1 });
+    ) : new w.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, r, i, c, n = 2, a) {
-    e === "BOX" ? Ze(
-      s,
+  update(r, e, t, i, s, c, o = 2, a) {
+    e === "BOX" ? tt(
+      r,
       t,
-      i,
+      s,
       c,
       a
-    ) : e === "TEXT" && s.updateText(
-      r || "",
+    ) : e === "TEXT" && r.updateText(
+      i || "",
       t,
-      i,
+      s,
       c,
-      n
+      o
     );
   },
-  forceUpdateUniforms(s, e) {
-    ye(s, e);
+  forceUpdateUniforms(r, e) {
+    be(r, e);
   }
 };
-class et {
+class rt {
   constructor(e, t = !0) {
     p(this, "observer");
     p(this, "textures", /* @__PURE__ */ new WeakMap());
@@ -739,10 +789,10 @@ class et {
     p(this, "elementUrls", /* @__PURE__ */ new WeakMap());
     p(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 s of i) {
+          const c = s.target;
+          s.isIntersecting ? this.loadTexture(c) : this.disposeTexture(c);
         }
       },
       { rootMargin: "300px" }
@@ -764,24 +814,24 @@ class et {
       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((c, o) => {
               const a = new Image();
-              a.onload = () => c(a), a.onerror = n, a.src = t;
+              a.onload = () => c(a), a.onerror = o, a.src = t;
             });
           else {
-            const n = yield (yield fetch(t)).blob();
-            r = yield createImageBitmap(n, { imageOrientation: "flipY" });
+            const o = yield (yield fetch(t)).blob();
+            i = yield createImageBitmap(o, { imageOrientation: "flipY" });
           }
           if (this.elementUrls.get(e) !== t) {
-            "close" in r && r.close();
+            "close" in i && i.close();
             return;
           }
-          const i = new y.Texture(r);
-          r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = y.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
-        } catch (r) {
-          console.warn("[MirageEngine] Failed to load texture:", t, r);
+          const s = new w.Texture(i);
+          i instanceof HTMLImageElement || (s.flipY = !1), s.colorSpace = w.LinearSRGBColorSpace, s.needsUpdate = !0, this.textures.set(e, s), this.onUpdate(e, s);
+        } catch (i) {
+          console.warn("[MirageEngine] Failed to load texture:", t, i);
         } finally {
           this.elementUrls.has(e) && this.loadStatus.set(e, !1);
         }
@@ -799,8 +849,8 @@ class et {
     this.observer && this.observer.disconnect();
   }
 }
-class tt {
-  constructor(e, t, r, i) {
+class it {
+  constructor(e, t, i, s) {
     p(this, "canvas");
     p(this, "scene");
     p(this, "camera");
@@ -818,50 +868,50 @@ class tt {
     p(this, "registry");
     p(this, "targetRect");
     p(this, "travelersByLayer", Array.from(
-      { length: O.MAX_LAYERS },
+      { length: _.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
     p(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
     p(this, "fixedMeshes", /* @__PURE__ */ new Set());
-    var a, o, l, d, h;
-    this.target = e, this.mountContainer = r, this.registry = i, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (o = t.canvasSize) != null ? o : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new et((f, v) => {
-      const g = this.registry.get(f);
-      g && g.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(g.material, { texture: v });
-    }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
-    this.camera = new y.OrthographicCamera(
+    var a, n, l, d, h;
+    this.target = e, this.mountContainer = i, this.registry = s, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (n = t.canvasSize) != null ? n : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new rt((u, f) => {
+      const g = this.registry.get(u);
+      g && g.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(g.material, { texture: f });
+    }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new w.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    this.camera = new w.OrthographicCamera(
       c / -2,
       c / 2,
-      n / 2,
-      n / -2,
+      o / 2,
+      o / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new y.WebGLRenderer({
+    ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new w.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0,
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
+    }), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, o), this.applyTextQuality((h = t.quality) != null ? h : "medium");
   }
   get isViewport() {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? k.SELECTED : k.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? F.SELECTED : F.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < O.MAX_LAYERS; e++) {
-      const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, r = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    for (let e = 0; e < _.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 y.WebGLRenderTarget(
+        new w.WebGLRenderTarget(
           t * this.qualityFactor,
-          r * this.qualityFactor,
+          i * this.qualityFactor,
           {
-            minFilter: y.LinearFilter,
-            magFilter: y.LinearFilter,
-            format: y.RGBAFormat,
+            minFilter: w.LinearFilter,
+            magFilter: w.LinearFilter,
+            format: w.RGBAFormat,
             stencilBuffer: !1,
             depthBuffer: !0
           }
@@ -897,15 +947,15 @@ class tt {
     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 && V.forceUpdateUniforms(
-        i.material,
+    const i = this.registry.get(e);
+    i && (i.traverse((s) => {
+      s.isMesh && s.material && W.forceUpdateUniforms(
+        s.material,
         t
       );
-    }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
-      i.isMesh && i.material && V.forceUpdateUniforms(
-        i.material,
+    }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((s) => {
+      s.isMesh && s.material && W.forceUpdateUniforms(
+        s.material,
         t
       );
     }));
@@ -915,22 +965,22 @@ class tt {
   }
   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, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, o = Math.abs(i - n) > 0.1 || Math.abs(c - a) > 0.1, l = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
-    o ? (this.targetRect = r, this.setSize(i, c), this.updateCanvasLayout()) : l ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
+    const i = this.target.getBoundingClientRect(), s = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, o = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, n = Math.abs(s - o) > 0.1 || Math.abs(c - a) > 0.1, l = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
+    n ? (this.targetRect = i, this.setSize(s, c), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
       const h = this.registry.get(d);
       if (h) {
         this.scene.remove(h);
-        for (const f of this.travelersByLayer)
-          f.delete(h);
+        for (const u of this.travelersByLayer)
+          u.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 y.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((v) => v.dispose()) : f.material.dispose()));
+          (u) => u.dispose()
+        ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((u) => {
+          u instanceof w.Mesh && (u.geometry && u.geometry.dispose(), u.material && (Array.isArray(u.material) ? u.material.forEach((f) => f.dispose()) : u.material.dispose()));
         }), this.registry.remove(d), this.textureManager.unregister(d);
       }
     });
@@ -940,11 +990,11 @@ class tt {
   // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
   // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
   reconcileNode(e) {
-    var i, c;
+    var s, c;
     let t = this.registry.get(e.element);
-    const r = JSON.stringify(e.shaderHooks || null);
-    if (t && t.userData.shaderHash !== r && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
-      const n = new y.PlaneGeometry(1, 1), a = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = V.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 o = new w.PlaneGeometry(1, 1), a = e.isTraveler ? (s = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : s.texture : this.textureManager.get(e.element), n = W.create(
         "BOX",
         e.styles,
         "",
@@ -954,17 +1004,17 @@ class tt {
         a,
         e.shaderHooks
       );
-      t = new y.Mesh(n, o), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = o, t.userData.domElement = e.element, t.userData.shaderHash = r;
+      t = new w.Mesh(o, n), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = n, t.userData.domElement = e.element, t.userData.shaderHash = i;
     }
     if ((c = e.nativeStyles) != null && c.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
-      for (let n = 0; n < O.MAX_LAYERS; n++)
-        n === e.captureLayer - 2 ? this.travelersByLayer[n].add(t) : this.travelersByLayer[n].delete(t);
+      for (let o = 0; o < _.MAX_LAYERS; o++)
+        o === e.captureLayer - 2 ? this.travelersByLayer[o].add(t) : this.travelersByLayer[o].delete(t);
     else
-      for (const n of this.travelersByLayer)
-        n.delete(t);
+      for (const o of this.travelersByLayer)
+        o.delete(t);
     if (e.isFixed ? this.fixedMeshes.add(t) : this.fixedMeshes.delete(t), e.styles.imageSrc ? this.textureManager.register(e.element, e.styles.imageSrc) : this.textureManager.unregister(e.element), e.type === "BOX")
-      for (const n of e.children)
-        this.reconcileNode(n);
+      for (const o of e.children)
+        this.reconcileNode(o);
     else
       e.type === "TEXT" && (this.reconcileTextChild(t, e, !1), t.userData.nativeMesh && e.nativeStyles && this.reconcileTextChild(
         t.userData.nativeMesh,
@@ -972,231 +1022,235 @@ class tt {
         !0
       ));
   }
-  reconcileTextChild(e, t, r) {
+  reconcileTextChild(e, t, i) {
     var l;
-    const i = t.textLines || [
+    const s = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], c = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + i.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
-    if (t.dirtyMask & ve || n !== a) {
+    ], c = i ? t.nativeStyles : t.textStyles, o = JSON.stringify(c) + t.textContent + s.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
+    if (t.dirtyMask & we || o !== a) {
       e.children.filter(
         (g) => g.name.startsWith("TEXT_CHILD")
       ).forEach((g) => {
-        var E;
-        const m = g;
-        (E = m.material.map) == null || E.dispose(), m.geometry.dispose(), e.remove(m);
+        var b;
+        const v = g;
+        (b = v.material.map) == null || b.dispose(), v.geometry.dispose(), e.remove(v);
       });
-      const h = t.rect, f = h.x + h.width / 2, v = h.y + h.height / 2;
-      i.forEach((g, m) => {
-        const E = V.create(
+      const h = t.rect, u = h.x + h.width / 2, f = h.y + h.height / 2;
+      s.forEach((g, v) => {
+        const b = W.create(
           "TEXT",
           c,
           g.text,
           g.rect.width,
           g.rect.height,
           this.qualityFactor
-        ), L = new y.PlaneGeometry(1, 1), M = new y.Mesh(L, E);
-        M.name = `TEXT_CHILD_${m}`;
-        const R = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, C = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
-        M.scale.set(R, C, 1);
-        const S = g.rect.x + g.rect.width / 2, w = g.rect.y + g.rect.height / 2, B = S - f, _ = -(w - v);
-        M.position.set(
-          t.rect.width === 0 ? 0 : B / t.rect.width,
-          t.rect.height === 0 ? 0 : _ / t.rect.height,
+        ), C = new w.PlaneGeometry(1, 1), I = new w.Mesh(C, b);
+        I.name = `TEXT_CHILD_${v}`;
+        const D = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, S = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
+        I.scale.set(D, S, 1);
+        const R = g.rect.x + g.rect.width / 2, E = g.rect.y + g.rect.height / 2, V = R - u, N = -(E - f);
+        I.position.set(
+          t.rect.width === 0 ? 0 : V / t.rect.width,
+          t.rect.height === 0 ? 0 : N / t.rect.height,
           5e-3
-        ), e.add(M);
-      }), e.userData.textChildStyleHash = n;
+        ), e.add(I);
+      }), e.userData.textChildStyleHash = o;
     }
     e.children.forEach((d) => {
       if (!d.name.startsWith("TEXT_CHILD"))
         return;
       const h = d;
-      if (r && t.nativeLayer !== void 0)
-        h.layers.set(k.HIDDEN), t.visibility & H && h.layers.enable(k.getCaptureLayer(t.nativeLayer));
+      if (i && t.nativeLayer !== void 0)
+        h.layers.set(F.HIDDEN), t.visibility & q && h.layers.enable(F.getCaptureLayer(t.nativeLayer));
       else {
-        const f = t.visibility & H ? k.BASE : k.HIDDEN;
-        if (h.layers.set(f), t.visibility & ie && h.layers.enable(k.SELECTED), t.visibility & H)
-          if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
-            for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
-              v !== t.nativeLayer && h.layers.enable(k.getCaptureLayer(v));
+        const u = t.visibility & q ? F.BASE : F.HIDDEN;
+        if (h.layers.set(u), t.visibility & ae && h.layers.enable(F.SELECTED), t.visibility & q)
+          if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
+            for (let f = t.captureLayer; f <= _.MAX_LAYERS + 1; f++)
+              f !== t.nativeLayer && h.layers.enable(F.getCaptureLayer(f));
           else
-            for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
-              h.layers.enable(k.getCaptureLayer(v));
+            for (let f = t.captureLayer; f <= _.MAX_LAYERS + 1; f++)
+              h.layers.enable(F.getCaptureLayer(f));
       }
     });
   }
   updateMeshProperties(e, t) {
-    var R, C, S;
-    const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
-    e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
-      x: r.x,
-      y: r.y,
-      width: r.width,
-      height: r.height
+    var S, R, E, V, N;
+    const { rect: i, styles: s } = t, c = this.renderer.getPixelRatio(), o = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
+    e.material = e.userData.baseMaterial;
+    let n = ((S = e.material.userData) == null ? void 0 : S.shadowPadding) || 0;
+    e.scale.set(i.width + n * 2, i.height + n * 2, 1), e.userData.domRect = {
+      x: i.x,
+      y: i.y,
+      width: i.width,
+      height: i.height
     };
-    const o = 1e-3;
+    const l = 1e-3;
     this.renderOrder++;
-    const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
-    let h, f;
+    const d = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY;
+    let u, f;
     if (this.isViewport)
-      h = r.x - window.innerWidth / 2 + r.width / 2, f = -r.y + window.innerHeight / 2 - r.height / 2;
+      u = i.x - window.innerWidth / 2 + i.width / 2, f = -i.y + window.innerHeight / 2 - i.height / 2;
     else {
-      const w = r.x - l, B = r.y - d;
-      h = w - n / 2 + r.width / 2, f = -B + a / 2 - r.height / 2;
+      const M = i.x - d, P = i.y - h;
+      u = M - o / 2 + i.width / 2, f = -P + a / 2 - i.height / 2;
     }
     e.position.set(
-      h,
+      u,
       f,
-      i.zIndex + this.renderOrder * o
+      s.zIndex + this.renderOrder * l
     );
-    const v = r.x, g = r.y;
-    e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: v, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
-    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(m);
-    let L = 0, M = 0;
-    if (E.transform && E.transform !== "none") {
-      const w = new DOMMatrix(E.transform);
-      L = w.m41, M = w.m42;
+    const g = i.x, v = i.y;
+    e.userData.basePosition = { x: u, y: f }, e.userData.originalBasePosition = { x: u, y: f }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: g, y: v }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const b = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, C = window.getComputedStyle(b);
+    let I = 0, D = 0;
+    if (C.transform && C.transform !== "none") {
+      const M = new DOMMatrix(C.transform);
+      I = M.m41, D = M.m42;
     }
-    if (e.userData.baseTransform = { x: L, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, V.update(
+    if (e.userData.baseTransform = { x: I, y: D }, delete e.userData.originRatioX, delete e.userData.originRatioY, W.update(
       e.userData.baseMaterial,
       "BOX",
-      i,
+      s,
       "",
-      r.width,
-      r.height,
+      i.width,
+      i.height,
       this.qualityFactor,
       t.isTraveler ? (R = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : R.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const N = V.create(
+        const z = W.create(
           "BOX",
           t.nativeStyles,
           "",
           t.nativeRect.width,
           t.nativeRect.height,
           this.qualityFactor,
-          t.isTraveler ? (C = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : C.texture : this.textureManager.get(t.element),
+          t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), X = new y.Mesh(e.geometry, N);
-        t.type === "TEXT" && (X.name = "BG_MESH"), this.scene.add(X), e.userData.nativeMesh = X;
+        ), Y = new w.Mesh(e.geometry, z);
+        t.type === "TEXT" && (Y.name = "BG_MESH"), this.scene.add(Y), e.userData.nativeMesh = Y;
       }
-      const w = e.userData.nativeMesh;
-      let B, _;
+      const M = e.userData.nativeMesh;
+      let P, J;
       if (this.isViewport)
-        B = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, _ = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        P = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, J = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const N = t.nativeRect.x - l, X = t.nativeRect.y - d;
-        B = N - n / 2 + t.nativeRect.width / 2, _ = -X + a / 2 - t.nativeRect.height / 2;
+        const z = t.nativeRect.x - d, Y = t.nativeRect.y - h;
+        P = z - o / 2 + t.nativeRect.width / 2, J = -Y + a / 2 - t.nativeRect.height / 2;
       }
-      let b = t.nativeRect.width, U = t.nativeRect.height, q = B, $ = _;
+      let Z = t.nativeRect.width, L = t.nativeRect.height, B = P, $ = J;
       if (t.nativeStyles.transform) {
-        const N = t.nativeStyles.transform, X = N.match(/scale\(([\d.]+%?)\)/);
-        if (X) {
-          let u = parseFloat(X[1]);
-          X[1].includes("%") && (u /= 100), b *= u, U *= u;
+        const z = t.nativeStyles.transform, Y = z.match(/scale\(([\d.]+%?)\)/);
+        if (Y) {
+          let y = parseFloat(Y[1]);
+          Y[1].includes("%") && (y /= 100), Z *= y, L *= y;
         }
-        const Z = N.match(/scaleX\(([\d.]+%?)\)/);
-        if (Z) {
-          let u = parseFloat(Z[1]);
-          Z[1].includes("%") && (u /= 100), b *= u;
+        const ie = z.match(/scaleX\(([\d.]+%?)\)/);
+        if (ie) {
+          let y = parseFloat(ie[1]);
+          ie[1].includes("%") && (y /= 100), Z *= y;
         }
-        const ee = N.match(/scaleY\(([\d.]+%?)\)/);
-        if (ee) {
-          let u = parseFloat(ee[1]);
-          ee[1].includes("%") && (u /= 100), U *= u;
+        const se = z.match(/scaleY\(([\d.]+%?)\)/);
+        if (se) {
+          let y = parseFloat(se[1]);
+          se[1].includes("%") && (y /= 100), L *= y;
         }
-        const te = N.match(/translate\(([^,]+),\s*([^)]+)\)/);
-        if (te) {
-          const u = te[1].trim(), x = te[2].trim();
-          let A = parseFloat(u);
-          u.includes("%") && (A = A / 100 * t.nativeRect.width);
-          let F = parseFloat(x);
-          x.includes("%") && (F = F / 100 * t.nativeRect.height), q += A, $ -= F;
+        const m = z.match(/translate\(([^,]+),\s*([^)]+)\)/);
+        if (m) {
+          const y = m[1].trim(), x = m[2].trim();
+          let X = parseFloat(y);
+          y.includes("%") && (X = X / 100 * t.nativeRect.width);
+          let O = parseFloat(x);
+          x.includes("%") && (O = O / 100 * t.nativeRect.height), B += X, $ -= O;
         }
-        const ne = N.match(/translateX\(([^)]+)\)/);
-        if (ne) {
-          const u = ne[1].trim();
-          let x = parseFloat(u);
-          u.includes("%") && (x = x / 100 * t.nativeRect.width), q += x;
+        const A = z.match(/translateX\(([^)]+)\)/);
+        if (A) {
+          const y = A[1].trim();
+          let x = parseFloat(y);
+          y.includes("%") && (x = x / 100 * t.nativeRect.width), B += x;
         }
-        const ae = N.match(/translateY\(([^)]+)\)/);
-        if (ae) {
-          const u = ae[1].trim();
-          let x = parseFloat(u);
-          u.includes("%") && (x = x / 100 * t.nativeRect.height), $ -= x;
+        const U = z.match(/translateY\(([^)]+)\)/);
+        if (U) {
+          const y = U[1].trim();
+          let x = parseFloat(y);
+          y.includes("%") && (x = x / 100 * t.nativeRect.height), $ -= x;
         }
       }
-      w.scale.set(b, U, 1), w.position.set(
-        q,
+      let K = ((V = M.material.userData) == null ? void 0 : V.shadowPadding) || 0;
+      M.scale.set(Z + K * 2, L + K * 2, 1), M.position.set(
+        B,
         $,
-        t.nativeStyles.zIndex + this.renderOrder * o
-      ), V.update(
-        w.material,
+        t.nativeStyles.zIndex + this.renderOrder * l
+      ), W.update(
+        M.material,
         "BOX",
         t.nativeStyles,
         "",
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (S = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : S.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (N = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : N.texture : this.textureManager.get(t.element)
       );
     } else
-      e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
+      e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof w.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const r = t.visibility & H ? k.BASE : k.HIDDEN;
-    if (e.layers.set(r), t.visibility & ie && e.layers.enable(k.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
-      const i = e.userData.nativeMesh;
-      if (i.layers.set(k.HIDDEN), t.visibility & H) {
-        i.layers.enable(k.getCaptureLayer(t.nativeLayer));
-        for (let c = t.captureLayer; c <= O.MAX_LAYERS + 1; c++)
-          c !== t.nativeLayer && e.layers.enable(k.getCaptureLayer(c));
+    const i = t.visibility & q ? F.BASE : F.HIDDEN;
+    if (e.layers.set(i), t.visibility & ae && e.layers.enable(F.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+      const s = e.userData.nativeMesh;
+      if (s.layers.set(F.HIDDEN), t.visibility & q) {
+        s.layers.enable(F.getCaptureLayer(t.nativeLayer));
+        for (let c = t.captureLayer; c <= _.MAX_LAYERS + 1; c++)
+          c !== t.nativeLayer && e.layers.enable(F.getCaptureLayer(c));
       }
-    } else if (t.visibility & H)
-      for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
-        e.layers.enable(k.getCaptureLayer(i));
+    } else if (t.visibility & q)
+      for (let s = t.captureLayer; s <= _.MAX_LAYERS + 1; s++)
+        e.layers.enable(F.getCaptureLayer(s));
   }
-  captureRenderTarget(e, t, r) {
-    if (e.size === 0 || !r)
+  captureRenderTarget(e, t, i) {
+    if (e.size === 0 || !i)
       return;
-    const i = new y.Color(), c = this.renderer.getClearAlpha();
-    this.renderer.getClearColor(i), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(r), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
-    const n = new y.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
+    const s = new w.Color(), c = this.renderer.getClearAlpha();
+    this.renderer.getClearColor(s), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(i), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
+    const o = new w.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
     for (const d of e) {
-      n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
-      const h = (n.x + 1) / 2 * a, f = (n.y + 1) / 2 * o;
-      let v = 0, g = 1;
-      typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (v = parseFloat(this.clipArea));
-      const m = d.scale.x * g + 0.5, E = d.scale.y * g + 0.5, L = h - m / 2, M = f - E / 2, R = (L * this.qualityFactor - v) / l, C = (M * this.qualityFactor - v) / l, S = (m * this.qualityFactor + v * 2) / l, w = (E * this.qualityFactor + v * 2) / l;
-      this.renderer.setScissor(R, C, S, w), this.renderer.render(this.scene, this.camera);
+      o.setFromMatrixPosition(d.matrixWorld), o.project(this.camera);
+      const h = (o.x + 1) / 2 * a, u = (o.y + 1) / 2 * n;
+      let f = 0, g = 1;
+      typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (f = parseFloat(this.clipArea));
+      const v = d.scale.x * g + 0.5, b = d.scale.y * g + 0.5, C = h - v / 2, I = u - b / 2, D = (C * this.qualityFactor - f) / l, S = (I * this.qualityFactor - f) / l, R = (v * this.qualityFactor + f * 2) / l, E = (b * this.qualityFactor + f * 2) / l;
+      this.renderer.setScissor(D, S, R, E), this.renderer.render(this.scene, this.camera);
     }
-    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, c);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(s, c);
   }
   render() {
-    for (let e = 0; e < O.MAX_LAYERS; e++) {
+    for (let e = 0; e < _.MAX_LAYERS; e++) {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        k.getCaptureLayer(t),
+        F.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
     this.renderer.render(this.scene, this.camera);
   }
   syncMeshesByDOM() {
-    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), i = this.renderer.domElement.width / r, c = this.renderer.domElement.height / r;
-    this.scene.children.forEach((n) => {
-      const a = n;
+    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, i = this.renderer.getPixelRatio(), s = this.renderer.domElement.width / i, c = this.renderer.domElement.height / i;
+    this.scene.children.forEach((o) => {
+      var h, u;
+      const a = o;
       if (!a.userData || !a.userData.domElement)
         return;
-      const o = a.userData.domElement;
-      if (!o.isConnected)
+      const n = a.userData.domElement;
+      if (!n.isConnected)
         return;
       let l;
-      if (o.nodeType === Node.TEXT_NODE) {
-        const h = document.createRange();
-        h.selectNode(o), l = h.getBoundingClientRect();
+      if (n.nodeType === Node.TEXT_NODE) {
+        const f = document.createRange();
+        f.selectNode(n), l = f.getBoundingClientRect();
       } else
-        l = o.getBoundingClientRect();
+        l = n.getBoundingClientRect();
       const d = a.userData.domRect;
       if (!d || Math.abs(l.x - d.x) > 0.5 || Math.abs(l.y - d.y) > 0.5 || Math.abs(l.width - d.width) > 0.5 || Math.abs(l.height - d.height) > 0.5) {
         a.userData.domRect = {
@@ -1205,195 +1259,198 @@ class tt {
           width: l.width,
           height: l.height
         };
-        let h, f;
+        let f, g;
         if (this.isViewport)
-          h = l.x - window.innerWidth / 2 + l.width / 2, f = -l.y + window.innerHeight / 2 - l.height / 2;
+          f = l.x - window.innerWidth / 2 + l.width / 2, g = -l.y + window.innerHeight / 2 - l.height / 2;
         else {
-          const v = l.x - e, g = l.y - t;
-          h = v - i / 2 + l.width / 2, f = -g + c / 2 - l.height / 2;
+          const b = l.x - e, C = l.y - t;
+          f = b - s / 2 + l.width / 2, g = -C + c / 2 - l.height / 2;
         }
-        if (a.position.setX(h), a.position.setY(f), a.scale.set(l.width, l.height, 1), a.updateMatrixWorld(), a.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(a.material, {
+        a.position.setX(f), a.position.setY(g);
+        let v = ((h = a.material.userData) == null ? void 0 : h.shadowPadding) || 0;
+        if (a.scale.set(l.width + v * 2, l.height + v * 2, 1), a.updateMatrixWorld(), a.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(a.material, {
           width: l.width,
           height: l.height
         }), a.userData.nativeMesh) {
-          const v = a.userData.nativeMesh;
-          let g = l.width, m = l.height, E = h, L = f;
+          const b = a.userData.nativeMesh;
+          let C = l.width, I = l.height, D = f, S = g;
           if (a.userData.nativeTransform) {
-            const M = a.userData.nativeTransform, R = M.match(/scale\(([\d.]+%?)\)/);
-            if (R) {
-              let b = parseFloat(R[1]);
-              R[1].includes("%") && (b /= 100), g *= b, m *= b;
+            const E = a.userData.nativeTransform, V = E.match(/scale\(([\d.]+%?)\)/);
+            if (V) {
+              let L = parseFloat(V[1]);
+              V[1].includes("%") && (L /= 100), C *= L, I *= L;
             }
-            const C = M.match(/scaleX\(([\d.]+%?)\)/);
-            if (C) {
-              let b = parseFloat(C[1]);
-              C[1].includes("%") && (b /= 100), g *= b;
+            const N = E.match(/scaleX\(([\d.]+%?)\)/);
+            if (N) {
+              let L = parseFloat(N[1]);
+              N[1].includes("%") && (L /= 100), C *= L;
             }
-            const S = M.match(/scaleY\(([\d.]+%?)\)/);
-            if (S) {
-              let b = parseFloat(S[1]);
-              S[1].includes("%") && (b /= 100), m *= b;
+            const M = E.match(/scaleY\(([\d.]+%?)\)/);
+            if (M) {
+              let L = parseFloat(M[1]);
+              M[1].includes("%") && (L /= 100), I *= L;
             }
-            const w = M.match(/translate\(([^,]+),\s*([^)]+)\)/);
-            if (w) {
-              const b = w[1].trim(), U = w[2].trim();
-              let q = parseFloat(b);
-              b.includes("%") && (q = q / 100 * l.width);
-              let $ = parseFloat(U);
-              U.includes("%") && ($ = $ / 100 * l.height), E += q, L -= $;
+            const P = E.match(/translate\(([^,]+),\s*([^)]+)\)/);
+            if (P) {
+              const L = P[1].trim(), B = P[2].trim();
+              let $ = parseFloat(L);
+              L.includes("%") && ($ = $ / 100 * l.width);
+              let K = parseFloat(B);
+              B.includes("%") && (K = K / 100 * l.height), D += $, S -= K;
             }
-            const B = M.match(/translateX\(([^)]+)\)/);
-            if (B) {
-              const b = B[1].trim();
-              let U = parseFloat(b);
-              b.includes("%") && (U = U / 100 * l.width), E += U;
+            const J = E.match(/translateX\(([^)]+)\)/);
+            if (J) {
+              const L = J[1].trim();
+              let B = parseFloat(L);
+              L.includes("%") && (B = B / 100 * l.width), D += B;
             }
-            const _ = M.match(/translateY\(([^)]+)\)/);
-            if (_) {
-              const b = _[1].trim();
-              let U = parseFloat(b);
-              b.includes("%") && (U = U / 100 * l.height), L -= U;
+            const Z = E.match(/translateY\(([^)]+)\)/);
+            if (Z) {
+              const L = Z[1].trim();
+              let B = parseFloat(L);
+              L.includes("%") && (B = B / 100 * l.height), S -= B;
             }
           }
-          v.position.setX(E), v.position.setY(L), v.scale.set(g, m, 1), v.updateMatrixWorld(), v.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(v.material, {
-            width: g,
-            height: m
+          let R = ((u = b.material.userData) == null ? void 0 : u.shadowPadding) || 0;
+          b.position.setX(D), b.position.setY(S), b.scale.set(C + R * 2, I + R * 2, 1), b.updateMatrixWorld(), b.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(b.material, {
+            width: C,
+            height: I
           });
         }
       }
     });
   }
 }
-function rt(s) {
-  const e = s.textContent || "", t = [];
-  let r = "", i = null, c = -1;
-  const n = (l, d) => {
+function st(r) {
+  const e = r.textContent || "", t = [];
+  let i = "", s = null, c = -1;
+  const o = (l, d) => {
     for (let h = 0; h < l.length; h++) {
-      const f = l[h], v = document.createRange();
-      v.setStart(s, d + h), v.setEnd(s, d + h + 1);
-      const g = v.getBoundingClientRect();
+      const u = l[h], f = document.createRange();
+      f.setStart(r, d + h), f.setEnd(r, d + h + 1);
+      const g = f.getBoundingClientRect();
       if (g.width === 0 && g.height === 0) {
-        r += f;
+        i += u;
         continue;
       }
-      c === -1 || Math.abs(g.top - c) > g.height / 2 ? (r && i && t.push({
-        text: r,
+      c === -1 || Math.abs(g.top - c) > g.height / 2 ? (i && s && t.push({
+        text: i,
         rect: {
-          left: i.left,
-          top: i.top,
-          width: i.right - i.left,
-          height: i.bottom - i.top
+          left: s.left,
+          top: s.top,
+          width: s.right - s.left,
+          height: s.bottom - s.top
         }
-      }), r = f, i = {
+      }), i = u, s = {
         left: g.left,
         top: g.top,
         right: g.right,
         bottom: g.bottom
-      }, c = g.top) : (r += f, i && (i.left = Math.min(i.left, g.left), i.top = Math.min(i.top, g.top), i.right = Math.max(i.right, g.right), i.bottom = Math.max(
-        i.bottom,
+      }, c = g.top) : (i += u, s && (s.left = Math.min(s.left, g.left), s.top = Math.min(s.top, g.top), s.right = Math.max(s.right, g.right), s.bottom = Math.max(
+        s.bottom,
         g.bottom
       )));
     }
   }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-  let o = 0;
+  let n = 0;
   for (const l of a) {
     const d = document.createRange();
-    d.setStart(s, o), d.setEnd(s, o + l.length);
+    d.setStart(r, n), d.setEnd(r, n + l.length);
     const h = d.getClientRects();
     if (h.length > 1)
-      n(l, o);
+      o(l, n);
     else {
-      const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
-      if (f.width === 0 && f.height === 0) {
-        r += l, o += l.length;
+      const u = h.length === 1 ? h[0] : d.getBoundingClientRect();
+      if (u.width === 0 && u.height === 0) {
+        i += l, n += l.length;
         continue;
       }
-      c === -1 || Math.abs(f.top - c) > f.height / 2 ? (r && i && t.push({
-        text: r,
+      c === -1 || Math.abs(u.top - c) > u.height / 2 ? (i && s && t.push({
+        text: i,
         rect: {
-          left: i.left,
-          top: i.top,
-          width: i.right - i.left,
-          height: i.bottom - i.top
+          left: s.left,
+          top: s.top,
+          width: s.right - s.left,
+          height: s.bottom - s.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 = l, s = {
+        left: u.left,
+        top: u.top,
+        right: u.right,
+        bottom: u.bottom
+      }, c = u.top) : (i += l, s && (s.left = Math.min(s.left, u.left), s.top = Math.min(s.top, u.top), s.right = Math.max(s.right, u.right), s.bottom = Math.max(
+        s.bottom,
+        u.bottom
       )));
     }
-    o += l.length;
+    n += l.length;
   }
-  return r && i && t.push({
-    text: r,
+  return i && s && t.push({
+    text: i,
     rect: {
-      left: i.left,
-      top: i.top,
-      width: i.right - i.left,
-      height: i.bottom - i.top
+      left: s.left,
+      top: s.top,
+      width: s.right - s.left,
+      height: s.bottom - s.top
     }
   }), t.filter(
     (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
   );
 }
-function Me(s) {
-  const e = parseFloat(s.fontSize);
-  let t = parseFloat(s.lineHeight);
+function Le(r) {
+  const e = parseFloat(r.fontSize);
+  let t = parseFloat(r.lineHeight);
   isNaN(t) && (t = e * 1.2);
-  let r = parseFloat(s.letterSpacing);
-  return isNaN(r) && (r = 0), {
-    font: `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,
-    fontSize: s.fontSize,
-    color: s.color,
-    textAlign: s.textAlign || "start",
+  let i = parseFloat(r.letterSpacing);
+  return isNaN(i) && (i = 0), {
+    font: `${r.fontStyle} ${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,
+    fontSize: r.fontSize,
+    color: r.color,
+    textAlign: r.textAlign || "start",
     textBaseline: "alphabetic",
-    direction: s.direction || "inherit",
+    direction: r.direction || "inherit",
     lineHeight: t,
-    letterSpacing: r
+    letterSpacing: i
   };
 }
-function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, a) {
-  var X, Z, ee, te, ne, ae;
-  if (s.nodeType === Node.TEXT_NODE) {
-    const u = s;
-    if (!u.textContent || !u.textContent.trim())
+function Ue(r, e = re | he | Ye | we | fe, t, i = 1, s = 0, c = 2, o, a) {
+  var B, $, K, z, Y, ie, se;
+  if (r.nodeType === Node.TEXT_NODE) {
+    const m = r;
+    if (!m.textContent || !m.textContent.trim())
       return null;
-    const x = u.textContent.replace(/\s+/g, " ");
-    if (x.length === 0)
-      return null;
-    const A = rt(u);
+    const A = m.textContent.replace(/\s+/g, " ");
     if (A.length === 0)
       return null;
-    const F = u.parentElement, I = F ? window.getComputedStyle(F) : null;
-    if (!I)
+    const U = st(m);
+    if (U.length === 0)
+      return null;
+    const y = m.parentElement, x = y ? window.getComputedStyle(y) : null;
+    if (!x)
       return null;
-    const P = Math.min(...A.map((T) => T.rect.left)), z = Math.min(...A.map((T) => T.rect.top)), j = Math.max(...A.map((T) => T.rect.left + T.rect.width)), D = Math.max(...A.map((T) => T.rect.top + T.rect.height));
+    const X = Math.min(...U.map((T) => T.rect.left)), O = Math.min(...U.map((T) => T.rect.top)), Q = Math.max(...U.map((T) => T.rect.left + T.rect.width)), k = Math.max(...U.map((T) => T.rect.top + T.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: u,
+      element: m,
       rect: {
-        x: P + window.scrollX,
-        y: z + window.scrollY,
-        width: j - P,
-        height: D - z
+        x: X + window.scrollX,
+        y: O + window.scrollY,
+        width: Q - X,
+        height: k - O
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(I.opacity),
-        zIndex: (isNaN(parseInt(I.zIndex)) ? 0 : parseInt(I.zIndex)) + i,
+        opacity: y && y.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(x.opacity),
+        zIndex: (isNaN(parseInt(x.zIndex)) ? 0 : parseInt(x.zIndex)) + s,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: x,
-      textLines: A.map((T) => ({
+      textContent: A,
+      textLines: U.map((T) => ({
         text: T.text.trim(),
         rect: {
           x: T.rect.left + window.scrollX,
@@ -1402,266 +1459,270 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, a) {
           height: T.rect.height
         }
       })),
-      textStyles: Me(I),
+      textStyles: Le(x),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
-      captureLayer: r,
-      isFixed: I.position === "fixed",
-      nativeLayer: n,
-      nativeStyles: a ? J(J({
+      captureLayer: i,
+      isFixed: x.position === "fixed",
+      nativeLayer: o,
+      nativeStyles: a ? te(te({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(I.opacity),
-        zIndex: (isNaN(parseInt(I.zIndex)) ? 0 : parseInt(I.zIndex)) + i,
+        opacity: y && y.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(x.opacity),
+        zIndex: (isNaN(parseInt(x.zIndex)) ? 0 : parseInt(x.zIndex)) + s,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, Me(I)), a) : void 0,
+      }, Le(x)), a) : void 0,
       nativeRect: a ? {
-        x: P + window.scrollX,
-        y: z + window.scrollY,
-        width: j - P,
-        height: D - z
+        x: X + window.scrollX,
+        y: O + window.scrollY,
+        width: Q - X,
+        height: k - O
       } : void 0,
       children: []
     };
   }
-  if (s.nodeType !== Node.ELEMENT_NODE)
+  if (r.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const o = s, l = o.dataset[W.KEY];
+  const n = r, l = n.dataset[G.KEY];
   let d = t, h = t;
   if (l) {
-    const u = new Set(l.split(/\s+/));
-    for (const x of u)
-      if (!Se.includes(x))
+    const m = new Set(l.split(/\s+/));
+    for (const A of m)
+      if (!Te.includes(A))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${A}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (u.has(W.VALUES.END))
+    if (m.has(G.VALUES.END))
       return null;
-    if (u.has(W.VALUES.INCLUDE_TREE) && u.has(W.VALUES.EXCLUDE_TREE))
+    if (m.has(G.VALUES.INCLUDE_TREE) && m.has(G.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (u.has(W.VALUES.INCLUDE_SELF) && u.has(W.VALUES.EXCLUDE_SELF))
+    if (m.has(G.VALUES.INCLUDE_SELF) && m.has(G.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    u.has(W.VALUES.INCLUDE_TREE) ? d = d | H : u.has(W.VALUES.EXCLUDE_TREE) && (d = d & ~H), h = d, u.has(W.VALUES.INCLUDE_SELF) ? h = h | H : u.has(W.VALUES.EXCLUDE_SELF) && (h = h & ~H);
+    m.has(G.VALUES.INCLUDE_TREE) ? d = d | q : m.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~q), h = d, m.has(G.VALUES.INCLUDE_SELF) ? h = h | q : m.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~q);
   }
-  const f = o.dataset[G.KEY];
-  if (f) {
-    const u = new Set(f.split(/\s+/));
-    for (const x of u)
-      if (!Se.includes(x))
+  const u = n.dataset[j.KEY];
+  if (u) {
+    const m = new Set(u.split(/\s+/));
+    for (const A of m)
+      if (!Te.includes(A))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${A}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (u.has(G.VALUES.END))
+    if (m.has(j.VALUES.END))
       return null;
-    if (u.has(G.VALUES.INCLUDE_TREE) && u.has(G.VALUES.EXCLUDE_TREE))
+    if (m.has(j.VALUES.INCLUDE_TREE) && m.has(j.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (u.has(G.VALUES.INCLUDE_SELF) && u.has(G.VALUES.EXCLUDE_SELF))
+    if (m.has(j.VALUES.INCLUDE_SELF) && m.has(j.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    u.has(G.VALUES.INCLUDE_TREE) ? d = d | ie : u.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~ie), h = d, u.has(G.VALUES.INCLUDE_SELF) ? h = h | ie : u.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~ie);
-  }
-  const v = o.dataset[O.KEY];
-  let g = !1, m = a ? J({}, a) : {}, E = n;
-  if (v) {
-    let u = 1;
-    const x = v.indexOf("{"), A = v.lastIndexOf("}");
-    let F = v;
-    if (x !== -1 && A !== -1 && A > x) {
-      F = v.substring(0, x).trim();
-      const D = v.substring(x, A + 1);
+    m.has(j.VALUES.INCLUDE_TREE) ? d = d | ae : m.has(j.VALUES.EXCLUDE_TREE) && (d = d & ~ae), h = d, m.has(j.VALUES.INCLUDE_SELF) ? h = h | ae : m.has(j.VALUES.EXCLUDE_SELF) && (h = h & ~ae);
+  }
+  const f = n.dataset[_.KEY];
+  let g = !1, v = a ? te({}, a) : {}, b = o;
+  if (f) {
+    let m = 1;
+    const A = f.indexOf("{"), U = f.lastIndexOf("}");
+    let y = f;
+    if (A !== -1 && U !== -1 && U > A) {
+      y = f.substring(0, A).trim();
+      const k = f.substring(A, U + 1);
       try {
-        m = new Function("return " + D)();
+        v = new Function("return " + k)();
       } catch (T) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${D}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${k}`
         );
       }
     }
-    const I = F.split(/\s+/);
-    let P = !1;
-    const z = I.indexOf(O.VALUES.TRAVELER);
-    if (z !== -1) {
-      g = !0, P = !0;
-      const D = I[z + 1];
-      if (D && !isNaN(parseInt(D, 10)))
-        u = parseInt(D, 10);
+    const x = y.split(/\s+/);
+    let X = !1;
+    const O = x.indexOf(_.VALUES.TRAVELER);
+    if (O !== -1) {
+      g = !0, X = !0;
+      const k = x[O + 1];
+      if (k && !isNaN(parseInt(k, 10)))
+        m = parseInt(k, 10);
       else {
-        const T = I.find((re) => !isNaN(parseInt(re, 10)));
-        T && (u = parseInt(T, 10));
+        const T = x.find((oe) => !isNaN(parseInt(oe, 10)));
+        T && (m = parseInt(T, 10));
       }
     }
-    const j = I.indexOf(O.VALUES.NATIVE);
-    if (j !== -1) {
-      const D = I[j + 1];
-      if (D && !isNaN(parseInt(D, 10)))
-        E = parseInt(D, 10);
+    const Q = x.indexOf(_.VALUES.NATIVE);
+    if (Q !== -1) {
+      const k = x[Q + 1];
+      if (k && !isNaN(parseInt(k, 10)))
+        b = parseInt(k, 10);
       else if (!g) {
-        const T = I.find((re) => !isNaN(parseInt(re, 10)));
-        T && (E = parseInt(T, 10));
+        const T = x.find((oe) => !isNaN(parseInt(oe, 10)));
+        T && (b = parseInt(T, 10));
       }
     }
-    if (P) {
-      const D = u + 1;
-      if (D < r)
+    if (X) {
+      const k = m + 1;
+      if (k < i)
         throw new Error(
-          `[MirageEngine] Traveler layer (${u}) cannot be smaller than inherited capture layer (${r - 1}).`
+          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${i - 1}).`
         );
-      r = Math.min(D, O.MAX_LAYERS + 1);
+      i = Math.min(k, _.MAX_LAYERS + 1);
     }
   }
-  const L = o.dataset[Xe.KEY];
-  let M;
-  L && (M = JSON.parse(L));
-  const R = o.getBoundingClientRect(), C = window.getComputedStyle(o);
-  if (R.width === 0 || R.height === 0 || C.display === "none")
+  const C = n.dataset[Ve.KEY];
+  let I;
+  C && (I = JSON.parse(C));
+  const D = n.getBoundingClientRect(), S = window.getComputedStyle(n);
+  if (D.width === 0 || D.height === 0 || S.display === "none")
     return null;
-  let S = o.getAttribute("data-mid");
-  S || (S = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", S));
-  const w = parseInt(C.zIndex), B = (isNaN(w) ? 0 : w) + i;
-  let _;
-  if (o.tagName === "IMG")
-    _ = o.src;
-  else if (o.tagName.toLowerCase() === "svg") {
-    const u = o.cloneNode(!0), x = m == null ? void 0 : m.color, A = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, I = m == null ? void 0 : m.opacity, P = (T, re) => {
-      const Y = window.getComputedStyle(T), oe = re, ke = Y.fill === Y.color, Ue = Y.stroke === Y.color, fe = A || (ke ? x : void 0) || Y.fill;
-      fe && fe !== "none" && (oe.style.fill = fe);
-      const ge = F || (Ue ? x : void 0) || Y.stroke;
-      ge && ge !== "none" && (oe.style.stroke = ge), Y.strokeWidth && Y.strokeWidth !== "0px" && (oe.style.strokeWidth = Y.strokeWidth);
-      const be = x || Y.color;
-      be && (oe.style.color = be);
-      const pe = I || Y.opacity;
-      pe && pe !== "1" && (oe.style.opacity = pe);
-      for (let he = 0; he < T.children.length; he++)
-        P(T.children[he], re.children[he]);
+  let R = n.getAttribute("data-mid");
+  R || (R = Math.random().toString(36).substring(2, 11), n.setAttribute("data-mid", R));
+  const E = parseInt(S.zIndex), V = (isNaN(E) ? 0 : E) + s;
+  let N;
+  if (n.tagName === "IMG")
+    N = n.src;
+  else if (n.tagName.toLowerCase() === "svg") {
+    const m = n.cloneNode(!0), A = v == null ? void 0 : v.color, U = v == null ? void 0 : v.fill, y = v == null ? void 0 : v.stroke, x = v == null ? void 0 : v.opacity, X = (T, oe) => {
+      const H = window.getComputedStyle(T), ce = oe, Be = H.fill === H.color, Fe = H.stroke === H.color, ge = U || (Be ? A : void 0) || H.fill;
+      ge && ge !== "none" && (ce.style.fill = ge);
+      const pe = y || (Fe ? A : void 0) || H.stroke;
+      pe && pe !== "none" && (ce.style.stroke = pe), H.strokeWidth && H.strokeWidth !== "0px" && (ce.style.strokeWidth = H.strokeWidth);
+      const ye = A || H.color;
+      ye && (ce.style.color = ye);
+      const me = x || H.opacity;
+      me && me !== "1" && (ce.style.opacity = me);
+      for (let de = 0; de < T.children.length; de++)
+        X(T.children[de], oe.children[de]);
     };
-    P(o, u);
-    const z = o.getBoundingClientRect(), j = window.devicePixelRatio * c;
-    u.hasAttribute("viewBox") || u.setAttribute("viewBox", `0 0 ${z.width} ${z.height}`), u.setAttribute("width", (z.width * j).toString()), u.setAttribute("height", (z.height * j).toString());
-    let D = new XMLSerializer().serializeToString(u);
-    D.includes("xmlns=") || (D = D.replace(
+    X(n, m);
+    const O = n.getBoundingClientRect(), Q = window.devicePixelRatio * c;
+    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${O.width} ${O.height}`), m.setAttribute("width", (O.width * Q).toString()), m.setAttribute("height", (O.height * Q).toString());
+    let k = new XMLSerializer().serializeToString(m);
+    k.includes("xmlns=") || (k = k.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), _ = `data:image/svg+xml;utf8,${encodeURIComponent(D)}`;
-  } else if (C.backgroundImage && C.backgroundImage !== "none") {
-    const u = C.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    u && (_ = u[1]);
-  }
-  const b = {
-    backgroundColor: C.backgroundColor,
-    backgroundImage: C.backgroundImage,
-    opacity: o.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(C.opacity),
-    zIndex: B,
-    borderRadius: C.borderRadius,
-    borderColor: C.borderColor,
-    borderWidth: C.borderWidth,
-    imageSrc: _,
+    )), N = `data:image/svg+xml;utf8,${encodeURIComponent(k)}`;
+  } else if (S.backgroundImage && S.backgroundImage !== "none") {
+    const m = S.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    m && (N = m[1]);
+  }
+  const M = {
+    backgroundColor: S.backgroundColor,
+    backgroundImage: S.backgroundImage,
+    opacity: n.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: g
-  }, U = b;
-  let q, $;
-  const N = [];
-  return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((u) => {
-    const x = u.nodeType === Node.TEXT_NODE ? h : d, A = Ie(
-      u,
+  }, P = M;
+  let J, Z;
+  const L = [];
+  return n.tagName.toLowerCase() !== "svg" && Array.from(n.childNodes).forEach((m) => {
+    const A = m.nodeType === Node.TEXT_NODE ? h : d, U = Ue(
+      m,
       e,
-      x,
-      r,
-      B,
+      A,
+      i,
+      V,
       c,
-      u.nodeType === Node.TEXT_NODE ? E : void 0,
-      u.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
+      m.nodeType === Node.TEXT_NODE ? b : void 0,
+      m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
     );
-    A && N.push(A);
+    U && L.push(U);
   }), {
-    id: S,
+    id: R,
     type: "BOX",
-    element: o,
+    element: n,
     rect: {
-      x: R.left + window.scrollX,
-      y: R.top + window.scrollY,
-      width: R.width,
-      height: R.height
+      x: D.left + window.scrollX,
+      y: D.top + window.scrollY,
+      width: D.width,
+      height: D.height
     },
-    styles: U,
-    textContent: q,
-    textStyles: $,
+    styles: P,
+    textContent: J,
+    textStyles: Z,
     dirtyMask: e,
     visibility: h,
     isTraveler: g,
-    captureLayer: r,
-    nativeLayer: E,
-    nativeStyles: E !== void 0 ? xe(J({}, b), {
-      backgroundColor: (X = m.backgroundColor) != null ? X : b.backgroundColor,
-      backgroundImage: (Z = m.backgroundImage) != null ? Z : b.backgroundImage,
-      opacity: (ee = m.opacity) != null ? ee : b.opacity,
-      zIndex: m.zIndex !== void 0 ? m.zIndex + B : b.zIndex,
-      borderRadius: (te = m.borderRadius) != null ? te : b.borderRadius,
-      borderColor: (ne = m.borderColor) != null ? ne : b.borderColor,
-      borderWidth: (ae = m.borderWidth) != null ? ae : b.borderWidth,
-      isTraveler: b.isTraveler,
-      transform: m.transform
+    captureLayer: i,
+    nativeLayer: b,
+    nativeStyles: b !== void 0 ? Se(te({}, M), {
+      backgroundColor: (B = v.backgroundColor) != null ? B : M.backgroundColor,
+      backgroundImage: ($ = v.backgroundImage) != null ? $ : M.backgroundImage,
+      opacity: (K = v.opacity) != null ? K : M.opacity,
+      zIndex: v.zIndex !== void 0 ? v.zIndex + V : M.zIndex,
+      borderRadius: (z = v.borderRadius) != null ? z : M.borderRadius,
+      borderColor: (Y = v.borderColor) != null ? Y : M.borderColor,
+      borderWidth: (ie = v.borderWidth) != null ? ie : M.borderWidth,
+      boxShadow: (se = v.boxShadow) != null ? se : M.boxShadow,
+      isTraveler: M.isTraveler,
+      transform: v.transform
     }) : void 0,
-    nativeRect: E !== void 0 ? {
-      x: m.x !== void 0 ? parseFloat(m.x) : R.left + window.scrollX,
-      y: m.y !== void 0 ? parseFloat(m.y) : R.top + window.scrollY,
-      width: m.width !== void 0 ? parseFloat(m.width) : R.width,
-      height: m.height !== void 0 ? parseFloat(m.height) : R.height
+    nativeRect: b !== 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
     } : void 0,
-    isFixed: C.position === "fixed",
-    children: N,
-    shaderHooks: M
+    isFixed: S.position === "fixed",
+    children: L,
+    shaderHooks: I
   };
 }
-function it(s, e) {
-  e.size !== 0 && e.forEach((t, r) => {
-    var c, n, a, o;
-    const i = s.get(r);
-    !i || !i.userData.basePosition || (V.forceUpdateUniforms(i.material, {
+function ot(r, e) {
+  e.size !== 0 && e.forEach((t, i) => {
+    var c, o, a, n;
+    const s = r.get(i);
+    !s || !s.userData.basePosition || (W.forceUpdateUniforms(s.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
+      boxShadow: t.boxShadow,
       opacity: t.opacity,
-      borderRadius: (n = t.borderRadius) != null ? n : (c = i.userData.baseStyles) == null ? void 0 : c.borderRadius
+      borderRadius: (o = t.borderRadius) != null ? o : (c = s.userData.baseStyles) == null ? void 0 : c.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    }), i.userData.nativeMesh && V.forceUpdateUniforms(i.userData.nativeMesh.material, {
+    }), s.userData.nativeMesh && W.forceUpdateUniforms(s.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
+      boxShadow: t.boxShadow,
       opacity: t.opacity,
-      borderRadius: (o = t.borderRadius) != null ? o : (a = i.userData.baseStyles) == null ? void 0 : a.borderRadius
+      borderRadius: (n = t.borderRadius) != null ? n : (a = s.userData.baseStyles) == null ? void 0 : a.borderRadius
     }));
   });
 }
-class st {
-  constructor(e, t, r, i) {
+class at {
+  constructor(e, t, i, s) {
     p(this, "target");
     p(this, "renderer");
     p(this, "registry");
     p(this, "isTravelEnabled", !1);
     p(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = r, this.tracker = new We(e, {
-      resizeDebounce: i.resizeDebounce
-    }), this.tracker.onLayoutChange.add((c, n) => {
-      document.querySelector(`[${O.NAME}~='${O.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const o = Ie(
+    this.target = e, this.renderer = t, this.registry = i, this.tracker = new He(e, {
+      resizeDebounce: s.resizeDebounce
+    }), this.tracker.onLayoutChange.add((c, o) => {
+      document.querySelector(`[${_.NAME}~='${_.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const n = Ue(
         this.target,
         c,
-        H,
+        q,
         1,
         0,
         this.renderer.qualityFactor
       );
-      o && this.renderer.syncScene(o, n);
+      n && this.renderer.syncScene(n, o);
     }), this.tracker.onStyleChange.add((c) => {
-      it(this.registry, c);
+      ot(this.registry, c);
     }), this.tracker.onRender.add(() => {
       this.renderer.syncMeshesByDOM(), this.renderer.render();
     });
@@ -1698,30 +1759,30 @@ class nt {
     this.store.delete(e);
   }
 }
-class ct {
+class dt {
   constructor(e, t) {
     p(this, "renderer");
     p(this, "syncer");
     p(this, "target");
     p(this, "registry");
-    var i, c, n;
+    var s, c, o;
     if (this.target = e, this.registry = new nt(), !document.getElementById("mirage-engine-styles")) {
       const a = document.createElement("style");
       a.id = "mirage-engine-styles", a.textContent = `
-        [${K.NAME}="${K.VALUES.HIDE}"] {
+        [${ee.NAME}="${ee.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
       `, document.head.appendChild(a);
     }
-    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 = (c = (s = t.container) != null ? s : this.target.parentElement) != null ? c : void 0 : i = (o = this.target.parentElement) != null ? o : void 0, !i)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new tt(
+    this.renderer = new it(
       this.target,
       t,
-      r,
+      i,
       this.registry
-    ), this.renderer.mount(), this.syncer = new st(this.target, this.renderer, this.registry, t);
+    ), this.renderer.mount(), this.syncer = new at(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();
@@ -1758,32 +1819,32 @@ class ct {
     }), window.addEventListener("keyup", (c) => {
       t[c.key] !== void 0 && (t[c.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, s = () => {
+      requestAnimationFrame(s), t.ArrowRight && e.position.setX(e.position.x + i), t.ArrowLeft && e.position.setX(e.position.x - i), t.ArrowUp && e.position.setY(e.position.y + i), t.ArrowDown && e.position.setY(e.position.y - i);
     };
-    i();
+    s();
   }
 }
 export {
-  Se as ALLOWED_FILTERS,
-  K as ATTR_DOM,
-  W as ATTR_FILTER,
-  ot as ATTR_SANDWICH,
-  G as ATTR_SELECT,
-  Xe as ATTR_SHADER,
-  O as ATTR_TRAVEL,
-  ve as DIRTY_CONTENT,
-  de as DIRTY_NONE,
-  Q as DIRTY_RECT,
-  ue as DIRTY_STRUCTURE,
-  le as DIRTY_STYLE,
-  ze as DIRTY_ZINDEX,
-  lt as EXCLUDED,
-  ct as Engine,
-  ie as SELECT_LAYER,
-  k as THREE_LAYERS,
+  Te as ALLOWED_FILTERS,
+  ee as ATTR_DOM,
+  G as ATTR_FILTER,
+  ct as ATTR_SANDWICH,
+  j as ATTR_SELECT,
+  Ve as ATTR_SHADER,
+  _ as ATTR_TRAVEL,
+  we as DIRTY_CONTENT,
+  ue as DIRTY_NONE,
+  re as DIRTY_RECT,
+  fe as DIRTY_STRUCTURE,
+  he as DIRTY_STYLE,
+  Ye as DIRTY_ZINDEX,
+  ht as EXCLUDED,
+  dt as Engine,
+  ae as SELECT_LAYER,
+  F as THREE_LAYERS,
   Ce as TRAVEL_VALUES,
-  We as Tracker,
-  H as USER_LAYER,
-  Ye as extractFromStyle
+  He as Tracker,
+  q as USER_LAYER,
+  Pe as extractFromStyle
 };