@mirage-engine/core 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @mirage-engine/core
 
+## 0.2.1
+
+### Patch Changes
+
+- 4b9e1b0: shader hooks pipeline
+- Updated dependencies [4b9e1b0]
+  - @mirage-engine/painter@0.4.0
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/mirage-engine.js

@@ -1,55 +1,55 @@
-var A = Object.defineProperty;
-var P = (i, e, t) => e in i ? A(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 = (s, e, t) => e in s ? k(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var h = (s, e, t) => (q(s, typeof e != "symbol" ? e + "" : e, t), t);
 import * as d from "three";
-const E = 0, O = 1, D = 2, k = 4, z = 8, N = 16, x = 1, R = 2, Z = 0, q = [
+const S = 0, z = 1, L = 2, Y = 4, I = 8, _ = 16, x = 1, w = 2, ee = 0, W = [
   "include-tree",
   "exclude-tree",
   "include-self",
   "exclude-self",
   "end"
 ];
-function Y(i, e, t) {
+function U(s, e, t) {
   const r = e.split(`
-`), s = [];
+`), i = [];
   return r.forEach((a) => {
     const n = a.split(" ");
     let o = n[0];
     for (let l = 1; l < n.length; l++) {
       const c = n[l];
-      i.measureText(o + " " + c).width < t ? o += " " + c : (s.push(o), o = c);
+      s.measureText(o + " " + c).width < t ? o += " " + c : (i.push(o), o = c);
     }
-    s.push(o);
-  }), s;
+    i.push(o);
+  }), i;
 }
-function I(i, e, t, r, s = 2) {
+function N(s, e, t, r, i = 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;
+  const l = (window.devicePixelRatio || 1) * i;
   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 c = Y(n, i, t), g = e.lineHeight;
-  c.forEach((p, m) => {
-    const T = m * g + 2;
+  const c = U(n, s, t), m = e.lineHeight;
+  c.forEach((g, p) => {
+    const y = p * m + 2;
     let v = 0;
-    e.textAlign === "center" ? v = t / 2 : e.textAlign === "right" && (v = t), n.textAlign = e.textAlign, n.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(a);
-  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 R(s) {
+  return typeof s == "number" ? s : parseFloat(s) || 0;
 }
-function _(i, e) {
-  var o, l, c, g;
+function X(s, e) {
+  var o, l, c, m;
   if (!e) {
-    i.set(0, 0, 0, 0);
+    s.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]), a = w((l = t[2]) != null ? l : t[0]), n = w((g = (c = t[3]) != null ? c : t[1]) != null ? g : t[0]);
-  i.set(r, s, a, n);
+  const t = e.split("/")[0].trim().split(/\s+/), r = R(t[0]), i = R((o = t[1]) != null ? o : t[0]), a = R((l = t[2]) != null ? l : t[0]), n = R((m = (c = t[3]) != null ? c : t[1]) != null ? m : t[0]);
+  s.set(r, i, a, n);
 }
-const U = (
+const H = (
   /* glsl */
   `
   varying vec2 vUv;
@@ -60,7 +60,7 @@ const U = (
     vScreenPos = gl_Position;
   }
 `
-), W = (
+), $ = (
   /* glsl */
   `
 
@@ -130,19 +130,19 @@ const U = (
   }
 `
 );
-function S(i) {
-  if (!i || i === "transparent")
+function E(s) {
+  if (!s || s === "transparent")
     return { color: new d.Color(16777215), alpha: 0 };
-  const e = i.match(
+  const e = s.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), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new d.Color(`rgb(${t}, ${r}, ${s})`), alpha: a };
+    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new d.Color(`rgb(${t}, ${r}, ${i})`), alpha: a };
   }
-  return { color: new d.Color(i), alpha: 1 };
+  return { color: new d.Color(s), alpha: 1 };
 }
-function H(i, e, t, r = null, s) {
+function G(s, e, t, r = null, i) {
   var v;
   const a = r !== null, n = a ? (
     /* glsl */
@@ -155,52 +155,52 @@ function H(i, e, t, r = null, s) {
     `
     vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
     vec2 resultUv = screenUv;
-    ${(s == null ? void 0 : s.uvModifier) || ""}
+    ${(i == null ? void 0 : i.uvModifier) || ""}
   `
   ) : "", l = a ? (
     /* glsl */
     `
     baseColor = texture2D(uTexture, resultUv);
   `
-  ) : "", c = (s == null ? void 0 : s.colorModifier) || "", g = W.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", c), u = S(i.backgroundColor), p = S(i.borderColor), m = {
+  ) : "", c = (i == null ? void 0 : i.colorModifier) || "", m = $.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", c), f = E(s.backgroundColor), g = E(s.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 },
-    uOpacity: { value: (v = i.opacity) != null ? v : 1 },
-    uBgOpacity: { value: u.alpha },
-    uBorderOpacity: { value: p.alpha },
+    uBorderWidth: { value: R(s.borderWidth) },
+    uBgColor: { value: f.color },
+    uBorderColor: { value: g.color },
+    uOpacity: { value: (v = s.opacity) != null ? v : 1 },
+    uBgOpacity: { value: f.alpha },
+    uBorderOpacity: { value: g.alpha },
     uTexture: { value: null }
   };
-  return _(m.uBorderRadius.value, i.borderRadius), a && (m.uTexture.value = r), new d.ShaderMaterial({
-    uniforms: m,
-    vertexShader: U,
-    fragmentShader: g,
+  return X(p.uBorderRadius.value, s.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(s, e, t, r, i) {
   var o;
-  const a = S(e.backgroundColor), n = S(e.borderColor);
-  i.uniforms.uSize.value.set(t, r), _(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 a = E(e.backgroundColor), n = E(e.borderColor);
+  s.uniforms.uSize.value.set(t, r), X(s.uniforms.uBorderRadius.value, e.borderRadius), s.uniforms.uBorderWidth.value = R(e.borderWidth), s.uniforms.uBgColor.value.copy(a.color), s.uniforms.uBorderColor.value.copy(n.color), s.uniforms.uOpacity.value = (o = e.opacity) != null ? o : 1, s.uniforms.uBgOpacity.value = a.alpha, s.uniforms.uBorderOpacity.value = n.alpha, s.uniforms.uTexture && i !== void 0 && (s.uniforms.uTexture.value = i);
 }
-const F = {
-  create(i, e, t, r, s, a = 2, n = null) {
-    if (i === "BOX")
-      return H(e, r, s, n);
-    if (i === "TEXT") {
-      const o = I(
+const D = {
+  create(s, e, t, r, i, a = 2, n = null, o) {
+    if (s === "BOX")
+      return G(e, r, i, n, o);
+    if (s === "TEXT") {
+      const l = N(
         t || "",
         e,
         r,
-        s,
+        i,
         a
       );
       return new d.MeshBasicMaterial({
-        map: o,
+        map: l,
         transparent: !0,
         side: d.FrontSide,
         color: 16777215
@@ -208,22 +208,22 @@ const F = {
     }
     return new d.MeshBasicMaterial({ visible: !1 });
   },
-  update(i, e, t, r, s, a, n = 2, o) {
+  update(s, e, t, r, i, a, n = 2, o) {
     if (e === "BOX")
-      $(
-        i,
-        t,
+      J(
         s,
+        t,
+        i,
         a,
         o
       );
     else if (e === "TEXT") {
-      const l = i;
+      const l = s;
       l.map && l.map.dispose();
-      const c = I(
+      const c = N(
         r || "",
         t,
-        s,
+        i,
         a,
         n
       );
@@ -231,7 +231,7 @@ const F = {
     }
   }
 };
-class G {
+class V {
   constructor(e, t, r) {
     h(this, "canvas");
     h(this, "scene");
@@ -241,16 +241,17 @@ class G {
     h(this, "renderOrder", 0);
     h(this, "qualityFactor", 2);
     h(this, "mode", "overlay");
+    h(this, "clipArea", 1);
     h(this, "target");
     h(this, "mountContainer");
     h(this, "targetRect");
     h(this, "meshMap", /* @__PURE__ */ new Map());
-    var n, o;
-    this.target = e, this.mountContainer = r, this.mode = (n = t.mode) != null ? n : "overlay", this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const s = this.targetRect.width, a = this.targetRect.height;
+    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 i = this.targetRect.width, a = this.targetRect.height;
     this.camera = new d.OrthographicCamera(
-      s / -2,
-      s / 2,
+      i / -2,
+      i / 2,
       a / 2,
       a / -2,
       1,
@@ -261,7 +262,7 @@ class G {
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, a), this.applyTextQuality((o = t.quality) != null ? o : "medium");
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(i, a), this.applyTextQuality((l = t.quality) != null ? l : "medium");
   }
   createRenderTarget() {
     this.renderTarget = new d.WebGLRenderTarget(
@@ -311,28 +312,29 @@ class G {
     ), 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) > 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 t = this.target.getBoundingClientRect(), r = Math.abs(t.width - this.targetRect.width) > 0.1 || Math.abs(t.height - this.targetRect.height) > 0.1, i = 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()) : i ? (this.targetRect = t, this.updateCanvasLayout()) : this.targetRect = t, this.renderOrder = 0;
     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;
+    var i;
     t.add(e.element);
     let r = this.meshMap.get(e.element);
     if (!r) {
       const a = new d.PlaneGeometry(1, 1);
       let n;
-      n = F.create(
+      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
+        e.isTraveler ? (i = this.renderTarget) == null ? void 0 : i.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")
@@ -346,36 +348,36 @@ class G {
     let r = e.children.find(
       (c) => c.name === "TEXT_CHILD"
     );
-    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) {
+    const i = JSON.stringify(t.textStyles), a = (o = r == null ? void 0 : r.userData) == null ? void 0 : o.styleHash;
+    if (!r || t.dirtyMask & _ || i !== a) {
       r && ((l = r.material.map) == null || l.dispose(), r.geometry.dispose(), e.remove(r));
-      const c = F.create(
+      const c = 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, c), r.name = "TEXT_CHILD", r.userData = { styleHash: i }, 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 c = e.userData.domRect, m = c.x + c.width / 2, f = c.y + c.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, a = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / a, o = this.renderer.domElement.height / a;
+    var p;
+    const { rect: r, styles: i } = 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 c = this.targetRect.left + window.scrollX, m = this.targetRect.top + window.scrollY, f = r.x - c, g = r.y - m;
     e.position.set(
-      u - n / 2 + r.width / 2,
-      -p + o / 2 - r.height / 2,
-      s.zIndex + this.renderOrder * l
-    ), F.update(
+      f - n / 2 + r.width / 2,
+      -g + o / 2 - r.height / 2,
+      i.zIndex + this.renderOrder * l
+    ), D.update(
       e.material,
       "BOX",
       t.styles,
@@ -383,12 +385,12 @@ 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) {
     const r = (1 - (t.visibility & x)) * 30;
-    e.layers.set(r), t.visibility === (x | R) && e.layers.enable(29);
+    e.layers.set(r), t.visibility === (x | w) && e.layers.enable(29);
   }
   captureRenderTarget() {
     const e = [];
@@ -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(), a = this.targetRect.width, n = this.targetRect.height, o = this.renderer.getPixelRatio();
+    const i = 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 * a, g = (s.y + 1) / 2 * n, 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);
+      i.setFromMatrixPosition(l.matrixWorld), i.project(this.camera);
+      const c = (i.x + 1) / 2 * a, m = (i.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 = c - 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);
   }
@@ -413,18 +418,18 @@ class G {
   showScissoredRenderTarget() {
     if (!this.renderTarget)
       return;
-    const e = this.targetRect.width, t = this.targetRect.height, r = new d.PlaneGeometry(e, t), s = new d.MeshBasicMaterial({
+    const e = this.targetRect.width, t = this.targetRect.height, r = new d.PlaneGeometry(e, t), i = new d.MeshBasicMaterial({
       map: this.renderTarget.texture,
       side: d.DoubleSide,
       transparent: !0,
       opacity: 0.8
-    }), a = new d.Mesh(r, s);
+    }), a = new d.Mesh(r, i);
     a.position.set(0, 0, 90), a.layers.set(28), this.scene.add(a);
   }
 }
-function J(i) {
+function j(s) {
   const e = document.createRange();
-  e.selectNodeContents(i);
+  e.selectNodeContents(s);
   const t = e.getBoundingClientRect();
   return {
     left: t.left,
@@ -433,126 +438,130 @@ function J(i) {
     height: t.height
   };
 }
-function V(i) {
-  const e = parseFloat(i.fontSize);
-  let t = parseFloat(i.lineHeight);
+function Q(s) {
+  const e = parseFloat(s.fontSize);
+  let t = parseFloat(s.lineHeight);
   isNaN(t) && (t = e * 1.2);
-  let r = parseFloat(i.letterSpacing);
+  let r = parseFloat(s.letterSpacing);
   return isNaN(r) && (r = 0), {
-    font: `${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,
-    color: i.color,
-    textAlign: i.textAlign || "start",
+    font: `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,
+    color: s.color,
+    textAlign: s.textAlign || "start",
     textBaseline: "alphabetic",
-    direction: i.direction || "inherit",
+    direction: s.direction || "inherit",
     lineHeight: t,
     letterSpacing: r
   };
 }
-function X(i, e = O | D | k | N | z, t, r) {
-  if (i.nodeType === Node.TEXT_NODE) {
-    const f = i;
-    if (!f.textContent || !f.textContent.trim())
+function P(s, e = z | L | Y | _ | I, t, r) {
+  if (s.nodeType === Node.TEXT_NODE) {
+    const u = s;
+    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 A = u.parentElement, O = A ? window.getComputedStyle(A) : 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, a = s.dataset.mirageFilter;
+  const i = s, a = i.dataset.mirageFilter;
   let n = t, o = t;
   if (a) {
-    const f = new Set(a.split(/\s+/));
-    for (const C of f)
-      if (!q.includes(C))
+    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") ? n = n | x : f.has("exclude-tree") && (n = n & ~x), o = n, 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;
+  o = o | t & w;
+  const l = i.dataset.mirageTravel;
   let c = !1;
-  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~R, n = n & ~R, c = !0);
-  const g = s.getBoundingClientRect(), u = window.getComputedStyle(s);
-  if (g.width === 0 || g.height === 0 || u.display === "none")
+  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~w, n = n & ~w, c = !0);
+  const m = i.dataset.mirageShader;
+  let f;
+  m && (f = JSON.parse(m));
+  const g = i.getBoundingClientRect(), p = window.getComputedStyle(i);
+  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 = i.getAttribute("data-mid");
+  y || (y = Math.random().toString(36).substring(2, 11), i.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 : n, y = X(
-      f,
+  return Array.from(i.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,
+    element: i,
     rect: {
       x: g.left + window.scrollX,
       y: g.top + window.scrollY,
       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
+    children: b,
+    shaderHooks: f
   };
 }
-class j {
+class Z {
   constructor(e, t, r) {
     h(this, "target");
     h(this, "renderer");
@@ -561,14 +570,14 @@ class j {
     h(this, "isDomDirty", !1);
     h(this, "isRunning", !1);
     h(this, "isTravelEnabled", !1);
-    h(this, "pendingMask", E);
+    h(this, "pendingMask", S);
     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 | D, this.cssTimer = window.setTimeout(() => {
+      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));
     });
@@ -586,18 +595,18 @@ class j {
     });
     var a, n;
     this.target = e, this.renderer = t, this.filter = r.filter;
-    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 = {
+    const i = (a = r.resizeDebounce) != null ? a : !0;
+    i === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : i === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
       enabled: !0,
-      delay: (n = s.delay) != null ? n : 150,
-      onStart: s.onStart,
-      onEnd: s.onEnd
+      delay: (n = i.delay) != null ? n : 150,
+      onStart: i.onStart,
+      onEnd: i.onEnd
     }, this.observer = new MutationObserver((o) => {
-      let l = E;
+      let l = S;
       for (const c of o)
-        c.type === "childList" ? l |= z : c.type === "attributes" && (c.attributeName === "style" || c.attributeName === "class") && (l |= O | D);
-      if (l !== E) {
-        if (this.pendingMask |= l, l & z) {
+        c.type === "childList" ? l |= I : c.type === "attributes" && (c.attributeName === "style" || c.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 = X(
+    const t = P(
       this.target,
       this.pendingMask,
-      e ? x | R : x,
+      e ? x | w : x,
       this.filter
     );
-    t && this.renderer.syncScene(t), this.pendingMask = E;
+    t && this.renderer.syncScene(t), this.pendingMask = S;
   }
 }
-class K {
+class te {
   constructor(e, t) {
     h(this, "renderer");
     h(this, "syncer");
     h(this, "target");
-    var s, a, n;
+    var i, a, n;
     this.target = e;
     let 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)
+    if (t.mode === "duplicate" ? r = (a = (i = t.container) != null ? i : 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();
@@ -657,15 +666,15 @@ class K {
   }
 }
 export {
-  q as ALLOWED_FILTERS,
-  N as DIRTY_CONTENT,
-  E as DIRTY_NONE,
-  O as DIRTY_RECT,
-  z as DIRTY_STRUCTURE,
-  D as DIRTY_STYLE,
-  k as DIRTY_ZINDEX,
-  Z as EXCLUDED,
-  K as Engine,
-  R as SYSTEM_LAYER,
+  W as ALLOWED_FILTERS,
+  _ as DIRTY_CONTENT,
+  S as DIRTY_NONE,
+  z as DIRTY_RECT,
+  I as DIRTY_STRUCTURE,
+  L as DIRTY_STYLE,
+  Y as DIRTY_ZINDEX,
+  ee as EXCLUDED,
+  te as Engine,
+  w as SYSTEM_LAYER,
   x as USER_LAYER
 };

package/dist/mirage-engine.umd.js

@@ -1,5 +1,5 @@
-(function(u,T){typeof exports=="object"&&typeof module!="undefined"?T(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],T):(u=typeof globalThis!="undefined"?globalThis:u||self,T(u.MirageEngine={},u.THREE))})(this,function(u,T){"use strict";var ee=Object.defineProperty;var te=(u,T,w)=>T in u?ee(u,T,{enumerable:!0,configurable:!0,writable:!0,value:w}):u[T]=w;var d=(u,T,w)=>(te(u,typeof T!="symbol"?T+"":T,w),w);function w(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 h=w(T),M=0,B=1,O=2,A=4,D=8,L=16,R=1,E=2,q=0,X=["include-tree","exclude-tree","include-self","exclude-self","end"];function W(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 Y(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=W(a,i,t),p=e.lineHeight;c.forEach((m,v)=>{const b=v*p+2;let y=0;e.textAlign==="center"?y=t/2:e.textAlign==="right"&&(y=t),a.textAlign=e.textAlign,a.fillText(m,y,b)});const f=new h.CanvasTexture(n);return f.colorSpace=h.SRGBColorSpace,f.minFilter=h.LinearFilter,f.magFilter=h.LinearFilter,f.needsUpdate=!0,f}function S(i){return typeof i=="number"?i:parseFloat(i)||0}function P(i,e){var o,l,c,p;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((p=(c=t[3])!=null?c:t[1])!=null?p:t[0]);i.set(r,s,n,a)}const H=`
+(function(u,T){typeof exports=="object"&&typeof module!="undefined"?T(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],T):(u=typeof globalThis!="undefined"?globalThis:u||self,T(u.MirageEngine={},u.THREE))})(this,function(u,T){"use strict";var re=Object.defineProperty;var ie=(u,T,w)=>T in u?re(u,T,{enumerable:!0,configurable:!0,writable:!0,value:w}):u[T]=w;var h=(u,T,w)=>(ie(u,typeof T!="symbol"?T+"":T,w),w);function w(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const d=w(T),D=0,M=1,O=2,Y=4,B=8,L=16,C=1,E=2,H=0,P=["include-tree","exclude-tree","include-self","exclude-self","end"];function $(s,e,t){const r=e.split(`
+`),i=[];return r.forEach(a=>{const n=a.split(" ");let o=n[0];for(let l=1;l<n.length;l++){const c=n[l];s.measureText(o+" "+c).width<t?o+=" "+c:(i.push(o),o=c)}i.push(o)}),i}function k(s,e,t,r,i=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)*i;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 c=$(n,s,t),v=e.lineHeight;c.forEach((m,g)=>{const R=g*v+2;let y=0;e.textAlign==="center"?y=t/2:e.textAlign==="right"&&(y=t),n.textAlign=e.textAlign,n.fillText(m,y,R)});const p=new d.CanvasTexture(a);return p.colorSpace=d.SRGBColorSpace,p.minFilter=d.LinearFilter,p.magFilter=d.LinearFilter,p.needsUpdate=!0,p}function S(s){return typeof s=="number"?s:parseFloat(s)||0}function U(s,e){var o,l,c,v;if(!e){s.set(0,0,0,0);return}const t=e.split("/")[0].trim().split(/\s+/),r=S(t[0]),i=S((o=t[1])!=null?o:t[0]),a=S((l=t[2])!=null?l:t[0]),n=S((v=(c=t[3])!=null?c:t[1])!=null?v:t[0]);s.set(r,i,a,n)}const G=`
   varying vec2 vUv;
   varying vec4 vScreenPos;
   void main() {
@@ -7,7 +7,7 @@
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     vScreenPos = gl_Position;
   }
-`,$=`
+`,J=`
 
   varying vec2 vUv;
   
@@ -73,13 +73,13 @@
 
     #include <colorspace_fragment>
   }
-`;function F(i){if(!i||i==="transparent")return{color:new h.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 h.Color(`rgb(${t}, ${r}, ${s})`),alpha:n}}return{color:new h.Color(i),alpha:1}}function G(i,e,t,r=null,s){var y;const n=r!==null,a=n?`
+`;function F(s){if(!s||s==="transparent")return{color:new d.Color(16777215),alpha:0};const e=s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){const t=parseInt(e[1],10),r=parseInt(e[2],10),i=parseInt(e[3],10),a=e[4]!==void 0?parseFloat(e[4]):1;return{color:new d.Color(`rgb(${t}, ${r}, ${i})`),alpha:a}}return{color:new d.Color(s),alpha:1}}function j(s,e,t,r=null,i){var y;const a=r!==null,n=a?`
     uniform sampler2D uTexture;
     varying vec4 vScreenPos;
-  `:"",o=n?`
+  `:"",o=a?`
     vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
     vec2 resultUv = screenUv;
-    ${(s==null?void 0:s.uvModifier)||""}
-  `:"",l=n?`
+    ${(i==null?void 0:i.uvModifier)||""}
+  `:"",l=a?`
     baseColor = texture2D(uTexture, resultUv);
-  `:"",c=(s==null?void 0:s.colorModifier)||"",p=$.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",o).replace("#INJECT_BASE_COLOR",l).replace("#INJECT_COLOR_MODIFIER",c),f=F(i.backgroundColor),m=F(i.borderColor),v={uSize:{value:new h.Vector2(e,t)},uBorderRadius:{value:new h.Vector4(0,0,0,0)},uBorderWidth:{value:S(i.borderWidth)},uBgColor:{value:f.color},uBorderColor:{value:m.color},uOpacity:{value:(y=i.opacity)!=null?y:1},uBgOpacity:{value:f.alpha},uBorderOpacity:{value:m.alpha},uTexture:{value:null}};return P(v.uBorderRadius.value,i.borderRadius),n&&(v.uTexture.value=r),new h.ShaderMaterial({uniforms:v,vertexShader:H,fragmentShader:p,transparent:!0,side:h.FrontSide})}function j(i,e,t,r,s){var o;const n=F(e.backgroundColor),a=F(e.borderColor);i.uniforms.uSize.value.set(t,r),P(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 I={create(i,e,t,r,s,n=2,a=null){if(i==="BOX")return G(e,r,s,a);if(i==="TEXT"){const o=Y(t||"",e,r,s,n);return new h.MeshBasicMaterial({map:o,transparent:!0,side:h.FrontSide,color:16777215})}return new h.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 c=Y(r||"",t,s,n,a);l.map=c,l.needsUpdate=!0}}};class J{constructor(e,t,r){d(this,"canvas");d(this,"scene");d(this,"camera");d(this,"renderer");d(this,"renderTarget",null);d(this,"renderOrder",0);d(this,"qualityFactor",2);d(this,"mode","overlay");d(this,"target");d(this,"mountContainer");d(this,"targetRect");d(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 h.Scene,this.targetRect=this.target.getBoundingClientRect();const s=this.targetRect.width,n=this.targetRect.height;this.camera=new h.OrthographicCamera(s/-2,s/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(0),this.renderer=new h.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 h.WebGLRenderTarget(this.targetRect.width*this.qualityFactor,this.targetRect.height*this.qualityFactor,{minFilter:h.LinearFilter,magFilter:h.LinearFilter,format:h.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 h.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 h.PlaneGeometry(1,1);let a;a=I.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 h.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&L||s!==n){r&&((l=r.material.map)==null||l.dispose(),r.geometry.dispose(),e.remove(r));const c=I.create("TEXT",t.textStyles,t.textContent||"",t.rect.width,t.rect.height,this.qualityFactor),p=new h.PlaneGeometry(1,1);r=new h.Mesh(p,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,p=c.x+c.width/2,f=c.y+c.height/2,m=t.rect.x+t.rect.width/2,v=t.rect.y+t.rect.height/2,b=m-p,y=-(v-f);r.position.set(b,y,.005)}}updateMeshProperties(e,t){var v;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,p=this.targetRect.top+window.scrollY,f=r.x-c,m=r.y-p;e.position.set(f-a/2+r.width/2,-m+o/2-r.height/2,s.zIndex+this.renderOrder*l),I.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height,this.qualityFactor,t.isTraveler?(v=this.renderTarget)==null?void 0:v.texture:void 0)}updateMeshLayers(e,t){const r=(1-(t.visibility&R))*30;e.layers.set(r),t.visibility===(R|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 h.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 h.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,p=(s.y+1)/2*a,f=l.scale.x,m=l.scale.y,v=c-f/2,b=p-m/2,y=v*this.qualityFactor/o,_=b*this.qualityFactor/o,z=f*this.qualityFactor/o,g=m*this.qualityFactor/o;this.renderer.setScissor(y,_,z,g),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 h.PlaneGeometry(e,t),s=new h.MeshBasicMaterial({map:this.renderTarget.texture,side:h.DoubleSide,transparent:!0,opacity:.8}),n=new h.Mesh(r,s);n.position.set(0,0,90),n.layers.set(28),this.scene.add(n)}}function V(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 U(i,e=B|O|A|L|D,t,r){if(i.nodeType===Node.TEXT_NODE){const g=i;if(!g.textContent||!g.textContent.trim())return null;const x=g.textContent.replace(/\s+/g," ").trim();if(x.length===0)return null;const C=V(g);if(C.width===0||C.height===0)return null;const k=g.parentElement,N=k?window.getComputedStyle(k):null;return N?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:g,rect:{x:C.left+window.scrollX,y:C.top+window.scrollY,width:C.width,height:C.height},styles:{backgroundColor:"transparent",opacity:parseFloat(N.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:x,textStyles:Z(N),dirtyMask:e,visibility:t,isTraveler:!1,children:[]}:null}const s=i,n=s.dataset.mirageFilter;let a=t,o=t;if(n){const g=new Set(n.split(/\s+/));for(const x of g)if(!X.includes(x))throw new Error(`[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(g.has("end"))return null;if(g.has("include-tree")&&g.has("exclude-tree"))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(g.has("include-self")&&g.has("exclude-self"))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");g.has("include-tree")?a=a|R:g.has("exclude-tree")&&(a=a&~R),o=a,g.has("include-self")?o=o|R:g.has("exclude-self")&&(o=o&~R)}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 p=s.getBoundingClientRect(),f=window.getComputedStyle(s);if(p.width===0||p.height===0||f.display==="none")return null;let m=s.getAttribute("data-mid");m||(m=Math.random().toString(36).substring(2,11),s.setAttribute("data-mid",m));const v=parseInt(f.zIndex),b={backgroundColor:f.backgroundColor,opacity:parseFloat(f.opacity),zIndex:isNaN(v)?0:v,borderRadius:f.borderRadius,borderColor:f.borderColor,borderWidth:f.borderWidth};let y,_;const z=[];return Array.from(s.childNodes).forEach(g=>{const x=g.nodeType===Node.TEXT_NODE?o:a,C=U(g,e,x);C&&z.push(C)}),{id:m,type:"BOX",element:s,rect:{x:p.left+window.scrollX,y:p.top+window.scrollY,width:p.width,height:p.height},styles:b,textContent:y,textStyles:_,dirtyMask:e,visibility:o,isTraveler:c,children:z}}class Q{constructor(e,t,r){d(this,"target");d(this,"renderer");d(this,"filter");d(this,"observer");d(this,"isDomDirty",!1);d(this,"isRunning",!1);d(this,"isTravelEnabled",!1);d(this,"pendingMask",M);d(this,"mutationTimer",null);d(this,"cssTimer",null);d(this,"resizeConfig");d(this,"resizeTimer",null);d(this,"isResizing",!1);d(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=B|O,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});d(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)});d(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|=B|O);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=U(this.target,this.pendingMask,e?R|E:R,this.filter);t&&this.renderer.syncScene(t),this.pendingMask=M}}class K{constructor(e,t){d(this,"renderer");d(this,"syncer");d(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()}}u.ALLOWED_FILTERS=X,u.DIRTY_CONTENT=L,u.DIRTY_NONE=M,u.DIRTY_RECT=B,u.DIRTY_STRUCTURE=D,u.DIRTY_STYLE=O,u.DIRTY_ZINDEX=A,u.EXCLUDED=q,u.Engine=K,u.SYSTEM_LAYER=E,u.USER_LAYER=R,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+  `:"",c=(i==null?void 0:i.colorModifier)||"",v=J.replace("#INJECT_DECLARATIONS",n).replace("#INJECT_UV_MODIFIER",o).replace("#INJECT_BASE_COLOR",l).replace("#INJECT_COLOR_MODIFIER",c),p=F(s.backgroundColor),m=F(s.borderColor),g={uSize:{value:new d.Vector2(e,t)},uBorderRadius:{value:new d.Vector4(0,0,0,0)},uBorderWidth:{value:S(s.borderWidth)},uBgColor:{value:p.color},uBorderColor:{value:m.color},uOpacity:{value:(y=s.opacity)!=null?y:1},uBgOpacity:{value:p.alpha},uBorderOpacity:{value:m.alpha},uTexture:{value:null}};return U(g.uBorderRadius.value,s.borderRadius),a&&(g.uTexture.value=r),new d.ShaderMaterial({uniforms:g,vertexShader:G,fragmentShader:v,transparent:!0,side:d.FrontSide})}function V(s,e,t,r,i){var o;const a=F(e.backgroundColor),n=F(e.borderColor);s.uniforms.uSize.value.set(t,r),U(s.uniforms.uBorderRadius.value,e.borderRadius),s.uniforms.uBorderWidth.value=S(e.borderWidth),s.uniforms.uBgColor.value.copy(a.color),s.uniforms.uBorderColor.value.copy(n.color),s.uniforms.uOpacity.value=(o=e.opacity)!=null?o:1,s.uniforms.uBgOpacity.value=a.alpha,s.uniforms.uBorderOpacity.value=n.alpha,s.uniforms.uTexture&&i!==void 0&&(s.uniforms.uTexture.value=i)}const I={create(s,e,t,r,i,a=2,n=null,o){if(s==="BOX")return j(e,r,i,n,o);if(s==="TEXT"){const l=k(t||"",e,r,i,a);return new d.MeshBasicMaterial({map:l,transparent:!0,side:d.FrontSide,color:16777215})}return new d.MeshBasicMaterial({visible:!1})},update(s,e,t,r,i,a,n=2,o){if(e==="BOX")V(s,t,i,a,o);else if(e==="TEXT"){const l=s;l.map&&l.map.dispose();const c=k(r||"",t,i,a,n);l.map=c,l.needsUpdate=!0}}};class Z{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,"clipArea",1);h(this,"target");h(this,"mountContainer");h(this,"targetRect");h(this,"meshMap",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 i=this.targetRect.width,a=this.targetRect.height;this.camera=new d.OrthographicCamera(i/-2,i/2,a/2,a/-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(i,a),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,i=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()):i?(this.targetRect=t,this.updateCanvasLayout()):this.targetRect=t,this.renderOrder=0;const a=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 i;t.add(e.element);let r=this.meshMap.get(e.element);if(!r){const a=new d.PlaneGeometry(1,1);let n;n=I.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,e.isTraveler?(i=this.renderTarget)==null?void 0:i.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 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");const i=JSON.stringify(t.textStyles),a=(o=r==null?void 0:r.userData)==null?void 0:o.styleHash;if(!r||t.dirtyMask&L||i!==a){r&&((l=r.material.map)==null||l.dispose(),r.geometry.dispose(),e.remove(r));const c=I.create("TEXT",t.textStyles,t.textContent||"",t.rect.width,t.rect.height,this.qualityFactor),v=new d.PlaneGeometry(1,1);r=new d.Mesh(v,c),r.name="TEXT_CHILD",r.userData={styleHash:i},this.updateMeshLayers(r,t),r.position.z=.005,e.add(r)}if(r){const c=e.userData.domRect,v=c.x+c.width/2,p=c.y+c.height/2,m=t.rect.x+t.rect.width/2,g=t.rect.y+t.rect.height/2,R=m-v,y=-(g-p);r.position.set(R,y,.005)}}updateMeshProperties(e,t){var g;const{rect:r,styles:i}=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=.001;this.renderOrder++;const c=this.targetRect.left+window.scrollX,v=this.targetRect.top+window.scrollY,p=r.x-c,m=r.y-v;e.position.set(p-n/2+r.width/2,-m+o/2-r.height/2,i.zIndex+this.renderOrder*l),I.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height,this.qualityFactor,t.isTraveler?(g=this.renderTarget)==null?void 0:g.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 i=new d.Vector3,a=this.targetRect.width,n=this.targetRect.height,o=this.renderer.getPixelRatio();for(const l of e){i.setFromMatrixPosition(l.matrixWorld),i.project(this.camera);const c=(i.x+1)/2*a,v=(i.y+1)/2*n;let p=0,m=1;typeof this.clipArea=="number"?m=this.clipArea:this.clipArea.endsWith("%")?m=parseFloat(this.clipArea)/100:this.clipArea.endsWith("px")&&(p=parseFloat(this.clipArea));const g=l.scale.x*m+.5,R=l.scale.y*m+.5,y=c-g/2,_=v-R/2,N=(y*this.qualityFactor-p)/o,A=(_*this.qualityFactor-p)/o,z=(g*this.qualityFactor+p*2)/o,f=(R*this.qualityFactor+p*2)/o;this.renderer.setScissor(N,A,z,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),i=new d.MeshBasicMaterial({map:this.renderTarget.texture,side:d.DoubleSide,transparent:!0,opacity:.8}),a=new d.Mesh(r,i);a.position.set(0,0,90),a.layers.set(28),this.scene.add(a)}}function Q(s){const e=document.createRange();e.selectNodeContents(s);const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}function K(s){const e=parseFloat(s.fontSize);let t=parseFloat(s.lineHeight);isNaN(t)&&(t=e*1.2);let r=parseFloat(s.letterSpacing);return isNaN(r)&&(r=0),{font:`${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,color:s.color,textAlign:s.textAlign||"start",textBaseline:"alphabetic",direction:s.direction||"inherit",lineHeight:t,letterSpacing:r}}function q(s,e=M|O|Y|L|B,t,r){if(s.nodeType===Node.TEXT_NODE){const f=s;if(!f.textContent||!f.textContent.trim())return null;const x=f.textContent.replace(/\s+/g," ").trim();if(x.length===0)return null;const b=Q(f);if(b.width===0||b.height===0)return null;const W=f.parentElement,X=W?window.getComputedStyle(W):null;return X?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:f,rect:{x:b.left+window.scrollX,y:b.top+window.scrollY,width:b.width,height:b.height},styles:{backgroundColor:"transparent",opacity:parseFloat(X.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:x,textStyles:K(X),dirtyMask:e,visibility:t,isTraveler:!1,children:[]}:null}const i=s,a=i.dataset.mirageFilter;let n=t,o=t;if(a){const f=new Set(a.split(/\s+/));for(const x of f)if(!P.includes(x))throw new Error(`[MirageEngine] Invalid filter token: '${x}'. 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")?n=n|C:f.has("exclude-tree")&&(n=n&~C),o=n,f.has("include-self")?o=o|C:f.has("exclude-self")&&(o=o&~C)}o=o|t&E;const l=i.dataset.mirageTravel;let c=!1;l&&new Set(l.split(/\s+/)).has("traveler")&&(o=o&~E,n=n&~E,c=!0);const v=i.dataset.mirageShader;let p;v&&(p=JSON.parse(v));const m=i.getBoundingClientRect(),g=window.getComputedStyle(i);if(m.width===0||m.height===0||g.display==="none")return null;let R=i.getAttribute("data-mid");R||(R=Math.random().toString(36).substring(2,11),i.setAttribute("data-mid",R));const y=parseInt(g.zIndex),_={backgroundColor:g.backgroundColor,opacity:parseFloat(g.opacity),zIndex:isNaN(y)?0:y,borderRadius:g.borderRadius,borderColor:g.borderColor,borderWidth:g.borderWidth};let N,A;const z=[];return Array.from(i.childNodes).forEach(f=>{const x=f.nodeType===Node.TEXT_NODE?o:n,b=q(f,e,x);b&&z.push(b)}),{id:R,type:"BOX",element:i,rect:{x:m.left+window.scrollX,y:m.top+window.scrollY,width:m.width,height:m.height},styles:_,textContent:N,textStyles:A,dirtyMask:e,visibility:o,isTraveler:c,children:z,shaderHooks:p}}class ee{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",D);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|=M|O,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 a,n;this.target=e,this.renderer=t,this.filter=r.filter;const i=(a=r.resizeDebounce)!=null?a:!0;i===!1?this.resizeConfig={enabled:!1,delay:0}:i===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(n=i.delay)!=null?n:150,onStart:i.onStart,onEnd:i.onEnd},this.observer=new MutationObserver(o=>{let l=D;for(const c of o)c.type==="childList"?l|=B:c.type==="attributes"&&(c.attributeName==="style"||c.attributeName==="class")&&(l|=M|O);if(l!==D){if(this.pendingMask|=l,l&B){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?C|E:C,this.filter);t&&this.renderer.syncScene(t),this.pendingMask=D}}class te{constructor(e,t){h(this,"renderer");h(this,"syncer");h(this,"target");var i,a,n;this.target=e;let r;if(t.mode==="duplicate"?r=(a=(i=t.container)!=null?i: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 Z(this.target,t,r),this.renderer.mount(),this.syncer=new ee(this.target,this.renderer,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}u.ALLOWED_FILTERS=P,u.DIRTY_CONTENT=L,u.DIRTY_NONE=D,u.DIRTY_RECT=M,u.DIRTY_STRUCTURE=B,u.DIRTY_STYLE=O,u.DIRTY_ZINDEX=Y,u.EXCLUDED=H,u.Engine=te,u.SYSTEM_LAYER=E,u.USER_LAYER=C,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/dist/src/renderer/Renderer.d.ts

@@ -9,6 +9,7 @@ export declare class Renderer {
     private renderOrder;
     private qualityFactor;
     private mode;
+    private clipArea;
     private target;
     private mountContainer;
     private targetRect;

package/dist/src/types/common.d.ts

@@ -1,4 +1,4 @@
-import { TextStyles, BoxStyles } from '../../packages/painter/src/index.ts';
+import { TextStyles, BoxStyles, ShaderHooks } from '../../packages/painter/src/index.ts';
 import { Visibility } from './flags';
 
 export type NodeType = "BOX" | "TEXT";
@@ -19,5 +19,6 @@ export interface SceneNode {
     dirtyMask: number;
     visibility: Visibility;
     isTraveler: boolean;
+    shaderHooks?: ShaderHooks;
     children: SceneNode[];
 }

package/dist/src/types/config.d.ts

@@ -1,5 +1,8 @@
 export type Quality = "low" | "medium" | "high" | number;
 export type MirageMode = "overlay" | "duplicate";
+export type PxUnit = `${number}px`;
+export type PercentUnit = `${number}%`;
+export type travelerClipArea = PxUnit | PercentUnit | number;
 export interface FilterConfig {
     includeTree?: string[];
     excludeTree?: string[];
@@ -20,6 +23,7 @@ interface BaseConfig {
     };
     filter?: FilterConfig;
     resizeDebounce?: boolean | ResizeConfig;
+    travelerClipArea?: travelerClipArea;
 }
 export interface OverlayConfig extends BaseConfig {
     mode?: "overlay";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirage-engine/core",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@types/three": "^0.181.0",
-    "@mirage-engine/painter": "0.3.0"
+    "@mirage-engine/painter": "0.4.0"
   },
   "private": false,
   "publishConfig": {

package/src/dom/Extractor.ts

@@ -11,7 +11,7 @@ import {
   ALLOWED_FILTERS,
 } from "../types";
 
-import { BoxStyles, TextStyles } from "@mirage-engine/painter";
+import { BoxStyles, TextStyles, ShaderHooks } from "@mirage-engine/painter";
 import { FilterConfig } from "../types/config";
 
 // Helper function: getTextNodeRect, isValidTextNode, isLeafTextElement, extractTextStyles
@@ -173,6 +173,14 @@ export function extractSceneGraph(
     }
   }
 
+  const shaderData = element.dataset.mirageShader;
+  let shaderHooks: ShaderHooks | undefined;
+  if (shaderData) {
+    shaderHooks = JSON.parse(shaderData) as ShaderHooks;
+    // [TODO] object 형태로 shader hooks 받기
+    // [TODO] 변수형태로 저장해서 return scene node에 넣어주기
+  }
+
   const rect = element.getBoundingClientRect();
   const computed = window.getComputedStyle(element);
 
@@ -181,6 +189,7 @@ export function extractSceneGraph(
     return null;
   }
 
+  // [TODO] dataset 방식으로 변경
   let id = element.getAttribute("data-mid");
   if (!id) {
     id = Math.random().toString(36).substring(2, 11);
@@ -232,5 +241,6 @@ export function extractSceneGraph(
     visibility: visibleFlag,
     isTraveler: isTraveler,
     children,
+    shaderHooks,
   };
 }

package/src/renderer/Renderer.ts

@@ -7,6 +7,7 @@ import {
   MirageMode,
   USER_LAYER,
   SYSTEM_LAYER,
+  travelerClipArea,
 } from "../types";
 import { Painter } from "@mirage-engine/painter";
 
@@ -19,6 +20,7 @@ export class Renderer {
   private renderOrder: number = 0;
   private qualityFactor: number = 2;
   private mode: MirageMode = "overlay";
+  private clipArea: travelerClipArea = 1;
 
   private target: HTMLElement;
   private mountContainer: HTMLElement;
@@ -35,7 +37,7 @@ export class Renderer {
     this.mountContainer = mountContainer;
 
     this.mode = config.mode ?? "overlay";
-
+    this.clipArea = config.travelerClipArea ?? 1;
     this.canvas = document.createElement("canvas");
     this.scene = new THREE.Scene();
 
@@ -210,6 +212,7 @@ export class Renderer {
         node.rect.height,
         this.qualityFactor,
         node.isTraveler ? this.renderTarget?.texture : undefined,
+        node.shaderHooks
       );
       mesh = new THREE.Mesh(geometry, material);
       if (node.type === "TEXT") mesh.name = "BG_MESH";
@@ -361,16 +364,27 @@ export class Renderer {
       const centerX = ((vector.x + 1) / 2) * canvasWidth;
       const centerY = ((vector.y + 1) / 2) * canvasHeight;
 
-      const width = traveler.scale.x;
-      const height = traveler.scale.y;
+      let clipDiff = 0;
+      let clipRadito = 1;
+      if (typeof this.clipArea === "number") {
+        clipRadito = this.clipArea;
+      } else if (this.clipArea.endsWith("%")) {
+        clipRadito = parseFloat(this.clipArea) / 100;
+      } else if (this.clipArea.endsWith("px")) {
+        clipDiff = parseFloat(this.clipArea);
+      }
+
+      const width = traveler.scale.x * clipRadito + 0.5;
+      const height = traveler.scale.y * clipRadito + 0.5;
 
       const localX = centerX - width / 2;
       const localY = centerY - height / 2;
 
-      const scissorX = (localX * this.qualityFactor) / pixelRatio;
-      const scissorY = (localY * this.qualityFactor) / pixelRatio;
-      const scissorW = (width * this.qualityFactor) / pixelRatio;
-      const scissorH = (height * this.qualityFactor) / pixelRatio;
+      const scissorX = (localX * this.qualityFactor - clipDiff) / pixelRatio;
+      const scissorY = (localY * this.qualityFactor - clipDiff) / pixelRatio;
+      const scissorW = (width * this.qualityFactor + clipDiff * 2) / pixelRatio;
+      const scissorH =
+        (height * this.qualityFactor + clipDiff * 2) / pixelRatio;
 
       this.renderer.setScissor(scissorX, scissorY, scissorW, scissorH);
       this.renderer.render(this.scene, this.camera);

package/src/types/common.ts

@@ -1,4 +1,4 @@
-import { TextStyles, BoxStyles } from "@mirage-engine/painter";
+import { TextStyles, BoxStyles, ShaderHooks } from "@mirage-engine/painter";
 import { Visibility } from "./flags";
 
 export type NodeType = "BOX" | "TEXT";
@@ -26,6 +26,7 @@ export interface SceneNode {
 
   visibility: Visibility;
   isTraveler: boolean;
+  shaderHooks?: ShaderHooks;
 
   children: SceneNode[];
 }

package/src/types/config.ts

@@ -1,5 +1,8 @@
 export type Quality = "low" | "medium" | "high" | number;
 export type MirageMode = "overlay" | "duplicate";
+export type PxUnit = `${number}px`;
+export type PercentUnit = `${number}%`;
+export type travelerClipArea = PxUnit | PercentUnit | number;
 export interface FilterConfig {
   includeTree?: string[];
   excludeTree?: string[];
@@ -22,6 +25,7 @@ interface BaseConfig {
   };
   filter?: FilterConfig;
   resizeDebounce?: boolean | ResizeConfig;
+  travelerClipArea? : travelerClipArea;
 }
 
 export interface OverlayConfig extends BaseConfig {