mirage-engine 0.2.16 → 0.2.17

package/dist/mirage-engine.js

@@ -1,55 +1,55 @@
-var X = Object.defineProperty;
-var P = (i, e, t) => e in i ? X(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var h = (i, e, t) => (P(i, typeof e != "symbol" ? e + "" : e, t), t);
+var k = Object.defineProperty;
+var q = (i, e, t) => e in i ? k(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var c = (i, e, t) => (q(i, typeof e != "symbol" ? e + "" : e, t), t);
 import * as d from "three";
-const E = 0, O = 1, z = 2, q = 4, D = 8, _ = 16, x = 1, R = 2, k = [
+const S = 0, z = 1, L = 2, Y = 4, I = 8, N = 16, x = 1, R = 2, W = [
   "include-tree",
   "exclude-tree",
   "include-self",
   "exclude-self",
   "end"
 ];
-function Y(i, e, t) {
+function U(i, e, t) {
   const r = e.split(`
 `), s = [];
-  return r.forEach((n) => {
-    const a = n.split(" ");
-    let o = a[0];
-    for (let l = 1; l < a.length; l++) {
-      const c = a[l];
-      i.measureText(o + " " + c).width < t ? o += " " + c : (s.push(o), o = c);
+  return r.forEach((a) => {
+    const n = a.split(" ");
+    let o = n[0];
+    for (let l = 1; l < n.length; l++) {
+      const h = n[l];
+      i.measureText(o + " " + h).width < t ? o += " " + h : (s.push(o), o = h);
     }
     s.push(o);
   }), s;
 }
-function I(i, e, t, r, s = 2) {
-  const n = document.createElement("canvas"), a = n.getContext("2d");
-  if (!a)
+function A(i, e, t, r, s = 2) {
+  const a = document.createElement("canvas"), n = a.getContext("2d");
+  if (!n)
     throw new Error("[Mirage] Failed to create canvas context");
   const l = (window.devicePixelRatio || 1) * s;
-  n.width = t * l, n.height = r * l, a.scale(l, l), a.font = e.font, a.fillStyle = e.color, a.textBaseline = "top", a.globalAlpha = 1;
-  const c = Y(a, i, t), g = e.lineHeight;
-  c.forEach((p, m) => {
-    const T = m * g + 2;
+  a.width = t * l, a.height = r * l, n.scale(l, l), n.font = e.font, n.fillStyle = e.color, n.textBaseline = "top", n.globalAlpha = 1;
+  const h = U(n, i, t), m = e.lineHeight;
+  h.forEach((g, p) => {
+    const y = p * m + 2;
     let v = 0;
-    e.textAlign === "center" ? v = t / 2 : e.textAlign === "right" && (v = t), a.textAlign = e.textAlign, a.fillText(p, v, T);
+    e.textAlign === "center" ? v = t / 2 : e.textAlign === "right" && (v = t), n.textAlign = e.textAlign, n.fillText(g, v, y);
   });
-  const u = new d.CanvasTexture(n);
-  return u.colorSpace = d.SRGBColorSpace, u.minFilter = d.LinearFilter, u.magFilter = d.LinearFilter, u.needsUpdate = !0, u;
+  const f = new d.CanvasTexture(a);
+  return f.colorSpace = d.SRGBColorSpace, f.minFilter = d.LinearFilter, f.magFilter = d.LinearFilter, f.needsUpdate = !0, f;
 }
 function w(i) {
   return typeof i == "number" ? i : parseFloat(i) || 0;
 }
-function N(i, e) {
-  var o, l, c, g;
+function X(i, e) {
+  var o, l, h, m;
   if (!e) {
     i.set(0, 0, 0, 0);
     return;
   }
-  const t = e.split("/")[0].trim().split(/\s+/), r = w(t[0]), s = w((o = t[1]) != null ? o : t[0]), n = w((l = t[2]) != null ? l : t[0]), a = w((g = (c = t[3]) != null ? c : t[1]) != null ? g : t[0]);
-  i.set(r, s, n, a);
+  const t = e.split("/")[0].trim().split(/\s+/), r = w(t[0]), s = w((o = t[1]) != null ? o : t[0]), a = w((l = t[2]) != null ? l : t[0]), n = w((m = (h = t[3]) != null ? h : t[1]) != null ? m : t[0]);
+  i.set(r, s, a, n);
 }
-const U = (
+const H = (
   /* glsl */
   `
   varying vec2 vUv;
@@ -60,7 +60,7 @@ const U = (
     vScreenPos = gl_Position;
   }
 `
-), W = (
+), $ = (
   /* glsl */
   `
 
@@ -130,77 +130,77 @@ const U = (
   }
 `
 );
-function S(i) {
+function E(i) {
   if (!i || i === "transparent")
     return { color: new d.Color(16777215), alpha: 0 };
   const e = i.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
-    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), s = parseInt(e[3], 10), n = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new d.Color(`rgb(${t}, ${r}, ${s})`), alpha: n };
+    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), s = parseInt(e[3], 10), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new d.Color(`rgb(${t}, ${r}, ${s})`), alpha: a };
   }
   return { color: new d.Color(i), alpha: 1 };
 }
-function H(i, e, t, r = null, s) {
+function G(i, e, t, r = null, s) {
   var v;
-  const n = r !== null, a = n ? (
+  const a = r !== null, n = a ? (
     /* glsl */
     `
     uniform sampler2D uTexture;
     varying vec4 vScreenPos;
   `
-  ) : "", o = n ? (
+  ) : "", o = a ? (
     /* glsl */
     `
     vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
     vec2 resultUv = screenUv;
     ${(s == null ? void 0 : s.uvModifier) || ""}
   `
-  ) : "", l = n ? (
+  ) : "", l = a ? (
     /* glsl */
     `
     baseColor = texture2D(uTexture, resultUv);
   `
-  ) : "", c = (s == null ? void 0 : s.colorModifier) || "", g = W.replace("#INJECT_DECLARATIONS", a).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", c), u = S(i.backgroundColor), p = S(i.borderColor), m = {
+  ) : "", h = (s == null ? void 0 : s.colorModifier) || "", m = $.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", h), f = E(i.backgroundColor), g = E(i.borderColor), p = {
     uSize: { value: new d.Vector2(e, t) },
     uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
     uBorderWidth: { value: w(i.borderWidth) },
-    uBgColor: { value: u.color },
-    uBorderColor: { value: p.color },
+    uBgColor: { value: f.color },
+    uBorderColor: { value: g.color },
     uOpacity: { value: (v = i.opacity) != null ? v : 1 },
-    uBgOpacity: { value: u.alpha },
-    uBorderOpacity: { value: p.alpha },
+    uBgOpacity: { value: f.alpha },
+    uBorderOpacity: { value: g.alpha },
     uTexture: { value: null }
   };
-  return N(m.uBorderRadius.value, i.borderRadius), n && (m.uTexture.value = r), new d.ShaderMaterial({
-    uniforms: m,
-    vertexShader: U,
-    fragmentShader: g,
+  return X(p.uBorderRadius.value, i.borderRadius), a && (p.uTexture.value = r), new d.ShaderMaterial({
+    uniforms: p,
+    vertexShader: H,
+    fragmentShader: m,
     transparent: !0,
     side: d.FrontSide
     // for better performance
   });
 }
-function $(i, e, t, r, s) {
+function J(i, e, t, r, s) {
   var o;
-  const n = S(e.backgroundColor), a = S(e.borderColor);
-  i.uniforms.uSize.value.set(t, r), N(i.uniforms.uBorderRadius.value, e.borderRadius), i.uniforms.uBorderWidth.value = w(e.borderWidth), i.uniforms.uBgColor.value.copy(n.color), i.uniforms.uBorderColor.value.copy(a.color), i.uniforms.uOpacity.value = (o = e.opacity) != null ? o : 1, i.uniforms.uBgOpacity.value = n.alpha, i.uniforms.uBorderOpacity.value = a.alpha, i.uniforms.uTexture && s !== void 0 && (i.uniforms.uTexture.value = s);
+  const a = E(e.backgroundColor), n = E(e.borderColor);
+  i.uniforms.uSize.value.set(t, r), X(i.uniforms.uBorderRadius.value, e.borderRadius), i.uniforms.uBorderWidth.value = w(e.borderWidth), i.uniforms.uBgColor.value.copy(a.color), i.uniforms.uBorderColor.value.copy(n.color), i.uniforms.uOpacity.value = (o = e.opacity) != null ? o : 1, i.uniforms.uBgOpacity.value = a.alpha, i.uniforms.uBorderOpacity.value = n.alpha, i.uniforms.uTexture && s !== void 0 && (i.uniforms.uTexture.value = s);
 }
-const F = {
-  create(i, e, t, r, s, n = 2, a = null) {
+const D = {
+  create(i, e, t, r, s, a = 2, n = null, o) {
     if (i === "BOX")
-      return H(e, r, s, a);
+      return G(e, r, s, n, o);
     if (i === "TEXT") {
-      const o = I(
+      const l = A(
         t || "",
         e,
         r,
         s,
-        n
+        a
       );
       return new d.MeshBasicMaterial({
-        map: o,
+        map: l,
         transparent: !0,
         side: d.FrontSide,
         color: 16777215
@@ -208,51 +208,52 @@ const F = {
     }
     return new d.MeshBasicMaterial({ visible: !1 });
   },
-  update(i, e, t, r, s, n, a = 2, o) {
+  update(i, e, t, r, s, a, n = 2, o) {
     if (e === "BOX")
-      $(
+      J(
         i,
         t,
         s,
-        n,
+        a,
         o
       );
     else if (e === "TEXT") {
       const l = i;
       l.map && l.map.dispose();
-      const c = I(
+      const h = A(
         r || "",
         t,
         s,
-        n,
-        a
+        a,
+        n
       );
-      l.map = c, l.needsUpdate = !0;
+      l.map = h, l.needsUpdate = !0;
     }
   }
 };
-class G {
+class V {
   constructor(e, t, r) {
-    h(this, "canvas");
-    h(this, "scene");
-    h(this, "camera");
-    h(this, "renderer");
-    h(this, "renderTarget", null);
-    h(this, "renderOrder", 0);
-    h(this, "qualityFactor", 2);
-    h(this, "mode", "overlay");
-    h(this, "target");
-    h(this, "mountContainer");
-    h(this, "targetRect");
-    h(this, "meshMap", /* @__PURE__ */ new Map());
-    var a, o;
-    this.target = e, this.mountContainer = r, this.mode = (a = t.mode) != null ? a : "overlay", this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const s = this.targetRect.width, n = this.targetRect.height;
+    c(this, "canvas");
+    c(this, "scene");
+    c(this, "camera");
+    c(this, "renderer");
+    c(this, "renderTarget", null);
+    c(this, "renderOrder", 0);
+    c(this, "qualityFactor", 2);
+    c(this, "mode", "overlay");
+    c(this, "clipArea", 1);
+    c(this, "target");
+    c(this, "mountContainer");
+    c(this, "targetRect");
+    c(this, "meshMap", /* @__PURE__ */ new Map());
+    var n, o, l;
+    this.target = e, this.mountContainer = r, this.mode = (n = t.mode) != null ? n : "overlay", this.clipArea = (o = t.travelerClipArea) != null ? o : 1, this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const s = this.targetRect.width, a = this.targetRect.height;
     this.camera = new d.OrthographicCamera(
       s / -2,
       s / 2,
-      n / 2,
-      n / -2,
+      a / 2,
+      a / -2,
       1,
       1e3
     ), this.camera.position.z = 100, this.camera.layers.set(0), this.renderer = new d.WebGLRenderer({
@@ -261,7 +262,7 @@ class G {
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, n), this.applyTextQuality((o = t.quality) != null ? o : "medium");
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, a), this.applyTextQuality((l = t.quality) != null ? l : "medium");
   }
   createRenderTarget() {
     this.renderTarget = new d.WebGLRenderTarget(
@@ -313,69 +314,70 @@ class G {
   syncScene(e) {
     const t = this.target.getBoundingClientRect(), r = Math.abs(t.width - this.targetRect.width) > 0.1 || Math.abs(t.height - this.targetRect.height) > 0.1, s = this.mode === "overlay" && (Math.abs(t.top - this.targetRect.top) > 0.1 || Math.abs(t.left - this.targetRect.left) > 0.1);
     r ? (this.targetRect = t, this.setSize(this.targetRect.width, this.targetRect.height), this.updateCanvasLayout()) : s ? (this.targetRect = t, this.updateCanvasLayout()) : this.targetRect = t, this.renderOrder = 0;
-    const n = /* @__PURE__ */ new Set();
-    this.reconcileNode(e, n);
-    for (const [a, o] of this.meshMap.entries())
-      n.has(a) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.Material && o.material.dispose(), this.meshMap.delete(a));
+    const a = /* @__PURE__ */ new Set();
+    this.reconcileNode(e, a);
+    for (const [n, o] of this.meshMap.entries())
+      a.has(n) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.Material && o.material.dispose(), this.meshMap.delete(n));
   }
   reconcileNode(e, t) {
     var s;
     t.add(e.element);
     let r = this.meshMap.get(e.element);
     if (!r) {
-      const n = new d.PlaneGeometry(1, 1);
-      let a;
-      a = F.create(
+      const a = new d.PlaneGeometry(1, 1);
+      let n;
+      n = D.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        e.isTraveler ? (s = this.renderTarget) == null ? void 0 : s.texture : void 0
-      ), r = new d.Mesh(n, a), e.type === "TEXT" && (r.name = "BG_MESH"), this.scene.add(r), this.meshMap.set(e.element, r);
+        e.isTraveler ? (s = this.renderTarget) == null ? void 0 : s.texture : void 0,
+        e.shaderHooks
+      ), r = new d.Mesh(a, n), e.type === "TEXT" && (r.name = "BG_MESH"), this.scene.add(r), this.meshMap.set(e.element, r);
     }
     if (r.userData.domRect = e.rect, this.updateMeshProperties(r, e), this.updateMeshLayers(r, e), e.isTraveler && r.layers.enable(28), e.type === "BOX")
-      for (const n of e.children)
-        this.reconcileNode(n, t);
+      for (const a of e.children)
+        this.reconcileNode(a, t);
     else
       e.type === "TEXT" && this.reconcileTextChild(r, e);
   }
   reconcileTextChild(e, t) {
     var o, l;
     let r = e.children.find(
-      (c) => c.name === "TEXT_CHILD"
+      (h) => h.name === "TEXT_CHILD"
     );
-    const s = JSON.stringify(t.textStyles), n = (o = r == null ? void 0 : r.userData) == null ? void 0 : o.styleHash;
-    if (!r || t.dirtyMask & _ || s !== n) {
+    const s = JSON.stringify(t.textStyles), a = (o = r == null ? void 0 : r.userData) == null ? void 0 : o.styleHash;
+    if (!r || t.dirtyMask & N || s !== a) {
       r && ((l = r.material.map) == null || l.dispose(), r.geometry.dispose(), e.remove(r));
-      const c = F.create(
+      const h = D.create(
         "TEXT",
         t.textStyles,
         t.textContent || "",
         t.rect.width,
         t.rect.height,
         this.qualityFactor
-      ), g = new d.PlaneGeometry(1, 1);
-      r = new d.Mesh(g, c), r.name = "TEXT_CHILD", r.userData = { styleHash: s }, this.updateMeshLayers(r, t), r.position.z = 5e-3, e.add(r);
+      ), m = new d.PlaneGeometry(1, 1);
+      r = new d.Mesh(m, h), r.name = "TEXT_CHILD", r.userData = { styleHash: s }, this.updateMeshLayers(r, t), r.position.z = 5e-3, e.add(r);
     }
     if (r) {
-      const c = e.userData.domRect, g = c.x + c.width / 2, u = c.y + c.height / 2, p = t.rect.x + t.rect.width / 2, m = t.rect.y + t.rect.height / 2, T = p - g, v = -(m - u);
-      r.position.set(T, v, 5e-3);
+      const h = e.userData.domRect, m = h.x + h.width / 2, f = h.y + h.height / 2, g = t.rect.x + t.rect.width / 2, p = t.rect.y + t.rect.height / 2, y = g - m, v = -(p - f);
+      r.position.set(y, v, 5e-3);
     }
   }
   updateMeshProperties(e, t) {
-    var m;
-    const { rect: r, styles: s } = t, n = this.renderer.getPixelRatio(), a = this.renderer.domElement.width / n, o = this.renderer.domElement.height / n;
+    var p;
+    const { rect: r, styles: s } = t, a = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / a, o = this.renderer.domElement.height / a;
     e.scale.set(r.width, r.height, 1);
     const l = 1e-3;
     this.renderOrder++;
-    const c = this.targetRect.left + window.scrollX, g = this.targetRect.top + window.scrollY, u = r.x - c, p = r.y - g;
+    const h = this.targetRect.left + window.scrollX, m = this.targetRect.top + window.scrollY, f = r.x - h, g = r.y - m;
     e.position.set(
-      u - a / 2 + r.width / 2,
-      -p + o / 2 - r.height / 2,
+      f - n / 2 + r.width / 2,
+      -g + o / 2 - r.height / 2,
       s.zIndex + this.renderOrder * l
-    ), F.update(
+    ), D.update(
       e.material,
       "BOX",
       t.styles,
@@ -383,7 +385,7 @@ class G {
       t.rect.width,
       t.rect.height,
       this.qualityFactor,
-      t.isTraveler ? (m = this.renderTarget) == null ? void 0 : m.texture : void 0
+      t.isTraveler ? (p = this.renderTarget) == null ? void 0 : p.texture : void 0
     );
   }
   updateMeshLayers(e, t) {
@@ -398,11 +400,14 @@ class G {
       return;
     const t = new d.Color(), r = this.renderer.getClearAlpha();
     this.renderer.getClearColor(t), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(this.renderTarget), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(29);
-    const s = new d.Vector3(), n = this.targetRect.width, a = this.targetRect.height, o = this.renderer.getPixelRatio();
+    const s = new d.Vector3(), a = this.targetRect.width, n = this.targetRect.height, o = this.renderer.getPixelRatio();
     for (const l of e) {
       s.setFromMatrixPosition(l.matrixWorld), s.project(this.camera);
-      const c = (s.x + 1) / 2 * n, g = (s.y + 1) / 2 * a, u = l.scale.x, p = l.scale.y, m = c - u / 2, T = g - p / 2, v = m * this.qualityFactor / o, B = T * this.qualityFactor / o, b = u * this.qualityFactor / o, f = p * this.qualityFactor / o;
-      this.renderer.setScissor(v, B, b, f), this.renderer.render(this.scene, this.camera);
+      const h = (s.x + 1) / 2 * a, m = (s.y + 1) / 2 * n;
+      let f = 0, g = 1;
+      typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (f = parseFloat(this.clipArea));
+      const p = l.scale.x * g + 0.5, y = l.scale.y * g + 0.5, v = h - p / 2, B = m - y / 2, M = (v * this.qualityFactor - f) / o, F = (B * this.qualityFactor - f) / o, b = (p * this.qualityFactor + f * 2) / o, u = (y * this.qualityFactor + f * 2) / o;
+      this.renderer.setScissor(M, F, b, u), this.renderer.render(this.scene, this.camera);
     }
     this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(28), this.renderer.setClearColor(t, r);
   }
@@ -418,11 +423,11 @@ class G {
       side: d.DoubleSide,
       transparent: !0,
       opacity: 0.8
-    }), n = new d.Mesh(r, s);
-    n.position.set(0, 0, 90), n.layers.set(28), this.scene.add(n);
+    }), a = new d.Mesh(r, s);
+    a.position.set(0, 0, 90), a.layers.set(28), this.scene.add(a);
   }
 }
-function J(i) {
+function j(i) {
   const e = document.createRange();
   e.selectNodeContents(i);
   const t = e.getBoundingClientRect();
@@ -433,7 +438,7 @@ function J(i) {
     height: t.height
   };
 }
-function V(i) {
+function Q(i) {
   const e = parseFloat(i.fontSize);
   let t = parseFloat(i.lineHeight);
   isNaN(t) && (t = e * 1.2);
@@ -448,93 +453,96 @@ function V(i) {
     letterSpacing: r
   };
 }
-function A(i, e = O | z | q | _ | D, t, r) {
+function P(i, e = z | L | Y | N | I, t, r) {
   if (i.nodeType === Node.TEXT_NODE) {
-    const f = i;
-    if (!f.textContent || !f.textContent.trim())
+    const u = i;
+    if (!u.textContent || !u.textContent.trim())
       return null;
-    const C = f.textContent.replace(/\s+/g, " ").trim();
+    const C = u.textContent.replace(/\s+/g, " ").trim();
     if (C.length === 0)
       return null;
-    const y = J(f);
-    if (y.width === 0 || y.height === 0)
+    const T = j(u);
+    if (T.width === 0 || T.height === 0)
       return null;
-    const L = f.parentElement, M = L ? window.getComputedStyle(L) : null;
-    return M ? {
+    const _ = u.parentElement, O = _ ? window.getComputedStyle(_) : null;
+    return O ? {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: f,
+      element: u,
       rect: {
-        x: y.left + window.scrollX,
-        y: y.top + window.scrollY,
-        width: y.width,
-        height: y.height
+        x: T.left + window.scrollX,
+        y: T.top + window.scrollY,
+        width: T.width,
+        height: T.height
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(M.opacity),
+        opacity: parseFloat(O.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px"
       },
       textContent: C,
-      textStyles: V(M),
+      textStyles: Q(O),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
       children: []
     } : null;
   }
-  const s = i, n = s.dataset.mirageFilter;
-  let a = t, o = t;
-  if (n) {
-    const f = new Set(n.split(/\s+/));
-    for (const C of f)
-      if (!k.includes(C))
+  const s = i, a = s.dataset.mirageFilter;
+  let n = t, o = t;
+  if (a) {
+    const u = new Set(a.split(/\s+/));
+    for (const C of u)
+      if (!W.includes(C))
         throw new Error(
           `[MirageEngine] Invalid filter token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (f.has("end"))
+    if (u.has("end"))
       return null;
-    if (f.has("include-tree") && f.has("exclude-tree"))
+    if (u.has("include-tree") && u.has("exclude-tree"))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (f.has("include-self") && f.has("exclude-self"))
+    if (u.has("include-self") && u.has("exclude-self"))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    f.has("include-tree") ? a = a | x : f.has("exclude-tree") && (a = a & ~x), o = a, f.has("include-self") ? o = o | x : f.has("exclude-self") && (o = o & ~x);
+    u.has("include-tree") ? n = n | x : u.has("exclude-tree") && (n = n & ~x), o = n, u.has("include-self") ? o = o | x : u.has("exclude-self") && (o = o & ~x);
   }
   o = o | t & R;
   const l = s.dataset.mirageTravel;
-  let c = !1;
-  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~R, a = a & ~R, c = !0);
-  const g = s.getBoundingClientRect(), u = window.getComputedStyle(s);
-  if (g.width === 0 || g.height === 0 || u.display === "none")
+  let h = !1;
+  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~R, n = n & ~R, h = !0);
+  const m = s.dataset.mirageShader;
+  let f;
+  m && (f = JSON.parse(m));
+  const g = s.getBoundingClientRect(), p = window.getComputedStyle(s);
+  if (g.width === 0 || g.height === 0 || p.display === "none")
     return null;
-  let p = s.getAttribute("data-mid");
-  p || (p = Math.random().toString(36).substring(2, 11), s.setAttribute("data-mid", p));
-  const m = parseInt(u.zIndex), T = {
-    backgroundColor: u.backgroundColor,
-    opacity: parseFloat(u.opacity),
-    zIndex: isNaN(m) ? 0 : m,
-    borderRadius: u.borderRadius,
-    borderColor: u.borderColor,
-    borderWidth: u.borderWidth
+  let y = s.getAttribute("data-mid");
+  y || (y = Math.random().toString(36).substring(2, 11), s.setAttribute("data-mid", y));
+  const v = parseInt(p.zIndex), B = {
+    backgroundColor: p.backgroundColor,
+    opacity: parseFloat(p.opacity),
+    zIndex: isNaN(v) ? 0 : v,
+    borderRadius: p.borderRadius,
+    borderColor: p.borderColor,
+    borderWidth: p.borderWidth
   };
-  let v, B;
+  let M, F;
   const b = [];
-  return Array.from(s.childNodes).forEach((f) => {
-    const C = f.nodeType === Node.TEXT_NODE ? o : a, y = A(
-      f,
+  return Array.from(s.childNodes).forEach((u) => {
+    const C = u.nodeType === Node.TEXT_NODE ? o : n, T = P(
+      u,
       e,
       C
     );
-    y && b.push(y);
+    T && b.push(T);
   }), {
-    id: p,
+    id: y,
     type: "BOX",
     element: s,
     rect: {
@@ -543,36 +551,37 @@ function A(i, e = O | z | q | _ | D, t, r) {
       width: g.width,
       height: g.height
     },
-    styles: T,
-    textContent: v,
-    textStyles: B,
+    styles: B,
+    textContent: M,
+    textStyles: F,
     dirtyMask: e,
     visibility: o,
-    isTraveler: c,
-    children: b
+    isTraveler: h,
+    children: b,
+    shaderHooks: f
   };
 }
-class j {
+class Z {
   constructor(e, t, r) {
-    h(this, "target");
-    h(this, "renderer");
-    h(this, "filter");
-    h(this, "observer");
-    h(this, "isDomDirty", !1);
-    h(this, "isRunning", !1);
-    h(this, "isTravelEnabled", !1);
-    h(this, "pendingMask", E);
-    h(this, "mutationTimer", null);
-    h(this, "cssTimer", null);
-    h(this, "resizeConfig");
-    h(this, "resizeTimer", null);
-    h(this, "isResizing", !1);
-    h(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= O | z, this.cssTimer = window.setTimeout(() => {
+    c(this, "target");
+    c(this, "renderer");
+    c(this, "filter");
+    c(this, "observer");
+    c(this, "isDomDirty", !1);
+    c(this, "isRunning", !1);
+    c(this, "isTravelEnabled", !1);
+    c(this, "pendingMask", S);
+    c(this, "mutationTimer", null);
+    c(this, "cssTimer", null);
+    c(this, "resizeConfig");
+    c(this, "resizeTimer", null);
+    c(this, "isResizing", !1);
+    c(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= z | L, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
-    h(this, "onWindowResize", () => {
+    c(this, "onWindowResize", () => {
       if (!this.resizeConfig.enabled) {
         this.isDomDirty = !0;
         return;
@@ -581,23 +590,23 @@ class j {
         this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
       }, this.resizeConfig.delay);
     });
-    h(this, "renderLoop", () => {
+    c(this, "renderLoop", () => {
       this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
     });
-    var n, a;
+    var a, n;
     this.target = e, this.renderer = t, this.filter = r.filter;
-    const s = (n = r.resizeDebounce) != null ? n : !0;
+    const s = (a = r.resizeDebounce) != null ? a : !0;
     s === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : s === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
       enabled: !0,
-      delay: (a = s.delay) != null ? a : 150,
+      delay: (n = s.delay) != null ? n : 150,
       onStart: s.onStart,
       onEnd: s.onEnd
     }, this.observer = new MutationObserver((o) => {
-      let l = E;
-      for (const c of o)
-        c.type === "childList" ? l |= D : c.type === "attributes" && (c.attributeName === "style" || c.attributeName === "class") && (l |= O | z);
-      if (l !== E) {
-        if (this.pendingMask |= l, l & D) {
+      let l = S;
+      for (const h of o)
+        h.type === "childList" ? l |= I : h.type === "attributes" && (h.attributeName === "style" || h.attributeName === "class") && (l |= z | L);
+      if (l !== S) {
+        if (this.pendingMask |= l, l & I) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -625,26 +634,26 @@ class j {
     this.isDomDirty = !1;
     const e = document.querySelector("[data-mirage-travel='traveler']") !== null;
     e && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-    const t = A(
+    const t = P(
       this.target,
       this.pendingMask,
       e ? x | R : x,
       this.filter
     );
-    t && this.renderer.syncScene(t), this.pendingMask = E;
+    t && this.renderer.syncScene(t), this.pendingMask = S;
   }
 }
-class Q {
+class K {
   constructor(e, t) {
-    h(this, "renderer");
-    h(this, "syncer");
-    h(this, "target");
-    var s, n, a;
+    c(this, "renderer");
+    c(this, "syncer");
+    c(this, "target");
+    var s, a, n;
     this.target = e;
     let r;
-    if (t.mode === "duplicate" ? r = (n = (s = t.container) != null ? s : this.target.parentElement) != null ? n : void 0 : r = (a = this.target.parentElement) != null ? a : void 0, !r)
+    if (t.mode === "duplicate" ? r = (a = (s = t.container) != null ? s : this.target.parentElement) != null ? a : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new G(this.target, t, r), this.renderer.mount(), this.syncer = new j(this.target, this.renderer, t);
+    this.renderer = new V(this.target, t, r), this.renderer.mount(), this.syncer = new Z(this.target, this.renderer, t);
   }
   start() {
     this.syncer.start();
@@ -656,12 +665,12 @@ class Q {
     this.syncer.stop(), this.renderer.dispose();
   }
 }
-class K {
+class te {
   constructor(e, t) {
-    h(this, "_engine");
+    c(this, "_engine");
     if (!e)
       throw new Error("[Mirage] Target element is required.");
-    this._engine = new Q(e, t);
+    this._engine = new K(e, t);
   }
   start() {
     this._engine.start();
@@ -674,5 +683,5 @@ class K {
   }
 }
 export {
-  K as Mirage
+  te as Mirage
 };

package/dist/mirage-engine.umd.js

@@ -1,5 +1,5 @@
-(function(v,y){typeof exports=="object"&&typeof module!="undefined"?y(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],y):(v=typeof globalThis!="undefined"?globalThis:v||self,y(v.MirageEngine={},v.THREE))})(this,function(v,y){"use strict";var ee=Object.defineProperty;var te=(v,y,b)=>y in v?ee(v,y,{enumerable:!0,configurable:!0,writable:!0,value:b}):v[y]=b;var h=(v,y,b)=>(te(v,typeof y!="symbol"?y+"":y,b),b);function b(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const d=b(y),M=0,F=1,z=2,k=4,D=8,N=16,C=1,E=2,Y=["include-tree","exclude-tree","include-self","exclude-self","end"];function U(i,e,t){const r=e.split(`
-`),s=[];return r.forEach(n=>{const a=n.split(" ");let o=a[0];for(let l=1;l<a.length;l++){const c=a[l];i.measureText(o+" "+c).width<t?o+=" "+c:(s.push(o),o=c)}s.push(o)}),s}function A(i,e,t,r,s=2){const n=document.createElement("canvas"),a=n.getContext("2d");if(!a)throw new Error("[Mirage] Failed to create canvas context");const l=(window.devicePixelRatio||1)*s;n.width=t*l,n.height=r*l,a.scale(l,l),a.font=e.font,a.fillStyle=e.color,a.textBaseline="top",a.globalAlpha=1;const c=U(a,i,t),g=e.lineHeight;c.forEach((p,m)=>{const w=m*g+2;let T=0;e.textAlign==="center"?T=t/2:e.textAlign==="right"&&(T=t),a.textAlign=e.textAlign,a.fillText(p,T,w)});const u=new d.CanvasTexture(n);return u.colorSpace=d.SRGBColorSpace,u.minFilter=d.LinearFilter,u.magFilter=d.LinearFilter,u.needsUpdate=!0,u}function S(i){return typeof i=="number"?i:parseFloat(i)||0}function X(i,e){var o,l,c,g;if(!e){i.set(0,0,0,0);return}const t=e.split("/")[0].trim().split(/\s+/),r=S(t[0]),s=S((o=t[1])!=null?o:t[0]),n=S((l=t[2])!=null?l:t[0]),a=S((g=(c=t[3])!=null?c:t[1])!=null?g:t[0]);i.set(r,s,n,a)}const W=`
+(function(v,y){typeof exports=="object"&&typeof module!="undefined"?y(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],y):(v=typeof globalThis!="undefined"?globalThis:v||self,y(v.MirageEngine={},v.THREE))})(this,function(v,y){"use strict";var re=Object.defineProperty;var ie=(v,y,b)=>y in v?re(v,y,{enumerable:!0,configurable:!0,writable:!0,value:b}):v[y]=b;var c=(v,y,b)=>(ie(v,typeof y!="symbol"?y+"":y,b),b);function b(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const d=b(y),M=0,F=1,D=2,W=4,z=8,X=16,w=1,E=2,H=["include-tree","exclude-tree","include-self","exclude-self","end"];function U(i,e,t){const r=e.split(`
+`),s=[];return r.forEach(n=>{const a=n.split(" ");let o=a[0];for(let l=1;l<a.length;l++){const h=a[l];i.measureText(o+" "+h).width<t?o+=" "+h:(s.push(o),o=h)}s.push(o)}),s}function P(i,e,t,r,s=2){const n=document.createElement("canvas"),a=n.getContext("2d");if(!a)throw new Error("[Mirage] Failed to create canvas context");const l=(window.devicePixelRatio||1)*s;n.width=t*l,n.height=r*l,a.scale(l,l),a.font=e.font,a.fillStyle=e.color,a.textBaseline="top",a.globalAlpha=1;const h=U(a,i,t),m=e.lineHeight;h.forEach((g,p)=>{const x=p*m+2;let T=0;e.textAlign==="center"?T=t/2:e.textAlign==="right"&&(T=t),a.textAlign=e.textAlign,a.fillText(g,T,x)});const f=new d.CanvasTexture(n);return f.colorSpace=d.SRGBColorSpace,f.minFilter=d.LinearFilter,f.magFilter=d.LinearFilter,f.needsUpdate=!0,f}function S(i){return typeof i=="number"?i:parseFloat(i)||0}function k(i,e){var o,l,h,m;if(!e){i.set(0,0,0,0);return}const t=e.split("/")[0].trim().split(/\s+/),r=S(t[0]),s=S((o=t[1])!=null?o:t[0]),n=S((l=t[2])!=null?l:t[0]),a=S((m=(h=t[3])!=null?h:t[1])!=null?m:t[0]);i.set(r,s,n,a)}const $=`
   varying vec2 vUv;
   varying vec4 vScreenPos;
   void main() {
@@ -7,7 +7,7 @@
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     vScreenPos = gl_Position;
   }
-`,H=`
+`,G=`
 
   varying vec2 vUv;
   
@@ -73,7 +73,7 @@
 
     #include <colorspace_fragment>
   }
-`;function B(i){if(!i||i==="transparent")return{color:new d.Color(16777215),alpha:0};const e=i.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){const t=parseInt(e[1],10),r=parseInt(e[2],10),s=parseInt(e[3],10),n=e[4]!==void 0?parseFloat(e[4]):1;return{color:new d.Color(`rgb(${t}, ${r}, ${s})`),alpha:n}}return{color:new d.Color(i),alpha:1}}function $(i,e,t,r=null,s){var T;const n=r!==null,a=n?`
+`;function B(i){if(!i||i==="transparent")return{color:new d.Color(16777215),alpha:0};const e=i.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){const t=parseInt(e[1],10),r=parseInt(e[2],10),s=parseInt(e[3],10),n=e[4]!==void 0?parseFloat(e[4]):1;return{color:new d.Color(`rgb(${t}, ${r}, ${s})`),alpha:n}}return{color:new d.Color(i),alpha:1}}function J(i,e,t,r=null,s){var T;const n=r!==null,a=n?`
     uniform sampler2D uTexture;
     varying vec4 vScreenPos;
   `:"",o=n?`
@@ -82,4 +82,4 @@
     ${(s==null?void 0:s.uvModifier)||""}
   `:"",l=n?`
     baseColor = texture2D(uTexture, resultUv);
-  `:"",c=(s==null?void 0:s.colorModifier)||"",g=H.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",o).replace("#INJECT_BASE_COLOR",l).replace("#INJECT_COLOR_MODIFIER",c),u=B(i.backgroundColor),p=B(i.borderColor),m={uSize:{value:new d.Vector2(e,t)},uBorderRadius:{value:new d.Vector4(0,0,0,0)},uBorderWidth:{value:S(i.borderWidth)},uBgColor:{value:u.color},uBorderColor:{value:p.color},uOpacity:{value:(T=i.opacity)!=null?T:1},uBgOpacity:{value:u.alpha},uBorderOpacity:{value:p.alpha},uTexture:{value:null}};return X(m.uBorderRadius.value,i.borderRadius),n&&(m.uTexture.value=r),new d.ShaderMaterial({uniforms:m,vertexShader:W,fragmentShader:g,transparent:!0,side:d.FrontSide})}function G(i,e,t,r,s){var o;const n=B(e.backgroundColor),a=B(e.borderColor);i.uniforms.uSize.value.set(t,r),X(i.uniforms.uBorderRadius.value,e.borderRadius),i.uniforms.uBorderWidth.value=S(e.borderWidth),i.uniforms.uBgColor.value.copy(n.color),i.uniforms.uBorderColor.value.copy(a.color),i.uniforms.uOpacity.value=(o=e.opacity)!=null?o:1,i.uniforms.uBgOpacity.value=n.alpha,i.uniforms.uBorderOpacity.value=a.alpha,i.uniforms.uTexture&&s!==void 0&&(i.uniforms.uTexture.value=s)}const L={create(i,e,t,r,s,n=2,a=null){if(i==="BOX")return $(e,r,s,a);if(i==="TEXT"){const o=A(t||"",e,r,s,n);return new d.MeshBasicMaterial({map:o,transparent:!0,side:d.FrontSide,color:16777215})}return new d.MeshBasicMaterial({visible:!1})},update(i,e,t,r,s,n,a=2,o){if(e==="BOX")G(i,t,s,n,o);else if(e==="TEXT"){const l=i;l.map&&l.map.dispose();const c=A(r||"",t,s,n,a);l.map=c,l.needsUpdate=!0}}};class j{constructor(e,t,r){h(this,"canvas");h(this,"scene");h(this,"camera");h(this,"renderer");h(this,"renderTarget",null);h(this,"renderOrder",0);h(this,"qualityFactor",2);h(this,"mode","overlay");h(this,"target");h(this,"mountContainer");h(this,"targetRect");h(this,"meshMap",new Map);var a,o;this.target=e,this.mountContainer=r,this.mode=(a=t.mode)!=null?a:"overlay",this.canvas=document.createElement("canvas"),this.scene=new d.Scene,this.targetRect=this.target.getBoundingClientRect();const s=this.targetRect.width,n=this.targetRect.height;this.camera=new d.OrthographicCamera(s/-2,s/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(0),this.renderer=new d.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(s,n),this.applyTextQuality((o=t.quality)!=null?o:"medium")}createRenderTarget(){this.renderTarget=new d.WebGLRenderTarget(this.targetRect.width*this.qualityFactor,this.targetRect.height*this.qualityFactor,{minFilter:d.LinearFilter,magFilter:d.LinearFilter,format:d.RGBAFormat,stencilBuffer:!1,depthBuffer:!0,samples:4})}applyTextQuality(e){if(typeof e=="number"){this.qualityFactor=Math.max(.1,e);return}switch(e){case"low":this.qualityFactor=1;break;case"high":this.qualityFactor=4;break;case"medium":default:this.qualityFactor=2;break}}mount(){this.mountContainer.prepend(this.canvas),this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){this.canvas.style.width=`${this.targetRect.width}px`,this.canvas.style.height=`${this.targetRect.height}px`,this.mode==="duplicate"?(this.canvas.style.position="",this.canvas.style.top="",this.canvas.style.left="",this.canvas.style.display="block"):(this.canvas.style.position="absolute",this.canvas.style.top=`${this.target.offsetTop}px`,this.canvas.style.left=`${this.target.offsetLeft}px`,this.canvas.style.display="block")}dispose(){this.renderer.dispose(),this.canvas.remove()}setSize(e,t){this.renderer.setSize(e,t),this.renderTarget&&this.renderTarget.setSize(e*this.qualityFactor,t*this.qualityFactor),this.camera.left=e/-2,this.camera.right=e/2,this.camera.top=t/2,this.camera.bottom=t/-2,this.camera.updateProjectionMatrix()}syncScene(e){const t=this.target.getBoundingClientRect(),r=Math.abs(t.width-this.targetRect.width)>.1||Math.abs(t.height-this.targetRect.height)>.1,s=this.mode==="overlay"&&(Math.abs(t.top-this.targetRect.top)>.1||Math.abs(t.left-this.targetRect.left)>.1);r?(this.targetRect=t,this.setSize(this.targetRect.width,this.targetRect.height),this.updateCanvasLayout()):s?(this.targetRect=t,this.updateCanvasLayout()):this.targetRect=t,this.renderOrder=0;const n=new Set;this.reconcileNode(e,n);for(const[a,o]of this.meshMap.entries())n.has(a)||(this.scene.remove(o),o.geometry.dispose(),o.material instanceof d.Material&&o.material.dispose(),this.meshMap.delete(a))}reconcileNode(e,t){var s;t.add(e.element);let r=this.meshMap.get(e.element);if(!r){const n=new d.PlaneGeometry(1,1);let a;a=L.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,e.isTraveler?(s=this.renderTarget)==null?void 0:s.texture:void 0),r=new d.Mesh(n,a),e.type==="TEXT"&&(r.name="BG_MESH"),this.scene.add(r),this.meshMap.set(e.element,r)}if(r.userData.domRect=e.rect,this.updateMeshProperties(r,e),this.updateMeshLayers(r,e),e.isTraveler&&r.layers.enable(28),e.type==="BOX")for(const n of e.children)this.reconcileNode(n,t);else e.type==="TEXT"&&this.reconcileTextChild(r,e)}reconcileTextChild(e,t){var o,l;let r=e.children.find(c=>c.name==="TEXT_CHILD");const s=JSON.stringify(t.textStyles),n=(o=r==null?void 0:r.userData)==null?void 0:o.styleHash;if(!r||t.dirtyMask&N||s!==n){r&&((l=r.material.map)==null||l.dispose(),r.geometry.dispose(),e.remove(r));const c=L.create("TEXT",t.textStyles,t.textContent||"",t.rect.width,t.rect.height,this.qualityFactor),g=new d.PlaneGeometry(1,1);r=new d.Mesh(g,c),r.name="TEXT_CHILD",r.userData={styleHash:s},this.updateMeshLayers(r,t),r.position.z=.005,e.add(r)}if(r){const c=e.userData.domRect,g=c.x+c.width/2,u=c.y+c.height/2,p=t.rect.x+t.rect.width/2,m=t.rect.y+t.rect.height/2,w=p-g,T=-(m-u);r.position.set(w,T,.005)}}updateMeshProperties(e,t){var m;const{rect:r,styles:s}=t,n=this.renderer.getPixelRatio(),a=this.renderer.domElement.width/n,o=this.renderer.domElement.height/n;e.scale.set(r.width,r.height,1);const l=.001;this.renderOrder++;const c=this.targetRect.left+window.scrollX,g=this.targetRect.top+window.scrollY,u=r.x-c,p=r.y-g;e.position.set(u-a/2+r.width/2,-p+o/2-r.height/2,s.zIndex+this.renderOrder*l),L.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height,this.qualityFactor,t.isTraveler?(m=this.renderTarget)==null?void 0:m.texture:void 0)}updateMeshLayers(e,t){const r=(1-(t.visibility&C))*30;e.layers.set(r),t.visibility===(C|E)&&e.layers.enable(29)}captureRenderTarget(){const e=[];for(const l of this.meshMap.values())l.layers.mask&1<<28&&e.push(l);if(e.length===0)return;const t=new d.Color,r=this.renderer.getClearAlpha();this.renderer.getClearColor(t),this.renderer.setClearColor(0,0),this.renderer.setRenderTarget(this.renderTarget),this.renderer.clear(),this.renderer.autoClear=!1,this.renderer.setScissorTest(!0),this.camera.layers.set(29);const s=new d.Vector3,n=this.targetRect.width,a=this.targetRect.height,o=this.renderer.getPixelRatio();for(const l of e){s.setFromMatrixPosition(l.matrixWorld),s.project(this.camera);const c=(s.x+1)/2*n,g=(s.y+1)/2*a,u=l.scale.x,p=l.scale.y,m=c-u/2,w=g-p/2,T=m*this.qualityFactor/o,_=w*this.qualityFactor/o,O=u*this.qualityFactor/o,f=p*this.qualityFactor/o;this.renderer.setScissor(T,_,O,f),this.renderer.render(this.scene,this.camera)}this.renderer.setScissorTest(!1),this.renderer.autoClear=!0,this.renderer.setRenderTarget(null),this.camera.layers.set(28),this.renderer.setClearColor(t,r)}render(){this.renderTarget&&this.captureRenderTarget(),this.renderer.render(this.scene,this.camera)}showScissoredRenderTarget(){if(!this.renderTarget)return;const e=this.targetRect.width,t=this.targetRect.height,r=new d.PlaneGeometry(e,t),s=new d.MeshBasicMaterial({map:this.renderTarget.texture,side:d.DoubleSide,transparent:!0,opacity:.8}),n=new d.Mesh(r,s);n.position.set(0,0,90),n.layers.set(28),this.scene.add(n)}}function J(i){const e=document.createRange();e.selectNodeContents(i);const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}function V(i){const e=parseFloat(i.fontSize);let t=parseFloat(i.lineHeight);isNaN(t)&&(t=e*1.2);let r=parseFloat(i.letterSpacing);return isNaN(r)&&(r=0),{font:`${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,color:i.color,textAlign:i.textAlign||"start",textBaseline:"alphabetic",direction:i.direction||"inherit",lineHeight:t,letterSpacing:r}}function P(i,e=F|z|k|N|D,t,r){if(i.nodeType===Node.TEXT_NODE){const f=i;if(!f.textContent||!f.textContent.trim())return null;const R=f.textContent.replace(/\s+/g," ").trim();if(R.length===0)return null;const x=J(f);if(x.width===0||x.height===0)return null;const q=f.parentElement,I=q?window.getComputedStyle(q):null;return I?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:f,rect:{x:x.left+window.scrollX,y:x.top+window.scrollY,width:x.width,height:x.height},styles:{backgroundColor:"transparent",opacity:parseFloat(I.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:R,textStyles:V(I),dirtyMask:e,visibility:t,isTraveler:!1,children:[]}:null}const s=i,n=s.dataset.mirageFilter;let a=t,o=t;if(n){const f=new Set(n.split(/\s+/));for(const R of f)if(!Y.includes(R))throw new Error(`[MirageEngine] Invalid filter token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(f.has("end"))return null;if(f.has("include-tree")&&f.has("exclude-tree"))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(f.has("include-self")&&f.has("exclude-self"))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");f.has("include-tree")?a=a|C:f.has("exclude-tree")&&(a=a&~C),o=a,f.has("include-self")?o=o|C:f.has("exclude-self")&&(o=o&~C)}o=o|t&E;const l=s.dataset.mirageTravel;let c=!1;l&&new Set(l.split(/\s+/)).has("traveler")&&(o=o&~E,a=a&~E,c=!0);const g=s.getBoundingClientRect(),u=window.getComputedStyle(s);if(g.width===0||g.height===0||u.display==="none")return null;let p=s.getAttribute("data-mid");p||(p=Math.random().toString(36).substring(2,11),s.setAttribute("data-mid",p));const m=parseInt(u.zIndex),w={backgroundColor:u.backgroundColor,opacity:parseFloat(u.opacity),zIndex:isNaN(m)?0:m,borderRadius:u.borderRadius,borderColor:u.borderColor,borderWidth:u.borderWidth};let T,_;const O=[];return Array.from(s.childNodes).forEach(f=>{const R=f.nodeType===Node.TEXT_NODE?o:a,x=P(f,e,R);x&&O.push(x)}),{id:p,type:"BOX",element:s,rect:{x:g.left+window.scrollX,y:g.top+window.scrollY,width:g.width,height:g.height},styles:w,textContent:T,textStyles:_,dirtyMask:e,visibility:o,isTraveler:c,children:O}}class Q{constructor(e,t,r){h(this,"target");h(this,"renderer");h(this,"filter");h(this,"observer");h(this,"isDomDirty",!1);h(this,"isRunning",!1);h(this,"isTravelEnabled",!1);h(this,"pendingMask",M);h(this,"mutationTimer",null);h(this,"cssTimer",null);h(this,"resizeConfig");h(this,"resizeTimer",null);h(this,"isResizing",!1);h(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=F|z,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});h(this,"onWindowResize",()=>{if(!this.resizeConfig.enabled){this.isDomDirty=!0;return}this.isResizing||(this.isResizing=!0,this.resizeConfig.onStart&&this.resizeConfig.onStart()),this.resizeTimer&&clearTimeout(this.resizeTimer),this.resizeTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.resizeConfig.onEnd&&this.resizeConfig.onEnd(),this.isResizing=!1,this.resizeTimer=null},this.resizeConfig.delay)});h(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});var n,a;this.target=e,this.renderer=t,this.filter=r.filter;const s=(n=r.resizeDebounce)!=null?n:!0;s===!1?this.resizeConfig={enabled:!1,delay:0}:s===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(a=s.delay)!=null?a:150,onStart:s.onStart,onEnd:s.onEnd},this.observer=new MutationObserver(o=>{let l=M;for(const c of o)c.type==="childList"?l|=D:c.type==="attributes"&&(c.attributeName==="style"||c.attributeName==="class")&&(l|=F|z);if(l!==M){if(this.pendingMask|=l,l&D){this.clearTimers(),console.log("Structural Change detected"),this.isDomDirty=!0;return}this.mutationTimer&&clearTimeout(this.mutationTimer),this.mutationTimer=window.setTimeout(()=>{this.mutationTimer=null,this.isDomDirty=!0},200)}})}start(){this.isRunning||(this.isRunning=!0,this.observer.observe(this.target,{childList:!0,subtree:!0,attributes:!0,characterData:!0}),this.target.addEventListener("transitionend",this.onTransitionFinished),this.target.addEventListener("animationend",this.onTransitionFinished),window.addEventListener("resize",this.onWindowResize),this.forceUpdateScene(),this.renderLoop())}stop(){this.isRunning=!1,this.observer.disconnect(),this.clearTimers(),this.target.removeEventListener("transitionend",this.onTransitionFinished),this.target.removeEventListener("animationend",this.onTransitionFinished),window.removeEventListener("resize",this.onWindowResize)}clearTimers(){this.mutationTimer&&(clearTimeout(this.mutationTimer),this.mutationTimer=null),this.cssTimer&&(clearTimeout(this.cssTimer),this.cssTimer=null)}forceUpdateScene(){this.isDomDirty=!1;const e=document.querySelector("[data-mirage-travel='traveler']")!==null;e&&!this.isTravelEnabled&&(this.isTravelEnabled=!0,this.renderer.createRenderTarget());const t=P(this.target,this.pendingMask,e?C|E:C,this.filter);t&&this.renderer.syncScene(t),this.pendingMask=M}}class Z{constructor(e,t){h(this,"renderer");h(this,"syncer");h(this,"target");var s,n,a;this.target=e;let r;if(t.mode==="duplicate"?r=(n=(s=t.container)!=null?s:this.target.parentElement)!=null?n:void 0:r=(a=this.target.parentElement)!=null?a:void 0,!r)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new j(this.target,t,r),this.renderer.mount(),this.syncer=new Q(this.target,this.renderer,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}class K{constructor(e,t){h(this,"_engine");if(!e)throw new Error("[Mirage] Target element is required.");this._engine=new Z(e,t)}start(){this._engine.start()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}}v.Mirage=K,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});
+  `:"",h=(s==null?void 0:s.colorModifier)||"",m=G.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",o).replace("#INJECT_BASE_COLOR",l).replace("#INJECT_COLOR_MODIFIER",h),f=B(i.backgroundColor),g=B(i.borderColor),p={uSize:{value:new d.Vector2(e,t)},uBorderRadius:{value:new d.Vector4(0,0,0,0)},uBorderWidth:{value:S(i.borderWidth)},uBgColor:{value:f.color},uBorderColor:{value:g.color},uOpacity:{value:(T=i.opacity)!=null?T:1},uBgOpacity:{value:f.alpha},uBorderOpacity:{value:g.alpha},uTexture:{value:null}};return k(p.uBorderRadius.value,i.borderRadius),n&&(p.uTexture.value=r),new d.ShaderMaterial({uniforms:p,vertexShader:$,fragmentShader:m,transparent:!0,side:d.FrontSide})}function j(i,e,t,r,s){var o;const n=B(e.backgroundColor),a=B(e.borderColor);i.uniforms.uSize.value.set(t,r),k(i.uniforms.uBorderRadius.value,e.borderRadius),i.uniforms.uBorderWidth.value=S(e.borderWidth),i.uniforms.uBgColor.value.copy(n.color),i.uniforms.uBorderColor.value.copy(a.color),i.uniforms.uOpacity.value=(o=e.opacity)!=null?o:1,i.uniforms.uBgOpacity.value=n.alpha,i.uniforms.uBorderOpacity.value=a.alpha,i.uniforms.uTexture&&s!==void 0&&(i.uniforms.uTexture.value=s)}const L={create(i,e,t,r,s,n=2,a=null,o){if(i==="BOX")return J(e,r,s,a,o);if(i==="TEXT"){const l=P(t||"",e,r,s,n);return new d.MeshBasicMaterial({map:l,transparent:!0,side:d.FrontSide,color:16777215})}return new d.MeshBasicMaterial({visible:!1})},update(i,e,t,r,s,n,a=2,o){if(e==="BOX")j(i,t,s,n,o);else if(e==="TEXT"){const l=i;l.map&&l.map.dispose();const h=P(r||"",t,s,n,a);l.map=h,l.needsUpdate=!0}}};class V{constructor(e,t,r){c(this,"canvas");c(this,"scene");c(this,"camera");c(this,"renderer");c(this,"renderTarget",null);c(this,"renderOrder",0);c(this,"qualityFactor",2);c(this,"mode","overlay");c(this,"clipArea",1);c(this,"target");c(this,"mountContainer");c(this,"targetRect");c(this,"meshMap",new Map);var a,o,l;this.target=e,this.mountContainer=r,this.mode=(a=t.mode)!=null?a:"overlay",this.clipArea=(o=t.travelerClipArea)!=null?o:1,this.canvas=document.createElement("canvas"),this.scene=new d.Scene,this.targetRect=this.target.getBoundingClientRect();const s=this.targetRect.width,n=this.targetRect.height;this.camera=new d.OrthographicCamera(s/-2,s/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(0),this.renderer=new d.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(s,n),this.applyTextQuality((l=t.quality)!=null?l:"medium")}createRenderTarget(){this.renderTarget=new d.WebGLRenderTarget(this.targetRect.width*this.qualityFactor,this.targetRect.height*this.qualityFactor,{minFilter:d.LinearFilter,magFilter:d.LinearFilter,format:d.RGBAFormat,stencilBuffer:!1,depthBuffer:!0,samples:4})}applyTextQuality(e){if(typeof e=="number"){this.qualityFactor=Math.max(.1,e);return}switch(e){case"low":this.qualityFactor=1;break;case"high":this.qualityFactor=4;break;case"medium":default:this.qualityFactor=2;break}}mount(){this.mountContainer.prepend(this.canvas),this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){this.canvas.style.width=`${this.targetRect.width}px`,this.canvas.style.height=`${this.targetRect.height}px`,this.mode==="duplicate"?(this.canvas.style.position="",this.canvas.style.top="",this.canvas.style.left="",this.canvas.style.display="block"):(this.canvas.style.position="absolute",this.canvas.style.top=`${this.target.offsetTop}px`,this.canvas.style.left=`${this.target.offsetLeft}px`,this.canvas.style.display="block")}dispose(){this.renderer.dispose(),this.canvas.remove()}setSize(e,t){this.renderer.setSize(e,t),this.renderTarget&&this.renderTarget.setSize(e*this.qualityFactor,t*this.qualityFactor),this.camera.left=e/-2,this.camera.right=e/2,this.camera.top=t/2,this.camera.bottom=t/-2,this.camera.updateProjectionMatrix()}syncScene(e){const t=this.target.getBoundingClientRect(),r=Math.abs(t.width-this.targetRect.width)>.1||Math.abs(t.height-this.targetRect.height)>.1,s=this.mode==="overlay"&&(Math.abs(t.top-this.targetRect.top)>.1||Math.abs(t.left-this.targetRect.left)>.1);r?(this.targetRect=t,this.setSize(this.targetRect.width,this.targetRect.height),this.updateCanvasLayout()):s?(this.targetRect=t,this.updateCanvasLayout()):this.targetRect=t,this.renderOrder=0;const n=new Set;this.reconcileNode(e,n);for(const[a,o]of this.meshMap.entries())n.has(a)||(this.scene.remove(o),o.geometry.dispose(),o.material instanceof d.Material&&o.material.dispose(),this.meshMap.delete(a))}reconcileNode(e,t){var s;t.add(e.element);let r=this.meshMap.get(e.element);if(!r){const n=new d.PlaneGeometry(1,1);let a;a=L.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,e.isTraveler?(s=this.renderTarget)==null?void 0:s.texture:void 0,e.shaderHooks),r=new d.Mesh(n,a),e.type==="TEXT"&&(r.name="BG_MESH"),this.scene.add(r),this.meshMap.set(e.element,r)}if(r.userData.domRect=e.rect,this.updateMeshProperties(r,e),this.updateMeshLayers(r,e),e.isTraveler&&r.layers.enable(28),e.type==="BOX")for(const n of e.children)this.reconcileNode(n,t);else e.type==="TEXT"&&this.reconcileTextChild(r,e)}reconcileTextChild(e,t){var o,l;let r=e.children.find(h=>h.name==="TEXT_CHILD");const s=JSON.stringify(t.textStyles),n=(o=r==null?void 0:r.userData)==null?void 0:o.styleHash;if(!r||t.dirtyMask&X||s!==n){r&&((l=r.material.map)==null||l.dispose(),r.geometry.dispose(),e.remove(r));const h=L.create("TEXT",t.textStyles,t.textContent||"",t.rect.width,t.rect.height,this.qualityFactor),m=new d.PlaneGeometry(1,1);r=new d.Mesh(m,h),r.name="TEXT_CHILD",r.userData={styleHash:s},this.updateMeshLayers(r,t),r.position.z=.005,e.add(r)}if(r){const h=e.userData.domRect,m=h.x+h.width/2,f=h.y+h.height/2,g=t.rect.x+t.rect.width/2,p=t.rect.y+t.rect.height/2,x=g-m,T=-(p-f);r.position.set(x,T,.005)}}updateMeshProperties(e,t){var p;const{rect:r,styles:s}=t,n=this.renderer.getPixelRatio(),a=this.renderer.domElement.width/n,o=this.renderer.domElement.height/n;e.scale.set(r.width,r.height,1);const l=.001;this.renderOrder++;const h=this.targetRect.left+window.scrollX,m=this.targetRect.top+window.scrollY,f=r.x-h,g=r.y-m;e.position.set(f-a/2+r.width/2,-g+o/2-r.height/2,s.zIndex+this.renderOrder*l),L.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height,this.qualityFactor,t.isTraveler?(p=this.renderTarget)==null?void 0:p.texture:void 0)}updateMeshLayers(e,t){const r=(1-(t.visibility&w))*30;e.layers.set(r),t.visibility===(w|E)&&e.layers.enable(29)}captureRenderTarget(){const e=[];for(const l of this.meshMap.values())l.layers.mask&1<<28&&e.push(l);if(e.length===0)return;const t=new d.Color,r=this.renderer.getClearAlpha();this.renderer.getClearColor(t),this.renderer.setClearColor(0,0),this.renderer.setRenderTarget(this.renderTarget),this.renderer.clear(),this.renderer.autoClear=!1,this.renderer.setScissorTest(!0),this.camera.layers.set(29);const s=new d.Vector3,n=this.targetRect.width,a=this.targetRect.height,o=this.renderer.getPixelRatio();for(const l of e){s.setFromMatrixPosition(l.matrixWorld),s.project(this.camera);const h=(s.x+1)/2*n,m=(s.y+1)/2*a;let f=0,g=1;typeof this.clipArea=="number"?g=this.clipArea:this.clipArea.endsWith("%")?g=parseFloat(this.clipArea)/100:this.clipArea.endsWith("px")&&(f=parseFloat(this.clipArea));const p=l.scale.x*g+.5,x=l.scale.y*g+.5,T=h-p/2,_=m-x/2,I=(T*this.qualityFactor-f)/o,N=(_*this.qualityFactor-f)/o,O=(p*this.qualityFactor+f*2)/o,u=(x*this.qualityFactor+f*2)/o;this.renderer.setScissor(I,N,O,u),this.renderer.render(this.scene,this.camera)}this.renderer.setScissorTest(!1),this.renderer.autoClear=!0,this.renderer.setRenderTarget(null),this.camera.layers.set(28),this.renderer.setClearColor(t,r)}render(){this.renderTarget&&this.captureRenderTarget(),this.renderer.render(this.scene,this.camera)}showScissoredRenderTarget(){if(!this.renderTarget)return;const e=this.targetRect.width,t=this.targetRect.height,r=new d.PlaneGeometry(e,t),s=new d.MeshBasicMaterial({map:this.renderTarget.texture,side:d.DoubleSide,transparent:!0,opacity:.8}),n=new d.Mesh(r,s);n.position.set(0,0,90),n.layers.set(28),this.scene.add(n)}}function Q(i){const e=document.createRange();e.selectNodeContents(i);const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}function Z(i){const e=parseFloat(i.fontSize);let t=parseFloat(i.lineHeight);isNaN(t)&&(t=e*1.2);let r=parseFloat(i.letterSpacing);return isNaN(r)&&(r=0),{font:`${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,color:i.color,textAlign:i.textAlign||"start",textBaseline:"alphabetic",direction:i.direction||"inherit",lineHeight:t,letterSpacing:r}}function q(i,e=F|D|W|X|z,t,r){if(i.nodeType===Node.TEXT_NODE){const u=i;if(!u.textContent||!u.textContent.trim())return null;const R=u.textContent.replace(/\s+/g," ").trim();if(R.length===0)return null;const C=Q(u);if(C.width===0||C.height===0)return null;const Y=u.parentElement,A=Y?window.getComputedStyle(Y):null;return A?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:u,rect:{x:C.left+window.scrollX,y:C.top+window.scrollY,width:C.width,height:C.height},styles:{backgroundColor:"transparent",opacity:parseFloat(A.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:R,textStyles:Z(A),dirtyMask:e,visibility:t,isTraveler:!1,children:[]}:null}const s=i,n=s.dataset.mirageFilter;let a=t,o=t;if(n){const u=new Set(n.split(/\s+/));for(const R of u)if(!H.includes(R))throw new Error(`[MirageEngine] Invalid filter token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(u.has("end"))return null;if(u.has("include-tree")&&u.has("exclude-tree"))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(u.has("include-self")&&u.has("exclude-self"))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");u.has("include-tree")?a=a|w:u.has("exclude-tree")&&(a=a&~w),o=a,u.has("include-self")?o=o|w:u.has("exclude-self")&&(o=o&~w)}o=o|t&E;const l=s.dataset.mirageTravel;let h=!1;l&&new Set(l.split(/\s+/)).has("traveler")&&(o=o&~E,a=a&~E,h=!0);const m=s.dataset.mirageShader;let f;m&&(f=JSON.parse(m));const g=s.getBoundingClientRect(),p=window.getComputedStyle(s);if(g.width===0||g.height===0||p.display==="none")return null;let x=s.getAttribute("data-mid");x||(x=Math.random().toString(36).substring(2,11),s.setAttribute("data-mid",x));const T=parseInt(p.zIndex),_={backgroundColor:p.backgroundColor,opacity:parseFloat(p.opacity),zIndex:isNaN(T)?0:T,borderRadius:p.borderRadius,borderColor:p.borderColor,borderWidth:p.borderWidth};let I,N;const O=[];return Array.from(s.childNodes).forEach(u=>{const R=u.nodeType===Node.TEXT_NODE?o:a,C=q(u,e,R);C&&O.push(C)}),{id:x,type:"BOX",element:s,rect:{x:g.left+window.scrollX,y:g.top+window.scrollY,width:g.width,height:g.height},styles:_,textContent:I,textStyles:N,dirtyMask:e,visibility:o,isTraveler:h,children:O,shaderHooks:f}}class K{constructor(e,t,r){c(this,"target");c(this,"renderer");c(this,"filter");c(this,"observer");c(this,"isDomDirty",!1);c(this,"isRunning",!1);c(this,"isTravelEnabled",!1);c(this,"pendingMask",M);c(this,"mutationTimer",null);c(this,"cssTimer",null);c(this,"resizeConfig");c(this,"resizeTimer",null);c(this,"isResizing",!1);c(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=F|D,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});c(this,"onWindowResize",()=>{if(!this.resizeConfig.enabled){this.isDomDirty=!0;return}this.isResizing||(this.isResizing=!0,this.resizeConfig.onStart&&this.resizeConfig.onStart()),this.resizeTimer&&clearTimeout(this.resizeTimer),this.resizeTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.resizeConfig.onEnd&&this.resizeConfig.onEnd(),this.isResizing=!1,this.resizeTimer=null},this.resizeConfig.delay)});c(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});var n,a;this.target=e,this.renderer=t,this.filter=r.filter;const s=(n=r.resizeDebounce)!=null?n:!0;s===!1?this.resizeConfig={enabled:!1,delay:0}:s===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(a=s.delay)!=null?a:150,onStart:s.onStart,onEnd:s.onEnd},this.observer=new MutationObserver(o=>{let l=M;for(const h of o)h.type==="childList"?l|=z:h.type==="attributes"&&(h.attributeName==="style"||h.attributeName==="class")&&(l|=F|D);if(l!==M){if(this.pendingMask|=l,l&z){this.clearTimers(),console.log("Structural Change detected"),this.isDomDirty=!0;return}this.mutationTimer&&clearTimeout(this.mutationTimer),this.mutationTimer=window.setTimeout(()=>{this.mutationTimer=null,this.isDomDirty=!0},200)}})}start(){this.isRunning||(this.isRunning=!0,this.observer.observe(this.target,{childList:!0,subtree:!0,attributes:!0,characterData:!0}),this.target.addEventListener("transitionend",this.onTransitionFinished),this.target.addEventListener("animationend",this.onTransitionFinished),window.addEventListener("resize",this.onWindowResize),this.forceUpdateScene(),this.renderLoop())}stop(){this.isRunning=!1,this.observer.disconnect(),this.clearTimers(),this.target.removeEventListener("transitionend",this.onTransitionFinished),this.target.removeEventListener("animationend",this.onTransitionFinished),window.removeEventListener("resize",this.onWindowResize)}clearTimers(){this.mutationTimer&&(clearTimeout(this.mutationTimer),this.mutationTimer=null),this.cssTimer&&(clearTimeout(this.cssTimer),this.cssTimer=null)}forceUpdateScene(){this.isDomDirty=!1;const e=document.querySelector("[data-mirage-travel='traveler']")!==null;e&&!this.isTravelEnabled&&(this.isTravelEnabled=!0,this.renderer.createRenderTarget());const t=q(this.target,this.pendingMask,e?w|E:w,this.filter);t&&this.renderer.syncScene(t),this.pendingMask=M}}class ee{constructor(e,t){c(this,"renderer");c(this,"syncer");c(this,"target");var s,n,a;this.target=e;let r;if(t.mode==="duplicate"?r=(n=(s=t.container)!=null?s:this.target.parentElement)!=null?n:void 0:r=(a=this.target.parentElement)!=null?a:void 0,!r)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new V(this.target,t,r),this.renderer.mount(),this.syncer=new K(this.target,this.renderer,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}class te{constructor(e,t){c(this,"_engine");if(!e)throw new Error("[Mirage] Target element is required.");this._engine=new ee(e,t)}start(){this._engine.start()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}}v.Mirage=te,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirage-engine",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "An engine that mirrors HTML DOM elements to a WebGL scene in real-time.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -21,8 +21,8 @@
     "dist"
   ],
   "dependencies": {
-    "@mirage-engine/painter": "0.3.0",
-    "@mirage-engine/core": "0.2.0"
+    "@mirage-engine/painter": "0.4.0",
+    "@mirage-engine/core": "0.2.1"
   },
   "peerDependencies": {
     "three": "^0.150.0"