mirage-engine 0.3.3 → 0.3.4

package/dist/mirage-engine.js

@@ -1,46 +1,47 @@
-var _e = Object.defineProperty, ze = Object.defineProperties;
-var Xe = Object.getOwnPropertyDescriptors;
-var Ee = Object.getOwnPropertySymbols;
-var Ne = Object.prototype.hasOwnProperty, Ye = Object.prototype.propertyIsEnumerable;
-var ge = (s, e, t) => e in s ? _e(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, G = (s, e) => {
+var _e = Object.defineProperty, Fe = Object.defineProperties;
+var Ne = Object.getOwnPropertyDescriptors;
+var be = Object.getOwnPropertySymbols;
+var ze = Object.prototype.hasOwnProperty, Xe = Object.prototype.propertyIsEnumerable;
+var oe = (s, e, t) => e in s ? _e(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, $ = (s, e) => {
   for (var t in e || (e = {}))
-    Ne.call(e, t) && ge(s, t, e[t]);
-  if (Ee)
-    for (var t of Ee(e))
-      Ye.call(e, t) && ge(s, t, e[t]);
+    ze.call(e, t) && oe(s, t, e[t]);
+  if (be)
+    for (var t of be(e))
+      Xe.call(e, t) && oe(s, t, e[t]);
   return s;
-}, pe = (s, e) => ze(s, Xe(e));
-var d = (s, e, t) => (ge(s, typeof e != "symbol" ? e + "" : e, t), t);
-var Ce = (s, e, t) => new Promise((i, r) => {
-  var o = (a) => {
+}, we = (s, e) => Fe(s, Ne(e));
+var u = (s, e, t) => (oe(s, typeof e != "symbol" ? e + "" : e, t), t);
+var Ee = (s, e, t) => new Promise((i, r) => {
+  var o = (c) => {
     try {
-      c(t.next(a));
+      a(t.next(c));
     } catch (l) {
       r(l);
     }
-  }, n = (a) => {
+  }, n = (c) => {
     try {
-      c(t.throw(a));
+      a(t.throw(c));
     } catch (l) {
       r(l);
     }
-  }, c = (a) => a.done ? i(a.value) : Promise.resolve(a.value).then(o, n);
-  c((t = t.apply(s, e)).next());
+  }, a = (c) => c.done ? i(c.value) : Promise.resolve(c.value).then(o, n);
+  a((t = t.apply(s, e)).next());
 });
 import * as y from "three";
-const Ae = {
+const Re = {
   INCLUDE_TREE: "include-tree",
   EXCLUDE_TREE: "exclude-tree",
   INCLUDE_SELF: "include-self",
   EXCLUDE_SELF: "exclude-self",
   END: "end"
-}, $ = {
+}, H = {
   NAME: "data-mirage-dom",
   KEY: "mirageDom",
   VALUES: {
-    HIDE: "hide"
+    HIDE: "hide",
+    SHOW: "show"
   }
-}, Te = {
+}, xe = {
   TRAVELER: "traveler",
   NATIVE: "native",
   CAPTURE_1: "1",
@@ -48,30 +49,30 @@ const Ae = {
   CAPTURE_3: "3",
   CAPTURE_4: "4",
   CAPTURE_5: "5"
-}, F = {
+}, I = {
   NAME: "data-mirage-travel",
   KEY: "mirageTravel",
-  VALUES: Te,
-  MAX_LAYERS: Object.keys(Te).length - 1
-}, N = {
+  VALUES: xe,
+  MAX_LAYERS: Object.keys(xe).length - 1
+}, F = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
-  VALUES: Ae
+  VALUES: Re
 }, V = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
-  VALUES: Ae
+  VALUES: Re
 }, Ve = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
-}, Se = {
+}, Ce = {
   NAME: "data-mirage-sandwich",
   KEY: "mirageSandwich",
   VALUES: {
     FRONT: "front"
   }
-}, he = 0, q = 1, ne = 2, We = 4, ve = 8, ye = 16;
-function Pe(s) {
+}, te = 0, q = 1, Q = 2, Ye = 4, re = 8, ce = 16;
+function We(s) {
   const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
   return e ? {
     r: parseInt(e[1]) / 255,
@@ -82,7 +83,7 @@ function Pe(s) {
 function He(s) {
   const e = {};
   if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
-    const t = Pe(s.backgroundColor);
+    const t = We(s.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") {
@@ -91,34 +92,34 @@ function He(s) {
   }
   return e;
 }
-class ke {
+class Me {
   constructor(e, t) {
-    d(this, "target");
-    d(this, "observer");
-    d(this, "pendingDeletions", /* @__PURE__ */ new Set());
-    d(this, "pendingStyles", /* @__PURE__ */ new Map());
-    d(this, "isDomDirty", !1);
-    d(this, "isRunning", !1);
-    d(this, "pendingMask", he);
-    d(this, "mutationTimer", null);
-    d(this, "cssTimer", null);
-    d(this, "resizeConfig");
-    d(this, "resizeTimer", null);
-    d(this, "isResizing", !1);
-    d(this, "lastScrollX", 0);
-    d(this, "lastScrollY", 0);
-    d(this, "scrollTimer", null);
-    d(this, "onBeforeRender", /* @__PURE__ */ new Set());
-    d(this, "onLayoutChange", /* @__PURE__ */ new Set());
-    d(this, "onStyleChange", /* @__PURE__ */ new Set());
-    d(this, "onScrollChange", /* @__PURE__ */ new Set());
-    d(this, "onRender", /* @__PURE__ */ new Set());
-    d(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= q | ne, this.cssTimer = window.setTimeout(() => {
+    u(this, "target");
+    u(this, "observer");
+    u(this, "pendingDeletions", /* @__PURE__ */ new Set());
+    u(this, "pendingStyles", /* @__PURE__ */ new Map());
+    u(this, "isDomDirty", !1);
+    u(this, "isRunning", !1);
+    u(this, "pendingMask", te);
+    u(this, "mutationTimer", null);
+    u(this, "cssTimer", null);
+    u(this, "resizeConfig");
+    u(this, "resizeTimer", null);
+    u(this, "isResizing", !1);
+    u(this, "lastScrollX", 0);
+    u(this, "lastScrollY", 0);
+    u(this, "scrollTimer", null);
+    u(this, "onBeforeRender", /* @__PURE__ */ new Set());
+    u(this, "onLayoutChange", /* @__PURE__ */ new Set());
+    u(this, "onStyleChange", /* @__PURE__ */ new Set());
+    u(this, "onScrollChange", /* @__PURE__ */ new Set());
+    u(this, "onRender", /* @__PURE__ */ new Set());
+    u(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= q | Q, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50)));
     });
-    d(this, "onWindowResize", () => {
+    u(this, "onWindowResize", () => {
       if (!this.resizeConfig.enabled) {
         this.isDomDirty = !0;
         return;
@@ -127,10 +128,10 @@ class ke {
         this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
       }, this.resizeConfig.delay);
     });
-    d(this, "renderLoop", () => {
+    u(this, "renderLoop", () => {
       if (!this.isRunning)
         return;
-      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = he);
+      this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = te);
       const e = window.scrollX, t = window.scrollY;
       (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((i) => i(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
         this.pendingMask |= q, this.isDomDirty = !0, this.scrollTimer = null;
@@ -145,23 +146,23 @@ class ke {
       onStart: i.onStart,
       onEnd: i.onEnd
     }, this.observer = new MutationObserver((n) => {
-      let c = he;
-      for (const a of n)
-        if (a.type === "childList")
-          c |= ve, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
+      let a = te;
+      for (const c of n)
+        if (c.type === "childList")
+          a |= re, c.removedNodes.length > 0 && c.removedNodes.forEach((l) => {
             l instanceof HTMLElement && this.pendingDeletions.add(l);
           });
-        else if (a.type === "attributes")
-          if (a.attributeName === "style") {
-            c |= q | ne;
-            const l = a.target, u = He(l.style);
-            this.pendingStyles.set(l, u);
+        else if (c.type === "attributes")
+          if (c.attributeName === "style") {
+            a |= q | Q;
+            const l = c.target, d = He(l.style);
+            this.pendingStyles.set(l, d);
           } else
-            (a.attributeName === "class" || a.attributeName && a.attributeName.startsWith("data-")) && (c |= q | ne);
+            c.attributeName === "class" ? a |= q | Q : c.attributeName && c.attributeName.startsWith("data-") && (a |= q | Q, c.attributeName.startsWith("data-mirage") && (a |= re));
         else
-          a.type === "characterData" && (c |= ye | q);
-      if (c !== he) {
-        if (this.pendingMask |= c, c & ve) {
+          c.type === "characterData" && (a |= ce | q);
+      if (a !== te) {
+        if (this.pendingMask |= a, a & re) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -186,13 +187,13 @@ class ke {
     this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
   }
 }
-const W = 1, j = 2, k = {
+const W = 1, j = 2, R = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Le = Object.values(N.VALUES);
-class Ie {
+}, Te = Object.values(F.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,17 +214,17 @@ class Ie {
     return document.body.removeChild(t), o;
   }
 }
-d(Ie, "cache", /* @__PURE__ */ new Map());
-class Ge extends y.MeshBasicMaterial {
+u(Ae, "cache", /* @__PURE__ */ new Map());
+class Pe extends y.MeshBasicMaterial {
   constructor(t, i, r, o, n = 2) {
     super({
       transparent: !0,
       side: y.FrontSide,
       color: 16777215
     });
-    d(this, "canvas");
-    d(this, "ctx");
-    d(this, "qualityFactor");
+    u(this, "canvas");
+    u(this, "ctx");
+    u(this, "qualityFactor");
     if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
       throw new Error("[Mirage] Failed to create canvas context");
     this.qualityFactor = n, this.map = new y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t, i, r, o);
@@ -232,26 +233,26 @@ class Ge extends y.MeshBasicMaterial {
     const r = t.split(`
 `), o = [];
     return r.forEach((n) => {
-      const c = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-      if (c.length === 0) {
+      const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (a.length === 0) {
         o.push("");
         return;
       }
-      let a = c[0];
-      for (let l = 1; l < c.length; l++) {
-        const u = c[l];
-        this.ctx.measureText(a + u).width <= i + 2 ? a += u : (a && o.push(a), a = u.trimStart());
+      let c = a[0];
+      for (let l = 1; l < a.length; l++) {
+        const d = a[l];
+        this.ctx.measureText(c + d).width <= i + 2 ? c += d : (c && o.push(c), c = d.trimStart());
       }
-      a && o.push(a);
+      c && o.push(c);
     }), o;
   }
   updateText(t, i, r, o, n) {
     n !== void 0 && (this.qualityFactor = n);
-    const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = r * a, u = o * a;
-    this.canvas.width !== l || this.canvas.height !== u ? (this.canvas.width = l, this.canvas.height = u) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(a, 0, 0, a, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const h = this.wrapText(t, r), f = i.lineHeight, v = Ie.getBaseline(i.font);
-    h.forEach((g, p) => {
-      const E = p * f + v;
+    const c = (window.devicePixelRatio || 1) * this.qualityFactor, l = r * c, d = o * c;
+    this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(c, 0, 0, c, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
+    const h = this.wrapText(t, r), f = i.lineHeight, p = Ae.getBaseline(i.font);
+    h.forEach((g, m) => {
+      const E = m * f + p;
       let L = 0;
       i.textAlign === "center" ? L = r / 2 : i.textAlign === "right" && (L = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(g, L, E);
     }), this.map && (this.map.needsUpdate = !0);
@@ -263,7 +264,7 @@ class Ge extends y.MeshBasicMaterial {
 function K(s) {
   return typeof s == "number" ? s : parseFloat(s) || 0;
 }
-function oe(s) {
+function Z(s) {
   if (!s || s === "transparent")
     return { color: new y.Color(16777215), alpha: 0 };
   const e = s.match(
@@ -275,7 +276,7 @@ function oe(s) {
   }
   return { color: new y.Color(s), alpha: 1 };
 }
-function $e(s) {
+function Ge(s) {
   const e = [];
   let t = "", i = 0;
   for (let r = 0; r < s.length; r++) {
@@ -292,62 +293,62 @@ function $e(s) {
   }
   return t && e.push(t.trim()), e;
 }
-function qe(s) {
+function $e(s) {
   if (!s || typeof s != "string" || !s.includes("linear-gradient"))
     return null;
   const e = s.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], i = $e(t);
+  const t = e[1], i = Ge(t);
   let r = Math.PI, o = 0;
   const n = i[0].trim();
   if (n.startsWith("to "))
     n === "to top" ? r = 0 : n === "to right" ? r = Math.PI / 2 : n === "to bottom" ? r = Math.PI : n === "to left" ? r = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? r = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? r = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? r = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (r = Math.PI * 1.75), o = 1;
   else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
-    const a = parseFloat(n);
-    n.endsWith("deg") ? r = a * (Math.PI / 180) : n.endsWith("rad") ? r = a : n.endsWith("turn") && (r = a * Math.PI * 2), o = 1;
+    const c = parseFloat(n);
+    n.endsWith("deg") ? r = c * (Math.PI / 180) : n.endsWith("rad") ? r = c : n.endsWith("turn") && (r = c * Math.PI * 2), o = 1;
   }
-  const c = [];
-  for (let a = o; a < i.length && !(c.length >= 8); a++) {
-    const l = i[a].trim(), u = l.lastIndexOf(" ");
+  const a = [];
+  for (let c = o; c < i.length && !(a.length >= 8); c++) {
+    const l = i[c].trim(), d = l.lastIndexOf(" ");
     let h = l, f = null;
-    if (u !== -1 && !l.endsWith(")")) {
-      const g = l.substring(u + 1);
-      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, u).trim(), f = g);
+    if (d !== -1 && !l.endsWith(")")) {
+      const g = l.substring(d + 1);
+      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, d).trim(), f = g);
     }
-    const v = oe(h);
-    c.push({
-      color: v.color,
-      alpha: v.alpha,
+    const p = Z(h);
+    a.push({
+      color: p.color,
+      alpha: p.alpha,
       rawStop: f,
       stop: 0
     });
   }
-  if (c.length > 0) {
-    for (let l = 0; l < c.length; l++)
-      c[l].rawStop !== null && (c[l].stop = parseFloat(c[l].rawStop) / 100);
-    c[0].rawStop === null && (c[0].stop = 0), c.length > 1 && c[c.length - 1].rawStop === null && (c[c.length - 1].stop = 1);
-    let a = 0;
-    for (let l = 1; l < c.length; l++)
-      if (c[l].rawStop !== null || l === c.length - 1) {
-        const u = l - a;
-        if (u > 1) {
-          const h = c[a].stop, v = (c[l].stop - h) / u;
-          for (let g = 1; g < u; g++)
-            c[a + g].stop = h + v * g;
+  if (a.length > 0) {
+    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 c = 0;
+    for (let l = 1; l < a.length; l++)
+      if (a[l].rawStop !== null || l === a.length - 1) {
+        const d = l - c;
+        if (d > 1) {
+          const h = a[c].stop, p = (a[l].stop - h) / d;
+          for (let g = 1; g < d; g++)
+            a[c + g].stop = h + p * g;
         }
-        a = l;
+        c = l;
       }
   }
-  return { angle: r, stops: c };
+  return { angle: r, stops: a };
 }
-const je = `varying vec2 vUv;
+const qe = `varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   vScreenPos = gl_Position;
-}`, Ke = `varying vec2 vUv;
+}`, je = `varying vec2 vUv;
 uniform vec2 uSize;
 uniform vec4 uBorderRadius;
 uniform float uBorderWidth;
@@ -476,37 +477,37 @@ void main() {
 
   // #include <colorspace_fragment>
 }
-`, Je = `uniform sampler2D uTexture;
+`, Ke = `uniform sampler2D uTexture;
 varying vec4 vScreenPos;
 uniform vec2 uTextureRepeat;
-uniform vec2 uTextureOffset;`, Qe = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+uniform vec2 uTextureOffset;`, Je = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 vec2 resultUv = screenUv;
 
-`, Ze = `vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`, Re = {
-  vertexShader: je,
-  fragmentShader: Ke
-}, me = {
-  declChunk: Je,
-  uvChunk: Qe,
-  baseColorChunk: Ze
+`, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`, Se = {
+  vertexShader: qe,
+  fragmentShader: je
+}, ae = {
+  declChunk: Ke,
+  uvChunk: Je,
+  baseColorChunk: Qe
 };
-function et(s, e, t, i = null, r) {
-  var R;
+function Ze(s, e, t, i = null, r) {
+  var M;
   const o = i !== null || !!s.imageSrc;
   let n = "";
-  const c = {};
+  const a = {};
   if (r != null && r.uniforms)
-    for (const [x, w] of Object.entries(r.uniforms))
-      typeof w == "number" ? (n += `uniform float ${x};
-`, c[x] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${x};
-`, c[x] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${x};
-`, c[x] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${x};
-`, c[x] = { value: new y.Vector4(...w) }) : (n += `uniform float ${x};
-`, c[x] = { value: w });
-  const a = (o ? me.declChunk : "") + `
-` + n, l = s.isTraveler ? me.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, u = o ? l + ((r == null ? void 0 : r.uvModifier) || "") : "", h = o ? me.baseColorChunk : "", f = (r == null ? void 0 : r.colorModifier) || "", v = Re.fragmentShader.replace("#INJECT_DECLARATIONS", a).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", h).replace("#INJECT_COLOR_MODIFIER", f), g = oe(s.backgroundColor), p = oe(s.borderColor), E = {
+    for (const [w, b] of Object.entries(r.uniforms))
+      typeof b == "number" ? (n += `uniform float ${w};
+`, a[w] = { value: b }) : Array.isArray(b) ? b.length === 2 ? (n += `uniform vec2 ${w};
+`, a[w] = { value: new y.Vector2(...b) }) : b.length === 3 ? (n += `uniform vec3 ${w};
+`, a[w] = { value: new y.Vector3(...b) }) : b.length === 4 && (n += `uniform vec4 ${w};
+`, a[w] = { value: new y.Vector4(...b) }) : (n += `uniform float ${w};
+`, a[w] = { value: b });
+  const c = (o ? ae.declChunk : "") + `
+` + n, l = s.isTraveler ? ae.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
+`, d = o ? l + ((r == null ? void 0 : r.uvModifier) || "") : "", h = o ? ae.baseColorChunk : "", f = (r == null ? void 0 : r.colorModifier) || "", p = Se.fragmentShader.replace("#INJECT_DECLARATIONS", c).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", h).replace("#INJECT_COLOR_MODIFIER", f), g = Z(s.backgroundColor), m = Z(s.borderColor), E = {
     uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
       value: new y.Vector4(
@@ -518,15 +519,15 @@ function et(s, e, t, i = null, r) {
     },
     uBorderColor: {
       value: new y.Vector4(
-        p.color.r,
-        p.color.g,
-        p.color.b,
-        p.alpha
+        m.color.r,
+        m.color.g,
+        m.color.b,
+        m.alpha
       )
     },
     uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
     uBorderWidth: { value: K(s.borderWidth) },
-    uOpacity: { value: (R = s.opacity) != null ? R : 1 },
+    uOpacity: { value: (M = s.opacity) != null ? M : 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new y.Vector2(1, 1) },
     uTextureOffset: { value: new y.Vector2(0, 0) },
@@ -537,20 +538,20 @@ function et(s, e, t, i = null, r) {
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  Be(E.uBorderRadius.value, s.borderRadius), o && (E.uTexture.value = i);
+  De(E.uBorderRadius.value, s.borderRadius), o && (E.uTexture.value = i);
   const L = new y.ShaderMaterial({
-    uniforms: G(G({}, E), c),
-    vertexShader: Re.vertexShader,
-    fragmentShader: v,
+    uniforms: $($({}, E), a),
+    vertexShader: Se.vertexShader,
+    fragmentShader: p,
     transparent: !0,
     side: y.FrontSide
     // for better performance
   });
-  return s.backgroundImage && be(L, { backgroundImage: s.backgroundImage }), L;
+  return s.backgroundImage && le(L, { backgroundImage: s.backgroundImage }), L;
 }
-function tt(s, e, t, i, r) {
+function et(s, e, t, i, r) {
   const o = K(e.borderWidth);
-  be(s, {
+  le(s, {
     width: t,
     height: i,
     borderRadius: e.borderRadius,
@@ -562,9 +563,9 @@ function tt(s, e, t, i, r) {
     backgroundImage: e.backgroundImage
   });
 }
-function be(s, e) {
+function le(s, e) {
   var i, r, o;
-  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && Be(s.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
+  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && De(s.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
       const n = s.uniforms.uBgColor.value.w;
       s.uniforms.uBgColor.value.set(
@@ -574,7 +575,7 @@ function be(s, e) {
         n
       );
     } else if (typeof e.backgroundColor == "string") {
-      const n = oe(e.backgroundColor);
+      const n = Z(e.backgroundColor);
       s.uniforms.uBgColor.value.set(
         n.color.r,
         n.color.g,
@@ -600,7 +601,7 @@ function be(s, e) {
         n
       );
     } else if (typeof e.borderColor == "string") {
-      const n = oe(e.borderColor);
+      const n = Z(e.borderColor);
       s.uniforms.uBorderColor.value.set(
         n.color.r,
         n.color.g,
@@ -619,42 +620,42 @@ function be(s, e) {
   e.opacity !== void 0 && (s.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (s.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (s.uniforms.uBorderColor.value.w = e.borderOpacity), s.uniforms.uTexture && e.texture !== void 0 && (s.uniforms.uTexture.value = e.texture);
   const t = e.texture !== void 0 ? e.texture : (i = s.uniforms.uTexture) == null ? void 0 : i.value;
   if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
-    const n = t.image.width, c = t.image.height, a = (r = e.width) != null ? r : s.uniforms.uSize.value.x, l = (o = e.height) != null ? o : s.uniforms.uSize.value.y;
-    if (n && c && a && l) {
-      const u = n / c, h = a / l;
-      if (u > h) {
-        const f = h / u;
+    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, c = (r = e.width) != null ? r : s.uniforms.uSize.value.x, l = (o = e.height) != null ? o : s.uniforms.uSize.value.y;
+    if (n && a && c && l) {
+      const d = n / a, h = c / l;
+      if (d > h) {
+        const f = h / d;
         s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
       } else {
-        const f = u / h;
+        const f = d / h;
         s.uniforms.uTextureRepeat.value.set(1, f), s.uniforms.uTextureOffset.value.set(0, (1 - f) / 2);
       }
     }
   } else
     s.uniforms.uTextureRepeat && (s.uniforms.uTextureRepeat.value.set(1, 1), s.uniforms.uTextureOffset.value.set(0, 0));
   if (e.backgroundImage !== void 0) {
-    const n = qe(e.backgroundImage);
+    const n = $e(e.backgroundImage);
     if (n) {
       s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
-      for (let c = 0; c < 8; c++)
-        if (c < n.stops.length) {
-          const a = n.stops[c];
-          s.uniforms.uGradientColors.value[c].set(
-            a.color.r,
-            a.color.g,
-            a.color.b,
-            a.alpha
-          ), s.uniforms.uGradientStops.value[c] = a.stop;
+      for (let a = 0; a < 8; a++)
+        if (a < n.stops.length) {
+          const c = n.stops[a];
+          s.uniforms.uGradientColors.value[a].set(
+            c.color.r,
+            c.color.g,
+            c.color.b,
+            c.alpha
+          ), s.uniforms.uGradientStops.value[a] = c.stop;
         } else
-          s.uniforms.uGradientColors.value[c].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[c] = 1;
+          s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
     } else
       s.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]);
 }
-function Be(s, e) {
-  var c, a, l, u;
+function De(s, e) {
+  var a, c, l, d;
   if (e == null) {
     s.set(0, 0, 0, 0);
     return;
@@ -667,18 +668,18 @@ function Be(s, e) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const t = e.split("/")[0].trim().split(/\s+/), i = K(t[0]), r = K((c = t[1]) != null ? c : t[0]), o = K((a = t[2]) != null ? a : t[0]), n = K((u = (l = t[3]) != null ? l : t[1]) != null ? u : t[0]);
+  const t = e.split("/")[0].trim().split(/\s+/), i = K(t[0]), r = K((a = t[1]) != null ? a : t[0]), o = K((c = t[2]) != null ? c : t[0]), n = K((d = (l = t[3]) != null ? l : t[1]) != null ? d : t[0]);
   s.set(i, r, o, n);
 }
-const H = {
-  create(s, e, t, i, r, o = 2, n = null, c) {
-    return s === "BOX" ? et(
+const Y = {
+  create(s, e, t, i, r, o = 2, n = null, a) {
+    return s === "BOX" ? Ze(
       e,
       i,
       r,
       n,
-      c
-    ) : s === "TEXT" ? new Ge(
+      a
+    ) : s === "TEXT" ? new Pe(
       t || "",
       e,
       i,
@@ -686,13 +687,13 @@ const H = {
       o
     ) : new y.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, i, r, o, n = 2, c) {
-    e === "BOX" ? tt(
+  update(s, e, t, i, r, o, n = 2, a) {
+    e === "BOX" ? et(
       s,
       t,
       r,
       o,
-      c
+      a
     ) : e === "TEXT" && s.updateText(
       i || "",
       t,
@@ -702,16 +703,16 @@ const H = {
     );
   },
   forceUpdateUniforms(s, e) {
-    be(s, e);
+    le(s, e);
   }
 };
-class rt {
+class tt {
   constructor(e, t = !0) {
-    d(this, "observer");
-    d(this, "textures", /* @__PURE__ */ new WeakMap());
-    d(this, "loadStatus", /* @__PURE__ */ new WeakMap());
-    d(this, "elementUrls", /* @__PURE__ */ new WeakMap());
-    d(this, "onUpdate");
+    u(this, "observer");
+    u(this, "textures", /* @__PURE__ */ new WeakMap());
+    u(this, "loadStatus", /* @__PURE__ */ new WeakMap());
+    u(this, "elementUrls", /* @__PURE__ */ new WeakMap());
+    u(this, "onUpdate");
     this.onUpdate = e, t && (this.observer = new IntersectionObserver(
       (i) => {
         for (const r of i) {
@@ -731,7 +732,7 @@ class rt {
     e.nodeType === Node.ELEMENT_NODE && this.observer && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
   }
   loadTexture(e) {
-    return Ce(this, null, function* () {
+    return Ee(this, null, function* () {
       if (this.loadStatus.get(e) || this.textures.has(e))
         return;
       const t = this.elementUrls.get(e);
@@ -741,8 +742,8 @@ class rt {
           let i;
           if (t.startsWith("data:image/svg+xml"))
             i = yield new Promise((o, n) => {
-              const c = new Image();
-              c.onload = () => o(c), c.onerror = n, c.src = t;
+              const a = new Image();
+              a.onload = () => o(a), a.onerror = n, a.src = t;
             });
           else {
             const n = yield (yield fetch(t)).blob();
@@ -773,35 +774,35 @@ class rt {
     this.observer && this.observer.disconnect();
   }
 }
-class it {
+class rt {
   constructor(e, t, i, r) {
-    d(this, "canvas");
-    d(this, "scene");
-    d(this, "camera");
-    d(this, "renderer");
-    d(this, "renderTargets", []);
-    d(this, "renderOrder", 0);
-    d(this, "qualityFactor", 2);
-    d(this, "mode", "overlay");
-    d(this, "canvasSize", "viewport");
-    d(this, "clipArea", 1);
-    d(this, "targetLayer", "base");
-    d(this, "overscan", 200);
-    d(this, "target");
-    d(this, "mountContainer");
-    d(this, "registry");
-    d(this, "targetRect");
-    d(this, "travelersByLayer", Array.from(
-      { length: F.MAX_LAYERS },
+    u(this, "canvas");
+    u(this, "scene");
+    u(this, "camera");
+    u(this, "renderer");
+    u(this, "renderTargets", []);
+    u(this, "renderOrder", 0);
+    u(this, "qualityFactor", 2);
+    u(this, "mode", "overlay");
+    u(this, "canvasSize", "viewport");
+    u(this, "clipArea", 1);
+    u(this, "targetLayer", "base");
+    u(this, "overscan", 200);
+    u(this, "target");
+    u(this, "mountContainer");
+    u(this, "registry");
+    u(this, "targetRect");
+    u(this, "travelersByLayer", Array.from(
+      { length: I.MAX_LAYERS },
       () => /* @__PURE__ */ new Set()
     ));
-    d(this, "textureManager");
+    u(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
-    d(this, "fixedMeshes", /* @__PURE__ */ new Set());
-    var c, a, l, u, h;
-    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (c = t.mode) != null ? c : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (u = t.layer) != null ? u : "base", this.textureManager = new rt((f, v) => {
+    u(this, "fixedMeshes", /* @__PURE__ */ new Set());
+    var a, c, l, d, h;
+    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (c = t.canvasSize) != null ? c : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new tt((f, p) => {
       const g = this.registry.get(f);
-      g && g.material instanceof y.ShaderMaterial && H.forceUpdateUniforms(g.material, { texture: v });
+      g && g.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(g.material, { texture: p });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
     const o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
     this.camera = new y.OrthographicCamera(
@@ -823,10 +824,10 @@ class it {
     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" ? R.SELECTED : R.BASE;
   }
   createRenderTarget() {
-    for (let e = 0; e < F.MAX_LAYERS; e++) {
+    for (let e = 0; e < I.MAX_LAYERS; e++) {
       const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, i = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
       this.renderTargets.push(
         new y.WebGLRenderTarget(
@@ -873,12 +874,12 @@ class it {
   updateUniforms(e, t) {
     const i = this.registry.get(e);
     i && (i.traverse((r) => {
-      r.isMesh && r.material && H.forceUpdateUniforms(
+      r.isMesh && r.material && Y.forceUpdateUniforms(
         r.material,
         t
       );
     }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((r) => {
-      r.isMesh && r.material && H.forceUpdateUniforms(
+      r.isMesh && r.material && Y.forceUpdateUniforms(
         r.material,
         t
       );
@@ -894,16 +895,16 @@ class it {
     this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
   }
   syncScene(e, t) {
-    const i = this.target.getBoundingClientRect(), r = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, c = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, a = Math.abs(r - n) > 0.1 || Math.abs(o - c) > 0.1, l = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
-    a ? (this.targetRect = i, this.setSize(r, o), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((u) => {
-      const h = this.registry.get(u);
+    const i = this.target.getBoundingClientRect(), r = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, c = Math.abs(r - n) > 0.1 || Math.abs(o - a) > 0.1, l = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
+    c ? (this.targetRect = i, this.setSize(r, o), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
+      const h = this.registry.get(d);
       if (h) {
         this.scene.remove(h);
         for (const f of this.travelersByLayer)
           f.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()));
-        }), this.registry.remove(u), this.textureManager.unregister(u);
+          f instanceof y.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((p) => p.dispose()) : f.material.dispose()));
+        }), this.registry.remove(d), this.textureManager.unregister(d);
       }
     });
   }
@@ -912,30 +913,31 @@ class it {
   // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
   // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
   reconcileNode(e) {
-    var i;
+    var r;
     let t = this.registry.get(e.element);
-    if (!t) {
-      const r = new y.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), n = H.create(
+    const i = JSON.stringify(e.shaderHooks || null);
+    if (t && t.userData.shaderHash !== i && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
+      const o = new y.PlaneGeometry(1, 1), n = e.isTraveler ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), a = Y.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        o,
+        n,
         e.shaderHooks
       );
-      t = new y.Mesh(r, n), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = n;
+      t = new y.Mesh(o, a), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = a, t.userData.domElement = e.element, t.userData.shaderHash = i;
     }
     if (this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
-      for (let r = 0; r < F.MAX_LAYERS; r++)
-        r === e.captureLayer - 2 ? this.travelersByLayer[r].add(t) : this.travelersByLayer[r].delete(t);
+      for (let o = 0; o < I.MAX_LAYERS; o++)
+        o === e.captureLayer - 2 ? this.travelersByLayer[o].add(t) : this.travelersByLayer[o].delete(t);
     else
-      for (const r of this.travelersByLayer)
-        r.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 r of e.children)
-        this.reconcileNode(r);
+      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, e, !0));
   }
@@ -943,83 +945,85 @@ class it {
     var l;
     const r = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], o = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(o) + t.textContent + r.map((u) => u.text).join("|"), c = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
-    if (t.dirtyMask & ye || n !== c) {
+    ], o = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(o) + t.textContent + r.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
+    if (t.dirtyMask & ce || n !== a) {
       e.children.filter(
         (g) => g.name.startsWith("TEXT_CHILD")
       ).forEach((g) => {
         var E;
-        const p = g;
-        (E = p.material.map) == null || E.dispose(), p.geometry.dispose(), e.remove(p);
+        const m = g;
+        (E = m.material.map) == null || E.dispose(), m.geometry.dispose(), e.remove(m);
       });
-      const h = t.rect, f = h.x + h.width / 2, v = h.y + h.height / 2;
-      r.forEach((g, p) => {
-        const E = H.create(
+      const h = t.rect, f = h.x + h.width / 2, p = h.y + h.height / 2;
+      r.forEach((g, m) => {
+        const E = Y.create(
           "TEXT",
           o,
           g.text,
           g.rect.width,
           g.rect.height,
           this.qualityFactor
-        ), L = new y.PlaneGeometry(1, 1), R = new y.Mesh(L, E);
-        R.name = `TEXT_CHILD_${p}`;
-        const x = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, w = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
-        R.scale.set(x, w, 1);
-        const B = g.rect.x + g.rect.width / 2, M = g.rect.y + g.rect.height / 2, O = B - f, _ = -(M - v);
-        R.position.set(
+        ), L = new y.PlaneGeometry(1, 1), M = new y.Mesh(L, E);
+        M.name = `TEXT_CHILD_${m}`;
+        const w = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, b = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
+        M.scale.set(w, b, 1);
+        const U = g.rect.x + g.rect.width / 2, A = g.rect.y + g.rect.height / 2, O = U - f, N = -(A - p);
+        M.position.set(
           t.rect.width === 0 ? 0 : O / t.rect.width,
-          t.rect.height === 0 ? 0 : _ / t.rect.height,
+          t.rect.height === 0 ? 0 : N / t.rect.height,
           5e-3
-        ), e.add(R);
+        ), e.add(M);
       }), e.userData.textChildStyleHash = n;
     }
-    e.children.forEach((u) => {
-      if (!u.name.startsWith("TEXT_CHILD"))
+    e.children.forEach((d) => {
+      if (!d.name.startsWith("TEXT_CHILD"))
         return;
-      const h = u, f = t.visibility & W ? k.BASE : k.HIDDEN;
-      if (h.layers.set(f), t.visibility & j && h.layers.enable(k.SELECTED), t.visibility & W)
+      const h = d, f = t.visibility & W ? R.BASE : R.HIDDEN;
+      if (h.layers.set(f), t.visibility & j && h.layers.enable(R.SELECTED), t.visibility & W)
         if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
-          for (let v = t.captureLayer; v < t.nativeLayer; v++)
-            h.layers.enable(k.getCaptureLayer(v));
+          for (let p = t.captureLayer; p < t.nativeLayer; p++)
+            h.layers.enable(R.getCaptureLayer(p));
         else if (i && t.nativeLayer !== void 0)
-          for (let v = Math.max(t.captureLayer, t.nativeLayer); v <= F.MAX_LAYERS + 1; v++)
-            h.layers.enable(k.getCaptureLayer(v));
+          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= I.MAX_LAYERS + 1; p++)
+            h.layers.enable(R.getCaptureLayer(p));
         else
-          for (let v = t.captureLayer; v <= F.MAX_LAYERS + 1; v++)
-            h.layers.enable(k.getCaptureLayer(v));
+          for (let p = t.captureLayer; p <= I.MAX_LAYERS + 1; p++)
+            h.layers.enable(R.getCaptureLayer(p));
     });
   }
   updateMeshProperties(e, t) {
-    var x, w, B;
-    const { rect: i, styles: r } = t, o = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / o, c = this.renderer.domElement.height / o;
-    e.material = e.userData.baseMaterial, e.scale.set(i.width, i.height, 1), e.userData.domRect = pe(G({}, i), {
+    var w, b, U;
+    const { rect: i, styles: r } = t, o = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / o, a = this.renderer.domElement.height / o;
+    e.material = e.userData.baseMaterial, e.scale.set(i.width, i.height, 1), e.userData.domRect = {
+      x: i.x,
+      y: i.y,
       width: i.width,
       height: i.height
-    });
-    const a = 1e-3;
+    };
+    const c = 1e-3;
     this.renderOrder++;
-    const l = this.targetRect.left + window.scrollX, u = this.targetRect.top + window.scrollY;
+    const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
     let h, f;
     if (this.isViewport)
       h = i.x - window.innerWidth / 2 + i.width / 2, f = -i.y + window.innerHeight / 2 - i.height / 2;
     else {
-      const M = i.x - l, O = i.y - u;
-      h = M - n / 2 + i.width / 2, f = -O + c / 2 - i.height / 2;
+      const A = i.x - l, O = i.y - d;
+      h = A - n / 2 + i.width / 2, f = -O + a / 2 - i.height / 2;
     }
     e.position.set(
       h,
       f,
-      r.zIndex + this.renderOrder * a
+      r.zIndex + this.renderOrder * c
     );
-    const v = i.x, g = i.y;
-    e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: v, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
-    const p = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(p);
-    let L = 0, R = 0;
+    const p = i.x, g = i.y;
+    e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: p, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(m);
+    let L = 0, M = 0;
     if (E.transform && E.transform !== "none") {
-      const M = new DOMMatrix(E.transform);
-      L = M.m41, R = M.m42;
+      const A = new DOMMatrix(E.transform);
+      L = A.m41, M = A.m42;
     }
-    if (e.userData.baseTransform = { x: L, y: R }, delete e.userData.originRatioX, delete e.userData.originRatioY, H.update(
+    if (e.userData.baseTransform = { x: L, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, Y.update(
       e.userData.baseMaterial,
       "BOX",
       r,
@@ -1027,99 +1031,129 @@ class it {
       i.width,
       i.height,
       this.qualityFactor,
-      t.isTraveler ? (x = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : x.texture : this.textureManager.get(t.element)
+      t.isTraveler ? (w = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : w.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const A = H.create(
+        const k = Y.create(
           "BOX",
           t.nativeStyles,
           "",
           t.nativeRect.width,
           t.nativeRect.height,
           this.qualityFactor,
-          t.isTraveler ? (w = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : w.texture : this.textureManager.get(t.element),
+          t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), Y = new y.Mesh(e.geometry, A);
-        t.type === "TEXT" && (Y.name = "BG_MESH"), this.scene.add(Y), e.userData.nativeMesh = Y;
+        ), P = new y.Mesh(e.geometry, k);
+        t.type === "TEXT" && (P.name = "BG_MESH"), this.scene.add(P), e.userData.nativeMesh = P;
       }
-      const M = e.userData.nativeMesh;
-      let O, _;
+      const A = e.userData.nativeMesh;
+      let O, N;
       if (this.isViewport)
-        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, _ = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, N = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const A = t.nativeRect.x - l, Y = t.nativeRect.y - u;
-        O = A - n / 2 + t.nativeRect.width / 2, _ = -Y + c / 2 - t.nativeRect.height / 2;
+        const k = t.nativeRect.x - l, P = t.nativeRect.y - d;
+        O = k - n / 2 + t.nativeRect.width / 2, N = -P + a / 2 - t.nativeRect.height / 2;
       }
-      M.scale.set(t.nativeRect.width, t.nativeRect.height, 1), M.position.set(
+      A.scale.set(t.nativeRect.width, t.nativeRect.height, 1), A.position.set(
         O,
-        _,
-        t.nativeStyles.zIndex + this.renderOrder * a
-      ), H.update(
-        M.material,
+        N,
+        t.nativeStyles.zIndex + this.renderOrder * c
+      ), Y.update(
+        A.material,
         "BOX",
         t.nativeStyles,
         "",
         t.nativeRect.width,
         t.nativeRect.height,
         this.qualityFactor,
-        t.isTraveler ? (B = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : B.texture : this.textureManager.get(t.element)
+        t.isTraveler ? (U = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : U.texture : this.textureManager.get(t.element)
       );
     } else
       e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const i = t.visibility & W ? k.BASE : k.HIDDEN;
-    if (e.layers.set(i), t.visibility & j && e.layers.enable(k.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    const i = t.visibility & W ? R.BASE : R.HIDDEN;
+    if (e.layers.set(i), t.visibility & j && e.layers.enable(R.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const r = e.userData.nativeMesh;
-      if (r.layers.set(k.HIDDEN), t.visibility & W) {
+      if (r.layers.set(R.HIDDEN), t.visibility & W) {
         for (let o = t.captureLayer; o < t.nativeLayer; o++)
-          e.layers.enable(k.getCaptureLayer(o));
-        for (let o = Math.max(t.captureLayer, t.nativeLayer); o <= F.MAX_LAYERS + 1; o++)
-          r.layers.enable(k.getCaptureLayer(o));
+          e.layers.enable(R.getCaptureLayer(o));
+        for (let o = Math.max(t.captureLayer, t.nativeLayer); o <= I.MAX_LAYERS + 1; o++)
+          r.layers.enable(R.getCaptureLayer(o));
       }
     } else if (t.visibility & W)
-      for (let r = t.captureLayer; r <= F.MAX_LAYERS + 1; r++)
-        e.layers.enable(k.getCaptureLayer(r));
+      for (let r = t.captureLayer; r <= I.MAX_LAYERS + 1; r++)
+        e.layers.enable(R.getCaptureLayer(r));
   }
   captureRenderTarget(e, t, i) {
     if (e.size === 0 || !i)
       return;
     const r = new y.Color(), o = this.renderer.getClearAlpha();
     this.renderer.getClearColor(r), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(i), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
-    const n = new y.Vector3(), c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, a = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
-    for (const u of e) {
-      n.setFromMatrixPosition(u.matrixWorld), n.project(this.camera);
-      const h = (n.x + 1) / 2 * c, f = (n.y + 1) / 2 * a;
-      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 p = u.scale.x * g + 0.5, E = u.scale.y * g + 0.5, L = h - p / 2, R = f - E / 2, x = (L * this.qualityFactor - v) / l, w = (R * this.qualityFactor - v) / l, B = (p * this.qualityFactor + v * 2) / l, M = (E * this.qualityFactor + v * 2) / l;
-      this.renderer.setScissor(x, w, B, M), this.renderer.render(this.scene, this.camera);
+    const n = new y.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
+    for (const d of e) {
+      n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
+      const h = (n.x + 1) / 2 * a, f = (n.y + 1) / 2 * c;
+      let p = 0, g = 1;
+      typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
+      const m = d.scale.x * g + 0.5, E = d.scale.y * g + 0.5, L = h - m / 2, M = f - E / 2, w = (L * this.qualityFactor - p) / l, b = (M * this.qualityFactor - p) / l, U = (m * this.qualityFactor + p * 2) / l, A = (E * this.qualityFactor + p * 2) / l;
+      this.renderer.setScissor(w, b, U, A), this.renderer.render(this.scene, this.camera);
     }
     this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, o);
   }
   render() {
-    for (let e = 0; e < F.MAX_LAYERS; e++) {
+    for (let e = 0; e < I.MAX_LAYERS; e++) {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        k.getCaptureLayer(t),
+        R.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
     this.renderer.render(this.scene, this.camera);
   }
-  updateCameraScroll(e, t) {
-    this.isViewport && (this.camera.position.x = e, this.camera.position.y = -t, this.camera.updateMatrixWorld());
+  syncMeshesByDOM() {
+    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, i = this.renderer.getPixelRatio(), r = this.renderer.domElement.width / i, o = this.renderer.domElement.height / i;
+    this.scene.children.forEach((n) => {
+      const a = n;
+      if (!a.userData || !a.userData.domElement)
+        return;
+      const c = a.userData.domElement;
+      let l;
+      if (c.nodeType === Node.TEXT_NODE) {
+        const h = document.createRange();
+        h.selectNode(c), l = h.getBoundingClientRect();
+      } else
+        l = c.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 = { x: l.x, y: l.y, width: l.width, height: l.height };
+        let h, f;
+        if (this.isViewport)
+          h = l.x - window.innerWidth / 2 + l.width / 2, f = -l.y + window.innerHeight / 2 - l.height / 2;
+        else {
+          const p = l.x - e, g = l.y - t;
+          h = p - r / 2 + l.width / 2, f = -g + o / 2 - l.height / 2;
+        }
+        if (a.position.setX(h), a.position.setY(f), a.scale.set(l.width, l.height, 1), a.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(a.material, {
+          width: l.width,
+          height: l.height
+        }), a.userData.nativeMesh) {
+          const p = a.userData.nativeMesh;
+          p.position.setX(h), p.position.setY(f), p.scale.set(l.width, l.height, 1);
+        }
+      }
+    });
   }
 }
-function st(s) {
+function it(s) {
   const e = s.textContent || "", t = [];
   let i = "", r = null, o = -1;
-  const n = (l, u) => {
+  const n = (l, d) => {
     for (let h = 0; h < l.length; h++) {
-      const f = l[h], v = document.createRange();
-      v.setStart(s, u + h), v.setEnd(s, u + h + 1);
-      const g = v.getBoundingClientRect();
+      const f = l[h], p = document.createRange();
+      p.setStart(s, d + h), p.setEnd(s, d + h + 1);
+      const g = p.getBoundingClientRect();
       if (g.width === 0 && g.height === 0) {
         i += f;
         continue;
@@ -1142,18 +1176,18 @@ function st(s) {
         g.bottom
       )));
     }
-  }, c = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-  let a = 0;
-  for (const l of c) {
-    const u = document.createRange();
-    u.setStart(s, a), u.setEnd(s, a + l.length);
-    const h = u.getClientRects();
+  }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+  let c = 0;
+  for (const l of a) {
+    const d = document.createRange();
+    d.setStart(s, c), d.setEnd(s, c + l.length);
+    const h = d.getClientRects();
     if (h.length > 1)
-      n(l, a);
+      n(l, c);
     else {
-      const f = h.length === 1 ? h[0] : u.getBoundingClientRect();
+      const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
       if (f.width === 0 && f.height === 0) {
-        i += l, a += l.length;
+        i += l, c += l.length;
         continue;
       }
       o === -1 || Math.abs(f.top - o) > f.height / 2 ? (i && r && t.push({
@@ -1174,7 +1208,7 @@ function st(s) {
         f.bottom
       )));
     }
-    a += l.length;
+    c += l.length;
   }
   return i && r && t.push({
     text: i,
@@ -1188,7 +1222,7 @@ function st(s) {
     (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
   );
 }
-function Me(s) {
+function Le(s) {
   const e = parseFloat(s.fontSize);
   let t = parseFloat(s.lineHeight);
   isNaN(t) && (t = e * 1.2);
@@ -1204,308 +1238,284 @@ function Me(s) {
     letterSpacing: i
   };
 }
-function Oe(s, e = q | ne | We | ye | ve, t, i = 1, r = 0, o = 2, n, c) {
-  var Q, Z, ee, te, re, ie;
+function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
+  var de, ue, fe, ge, pe, me;
   if (s.nodeType === Node.TEXT_NODE) {
-    const m = s;
-    if (!m.textContent || !m.textContent.trim())
+    const v = s;
+    if (!v.textContent || !v.textContent.trim())
       return null;
-    const T = m.textContent.replace(/\s+/g, " ");
-    if (T.length === 0)
+    const C = v.textContent.replace(/\s+/g, " ");
+    if (C.length === 0)
       return null;
-    const D = st(m);
+    const D = it(v);
     if (D.length === 0)
       return null;
-    const I = m.parentElement, S = I ? window.getComputedStyle(I) : null;
+    const B = v.parentElement, S = B ? window.getComputedStyle(B) : null;
     if (!S)
       return null;
-    const U = Math.min(...D.map((b) => b.rect.left)), C = Math.min(...D.map((b) => b.rect.top)), z = Math.max(...D.map((b) => b.rect.left + b.rect.width)), P = Math.max(...D.map((b) => b.rect.top + b.rect.height));
+    const z = Math.min(...D.map((T) => T.rect.left)), x = Math.min(...D.map((T) => T.rect.top)), X = Math.max(...D.map((T) => T.rect.left + T.rect.width)), G = Math.max(...D.map((T) => T.rect.top + T.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: m,
+      element: v,
       rect: {
-        x: U + window.scrollX,
-        y: C + window.scrollY,
-        width: z - U,
-        height: P - C
+        x: z + window.scrollX,
+        y: x + window.scrollY,
+        width: X - z,
+        height: G - x
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: I && I.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(S.opacity),
+        opacity: B && B.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(S.opacity),
         zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + r,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: T,
-      textLines: D.map((b) => ({
-        text: b.text.trim(),
+      textContent: C,
+      textLines: D.map((T) => ({
+        text: T.text.trim(),
         rect: {
-          x: b.rect.left + window.scrollX,
-          y: b.rect.top + window.scrollY,
-          width: b.rect.width,
-          height: b.rect.height
+          x: T.rect.left + window.scrollX,
+          y: T.rect.top + window.scrollY,
+          width: T.rect.width,
+          height: T.rect.height
         }
       })),
-      textStyles: Me(S),
+      textStyles: Le(S),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
       captureLayer: i,
       isFixed: S.position === "fixed",
       nativeLayer: n,
-      nativeStyles: c ? G(G({
+      nativeStyles: a ? $($({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: I && I.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(S.opacity),
+        opacity: B && B.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(S.opacity),
         zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + r,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, Me(S)), c) : void 0,
-      nativeRect: c ? {
-        x: U + window.scrollX,
-        y: C + window.scrollY,
-        width: z - U,
-        height: P - C
+      }, Le(S)), a) : void 0,
+      nativeRect: a ? {
+        x: z + window.scrollX,
+        y: x + window.scrollY,
+        width: X - z,
+        height: G - x
       } : void 0,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const a = s, l = a.dataset[N.KEY];
-  let u = t, h = t;
+  const c = s, l = c.dataset[F.KEY];
+  let d = t, h = t;
   if (l) {
-    const m = new Set(l.split(/\s+/));
-    for (const T of m)
-      if (!Le.includes(T))
+    const v = new Set(l.split(/\s+/));
+    for (const C of v)
+      if (!Te.includes(C))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${T}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(N.VALUES.END))
+    if (v.has(F.VALUES.END))
       return null;
-    if (m.has(N.VALUES.INCLUDE_TREE) && m.has(N.VALUES.EXCLUDE_TREE))
+    if (v.has(F.VALUES.INCLUDE_TREE) && v.has(F.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (m.has(N.VALUES.INCLUDE_SELF) && m.has(N.VALUES.EXCLUDE_SELF))
+    if (v.has(F.VALUES.INCLUDE_SELF) && v.has(F.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(N.VALUES.INCLUDE_TREE) ? u = u | W : m.has(N.VALUES.EXCLUDE_TREE) && (u = u & ~W), h = u, m.has(N.VALUES.INCLUDE_SELF) ? h = h | W : m.has(N.VALUES.EXCLUDE_SELF) && (h = h & ~W);
+    v.has(F.VALUES.INCLUDE_TREE) ? d = d | W : v.has(F.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, v.has(F.VALUES.INCLUDE_SELF) ? h = h | W : v.has(F.VALUES.EXCLUDE_SELF) && (h = h & ~W);
   }
-  const f = a.dataset[V.KEY];
+  const f = c.dataset[V.KEY];
   if (f) {
-    const m = new Set(f.split(/\s+/));
-    for (const T of m)
-      if (!Le.includes(T))
+    const v = new Set(f.split(/\s+/));
+    for (const C of v)
+      if (!Te.includes(C))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${T}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(V.VALUES.END))
+    if (v.has(V.VALUES.END))
       return null;
-    if (m.has(V.VALUES.INCLUDE_TREE) && m.has(V.VALUES.EXCLUDE_TREE))
+    if (v.has(V.VALUES.INCLUDE_TREE) && v.has(V.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (m.has(V.VALUES.INCLUDE_SELF) && m.has(V.VALUES.EXCLUDE_SELF))
+    if (v.has(V.VALUES.INCLUDE_SELF) && v.has(V.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(V.VALUES.INCLUDE_TREE) ? u = u | j : m.has(V.VALUES.EXCLUDE_TREE) && (u = u & ~j), h = u, m.has(V.VALUES.INCLUDE_SELF) ? h = h | j : m.has(V.VALUES.EXCLUDE_SELF) && (h = h & ~j);
-  }
-  const v = a.dataset[F.KEY];
-  let g = !1, p = c ? G({}, c) : {}, E = n;
-  if (v) {
-    let m = 1;
-    const T = v.indexOf("{"), D = v.lastIndexOf("}");
-    let I = v;
-    if (T !== -1 && D !== -1 && D > T) {
-      I = v.substring(0, T).trim();
-      const C = v.substring(T, D + 1);
+    v.has(V.VALUES.INCLUDE_TREE) ? d = d | j : v.has(V.VALUES.EXCLUDE_TREE) && (d = d & ~j), h = d, v.has(V.VALUES.INCLUDE_SELF) ? h = h | j : v.has(V.VALUES.EXCLUDE_SELF) && (h = h & ~j);
+  }
+  const p = c.dataset[I.KEY];
+  let g = !1, m = a ? $({}, a) : {}, E = n;
+  if (p) {
+    let v = 1;
+    const C = p.indexOf("{"), D = p.lastIndexOf("}");
+    let B = p;
+    if (C !== -1 && D !== -1 && D > C) {
+      B = p.substring(0, C).trim();
+      const x = p.substring(C, D + 1);
       try {
-        p = new Function("return " + C)();
-      } catch (z) {
+        m = new Function("return " + x)();
+      } catch (X) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${C}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${x}`
         );
       }
     }
-    const S = I.split(/\s+/);
-    let U = !1;
-    if (S.includes(F.VALUES.TRAVELER)) {
-      g = !0, U = !0;
-      const C = S.find((z) => !isNaN(parseInt(z, 10)));
-      C && (m = parseInt(C, 10));
-    } else if (S.includes(F.VALUES.NATIVE)) {
+    const S = B.split(/\s+/);
+    let z = !1;
+    if (S.includes(I.VALUES.TRAVELER)) {
+      g = !0, z = !0;
+      const x = S.find((X) => !isNaN(parseInt(X, 10)));
+      x && (v = parseInt(x, 10));
+    } else if (S.includes(I.VALUES.NATIVE)) {
       g = !1;
-      const C = S.find((z) => !isNaN(parseInt(z, 10)));
-      C && (E = parseInt(C, 10));
+      const x = S.find((X) => !isNaN(parseInt(X, 10)));
+      x && (E = parseInt(x, 10));
     }
-    if (U) {
-      const C = m + 1;
-      if (C < i)
+    if (z) {
+      const x = v + 1;
+      if (x < i)
         throw new Error(
-          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${i - 1}).`
+          `[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${i - 1}).`
         );
-      i = Math.min(C, F.MAX_LAYERS + 1);
+      i = Math.min(x, I.MAX_LAYERS + 1);
     }
   }
-  const L = a.dataset[Ve.KEY];
-  let R;
-  L && (R = JSON.parse(L));
-  const x = a.getBoundingClientRect(), w = window.getComputedStyle(a);
-  if (x.width === 0 || x.height === 0 || w.display === "none")
+  const L = c.dataset[Ve.KEY];
+  let M;
+  L && (M = JSON.parse(L));
+  const w = c.getBoundingClientRect(), b = window.getComputedStyle(c);
+  if (w.width === 0 || w.height === 0 || b.display === "none")
     return null;
-  let B = a.getAttribute("data-mid");
-  B || (B = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", B));
-  const M = parseInt(w.zIndex), O = (isNaN(M) ? 0 : M) + r;
-  let _;
-  if (a.tagName === "IMG")
-    _ = a.src;
-  else if (a.tagName.toLowerCase() === "svg") {
-    const m = a.cloneNode(!0), T = p == null ? void 0 : p.color, D = p == null ? void 0 : p.fill, I = p == null ? void 0 : p.stroke, S = p == null ? void 0 : p.opacity, U = (b, we) => {
-      const X = window.getComputedStyle(b), se = we, Ue = X.fill === X.color, Fe = X.stroke === X.color, de = D || (Ue ? T : void 0) || X.fill;
-      de && de !== "none" && (se.style.fill = de);
-      const ue = I || (Fe ? T : void 0) || X.stroke;
-      ue && ue !== "none" && (se.style.stroke = ue), X.strokeWidth && X.strokeWidth !== "0px" && (se.style.strokeWidth = X.strokeWidth);
-      const xe = T || X.color;
-      xe && (se.style.color = xe);
-      const fe = S || X.opacity;
-      fe && fe !== "1" && (se.style.opacity = fe);
-      for (let le = 0; le < b.children.length; le++)
-        U(b.children[le], we.children[le]);
+  let U = c.getAttribute("data-mid");
+  U || (U = Math.random().toString(36).substring(2, 11), c.setAttribute("data-mid", U));
+  const A = parseInt(b.zIndex), O = (isNaN(A) ? 0 : A) + r;
+  let N;
+  if (c.tagName === "IMG")
+    N = c.src;
+  else if (c.tagName.toLowerCase() === "svg") {
+    const v = c.cloneNode(!0), C = m == null ? void 0 : m.color, D = m == null ? void 0 : m.fill, B = m == null ? void 0 : m.stroke, S = m == null ? void 0 : m.opacity, z = (T, ve) => {
+      const _ = window.getComputedStyle(T), J = ve, Oe = _.fill === _.color, Be = _.stroke === _.color, ie = D || (Oe ? C : void 0) || _.fill;
+      ie && ie !== "none" && (J.style.fill = ie);
+      const se = B || (Be ? C : void 0) || _.stroke;
+      se && se !== "none" && (J.style.stroke = se), _.strokeWidth && _.strokeWidth !== "0px" && (J.style.strokeWidth = _.strokeWidth);
+      const ye = C || _.color;
+      ye && (J.style.color = ye);
+      const ne = S || _.opacity;
+      ne && ne !== "1" && (J.style.opacity = ne);
+      for (let ee = 0; ee < T.children.length; ee++)
+        z(T.children[ee], ve.children[ee]);
     };
-    U(a, m);
-    const C = a.getBoundingClientRect(), z = window.devicePixelRatio * o;
-    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${C.width} ${C.height}`), m.setAttribute("width", (C.width * z).toString()), m.setAttribute("height", (C.height * z).toString());
-    let P = new XMLSerializer().serializeToString(m);
-    P.includes("xmlns=") || (P = P.replace(
+    z(c, v);
+    const x = c.getBoundingClientRect(), X = window.devicePixelRatio * o;
+    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${x.width} ${x.height}`), v.setAttribute("width", (x.width * X).toString()), v.setAttribute("height", (x.height * X).toString());
+    let G = new XMLSerializer().serializeToString(v);
+    G.includes("xmlns=") || (G = G.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), _ = `data:image/svg+xml;utf8,${encodeURIComponent(P)}`;
-  } else if (w.backgroundImage && w.backgroundImage !== "none") {
-    const m = w.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    m && (_ = m[1]);
-  }
-  const A = {
-    backgroundColor: w.backgroundColor,
-    backgroundImage: w.backgroundImage,
-    opacity: a.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(w.opacity),
+    )), N = `data:image/svg+xml;utf8,${encodeURIComponent(G)}`;
+  } else if (b.backgroundImage && b.backgroundImage !== "none") {
+    const v = b.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    v && (N = v[1]);
+  }
+  const k = {
+    backgroundColor: b.backgroundColor,
+    backgroundImage: b.backgroundImage,
+    opacity: c.dataset[H.KEY] === H.VALUES.HIDE ? 1 : parseFloat(b.opacity),
     zIndex: O,
-    borderRadius: w.borderRadius,
-    borderColor: w.borderColor,
-    borderWidth: w.borderWidth,
-    imageSrc: _,
+    borderRadius: b.borderRadius,
+    borderColor: b.borderColor,
+    borderWidth: b.borderWidth,
+    imageSrc: N,
     isTraveler: g
-  }, Y = A;
-  let ae, ce;
-  const J = [];
-  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((m) => {
-    const T = m.nodeType === Node.TEXT_NODE ? h : u, D = Oe(
-      m,
+  }, P = k;
+  let Ie, Ue;
+  const he = [];
+  return c.tagName.toLowerCase() !== "svg" && Array.from(c.childNodes).forEach((v) => {
+    const C = v.nodeType === Node.TEXT_NODE ? h : d, D = ke(
+      v,
       e,
-      T,
+      C,
       i,
       O,
       o,
       E,
-      m.nodeType === Node.TEXT_NODE && Object.keys(p).length > 0 ? p : void 0
+      v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
     );
-    D && J.push(D);
+    D && he.push(D);
   }), {
-    id: B,
+    id: U,
     type: "BOX",
-    element: a,
+    element: c,
     rect: {
-      x: x.left + window.scrollX,
-      y: x.top + window.scrollY,
-      width: x.width,
-      height: x.height
+      x: w.left + window.scrollX,
+      y: w.top + window.scrollY,
+      width: w.width,
+      height: w.height
     },
-    styles: Y,
-    textContent: ae,
-    textStyles: ce,
+    styles: P,
+    textContent: Ie,
+    textStyles: Ue,
     dirtyMask: e,
     visibility: h,
     isTraveler: g,
     captureLayer: i,
     nativeLayer: E,
-    nativeStyles: E !== void 0 ? pe(G({}, A), {
-      backgroundColor: (Q = p.backgroundColor) != null ? Q : A.backgroundColor,
-      backgroundImage: (Z = p.backgroundImage) != null ? Z : A.backgroundImage,
-      opacity: (ee = p.opacity) != null ? ee : A.opacity,
-      zIndex: p.zIndex !== void 0 ? p.zIndex + O : A.zIndex,
-      borderRadius: (te = p.borderRadius) != null ? te : A.borderRadius,
-      borderColor: (re = p.borderColor) != null ? re : A.borderColor,
-      borderWidth: (ie = p.borderWidth) != null ? ie : A.borderWidth,
-      isTraveler: A.isTraveler
+    nativeStyles: E !== void 0 ? we($({}, k), {
+      backgroundColor: (de = m.backgroundColor) != null ? de : k.backgroundColor,
+      backgroundImage: (ue = m.backgroundImage) != null ? ue : k.backgroundImage,
+      opacity: (fe = m.opacity) != null ? fe : k.opacity,
+      zIndex: m.zIndex !== void 0 ? m.zIndex + O : k.zIndex,
+      borderRadius: (ge = m.borderRadius) != null ? ge : k.borderRadius,
+      borderColor: (pe = m.borderColor) != null ? pe : k.borderColor,
+      borderWidth: (me = m.borderWidth) != null ? me : k.borderWidth,
+      isTraveler: k.isTraveler
     }) : void 0,
     nativeRect: E !== void 0 ? {
-      x: p.x !== void 0 ? parseFloat(p.x) : x.left + window.scrollX,
-      y: p.y !== void 0 ? parseFloat(p.y) : x.top + window.scrollY,
-      width: p.width !== void 0 ? parseFloat(p.width) : x.width,
-      height: p.height !== void 0 ? parseFloat(p.height) : x.height
+      x: m.x !== void 0 ? parseFloat(m.x) : w.left + window.scrollX,
+      y: m.y !== void 0 ? parseFloat(m.y) : w.top + window.scrollY,
+      width: m.width !== void 0 ? parseFloat(m.width) : w.width,
+      height: m.height !== void 0 ? parseFloat(m.height) : w.height
     } : void 0,
-    isFixed: w.position === "fixed",
-    children: J,
-    shaderHooks: R
+    isFixed: b.position === "fixed",
+    children: he,
+    shaderHooks: M
   };
 }
-function nt(s, e) {
+function st(s, e) {
   e.size !== 0 && e.forEach((t, i) => {
-    var B, M, O, _, A, Y, ae, ce, J, Q, Z, ee, te, re, ie, m, T, D;
+    var o, n;
     const r = s.get(i);
-    if (!r || !r.userData.basePosition)
-      return;
-    let { x: o, y: n } = r.userData.basePosition;
-    const { width: c, height: a } = r.userData.baseSize, l = (B = t.width) != null ? B : c, u = (M = t.height) != null ? M : a, h = l - c, f = u - a;
-    if (t.width !== void 0 && r.userData.originRatioX === void 0 && Math.abs(h) > 0.1) {
-      const I = i.getBoundingClientRect(), S = (O = t.x) != null ? O : 0, U = (A = (_ = r.userData.baseTransform) == null ? void 0 : _.x) != null ? A : 0, C = r.userData.isFixed ? 0 : window.scrollX;
-      let b = -(I.left + C - S + U - r.userData.baseDOM.x) / h;
-      Math.abs(b) < 0.05 ? b = 0 : Math.abs(b - 1) < 0.05 ? b = 1 : Math.abs(b - 0.5) < 0.05 && (b = 0.5), r.userData.originRatioX = b;
-    }
-    if (t.height !== void 0 && r.userData.originRatioY === void 0 && Math.abs(f) > 0.1) {
-      const I = i.getBoundingClientRect(), S = (Y = t.y) != null ? Y : 0, U = (ce = (ae = r.userData.baseTransform) == null ? void 0 : ae.y) != null ? ce : 0, C = r.userData.isFixed ? 0 : window.scrollY;
-      let b = -(I.top + C - S + U - r.userData.baseDOM.y) / f;
-      Math.abs(b) < 0.05 ? b = 0 : Math.abs(b - 1) < 0.05 ? b = 1 : Math.abs(b - 0.5) < 0.05 && (b = 0.5), r.userData.originRatioY = b;
-    }
-    const v = (J = r.userData.originRatioX) != null ? J : 0.5, g = (Q = r.userData.originRatioY) != null ? Q : 0.5, p = h * (0.5 - v), E = f * (0.5 - g), L = (ee = (Z = r.userData.baseTransform) == null ? void 0 : Z.x) != null ? ee : 0, R = (re = (te = r.userData.baseTransform) == null ? void 0 : te.y) != null ? re : 0, x = ((ie = t.x) != null ? ie : L) - L, w = ((m = t.y) != null ? m : R) - R;
-    r.position.setX(o + p + x), r.position.setY(n - (E + w)), r.scale.set(l, u, 1), H.forceUpdateUniforms(r.material, {
+    !r || !r.userData.basePosition || Y.forceUpdateUniforms(r.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
-      borderRadius: (D = t.borderRadius) != null ? D : (T = r.userData.baseStyles) == null ? void 0 : T.borderRadius,
-      width: l,
-      height: u
+      borderRadius: (n = t.borderRadius) != null ? n : (o = r.userData.baseStyles) == null ? void 0 : o.borderRadius
+      // width and height are no longer updated here, they are updated in syncMeshesByDOM
     });
   });
 }
-function De(s, e, t) {
-  s.forEach((i) => {
-    if (i.userData.isFixed && i.userData.initialScroll && i.userData.originalBasePosition) {
-      const r = e - i.userData.initialScroll.x, o = t - i.userData.initialScroll.y;
-      i.userData.basePosition.x = i.userData.originalBasePosition.x + r, i.userData.basePosition.y = i.userData.originalBasePosition.y - o, i.position.x = i.userData.basePosition.x, i.position.y = i.userData.basePosition.y;
-    }
-  });
-}
-class ot {
+class nt {
   constructor(e, t, i, r) {
-    d(this, "target");
-    d(this, "renderer");
-    d(this, "registry");
-    d(this, "isTravelEnabled", !1);
-    d(this, "tracker");
-    this.target = e, this.renderer = t, this.registry = i, this.tracker = new ke(e, {
+    u(this, "target");
+    u(this, "renderer");
+    u(this, "registry");
+    u(this, "isTravelEnabled", !1);
+    u(this, "tracker");
+    this.target = e, this.renderer = t, this.registry = i, this.tracker = new Me(e, {
       resizeDebounce: r.resizeDebounce
     }), this.tracker.onLayoutChange.add((o, n) => {
-      document.querySelector(`[${F.NAME}~='${F.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const a = Oe(
+      document.querySelector(`[${I.NAME}~='${I.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const c = ke(
         this.target,
         o,
         W,
@@ -1513,25 +1523,23 @@ class ot {
         0,
         this.renderer.qualityFactor
       );
-      a && this.renderer.syncScene(a, n);
-    }), this.tracker.onScrollChange.add((o, n) => {
-      De(this.renderer.fixedMeshes, o, n), this.renderer.updateCameraScroll(o, n);
+      c && this.renderer.syncScene(c, n);
     }), this.tracker.onStyleChange.add((o) => {
-      nt(this.registry, o);
+      st(this.registry, o);
     }), this.tracker.onRender.add(() => {
-      this.renderer.render();
+      this.renderer.syncMeshesByDOM(), this.renderer.render();
     });
   }
   start() {
-    this.tracker.start(), De(this.renderer.fixedMeshes, window.scrollX, window.scrollY), this.renderer.updateCameraScroll(window.scrollX, window.scrollY);
+    this.tracker.start();
   }
   stop() {
     this.tracker.stop();
   }
 }
-class at {
+class ot {
   constructor() {
-    d(this, "store");
+    u(this, "store");
     this.store = /* @__PURE__ */ new WeakMap();
   }
   register(e, t) {
@@ -1554,30 +1562,30 @@ class at {
     this.store.delete(e);
   }
 }
-class ct {
+class at {
   constructor(e, t) {
-    d(this, "renderer");
-    d(this, "syncer");
-    d(this, "target");
-    d(this, "registry");
+    u(this, "renderer");
+    u(this, "syncer");
+    u(this, "target");
+    u(this, "registry");
     var r, o, n;
-    if (this.target = e, this.registry = new at(), !document.getElementById("mirage-engine-styles")) {
-      const c = document.createElement("style");
-      c.id = "mirage-engine-styles", c.textContent = `
-        [${$.NAME}="${$.VALUES.HIDE}"] {
+    if (this.target = e, this.registry = new ot(), !document.getElementById("mirage-engine-styles")) {
+      const a = document.createElement("style");
+      a.id = "mirage-engine-styles", a.textContent = `
+        [${H.NAME}="${H.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
-      `, document.head.appendChild(c);
+      `, document.head.appendChild(a);
     }
     let i;
     if (t.mode === "duplicate" ? i = (o = (r = t.container) != null ? r : this.target.parentElement) != null ? o : void 0 : i = (n = this.target.parentElement) != null ? n : void 0, !i)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new it(
+    this.renderer = new rt(
       this.target,
       t,
       i,
       this.registry
-    ), this.renderer.mount(), this.syncer = new ot(this.target, this.renderer, this.registry, t);
+    ), this.renderer.mount(), this.syncer = new nt(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();
@@ -1620,16 +1628,16 @@ class ct {
     r();
   }
 }
-class lt {
+class ct {
   constructor(e = {}) {
-    d(this, "frontSelector");
-    d(this, "midLayerElement");
-    d(this, "items", []);
-    d(this, "isInitialized", !1);
-    d(this, "midLayer", null);
-    d(this, "frontLayer", null);
-    d(this, "tracker", null);
-    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new ke(document.body, e.trackerConfig || { resizeDebounce: !0 });
+    u(this, "frontSelector");
+    u(this, "midLayerElement");
+    u(this, "items", []);
+    u(this, "isInitialized", !1);
+    u(this, "midLayer", null);
+    u(this, "frontLayer", null);
+    u(this, "tracker", null);
+    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new Me(document.body, e.trackerConfig || { resizeDebounce: !0 });
   }
   init() {
     var e;
@@ -1691,16 +1699,16 @@ class lt {
     });
   }
 }
-class dt {
+class ht {
   constructor(e, t) {
-    d(this, "_engine");
-    d(this, "_sandwich");
+    u(this, "_engine");
+    u(this, "_sandwich");
     if (!e)
       throw new Error("[Mirage] Target element is required.");
-    if (this._engine = new ct(e, t), t.sandwich !== !1) {
+    if (this._engine = new at(e, t), t.sandwich !== !1) {
       const i = typeof t.sandwich == "object" ? t.sandwich : {};
-      this._sandwich = new lt({
-        frontSelector: i.frontSelector || `[${Se.NAME}='${Se.VALUES.FRONT}']`
+      this._sandwich = new ct({
+        frontSelector: i.frontSelector || `[${Ce.NAME}='${Ce.VALUES.FRONT}']`
       }), this._sandwich.useTracker(this._engine.getTracker());
     }
   }
@@ -1727,5 +1735,5 @@ class dt {
   }
 }
 export {
-  dt as Mirage
+  ht as Mirage
 };