mirage-engine 0.3.18 → 0.3.19

package/dist/mirage-engine.js

@@ -1,31 +1,31 @@
 var Xe = Object.defineProperty, Ve = Object.defineProperties;
 var Ye = Object.getOwnPropertyDescriptors;
 var Ee = Object.getOwnPropertySymbols;
-var Pe = Object.prototype.hasOwnProperty, We = Object.prototype.propertyIsEnumerable;
+var We = Object.prototype.hasOwnProperty, He = Object.prototype.propertyIsEnumerable;
 var ye = (s, e, t) => e in s ? Xe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, te = (s, e) => {
   for (var t in e || (e = {}))
-    Pe.call(e, t) && ye(s, t, e[t]);
+    We.call(e, t) && ye(s, t, e[t]);
   if (Ee)
     for (var t of Ee(e))
-      We.call(e, t) && ye(s, t, e[t]);
+      He.call(e, t) && ye(s, t, e[t]);
   return s;
 }, Ce = (s, e) => Ve(s, Ye(e));
 var u = (s, e, t) => (ye(s, typeof e != "symbol" ? e + "" : e, t), t);
 var Te = (s, e, t) => new Promise((i, r) => {
-  var l = (c) => {
+  var c = (l) => {
     try {
-      o(t.next(c));
-    } catch (a) {
-      r(a);
+      a(t.next(l));
+    } catch (o) {
+      r(o);
     }
-  }, n = (c) => {
+  }, n = (l) => {
     try {
-      o(t.throw(c));
-    } catch (a) {
-      r(a);
+      a(t.throw(l));
+    } catch (o) {
+      r(o);
     }
-  }, o = (c) => c.done ? i(c.value) : Promise.resolve(c.value).then(l, n);
-  o((t = t.apply(s, e)).next());
+  }, a = (l) => l.done ? i(l.value) : Promise.resolve(l.value).then(c, n);
+  a((t = t.apply(s, e)).next());
 });
 import * as w from "three";
 const Ie = {
@@ -59,7 +59,7 @@ const Ie = {
   KEY: "mirageTravel",
   VALUES: Re,
   MAX_LAYERS: Object.keys(Re).length - 1
-}, H = {
+}, P = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
   VALUES: Ie
@@ -67,7 +67,7 @@ const Ie = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
   VALUES: Ie
-}, He = {
+}, Pe = {
   NAME: "data-mirage-shader",
   KEY: "mirageShader"
 }, Le = {
@@ -143,32 +143,32 @@ class Be {
         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 r, l;
+    var r, c;
     this.target = e;
     const i = (r = t.resizeDebounce) != null ? r : !0;
     i === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : i === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
       enabled: !0,
-      delay: (l = i.delay) != null ? l : 150,
+      delay: (c = i.delay) != null ? c : 150,
       onStart: i.onStart,
       onEnd: i.onEnd
     }, this.observer = new MutationObserver((n) => {
-      let o = ge;
-      for (const c of n)
-        if (c.type === "childList")
-          o |= pe, c.removedNodes.length > 0 && c.removedNodes.forEach((a) => {
-            a instanceof HTMLElement && this.pendingDeletions.add(a);
+      let a = ge;
+      for (const l of n)
+        if (l.type === "childList")
+          a |= pe, l.removedNodes.length > 0 && l.removedNodes.forEach((o) => {
+            o instanceof HTMLElement && this.pendingDeletions.add(o);
           });
-        else if (c.type === "attributes")
-          if (c.attributeName === "style") {
-            o |= re | ue;
-            const a = c.target, f = qe(a.style);
-            this.pendingStyles.set(a, f);
+        else if (l.type === "attributes")
+          if (l.attributeName === "style") {
+            a |= re | ue;
+            const o = l.target, f = qe(o.style);
+            this.pendingStyles.set(o, f);
           } else
-            c.attributeName === "class" ? o |= re | ue : c.attributeName && c.attributeName.startsWith("data-") && (o |= re | ue, c.attributeName.startsWith("data-mirage") && (o |= pe));
+            l.attributeName === "class" ? a |= re | ue : l.attributeName && l.attributeName.startsWith("data-") && (a |= re | ue, l.attributeName.startsWith("data-mirage") && (a |= pe));
         else
-          c.type === "characterData" && (o |= be | re);
-      if (o !== ge) {
-        if (this.pendingMask |= o, o & pe) {
+          l.type === "characterData" && (a |= be | re);
+      if (a !== ge) {
+        if (this.pendingMask |= a, a & pe) {
           this.clearTimers(), this.isDomDirty = !0;
           return;
         }
@@ -198,7 +198,7 @@ const G = 1, ae = 2, O = {
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Me = Object.values(H.VALUES);
+}, Me = Object.values(P.VALUES);
 class Ue {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
@@ -216,13 +216,13 @@ class Ue {
       return 0;
     const t = document.createElement("div"), i = document.createElement("span"), r = document.createElement("img");
     t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", i.style.margin = "0", i.style.padding = "0", i.style.border = "none", i.style.lineHeight = "normal", r.width = 1, r.height = 1, r.style.verticalAlign = "baseline", i.appendChild(document.createTextNode("Hidden Text")), t.appendChild(i), t.appendChild(r), document.body.appendChild(t);
-    const l = r.offsetTop - i.offsetTop;
-    return document.body.removeChild(t), l;
+    const c = r.offsetTop - i.offsetTop;
+    return document.body.removeChild(t), c;
   }
 }
 u(Ue, "cache", /* @__PURE__ */ new Map());
 class je extends w.MeshBasicMaterial {
-  constructor(t, i, r, l, n = 2) {
+  constructor(t, i, r, c, n = 2) {
     super({
       transparent: !0,
       side: w.FrontSide,
@@ -233,29 +233,29 @@ class je extends w.MeshBasicMaterial {
     u(this, "qualityFactor");
     if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
       throw new Error("[Mirage] Failed to create canvas context");
-    this.qualityFactor = n, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t, i, r, l);
+    this.qualityFactor = n, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t, i, r, c);
   }
   wrapText(t, i) {
     const r = t.split(`
-`), l = [];
+`), c = [];
     return r.forEach((n) => {
-      const o = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-      if (o.length === 0) {
-        l.push("");
+      const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (a.length === 0) {
+        c.push("");
         return;
       }
-      let c = o[0];
-      for (let a = 1; a < o.length; a++) {
-        const f = o[a];
-        this.ctx.measureText(c + f).width <= i + 2 ? c += f : (c && l.push(c), c = f.trimStart());
+      let l = a[0];
+      for (let o = 1; o < a.length; o++) {
+        const f = a[o];
+        this.ctx.measureText(l + f).width <= i + 2 ? l += f : (l && c.push(l), l = f.trimStart());
       }
-      c && l.push(c);
-    }), l;
+      l && c.push(l);
+    }), c;
   }
-  updateText(t, i, r, l, n) {
+  updateText(t, i, r, c, n) {
     n !== void 0 && (this.qualityFactor = n);
-    const c = (window.devicePixelRatio || 1) * this.qualityFactor, a = r * c, f = l * c;
-    this.canvas.width !== a || this.canvas.height !== f ? (this.canvas.width = a, this.canvas.height = f) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(c, 0, 0, c, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
+    const l = (window.devicePixelRatio || 1) * this.qualityFactor, o = r * l, f = c * l;
+    this.canvas.width !== o || this.canvas.height !== f ? (this.canvas.width = o, this.canvas.height = f) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(l, 0, 0, l, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
     const h = this.wrapText(t, r), d = i.lineHeight, p = Ue.getBaseline(i.font);
     h.forEach((g, M) => {
       const m = M * d + p;
@@ -267,21 +267,21 @@ class je extends w.MeshBasicMaterial {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function ce(s, e = 0) {
+function le(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 le(s) {
+function ce(s) {
   if (!s || s === "transparent")
     return { color: new w.Color(16777215), alpha: 0 };
   const e = s.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
-    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), l = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new w.Color(`rgb(${t}, ${i}, ${r})`), alpha: l };
+    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new w.Color(`rgb(${t}, ${i}, ${r})`), alpha: c };
   }
   return { color: new w.Color(s), alpha: 1 };
 }
@@ -289,16 +289,16 @@ function Oe(s) {
   const e = [];
   let t = "", i = 0;
   for (let r = 0; r < s.length; r++) {
-    const l = s[r];
-    if (l === "(")
+    const c = s[r];
+    if (c === "(")
       i++;
-    else if (l === ")")
+    else if (c === ")")
       i--;
-    else if (l === "," && i === 0) {
+    else if (c === "," && i === 0) {
       e.push(t.trim()), t = "";
       continue;
     }
-    t += l;
+    t += c;
   }
   return t && e.push(t.trim()), e;
 }
@@ -309,47 +309,47 @@ function Ke(s) {
   if (!e)
     return null;
   const t = e[1], i = Oe(t);
-  let r = Math.PI, l = 0;
+  let r = Math.PI, c = 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), l = 1;
+    n === "to top" ? r = 0 : n === "to right" ? r = Math.PI / 2 : n === "to bottom" ? r = Math.PI : n === "to left" ? r = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? r = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? r = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? r = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (r = Math.PI * 1.75), c = 1;
   else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
-    const c = parseFloat(n);
-    n.endsWith("deg") ? r = c * (Math.PI / 180) : n.endsWith("rad") ? r = c : n.endsWith("turn") && (r = c * Math.PI * 2), l = 1;
-  }
-  const o = [];
-  for (let c = l; c < i.length && !(o.length >= 8); c++) {
-    const a = i[c].trim(), f = a.lastIndexOf(" ");
-    let h = a, d = null;
-    if (f !== -1 && !a.endsWith(")")) {
-      const g = a.substring(f + 1);
-      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = a.substring(0, f).trim(), d = g);
+    const l = parseFloat(n);
+    n.endsWith("deg") ? r = l * (Math.PI / 180) : n.endsWith("rad") ? r = l : n.endsWith("turn") && (r = l * Math.PI * 2), c = 1;
+  }
+  const a = [];
+  for (let l = c; l < i.length && !(a.length >= 8); l++) {
+    const o = i[l].trim(), f = o.lastIndexOf(" ");
+    let h = o, d = null;
+    if (f !== -1 && !o.endsWith(")")) {
+      const g = o.substring(f + 1);
+      (g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = o.substring(0, f).trim(), d = g);
     }
-    const p = le(h);
-    o.push({
+    const p = ce(h);
+    a.push({
       color: p.color,
       alpha: p.alpha,
       rawStop: d,
       stop: 0
     });
   }
-  if (o.length > 0) {
-    for (let a = 0; a < o.length; a++)
-      o[a].rawStop !== null && (o[a].stop = parseFloat(o[a].rawStop) / 100);
-    o[0].rawStop === null && (o[0].stop = 0), o.length > 1 && o[o.length - 1].rawStop === null && (o[o.length - 1].stop = 1);
-    let c = 0;
-    for (let a = 1; a < o.length; a++)
-      if (o[a].rawStop !== null || a === o.length - 1) {
-        const f = a - c;
+  if (a.length > 0) {
+    for (let o = 0; o < a.length; o++)
+      a[o].rawStop !== null && (a[o].stop = parseFloat(a[o].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 l = 0;
+    for (let o = 1; o < a.length; o++)
+      if (a[o].rawStop !== null || o === a.length - 1) {
+        const f = o - l;
         if (f > 1) {
-          const h = o[c].stop, p = (o[a].stop - h) / f;
+          const h = a[l].stop, p = (a[o].stop - h) / f;
           for (let g = 1; g < f; g++)
-            o[c + g].stop = h + p * g;
+            a[l + g].stop = h + p * g;
         }
-        c = a;
+        l = o;
       }
   }
-  return { angle: r, stops: o };
+  return { angle: r, stops: a };
 }
 function Je(s) {
   if (!s || s === "none")
@@ -358,14 +358,14 @@ function Je(s) {
   if (e.length === 0)
     return null;
   const t = e[0].trim(), i = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, r = t.match(i);
-  let l = "transparent", n = t;
+  let c = "transparent", n = t;
   if (r && r[1] !== "inset") {
     const p = r[1];
-    (p.startsWith("rgb") || p.startsWith("#") || p === "black" || p === "white" || p === "transparent") && (l = p, n = t.replace(p, "").trim());
+    (p.startsWith("rgb") || p.startsWith("#") || p === "black" || p === "white" || p === "transparent") && (c = p, n = t.replace(p, "").trim());
   }
   n = n.replace("inset", "").trim();
-  const o = n.split(/\s+/).map((p) => parseFloat(p) || 0), c = o[0] || 0, a = o[1] || 0, f = o[2] || 0, h = o[3] || 0, d = le(l);
-  return { offsetX: c, offsetY: a, blurRadius: f, spreadRadius: h, color: d.color, alpha: d.alpha };
+  const a = n.split(/\s+/).map((p) => parseFloat(p) || 0), l = a[0] || 0, o = a[1] || 0, f = a[2] || 0, h = a[3] || 0, d = ce(c);
+  return { offsetX: l, offsetY: o, blurRadius: f, spreadRadius: h, color: d.color, alpha: d.alpha };
 }
 const Ze = `varying vec2 vUv;
 varying vec4 vScreenPos;
@@ -549,23 +549,23 @@ baseColor = blendSrcOver(baseColor, texColor);`, De = {
 };
 function it(s, e, t, i = null, r) {
   var C;
-  const l = i !== null || !!s.imageSrc;
+  const c = i !== null || !!s.imageSrc;
   let n = "";
-  const o = {};
+  const a = {};
   if (r != null && r.uniforms)
     for (const [b, S] of Object.entries(r.uniforms))
       typeof S == "number" ? (n += `uniform float ${b};
-`, o[b] = { value: S }) : Array.isArray(S) ? S.length === 2 ? (n += `uniform vec2 ${b};
-`, o[b] = { value: new w.Vector2(...S) }) : S.length === 3 ? (n += `uniform vec3 ${b};
-`, o[b] = { value: new w.Vector3(...S) }) : S.length === 4 && (n += `uniform vec4 ${b};
-`, o[b] = { value: new w.Vector4(...S) }) : (n += `uniform float ${b};
-`, o[b] = { value: S });
-  const c = r !== void 0, a = (l || c ? Ae.declChunk : "") + `
+`, a[b] = { value: S }) : Array.isArray(S) ? S.length === 2 ? (n += `uniform vec2 ${b};
+`, a[b] = { value: new w.Vector2(...S) }) : S.length === 3 ? (n += `uniform vec3 ${b};
+`, a[b] = { value: new w.Vector3(...S) }) : S.length === 4 && (n += `uniform vec4 ${b};
+`, a[b] = { value: new w.Vector4(...S) }) : (n += `uniform float ${b};
+`, a[b] = { value: S });
+  const l = r !== void 0, o = (c || l ? Ae.declChunk : "") + `
 ` + n, f = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 `, h = s.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 localUv = (p / uSize) + 0.5;
 vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
-`, d = l || c ? f + h + ((r == null ? void 0 : r.uvModifier) || "") : "", p = l || c ? Ae.baseColorChunk : "", g = (r == null ? void 0 : r.colorModifier) || "", M = De.fragmentShader.replace("#INJECT_DECLARATIONS", a).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), m = le(s.backgroundColor), y = le(s.borderColor), E = {
+`, d = c || l ? f + h + ((r == null ? void 0 : r.uvModifier) || "") : "", p = c || l ? Ae.baseColorChunk : "", g = (r == null ? void 0 : r.colorModifier) || "", M = De.fragmentShader.replace("#INJECT_DECLARATIONS", o).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), m = ce(s.backgroundColor), y = ce(s.borderColor), E = {
     uSize: { value: new w.Vector2(e, t) },
     uMeshSize: { value: new w.Vector2(e, t) },
     uShadowColor: { value: new w.Vector4(0, 0, 0, 0) },
@@ -589,7 +589,7 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
       )
     },
     uBorderRadius: { value: new w.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: ce(s.borderWidth) },
+    uBorderWidth: { value: le(s.borderWidth) },
     uOpacity: { value: (C = s.opacity) != null ? C : 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new w.Vector2(1, 1) },
@@ -601,9 +601,9 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  _e(E.uBorderRadius.value, s.borderRadius, Math.min(e, t)), l && (E.uTexture.value = i);
+  _e(E.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (E.uTexture.value = i);
   const A = new w.ShaderMaterial({
-    uniforms: te(te({}, E), o),
+    uniforms: te(te({}, E), a),
     vertexShader: De.vertexShader,
     fragmentShader: M,
     transparent: !0,
@@ -613,12 +613,12 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
   return s.backgroundImage && xe(A, { backgroundImage: s.backgroundImage }), A;
 }
 function st(s, e, t, i, r) {
-  const l = ce(e.borderWidth);
+  const c = le(e.borderWidth);
   xe(s, {
     width: t,
     height: i,
     borderRadius: e.borderRadius,
-    borderWidth: l,
+    borderWidth: c,
     backgroundColor: e.backgroundColor,
     borderColor: e.borderColor,
     opacity: e.opacity,
@@ -628,14 +628,14 @@ function st(s, e, t, i, r) {
   });
 }
 function xe(s, e) {
-  var i, r, l;
+  var i, r, c;
   if (e.boxShadow !== void 0) {
     const n = Je(e.boxShadow);
     n ? (s.uniforms.uShadowColor.value.set(n.color.r, n.color.g, n.color.b, n.alpha), s.uniforms.uShadowOffset.value.set(n.offsetX, n.offsetY), s.uniforms.uShadowBlur.value = n.blurRadius, s.uniforms.uShadowSpread.value = n.spreadRadius, s.userData.shadowPadding = n.blurRadius + n.spreadRadius + Math.max(Math.abs(n.offsetX), Math.abs(n.offsetY))) : (s.uniforms.uShadowColor.value.w = 0, s.userData.shadowPadding = 0);
   }
   if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), s.uniforms.uMeshSize) {
-    const n = s.userData.shadowPadding || 0, o = e.width !== void 0 ? e.width : s.uniforms.uSize.value.x, c = e.height !== void 0 ? e.height : s.uniforms.uSize.value.y;
-    s.uniforms.uMeshSize.value.set(o + n * 2, c + n * 2);
+    const n = s.userData.shadowPadding || 0, a = e.width !== void 0 ? e.width : s.uniforms.uSize.value.x, l = e.height !== void 0 ? e.height : s.uniforms.uSize.value.y;
+    s.uniforms.uMeshSize.value.set(a + n * 2, l + n * 2);
   }
   if (e.borderRadius !== void 0) {
     const n = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(s.uniforms.uSize.value.x, s.uniforms.uSize.value.y);
@@ -651,7 +651,7 @@ function xe(s, e) {
         n
       );
     } else if (typeof e.backgroundColor == "string") {
-      const n = le(e.backgroundColor);
+      const n = ce(e.backgroundColor);
       s.uniforms.uBgColor.value.set(
         n.color.r,
         n.color.g,
@@ -677,7 +677,7 @@ function xe(s, e) {
         n
       );
     } else if (typeof e.borderColor == "string") {
-      const n = le(e.borderColor);
+      const n = ce(e.borderColor);
       s.uniforms.uBorderColor.value.set(
         n.color.r,
         n.color.g,
@@ -696,9 +696,9 @@ function xe(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.naturalWidth || t.image.videoWidth || t.image.width, o = t.image.naturalHeight || t.image.videoHeight || t.image.height, c = (r = e.width) != null ? r : s.uniforms.uSize.value.x, a = (l = e.height) != null ? l : s.uniforms.uSize.value.y;
-    if (n && o && c && a) {
-      const f = n / o, h = c / a;
+    const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, l = (r = e.width) != null ? r : s.uniforms.uSize.value.x, o = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
+    if (n && a && l && o) {
+      const f = n / a, h = l / o;
       if (f > h) {
         const d = h / f;
         s.uniforms.uTextureRepeat.value.set(d, 1), s.uniforms.uTextureOffset.value.set((1 - d) / 2, 0);
@@ -713,17 +713,17 @@ function xe(s, e) {
     const n = Ke(e.backgroundImage);
     if (n) {
       s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
-      for (let o = 0; o < 8; o++)
-        if (o < n.stops.length) {
-          const c = n.stops[o];
-          s.uniforms.uGradientColors.value[o].set(
-            c.color.r,
-            c.color.g,
-            c.color.b,
-            c.alpha
-          ), s.uniforms.uGradientStops.value[o] = c.stop;
+      for (let a = 0; a < 8; a++)
+        if (a < n.stops.length) {
+          const l = n.stops[a];
+          s.uniforms.uGradientColors.value[a].set(
+            l.color.r,
+            l.color.g,
+            l.color.b,
+            l.alpha
+          ), s.uniforms.uGradientStops.value[a] = l.stop;
         } else
-          s.uniforms.uGradientColors.value[o].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[o] = 1;
+          s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
     } else
       s.uniforms.uGradientCount.value = 0;
   }
@@ -731,7 +731,7 @@ function xe(s, e) {
     n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && n !== "boxShadow" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
 }
 function _e(s, e, t = 0) {
-  var c, a, f, h;
+  var l, o, f, h;
   if (e == null) {
     s.set(0, 0, 0, 0);
     return;
@@ -744,37 +744,37 @@ function _e(s, e, t = 0) {
     s.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const i = e.split("/")[0].trim().split(/\s+/), r = ce(i[0], t), l = ce((c = i[1]) != null ? c : i[0], t), n = ce((a = i[2]) != null ? a : i[0], t), o = ce((h = (f = i[3]) != null ? f : i[1]) != null ? h : i[0], t);
-  s.set(r, l, n, o);
+  const i = e.split("/")[0].trim().split(/\s+/), r = le(i[0], t), c = le((l = i[1]) != null ? l : i[0], t), n = le((o = i[2]) != null ? o : i[0], t), a = le((h = (f = i[3]) != null ? f : i[1]) != null ? h : i[0], t);
+  s.set(r, c, n, a);
 }
-const P = {
-  create(s, e, t, i, r, l = 2, n = null, o) {
+const W = {
+  create(s, e, t, i, r, c = 2, n = null, a) {
     return s === "BOX" ? it(
       e,
       i,
       r,
       n,
-      o
+      a
     ) : s === "TEXT" ? new je(
       t || "",
       e,
       i,
       r,
-      l
+      c
     ) : new w.MeshBasicMaterial({ visible: !1 });
   },
-  update(s, e, t, i, r, l, n = 2, o) {
+  update(s, e, t, i, r, c, n = 2, a) {
     e === "BOX" ? st(
       s,
       t,
       r,
-      l,
-      o
+      c,
+      a
     ) : e === "TEXT" && s.updateText(
       i || "",
       t,
       r,
-      l,
+      c,
       n
     );
   },
@@ -792,8 +792,8 @@ class nt {
     this.onUpdate = e, t && (this.observer = new IntersectionObserver(
       (i) => {
         for (const r of i) {
-          const l = r.target;
-          r.isIntersecting ? this.loadTexture(l) : this.disposeTexture(l);
+          const c = r.target;
+          r.isIntersecting ? this.loadTexture(c) : this.disposeTexture(c);
         }
       },
       { rootMargin: "300px" }
@@ -817,9 +817,9 @@ class nt {
         try {
           let i;
           if (t.startsWith("data:image/svg+xml"))
-            i = yield new Promise((l, n) => {
-              const o = new Image();
-              o.onload = () => l(o), o.onerror = n, o.src = t;
+            i = yield new Promise((c, n) => {
+              const a = new Image();
+              a.onload = () => c(a), a.onerror = n, a.src = t;
             });
           else {
             const n = yield (yield fetch(t)).blob();
@@ -875,15 +875,15 @@ class ot {
     u(this, "textureManager");
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
     u(this, "fixedMeshes", /* @__PURE__ */ new Set());
-    var o, c, a, f, h;
-    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (c = t.canvasSize) != null ? c : "viewport", this.clipArea = (a = t.travelerClipArea) != null ? a : 1, this.targetLayer = (f = t.layer) != null ? f : "base", this.textureManager = new nt((d, p) => {
+    var a, l, o, f, h;
+    this.target = e, this.mountContainer = i, this.registry = r, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (l = t.canvasSize) != null ? l : "viewport", this.clipArea = (o = t.travelerClipArea) != null ? o : 1, this.targetLayer = (f = t.layer) != null ? f : "base", this.textureManager = new nt((d, p) => {
       const g = this.registry.get(d);
-      g && g.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(g.material, { texture: p });
+      g && g.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(g.material, { texture: p });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new w.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const l = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
+    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 w.OrthographicCamera(
-      l / -2,
-      l / 2,
+      c / -2,
+      c / 2,
       n / 2,
       n / -2,
       1,
@@ -894,7 +894,7 @@ class ot {
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(l, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
+    }), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
   }
   get isViewport() {
     return this.mode === "overlay" && this.canvasSize === "viewport";
@@ -950,12 +950,12 @@ class ot {
   updateUniforms(e, t) {
     const i = this.registry.get(e);
     i && (i.traverse((r) => {
-      r.isMesh && r.material && P.forceUpdateUniforms(
+      r.isMesh && r.material && W.forceUpdateUniforms(
         r.material,
         t
       );
     }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((r) => {
-      r.isMesh && r.material && P.forceUpdateUniforms(
+      r.isMesh && r.material && W.forceUpdateUniforms(
         r.material,
         t
       );
@@ -971,8 +971,8 @@ class ot {
     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, l = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, o = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, c = Math.abs(r - n) > 0.1 || Math.abs(l - o) > 0.1, a = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
-    c ? (this.targetRect = i, this.setSize(r, l), this.updateCanvasLayout()) : a ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((f) => {
+    const i = this.target.getBoundingClientRect(), r = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, c = 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, l = Math.abs(r - n) > 0.1 || Math.abs(c - a) > 0.1, o = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
+    l ? (this.targetRect = i, this.setSize(r, c), this.updateCanvasLayout()) : o ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((f) => {
       const h = this.registry.get(f);
       if (h) {
         this.scene.remove(h);
@@ -991,23 +991,23 @@ class ot {
   // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
   // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
   reconcileNode(e) {
-    var r, l;
+    var r, c;
     let t = this.registry.get(e.element);
     const i = JSON.stringify(e.shaderHooks || null);
     if (t && t.userData.shaderHash !== i && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof w.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
-      const n = new w.PlaneGeometry(1, 1), o = e.isTraveler ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), c = P.create(
+      const n = new w.PlaneGeometry(1, 1), a = e.isTraveler ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), l = W.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        o,
+        a,
         e.shaderHooks
       );
-      t = new w.Mesh(n, c), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = c, t.userData.domElement = e.element, t.userData.shaderHash = i;
+      t = new w.Mesh(n, l), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = l, t.userData.domElement = e.element, t.userData.shaderHash = i;
     }
-    if (t.userData.clipElements = e.clipElements, (l = e.nativeStyles) != null && l.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
+    if (t.userData.clipElements = e.clipElements, (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 < N.MAX_LAYERS; n++)
         n === e.captureLayer - 2 ? this.travelersByLayer[n].add(t) : this.travelersByLayer[n].delete(t);
     else
@@ -1024,11 +1024,11 @@ class ot {
       ));
   }
   reconcileTextChild(e, t, i) {
-    var a;
+    var o;
     const r = t.textLines || [
       { text: t.textContent || "", rect: t.rect }
-    ], l = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(l) + t.textContent + r.map((f) => f.text).join("|"), o = (a = e.userData) == null ? void 0 : a.textChildStyleHash;
-    if (t.dirtyMask & be || n !== o) {
+    ], c = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + r.map((f) => f.text).join("|"), a = (o = e.userData) == null ? void 0 : o.textChildStyleHash;
+    if (t.dirtyMask & be || n !== a) {
       e.children.filter(
         (g) => g.name.startsWith("TEXT_CHILD")
       ).forEach((g) => {
@@ -1038,9 +1038,9 @@ class ot {
       });
       const h = t.rect, d = h.x + h.width / 2, p = h.y + h.height / 2;
       r.forEach((g, M) => {
-        const m = P.create(
+        const m = W.create(
           "TEXT",
-          l,
+          c,
           g.text,
           g.rect.width,
           g.rect.height,
@@ -1077,16 +1077,16 @@ class ot {
   }
   updateMeshProperties(e, t) {
     var C, b, S, z, X;
-    const { rect: i, styles: r } = t, l = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / l, o = this.renderer.domElement.height / l;
+    const { rect: i, styles: r } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
     e.material = e.userData.baseMaterial;
-    let c = ((C = e.material.userData) == null ? void 0 : C.shadowPadding) || 0;
-    e.scale.set(i.width + c * 2, i.height + c * 2, 1), e.userData.domRect = {
+    let l = ((C = e.material.userData) == null ? void 0 : C.shadowPadding) || 0;
+    e.scale.set(i.width + l * 2, i.height + l * 2, 1), e.userData.domRect = {
       x: i.x,
       y: i.y,
       width: i.width,
       height: i.height
     };
-    const a = 1e-3;
+    const o = 1e-3;
     this.renderOrder++;
     const f = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY;
     let d, p;
@@ -1094,12 +1094,12 @@ class ot {
       d = i.x - window.innerWidth / 2 + i.width / 2, p = -i.y + window.innerHeight / 2 - i.height / 2;
     else {
       const B = i.x - f, k = i.y - h;
-      d = B - n / 2 + i.width / 2, p = -k + o / 2 - i.height / 2;
+      d = B - n / 2 + i.width / 2, p = -k + a / 2 - i.height / 2;
     }
     e.position.set(
       d,
       p,
-      r.zIndex + this.renderOrder * a
+      r.zIndex + this.renderOrder * o
     );
     const g = i.x, M = i.y;
     e.userData.basePosition = { x: d, y: p }, e.userData.originalBasePosition = { x: d, y: p }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: g, y: M }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
@@ -1109,7 +1109,7 @@ class ot {
       const B = new DOMMatrix(y.transform);
       E = B.m41, A = B.m42;
     }
-    if (e.userData.baseTransform = { x: E, y: A }, delete e.userData.originRatioX, delete e.userData.originRatioY, P.update(
+    if (e.userData.baseTransform = { x: E, y: A }, delete e.userData.originRatioX, delete e.userData.originRatioY, W.update(
       e.userData.baseMaterial,
       "BOX",
       r,
@@ -1120,7 +1120,7 @@ class ot {
       t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const U = P.create(
+        const U = W.create(
           "BOX",
           t.nativeStyles,
           "",
@@ -1138,7 +1138,7 @@ class ot {
         k = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, j = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
         const U = t.nativeRect.x - f, V = t.nativeRect.y - h;
-        k = U - n / 2 + t.nativeRect.width / 2, j = -V + o / 2 - t.nativeRect.height / 2;
+        k = U - n / 2 + t.nativeRect.width / 2, j = -V + a / 2 - t.nativeRect.height / 2;
       }
       let J = t.nativeRect.width, Z = t.nativeRect.height, L = k, _ = j;
       if (t.nativeStyles.transform) {
@@ -1182,8 +1182,8 @@ class ot {
       B.scale.set(J + K * 2, Z + K * 2, 1), B.position.set(
         L,
         _,
-        t.nativeStyles.zIndex + this.renderOrder * a
-      ), P.update(
+        t.nativeStyles.zIndex + this.renderOrder * o
+      ), W.update(
         B.material,
         "BOX",
         t.nativeStyles,
@@ -1202,8 +1202,8 @@ class ot {
       const r = e.userData.nativeMesh;
       if (r.layers.set(O.HIDDEN), t.visibility & G) {
         r.layers.enable(O.getCaptureLayer(t.nativeLayer));
-        for (let l = t.captureLayer; l <= N.MAX_LAYERS + 1; l++)
-          l !== t.nativeLayer && e.layers.enable(O.getCaptureLayer(l));
+        for (let c = t.captureLayer; c <= N.MAX_LAYERS + 1; c++)
+          c !== t.nativeLayer && e.layers.enable(O.getCaptureLayer(c));
       }
     } else if (t.visibility & G)
       for (let r = t.captureLayer; r <= N.MAX_LAYERS + 1; r++)
@@ -1212,104 +1212,107 @@ class ot {
   captureRenderTarget(e, t, i) {
     if (e.size === 0 || !i)
       return;
-    const r = new w.Color(), l = this.renderer.getClearAlpha();
+    const r = new w.Color(), c = this.renderer.getClearAlpha();
     this.renderer.getClearColor(r), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(i), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
-    const n = new w.Vector3(), o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, a = this.renderer.getPixelRatio();
+    const n = new w.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, l = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, o = this.renderer.getPixelRatio();
     for (const f of e) {
       n.setFromMatrixPosition(f.matrixWorld), n.project(this.camera);
-      const h = (n.x + 1) / 2 * o, d = (n.y + 1) / 2 * c;
+      const h = (n.x + 1) / 2 * a, d = (n.y + 1) / 2 * l;
       let p = 0, g = 1;
       typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
-      const M = f.scale.x * g + 0.5, m = f.scale.y * g + 0.5, y = h - M / 2, E = d - m / 2, A = (y * this.qualityFactor - p) / a, C = (E * this.qualityFactor - p) / a, b = (M * this.qualityFactor + p * 2) / a, S = (m * this.qualityFactor + p * 2) / a;
+      const M = f.scale.x * g + 0.5, m = f.scale.y * g + 0.5, y = h - M / 2, E = d - m / 2, A = (y * this.qualityFactor - p) / o, C = (E * this.qualityFactor - p) / o, b = (M * this.qualityFactor + p * 2) / o, S = (m * this.qualityFactor + p * 2) / o;
       this.renderer.setScissor(A, C, b, S), this.renderer.render(this.scene, this.camera);
     }
-    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, l);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, c);
   }
   render() {
-    for (let o = 0; o < N.MAX_LAYERS; o++) {
-      const c = o + 1;
+    for (let l = 0; l < N.MAX_LAYERS; l++) {
+      const o = l + 1;
       this.captureRenderTarget(
-        this.travelersByLayer[o],
-        O.getCaptureLayer(c),
-        this.renderTargets[o]
+        this.travelersByLayer[l],
+        O.getCaptureLayer(o),
+        this.renderTargets[l]
       );
     }
-    const e = this.renderer.getContext(), t = this.renderer.getPixelRatio(), i = this.renderer.domElement.height / t, r = this.renderer.domElement, l = r.getBoundingClientRect().top, n = r.getBoundingClientRect().left;
-    this.scene.children.forEach((o) => {
-      var f;
-      const c = o, a = (f = c.userData) == null ? void 0 : f.scissorRect;
-      if (a && a.width > 0 && a.height > 0) {
-        const h = Math.floor((a.x - n) * t), d = Math.floor(
-          (i - (a.y - l + a.height)) * t
-        ), p = Math.ceil(a.width * t), g = Math.ceil(a.height * t);
-        c.onBeforeRender = () => {
-          e.enable(e.SCISSOR_TEST), e.scissor(h, d, p, g);
-        }, c.onAfterRender = () => {
+    const e = this.renderer.getContext(), t = this.renderer.getPixelRatio(), i = this.renderer.domElement.height / t, r = this.renderer.domElement, c = r.getBoundingClientRect().top, n = r.getBoundingClientRect().left, a = (l, o) => {
+      if (o && o.width > 0 && o.height > 0) {
+        const f = Math.floor((o.x - n) * t), h = Math.floor(
+          (i - (o.y - c + o.height)) * t
+        ), d = Math.ceil(o.width * t), p = Math.ceil(o.height * t);
+        l.onBeforeRender = () => {
+          e.enable(e.SCISSOR_TEST), e.scissor(f, h, d, p);
+        }, l.onAfterRender = () => {
           e.disable(e.SCISSOR_TEST);
-        };
+        }, l.__hasScissorHook = !0;
       } else
-        c.onBeforeRender && c.__hasScissorHook && (c.onBeforeRender = () => {
-        }, c.onAfterRender = () => {
-        }, c.__hasScissorHook = !1);
-      a && (c.__hasScissorHook = !0);
+        l.__hasScissorHook && (l.onBeforeRender = () => {
+        }, l.onAfterRender = () => {
+        }, l.__hasScissorHook = !1);
+    };
+    this.scene.children.forEach((l) => {
+      var h;
+      const o = l, f = (h = o.userData) == null ? void 0 : h.scissorRect;
+      a(o, f), o.children.forEach((d) => {
+        d.name.startsWith("TEXT_CHILD") && a(d, f);
+      });
     }), this.renderer.render(this.scene, this.camera);
   }
   syncMeshesByDOM() {
-    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, i = this.renderer.getPixelRatio(), r = this.renderer.domElement.width / i, l = this.renderer.domElement.height / i;
+    const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, i = this.renderer.getPixelRatio(), r = this.renderer.domElement.width / i, c = this.renderer.domElement.height / i;
     this.scene.children.forEach((n) => {
       var h, d;
-      const o = n;
-      if (!o.userData || !o.userData.domElement)
+      const a = n;
+      if (!a.userData || !a.userData.domElement)
         return;
-      const c = o.userData.domElement;
-      if (!c.isConnected)
+      const l = a.userData.domElement;
+      if (!l.isConnected)
         return;
-      let a;
-      if (c.nodeType === Node.TEXT_NODE) {
+      let o;
+      if (l.nodeType === Node.TEXT_NODE) {
         const p = document.createRange();
-        p.selectNode(c), a = p.getBoundingClientRect();
+        p.selectNode(l), o = p.getBoundingClientRect();
       } else
-        a = c.getBoundingClientRect();
-      const f = o.userData.domRect;
-      if (!f || Math.abs(a.x - f.x) > 0.5 || Math.abs(a.y - f.y) > 0.5 || Math.abs(a.width - f.width) > 0.5 || Math.abs(a.height - f.height) > 0.5) {
-        o.userData.domRect = {
-          x: a.x,
-          y: a.y,
-          width: a.width,
-          height: a.height
+        o = l.getBoundingClientRect();
+      const f = a.userData.domRect;
+      if (!f || Math.abs(o.x - f.x) > 0.5 || Math.abs(o.y - f.y) > 0.5 || Math.abs(o.width - f.width) > 0.5 || Math.abs(o.height - f.height) > 0.5) {
+        a.userData.domRect = {
+          x: o.x,
+          y: o.y,
+          width: o.width,
+          height: o.height
         };
-        const p = o.userData.clipElements;
+        const p = a.userData.clipElements;
         if (p && p.length > 0) {
           let y = -1 / 0, E = -1 / 0, A = 1 / 0, C = 1 / 0;
           for (const b of p) {
             const S = b.getBoundingClientRect();
             y = Math.max(y, S.left), E = Math.max(E, S.top), A = Math.min(A, S.right), C = Math.min(C, S.bottom);
           }
-          o.userData.scissorRect = {
+          a.userData.scissorRect = {
             x: y,
             y: E,
             width: Math.max(0, A - y),
             height: Math.max(0, C - E)
           };
         } else
-          o.userData.scissorRect = void 0;
+          a.userData.scissorRect = void 0;
         let g, M;
         if (this.isViewport)
-          g = a.x - window.innerWidth / 2 + a.width / 2, M = -a.y + window.innerHeight / 2 - a.height / 2;
+          g = o.x - window.innerWidth / 2 + o.width / 2, M = -o.y + window.innerHeight / 2 - o.height / 2;
         else {
-          const y = a.x - e, E = a.y - t;
-          g = y - r / 2 + a.width / 2, M = -E + l / 2 - a.height / 2;
+          const y = o.x - e, E = o.y - t;
+          g = y - r / 2 + o.width / 2, M = -E + c / 2 - o.height / 2;
         }
-        o.position.setX(g), o.position.setY(M);
-        let m = ((h = o.material.userData) == null ? void 0 : h.shadowPadding) || 0;
-        if (o.scale.set(a.width + m * 2, a.height + m * 2, 1), o.updateMatrixWorld(), o.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(o.material, {
-          width: a.width,
-          height: a.height
-        }), o.userData.nativeMesh) {
-          const y = o.userData.nativeMesh;
-          let E = a.width, A = a.height, C = g, b = M;
-          if (o.userData.nativeTransform) {
-            const z = o.userData.nativeTransform, X = z.match(/scale\(([\d.]+%?)\)/);
+        a.position.setX(g), a.position.setY(M);
+        let m = ((h = a.material.userData) == null ? void 0 : h.shadowPadding) || 0;
+        if (a.scale.set(o.width + m * 2, o.height + m * 2, 1), a.updateMatrixWorld(), a.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(a.material, {
+          width: o.width,
+          height: o.height
+        }), a.userData.nativeMesh) {
+          const y = a.userData.nativeMesh;
+          let E = o.width, A = o.height, C = g, b = M;
+          if (a.userData.nativeTransform) {
+            const z = a.userData.nativeTransform, X = z.match(/scale\(([\d.]+%?)\)/);
             if (X) {
               let L = parseFloat(X[1]);
               X[1].includes("%") && (L /= 100), E *= L, A *= L;
@@ -1328,25 +1331,25 @@ class ot {
             if (j) {
               const L = j[1].trim(), _ = j[2].trim();
               let K = parseFloat(L);
-              L.includes("%") && (K = K / 100 * a.width);
+              L.includes("%") && (K = K / 100 * o.width);
               let U = parseFloat(_);
-              _.includes("%") && (U = U / 100 * a.height), C += K, b -= U;
+              _.includes("%") && (U = U / 100 * o.height), C += K, b -= U;
             }
             const J = z.match(/translateX\(([^)]+)\)/);
             if (J) {
               const L = J[1].trim();
               let _ = parseFloat(L);
-              L.includes("%") && (_ = _ / 100 * a.width), C += _;
+              L.includes("%") && (_ = _ / 100 * o.width), C += _;
             }
             const Z = z.match(/translateY\(([^)]+)\)/);
             if (Z) {
               const L = Z[1].trim();
               let _ = parseFloat(L);
-              L.includes("%") && (_ = _ / 100 * a.height), b -= _;
+              L.includes("%") && (_ = _ / 100 * o.height), b -= _;
             }
           }
           let S = ((d = y.material.userData) == null ? void 0 : d.shadowPadding) || 0;
-          y.position.setX(C), y.position.setY(b), y.scale.set(E + S * 2, A + S * 2, 1), y.updateMatrixWorld(), y.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(y.material, {
+          y.position.setX(C), y.position.setY(b), y.scale.set(E + S * 2, A + S * 2, 1), y.updateMatrixWorld(), y.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(y.material, {
             width: E,
             height: A
           });
@@ -1357,17 +1360,17 @@ class ot {
 }
 function at(s) {
   const e = s.textContent || "", t = [];
-  let i = "", r = null, l = -1;
-  const n = (a, f) => {
-    for (let h = 0; h < a.length; h++) {
-      const d = a[h], p = document.createRange();
+  let i = "", r = null, c = -1;
+  const n = (o, f) => {
+    for (let h = 0; h < o.length; h++) {
+      const d = o[h], p = document.createRange();
       p.setStart(s, f + h), p.setEnd(s, f + h + 1);
       const g = p.getBoundingClientRect();
       if (g.width === 0 && g.height === 0) {
         i += d;
         continue;
       }
-      l === -1 || Math.abs(g.top - l) > g.height / 2 ? (i && r && t.push({
+      c === -1 || Math.abs(g.top - c) > g.height / 2 ? (i && r && t.push({
         text: i,
         rect: {
           left: r.left,
@@ -1380,26 +1383,26 @@ function at(s) {
         top: g.top,
         right: g.right,
         bottom: g.bottom
-      }, l = g.top) : (i += d, r && (r.left = Math.min(r.left, g.left), r.top = Math.min(r.top, g.top), r.right = Math.max(r.right, g.right), r.bottom = Math.max(
+      }, c = g.top) : (i += d, r && (r.left = Math.min(r.left, g.left), r.top = Math.min(r.top, g.top), r.right = Math.max(r.right, g.right), r.bottom = Math.max(
         r.bottom,
         g.bottom
       )));
     }
-  }, o = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
-  let c = 0;
-  for (const a of o) {
+  }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+  let l = 0;
+  for (const o of a) {
     const f = document.createRange();
-    f.setStart(s, c), f.setEnd(s, c + a.length);
+    f.setStart(s, l), f.setEnd(s, l + o.length);
     const h = f.getClientRects();
     if (h.length > 1)
-      n(a, c);
+      n(o, l);
     else {
       const d = h.length === 1 ? h[0] : f.getBoundingClientRect();
       if (d.width === 0 && d.height === 0) {
-        i += a, c += a.length;
+        i += o, l += o.length;
         continue;
       }
-      l === -1 || Math.abs(d.top - l) > d.height / 2 ? (i && r && t.push({
+      c === -1 || Math.abs(d.top - c) > d.height / 2 ? (i && r && t.push({
         text: i,
         rect: {
           left: r.left,
@@ -1407,17 +1410,17 @@ function at(s) {
           width: r.right - r.left,
           height: r.bottom - r.top
         }
-      }), i = a, r = {
+      }), i = o, r = {
         left: d.left,
         top: d.top,
         right: d.right,
         bottom: d.bottom
-      }, l = d.top) : (i += a, r && (r.left = Math.min(r.left, d.left), r.top = Math.min(r.top, d.top), r.right = Math.max(r.right, d.right), r.bottom = Math.max(
+      }, c = d.top) : (i += o, r && (r.left = Math.min(r.left, d.left), r.top = Math.min(r.top, d.top), r.right = Math.max(r.right, d.right), r.bottom = Math.max(
         r.bottom,
         d.bottom
       )));
     }
-    c += a.length;
+    l += o.length;
   }
   return i && r && t.push({
     text: i,
@@ -1428,7 +1431,7 @@ function at(s) {
       height: r.bottom - r.top
     }
   }), t.filter(
-    (a) => a.text.trim().length > 0 && a.rect.width > 0 && a.rect.height > 0
+    (o) => o.text.trim().length > 0 && o.rect.width > 0 && o.rect.height > 0
   );
 }
 function ke(s) {
@@ -1447,7 +1450,7 @@ function ke(s) {
     letterSpacing: i
   };
 }
-function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
+function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, c = 2, n, a, l) {
   var K, U, V, ie, se, ne, he;
   if (s.nodeType === Node.TEXT_NODE) {
     const v = s;
@@ -1500,7 +1503,7 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
       captureLayer: i,
       isFixed: D.position === "fixed",
       nativeLayer: n,
-      nativeStyles: o ? te(te({
+      nativeStyles: a ? te(te({
         backgroundColor: "transparent",
         backgroundImage: "",
         opacity: F && F.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(D.opacity),
@@ -1509,20 +1512,20 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, ke(D)), o) : void 0,
-      nativeRect: o ? {
+      }, ke(D)), a) : void 0,
+      nativeRect: a ? {
         x: $ + window.scrollX,
         y: Y + window.scrollY,
         width: Q - $,
         height: I - Y
       } : void 0,
-      clipElements: c,
+      clipElements: l,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const a = s, f = a.dataset[H.KEY];
+  const o = s, f = o.dataset[P.KEY];
   let h = t, d = t;
   if (f) {
     const v = new Set(f.split(/\s+/));
@@ -1531,19 +1534,19 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
         throw new Error(
           `[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(H.VALUES.END))
+    if (v.has(P.VALUES.END))
       return null;
-    if (v.has(H.VALUES.INCLUDE_TREE) && v.has(H.VALUES.EXCLUDE_TREE))
+    if (v.has(P.VALUES.INCLUDE_TREE) && v.has(P.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (v.has(H.VALUES.INCLUDE_SELF) && v.has(H.VALUES.EXCLUDE_SELF))
+    if (v.has(P.VALUES.INCLUDE_SELF) && v.has(P.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(H.VALUES.INCLUDE_TREE) ? h = h | G : v.has(H.VALUES.EXCLUDE_TREE) && (h = h & ~G), d = h, v.has(H.VALUES.INCLUDE_SELF) ? d = d | G : v.has(H.VALUES.EXCLUDE_SELF) && (d = d & ~G);
+    v.has(P.VALUES.INCLUDE_TREE) ? h = h | G : v.has(P.VALUES.EXCLUDE_TREE) && (h = h & ~G), d = h, v.has(P.VALUES.INCLUDE_SELF) ? d = d | G : v.has(P.VALUES.EXCLUDE_SELF) && (d = d & ~G);
   }
-  const p = a.dataset[q.KEY];
+  const p = o.dataset[q.KEY];
   if (p) {
     const v = new Set(p.split(/\s+/));
     for (const x of v)
@@ -1563,8 +1566,8 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
       );
     v.has(q.VALUES.INCLUDE_TREE) ? h = h | ae : v.has(q.VALUES.EXCLUDE_TREE) && (h = h & ~ae), d = h, v.has(q.VALUES.INCLUDE_SELF) ? d = d | ae : v.has(q.VALUES.EXCLUDE_SELF) && (d = d & ~ae);
   }
-  const g = a.dataset[N.KEY];
-  let M = !1, m = o ? te({}, o) : {}, y = n;
+  const g = o.dataset[N.KEY];
+  let M = !1, m = a ? te({}, a) : {}, y = n;
   if (g) {
     let v = 1;
     const x = g.indexOf("{"), T = g.lastIndexOf("}");
@@ -1612,33 +1615,33 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
       i = Math.min(I, N.MAX_LAYERS + 1);
     }
   }
-  const E = a.dataset[He.KEY];
+  const E = o.dataset[Pe.KEY];
   let A;
   E && (A = JSON.parse(E));
-  const C = a.getBoundingClientRect(), b = window.getComputedStyle(a);
+  const C = o.getBoundingClientRect(), b = window.getComputedStyle(o);
   if (C.width === 0 || C.height === 0 || b.display === "none")
     return null;
-  let S = a.getAttribute("data-mid");
-  S || (S = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", S));
+  let S = o.getAttribute("data-mid");
+  S || (S = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", S));
   const z = parseInt(b.zIndex), X = (isNaN(z) ? 0 : z) + r;
   let B;
-  if (a.tagName === "IMG")
-    B = a.src;
-  else if (a.tagName.toLowerCase() === "svg") {
-    const v = a.cloneNode(!0), x = m == null ? void 0 : m.color, T = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, D = m == null ? void 0 : m.opacity, $ = (R, oe) => {
-      const W = window.getComputedStyle(R), de = oe, ze = W.fill === W.color, Ne = W.stroke === W.color, me = T || (ze ? x : void 0) || W.fill;
+  if (o.tagName === "IMG")
+    B = o.src;
+  else if (o.tagName.toLowerCase() === "svg") {
+    const v = o.cloneNode(!0), x = m == null ? void 0 : m.color, T = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, D = m == null ? void 0 : m.opacity, $ = (R, oe) => {
+      const H = window.getComputedStyle(R), de = oe, ze = H.fill === H.color, Ne = H.stroke === H.color, me = T || (ze ? x : void 0) || H.fill;
       me && me !== "none" && (de.style.fill = me);
-      const ve = F || (Ne ? x : void 0) || W.stroke;
-      ve && ve !== "none" && (de.style.stroke = ve), W.strokeWidth && W.strokeWidth !== "0px" && (de.style.strokeWidth = W.strokeWidth);
-      const Se = x || W.color;
+      const ve = F || (Ne ? x : void 0) || H.stroke;
+      ve && ve !== "none" && (de.style.stroke = ve), H.strokeWidth && H.strokeWidth !== "0px" && (de.style.strokeWidth = H.strokeWidth);
+      const Se = x || H.color;
       Se && (de.style.color = Se);
-      const we = D || W.opacity;
+      const we = D || H.opacity;
       we && we !== "1" && (de.style.opacity = we);
       for (let fe = 0; fe < R.children.length; fe++)
         $(R.children[fe], oe.children[fe]);
     };
-    $(a, v);
-    const Y = a.getBoundingClientRect(), Q = window.devicePixelRatio * l;
+    $(o, v);
+    const Y = o.getBoundingClientRect(), Q = window.devicePixelRatio * c;
     v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${Y.width} ${Y.height}`), v.setAttribute("width", (Y.width * Q).toString()), v.setAttribute("height", (Y.height * Q).toString());
     let I = new XMLSerializer().serializeToString(v);
     I.includes("xmlns=") || (I = I.replace(
@@ -1652,7 +1655,7 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
   const k = {
     backgroundColor: b.backgroundColor,
     backgroundImage: b.backgroundImage,
-    opacity: a.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(b.opacity),
+    opacity: o.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(b.opacity),
     zIndex: X,
     borderRadius: b.borderRadius,
     borderColor: b.borderColor,
@@ -1662,15 +1665,15 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
     isTraveler: M
   }, j = k;
   let J, Z;
-  const L = [], _ = b.overflow === "hidden" ? [...c || [], a] : c;
-  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((v) => {
+  const L = [], _ = b.overflow === "hidden" ? [...l || [], o] : l;
+  return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((v) => {
     const x = v.nodeType === Node.TEXT_NODE ? d : h, T = Fe(
       v,
       e,
       x,
       i,
       X,
-      l,
+      c,
       v.nodeType === Node.TEXT_NODE ? y : void 0,
       v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0,
       _
@@ -1679,7 +1682,7 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
   }), {
     id: S,
     type: "BOX",
-    element: a,
+    element: o,
     rect: {
       x: C.left + window.scrollX,
       y: C.top + window.scrollY,
@@ -1713,32 +1716,32 @@ function Fe(s, e = re | ue | Ge | be | pe, t, i = 1, r = 0, l = 2, n, o, c) {
       height: m.height !== void 0 ? parseFloat(m.height) : C.height
     } : void 0,
     isFixed: b.position === "fixed",
-    clipElements: c,
+    clipElements: l,
     children: L,
     shaderHooks: A
   };
 }
-function ct(s, e) {
+function lt(s, e) {
   e.size !== 0 && e.forEach((t, i) => {
-    var l, n, o, c;
+    var c, n, a, l;
     const r = s.get(i);
-    !r || !r.userData.basePosition || (P.forceUpdateUniforms(r.material, {
+    !r || !r.userData.basePosition || (W.forceUpdateUniforms(r.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       boxShadow: t.boxShadow,
       opacity: t.opacity,
-      borderRadius: (n = t.borderRadius) != null ? n : (l = r.userData.baseStyles) == null ? void 0 : l.borderRadius
+      borderRadius: (n = t.borderRadius) != null ? n : (c = r.userData.baseStyles) == null ? void 0 : c.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    }), r.userData.nativeMesh && P.forceUpdateUniforms(r.userData.nativeMesh.material, {
+    }), r.userData.nativeMesh && W.forceUpdateUniforms(r.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       boxShadow: t.boxShadow,
       opacity: t.opacity,
-      borderRadius: (c = t.borderRadius) != null ? c : (o = r.userData.baseStyles) == null ? void 0 : o.borderRadius
+      borderRadius: (l = t.borderRadius) != null ? l : (a = r.userData.baseStyles) == null ? void 0 : a.borderRadius
     }));
   });
 }
-class lt {
+class ct {
   constructor(e, t, i, r) {
     u(this, "target");
     u(this, "renderer");
@@ -1747,19 +1750,19 @@ class lt {
     u(this, "tracker");
     this.target = e, this.renderer = t, this.registry = i, this.tracker = new Be(e, {
       resizeDebounce: r.resizeDebounce
-    }), this.tracker.onLayoutChange.add((l, n) => {
+    }), this.tracker.onLayoutChange.add((c, n) => {
       document.querySelector(`[${N.NAME}~='${N.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-      const c = Fe(
+      const l = Fe(
         this.target,
-        l,
+        c,
         G,
         1,
         0,
         this.renderer.qualityFactor
       );
-      c && this.renderer.syncScene(c, n);
-    }), this.tracker.onStyleChange.add((l) => {
-      ct(this.registry, l);
+      l && this.renderer.syncScene(l, n);
+    }), this.tracker.onStyleChange.add((c) => {
+      lt(this.registry, c);
     }), this.tracker.onRender.add(() => {
       this.renderer.syncMeshesByDOM(), this.renderer.render();
     });
@@ -1802,24 +1805,24 @@ class dt {
     u(this, "syncer");
     u(this, "target");
     u(this, "registry");
-    var r, l, n;
+    var r, c, n;
     if (this.target = e, this.registry = new ht(), !document.getElementById("mirage-engine-styles")) {
-      const o = document.createElement("style");
-      o.id = "mirage-engine-styles", o.textContent = `
+      const a = document.createElement("style");
+      a.id = "mirage-engine-styles", a.textContent = `
         [${ee.NAME}="${ee.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
-      `, document.head.appendChild(o);
+      `, document.head.appendChild(a);
     }
     let i;
-    if (t.mode === "duplicate" ? i = (l = (r = t.container) != null ? r : this.target.parentElement) != null ? l : void 0 : i = (n = this.target.parentElement) != null ? n : void 0, !i)
+    if (t.mode === "duplicate" ? i = (c = (r = t.container) != null ? r : this.target.parentElement) != null ? c : 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 ot(
       this.target,
       t,
       i,
       this.registry
-    ), this.renderer.mount(), this.syncer = new lt(this.target, this.renderer, this.registry, t);
+    ), this.renderer.mount(), this.syncer = new ct(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();
@@ -1851,10 +1854,10 @@ class dt {
       ArrowUp: !1,
       ArrowDown: !1
     };
-    window.addEventListener("keydown", (l) => {
-      t[l.key] !== void 0 && (t[l.key] = !0);
-    }), window.addEventListener("keyup", (l) => {
-      t[l.key] !== void 0 && (t[l.key] = !1);
+    window.addEventListener("keydown", (c) => {
+      t[c.key] !== void 0 && (t[c.key] = !0);
+    }), window.addEventListener("keyup", (c) => {
+      t[c.key] !== void 0 && (t[c.key] = !1);
     });
     const i = 2, r = () => {
       requestAnimationFrame(r), t.ArrowRight && e.position.setX(e.position.x + i), t.ArrowLeft && e.position.setX(e.position.x - i), t.ArrowUp && e.position.setY(e.position.y + i), t.ArrowDown && e.position.setY(e.position.y - i);
@@ -1901,8 +1904,8 @@ class ut {
     const e = document.querySelectorAll(this.frontSelector);
     this.frontLayer && e.forEach((t) => {
       var n;
-      const i = t.getBoundingClientRect(), r = window.getComputedStyle(t), l = document.createElement("div");
-      l.className = "sand-placeholder", Object.assign(l.style, {
+      const i = t.getBoundingClientRect(), r = window.getComputedStyle(t), c = document.createElement("div");
+      c.className = "sand-placeholder", Object.assign(c.style, {
         display: r.display === "inline" ? "inline-block" : r.display,
         width: `${i.width}px`,
         height: `${i.height}px`,
@@ -1913,14 +1916,14 @@ class ut {
         marginRight: r.marginRight,
         visibility: "hidden",
         pointerEvents: "none"
-      }), (n = t.parentNode) == null || n.insertBefore(l, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
+      }), (n = t.parentNode) == null || n.insertBefore(c, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
         position: "fixed",
         margin: "0",
         boxSizing: "border-box",
         width: `${i.width}px`,
         height: `${i.height}px`,
         pointerEvents: "auto"
-      }), this.items.push({ placeholder: l, original: t });
+      }), this.items.push({ placeholder: c, original: t });
     });
   }
   setupHooks() {