@mirage-engine/core 0.3.11 → 0.3.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mirage-engine/core
 
+## 0.3.12
+
+### Patch Changes
+
+- cae667c: native layer
+
 ## 0.3.11
 
 ### Patch Changes

package/dist/mirage-engine.js

@@ -63,7 +63,7 @@ const Me = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
   VALUES: Me
-}, G = {
+}, q = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
   VALUES: Me
@@ -192,7 +192,7 @@ class We {
     this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
   }
 }
-const q = 1, te = 2, lt = 0, U = {
+const P = 1, te = 2, lt = 0, U = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
@@ -255,9 +255,9 @@ class He extends y.MeshBasicMaterial {
     n !== void 0 && (this.qualityFactor = n);
     const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * a, d = c * a;
     this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(a, 0, 0, a, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const h = this.wrapText(t, i), u = r.lineHeight, p = De.getBaseline(r.font);
-    h.forEach((f, v) => {
-      const b = v * u + p;
+    const h = this.wrapText(t, i), u = r.lineHeight, v = De.getBaseline(r.font);
+    h.forEach((f, m) => {
+      const b = m * u + v;
       let L = 0;
       r.textAlign === "center" ? L = i / 2 : r.textAlign === "right" && (L = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(f, L, b);
     }), this.map && (this.map.needsUpdate = !0);
@@ -324,10 +324,10 @@ function Ge(s) {
       const f = l.substring(d + 1);
       (f.endsWith("%") || f.endsWith("px") || !isNaN(parseFloat(f))) && (h = l.substring(0, d).trim(), u = f);
     }
-    const p = ce(h);
+    const v = ce(h);
     o.push({
-      color: p.color,
-      alpha: p.alpha,
+      color: v.color,
+      alpha: v.alpha,
       rawStop: u,
       stop: 0
     });
@@ -341,9 +341,9 @@ function Ge(s) {
       if (o[l].rawStop !== null || l === o.length - 1) {
         const d = l - a;
         if (d > 1) {
-          const h = o[a].stop, p = (o[l].stop - h) / d;
+          const h = o[a].stop, v = (o[l].stop - h) / d;
           for (let f = 1; f < d; f++)
-            o[a + f].stop = h + p * f;
+            o[a + f].stop = h + v * f;
         }
         a = l;
       }
@@ -528,7 +528,7 @@ function Qe(s, e, t, r = null, i) {
 ` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 `, h = s.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, u = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = c || a ? Re.baseColorChunk : "", f = (i == null ? void 0 : i.colorModifier) || "", v = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", f), b = ce(s.backgroundColor), L = ce(s.borderColor), M = {
+`, u = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", v = c || a ? Re.baseColorChunk : "", f = (i == null ? void 0 : i.colorModifier) || "", m = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", v).replace("#INJECT_COLOR_MODIFIER", f), b = ce(s.backgroundColor), L = ce(s.borderColor), M = {
     uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
       value: new y.Vector4(
@@ -563,7 +563,7 @@ function Qe(s, e, t, r = null, i) {
   const S = new y.ShaderMaterial({
     uniforms: J(J({}, M), o),
     vertexShader: Te.vertexShader,
-    fragmentShader: v,
+    fragmentShader: m,
     transparent: !0,
     side: y.FrontSide
     // for better performance
@@ -825,9 +825,9 @@ class tt {
     // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
     g(this, "fixedMeshes", /* @__PURE__ */ new Set());
     var o, a, l, d, h;
-    this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new et((u, p) => {
+    this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new et((u, v) => {
       const f = this.registry.get(u);
-      f && f.material instanceof y.ShaderMaterial && H.forceUpdateUniforms(f.material, { texture: p });
+      f && f.material instanceof y.ShaderMaterial && H.forceUpdateUniforms(f.material, { texture: v });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
     const c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
     this.camera = new y.OrthographicCamera(
@@ -930,7 +930,7 @@ class tt {
         this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach(
           (u) => u.dispose()
         ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((u) => {
-          u instanceof y.Mesh && (u.geometry && u.geometry.dispose(), u.material && (Array.isArray(u.material) ? u.material.forEach((p) => p.dispose()) : u.material.dispose()));
+          u instanceof y.Mesh && (u.geometry && u.geometry.dispose(), u.material && (Array.isArray(u.material) ? u.material.forEach((v) => v.dispose()) : u.material.dispose()));
         }), this.registry.remove(d), this.textureManager.unregister(d);
       }
     });
@@ -982,11 +982,11 @@ class tt {
         (f) => f.name.startsWith("TEXT_CHILD")
       ).forEach((f) => {
         var b;
-        const v = f;
-        (b = v.material.map) == null || b.dispose(), v.geometry.dispose(), e.remove(v);
+        const m = f;
+        (b = m.material.map) == null || b.dispose(), m.geometry.dispose(), e.remove(m);
       });
-      const h = t.rect, u = h.x + h.width / 2, p = h.y + h.height / 2;
-      i.forEach((f, v) => {
+      const h = t.rect, u = h.x + h.width / 2, v = h.y + h.height / 2;
+      i.forEach((f, m) => {
         const b = H.create(
           "TEXT",
           c,
@@ -995,10 +995,10 @@ class tt {
           f.rect.height,
           this.qualityFactor
         ), L = new y.PlaneGeometry(1, 1), M = new y.Mesh(L, b);
-        M.name = `TEXT_CHILD_${v}`;
+        M.name = `TEXT_CHILD_${m}`;
         const S = t.rect.width === 0 ? 1 : f.rect.width / t.rect.width, x = t.rect.height === 0 ? 1 : f.rect.height / t.rect.height;
         M.scale.set(S, x, 1);
-        const C = f.rect.x + f.rect.width / 2, w = f.rect.y + f.rect.height / 2, T = C - u, D = -(w - p);
+        const C = f.rect.x + f.rect.width / 2, w = f.rect.y + f.rect.height / 2, T = C - u, D = -(w - v);
         M.position.set(
           t.rect.width === 0 ? 0 : T / t.rect.width,
           t.rect.height === 0 ? 0 : D / t.rect.height,
@@ -1009,17 +1009,19 @@ class tt {
     e.children.forEach((d) => {
       if (!d.name.startsWith("TEXT_CHILD"))
         return;
-      const h = d, u = t.visibility & q ? U.BASE : U.HIDDEN;
-      if (h.layers.set(u), t.visibility & te && h.layers.enable(U.SELECTED), t.visibility & q)
-        if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
-          for (let p = t.captureLayer; p < t.nativeLayer; p++)
-            h.layers.enable(U.getCaptureLayer(p));
-        else if (r && t.nativeLayer !== void 0)
-          for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= O.MAX_LAYERS + 1; p++)
-            h.layers.enable(U.getCaptureLayer(p));
-        else
-          for (let p = t.captureLayer; p <= O.MAX_LAYERS + 1; p++)
-            h.layers.enable(U.getCaptureLayer(p));
+      const h = d;
+      if (r && t.nativeLayer !== void 0)
+        h.layers.set(U.HIDDEN), t.visibility & P && h.layers.enable(U.getCaptureLayer(t.nativeLayer));
+      else {
+        const u = t.visibility & P ? U.BASE : U.HIDDEN;
+        if (h.layers.set(u), t.visibility & te && h.layers.enable(U.SELECTED), t.visibility & P)
+          if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
+            for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
+              v !== t.nativeLayer && h.layers.enable(U.getCaptureLayer(v));
+          else
+            for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
+              h.layers.enable(U.getCaptureLayer(v));
+      }
     });
   }
   updateMeshProperties(e, t) {
@@ -1046,9 +1048,9 @@ class tt {
       u,
       i.zIndex + this.renderOrder * a
     );
-    const p = r.x, f = r.y;
-    e.userData.basePosition = { x: h, y: u }, e.userData.originalBasePosition = { x: h, y: u }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: f }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
-    const v = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, b = window.getComputedStyle(v);
+    const v = r.x, f = r.y;
+    e.userData.basePosition = { x: h, y: u }, e.userData.originalBasePosition = { x: h, y: u }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: v, y: f }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, b = window.getComputedStyle(m);
     let L = 0, M = 0;
     if (b.transform && b.transform !== "none") {
       const w = new DOMMatrix(b.transform);
@@ -1095,10 +1097,10 @@ class tt {
         const Z = z.match(/translate\(([^,]+),\s*([^)]+)\)/);
         if (Z) {
           const B = Z[1].trim(), _ = Z[2].trim();
-          let m = parseFloat(B);
-          B.includes("%") && (m = m / 100 * t.nativeRect.width);
+          let p = parseFloat(B);
+          B.includes("%") && (p = p / 100 * t.nativeRect.width);
           let R = parseFloat(_);
-          _.includes("%") && (R = R / 100 * t.nativeRect.height), ie += m, se -= R;
+          _.includes("%") && (R = R / 100 * t.nativeRect.height), ie += p, se -= R;
         }
         const ne = z.match(/translateX\(([^)]+)\)/);
         if (ne) {
@@ -1131,16 +1133,15 @@ class tt {
       e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const r = t.visibility & q ? U.BASE : U.HIDDEN;
+    const r = t.visibility & P ? U.BASE : U.HIDDEN;
     if (e.layers.set(r), t.visibility & te && e.layers.enable(U.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const i = e.userData.nativeMesh;
-      if (i.layers.set(U.HIDDEN), t.visibility & q) {
-        for (let c = t.captureLayer; c < t.nativeLayer; c++)
-          e.layers.enable(U.getCaptureLayer(c));
-        for (let c = Math.max(t.captureLayer, t.nativeLayer); c <= O.MAX_LAYERS + 1; c++)
-          i.layers.enable(U.getCaptureLayer(c));
+      if (i.layers.set(U.HIDDEN), t.visibility & P) {
+        i.layers.enable(U.getCaptureLayer(t.nativeLayer));
+        for (let c = t.captureLayer; c <= O.MAX_LAYERS + 1; c++)
+          c !== t.nativeLayer && e.layers.enable(U.getCaptureLayer(c));
       }
-    } else if (t.visibility & q)
+    } else if (t.visibility & P)
       for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
         e.layers.enable(U.getCaptureLayer(i));
   }
@@ -1153,9 +1154,9 @@ class tt {
     for (const d of e) {
       n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
       const h = (n.x + 1) / 2 * o, u = (n.y + 1) / 2 * a;
-      let p = 0, f = 1;
-      typeof this.clipArea == "number" ? f = this.clipArea : this.clipArea.endsWith("%") ? f = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
-      const v = d.scale.x * f + 0.5, b = d.scale.y * f + 0.5, L = h - v / 2, M = u - b / 2, S = (L * this.qualityFactor - p) / l, x = (M * this.qualityFactor - p) / l, C = (v * this.qualityFactor + p * 2) / l, w = (b * this.qualityFactor + p * 2) / l;
+      let v = 0, f = 1;
+      typeof this.clipArea == "number" ? f = this.clipArea : this.clipArea.endsWith("%") ? f = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (v = parseFloat(this.clipArea));
+      const m = d.scale.x * f + 0.5, b = d.scale.y * f + 0.5, L = h - m / 2, M = u - b / 2, S = (L * this.qualityFactor - v) / l, x = (M * this.qualityFactor - v) / l, C = (m * this.qualityFactor + v * 2) / l, w = (b * this.qualityFactor + v * 2) / l;
       this.renderer.setScissor(S, x, C, w), this.renderer.render(this.scene, this.camera);
     }
     this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, c);
@@ -1198,20 +1199,20 @@ class tt {
         if (this.isViewport)
           h = l.x - window.innerWidth / 2 + l.width / 2, u = -l.y + window.innerHeight / 2 - l.height / 2;
         else {
-          const p = l.x - e, f = l.y - t;
-          h = p - i / 2 + l.width / 2, u = -f + c / 2 - l.height / 2;
+          const v = l.x - e, f = l.y - t;
+          h = v - i / 2 + l.width / 2, u = -f + c / 2 - l.height / 2;
         }
         if (o.position.setX(h), o.position.setY(u), o.scale.set(l.width, l.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && H.forceUpdateUniforms(o.material, {
           width: l.width,
           height: l.height
         }), o.userData.nativeMesh) {
-          const p = o.userData.nativeMesh;
-          let f = l.width, v = l.height, b = h, L = u;
+          const v = o.userData.nativeMesh;
+          let f = l.width, m = l.height, b = h, L = u;
           if (o.userData.nativeTransform) {
             const M = o.userData.nativeTransform, S = M.match(/scale\(([\d.]+%?)\)/);
             if (S) {
               let T = parseFloat(S[1]);
-              S[1].includes("%") && (T /= 100), f *= T, v *= T;
+              S[1].includes("%") && (T /= 100), f *= T, m *= T;
             }
             const x = M.match(/translate\(([^,]+),\s*([^)]+)\)/);
             if (x) {
@@ -1234,7 +1235,7 @@ class tt {
               T.includes("%") && (D = D / 100 * l.height), L -= D;
             }
           }
-          p.position.setX(b), p.position.setY(L), p.scale.set(f, v, 1), p.updateMatrixWorld();
+          v.position.setX(b), v.position.setY(L), v.scale.set(f, m, 1), v.updateMatrixWorld();
         }
       }
     });
@@ -1245,9 +1246,9 @@ function rt(s) {
   let r = "", i = null, c = -1;
   const n = (l, d) => {
     for (let h = 0; h < l.length; h++) {
-      const u = l[h], p = document.createRange();
-      p.setStart(s, d + h), p.setEnd(s, d + h + 1);
-      const f = p.getBoundingClientRect();
+      const u = l[h], v = document.createRange();
+      v.setStart(s, d + h), v.setEnd(s, d + h + 1);
+      const f = v.getBoundingClientRect();
       if (f.width === 0 && f.height === 0) {
         r += u;
         continue;
@@ -1335,27 +1336,27 @@ function Le(s) {
 function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
   var N, Z, ne, oe, B, _;
   if (s.nodeType === Node.TEXT_NODE) {
-    const m = s;
-    if (!m.textContent || !m.textContent.trim())
+    const p = s;
+    if (!p.textContent || !p.textContent.trim())
       return null;
-    const R = m.textContent.replace(/\s+/g, " ");
+    const R = p.textContent.replace(/\s+/g, " ");
     if (R.length === 0)
       return null;
-    const F = rt(m);
+    const F = rt(p);
     if (F.length === 0)
       return null;
-    const V = m.parentElement, I = V ? window.getComputedStyle(V) : null;
+    const V = p.parentElement, I = V ? window.getComputedStyle(V) : null;
     if (!I)
       return null;
-    const P = Math.min(...F.map((E) => E.rect.left)), X = Math.min(...F.map((E) => E.rect.top)), j = Math.max(...F.map((E) => E.rect.left + E.rect.width)), A = Math.max(...F.map((E) => E.rect.top + E.rect.height));
+    const G = Math.min(...F.map((E) => E.rect.left)), X = Math.min(...F.map((E) => E.rect.top)), j = Math.max(...F.map((E) => E.rect.left + E.rect.width)), A = Math.max(...F.map((E) => E.rect.top + E.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: m,
+      element: p,
       rect: {
-        x: P + window.scrollX,
+        x: G + window.scrollX,
         y: X + window.scrollY,
-        width: j - P,
+        width: j - G,
         height: A - X
       },
       styles: {
@@ -1396,9 +1397,9 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
         isTraveler: !1
       }, Le(I)), o) : void 0,
       nativeRect: o ? {
-        x: P + window.scrollX,
+        x: G + window.scrollX,
         y: X + window.scrollY,
-        width: j - P,
+        width: j - G,
         height: A - X
       } : void 0,
       children: []
@@ -1409,55 +1410,55 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
   const a = s, l = a.dataset[W.KEY];
   let d = t, h = t;
   if (l) {
-    const m = new Set(l.split(/\s+/));
-    for (const R of m)
+    const p = new Set(l.split(/\s+/));
+    for (const R of p)
       if (!Se.includes(R))
         throw new Error(
           `[MirageEngine] Invalid filter token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(W.VALUES.END))
+    if (p.has(W.VALUES.END))
       return null;
-    if (m.has(W.VALUES.INCLUDE_TREE) && m.has(W.VALUES.EXCLUDE_TREE))
+    if (p.has(W.VALUES.INCLUDE_TREE) && p.has(W.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (m.has(W.VALUES.INCLUDE_SELF) && m.has(W.VALUES.EXCLUDE_SELF))
+    if (p.has(W.VALUES.INCLUDE_SELF) && p.has(W.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(W.VALUES.INCLUDE_TREE) ? d = d | q : m.has(W.VALUES.EXCLUDE_TREE) && (d = d & ~q), h = d, m.has(W.VALUES.INCLUDE_SELF) ? h = h | q : m.has(W.VALUES.EXCLUDE_SELF) && (h = h & ~q);
+    p.has(W.VALUES.INCLUDE_TREE) ? d = d | P : p.has(W.VALUES.EXCLUDE_TREE) && (d = d & ~P), h = d, p.has(W.VALUES.INCLUDE_SELF) ? h = h | P : p.has(W.VALUES.EXCLUDE_SELF) && (h = h & ~P);
   }
-  const u = a.dataset[G.KEY];
+  const u = a.dataset[q.KEY];
   if (u) {
-    const m = new Set(u.split(/\s+/));
-    for (const R of m)
+    const p = new Set(u.split(/\s+/));
+    for (const R of p)
       if (!Se.includes(R))
         throw new Error(
           `[MirageEngine] Invalid select token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (m.has(G.VALUES.END))
+    if (p.has(q.VALUES.END))
       return null;
-    if (m.has(G.VALUES.INCLUDE_TREE) && m.has(G.VALUES.EXCLUDE_TREE))
+    if (p.has(q.VALUES.INCLUDE_TREE) && p.has(q.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (m.has(G.VALUES.INCLUDE_SELF) && m.has(G.VALUES.EXCLUDE_SELF))
+    if (p.has(q.VALUES.INCLUDE_SELF) && p.has(q.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    m.has(G.VALUES.INCLUDE_TREE) ? d = d | te : m.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~te), h = d, m.has(G.VALUES.INCLUDE_SELF) ? h = h | te : m.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~te);
-  }
-  const p = a.dataset[O.KEY];
-  let f = !1, v = o ? J({}, o) : {}, b = n;
-  if (p) {
-    let m = 1;
-    const R = p.indexOf("{"), F = p.lastIndexOf("}");
-    let V = p;
+    p.has(q.VALUES.INCLUDE_TREE) ? d = d | te : p.has(q.VALUES.EXCLUDE_TREE) && (d = d & ~te), h = d, p.has(q.VALUES.INCLUDE_SELF) ? h = h | te : p.has(q.VALUES.EXCLUDE_SELF) && (h = h & ~te);
+  }
+  const v = a.dataset[O.KEY];
+  let f = !1, m = o ? J({}, o) : {}, b = n;
+  if (v) {
+    let p = 1;
+    const R = v.indexOf("{"), F = v.lastIndexOf("}");
+    let V = v;
     if (R !== -1 && F !== -1 && F > R) {
-      V = p.substring(0, R).trim();
-      const A = p.substring(R, F + 1);
+      V = v.substring(0, R).trim();
+      const A = v.substring(R, F + 1);
       try {
-        v = new Function("return " + A)();
+        m = new Function("return " + A)();
       } catch (E) {
         console.warn(
           `[MirageEngine] Failed to parse travel styles JSON: ${A}`
@@ -1465,16 +1466,16 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
       }
     }
     const I = V.split(/\s+/);
-    let P = !1;
+    let G = !1;
     const X = I.indexOf(O.VALUES.TRAVELER);
     if (X !== -1) {
-      f = !0, P = !0;
+      f = !0, G = !0;
       const A = I[X + 1];
       if (A && !isNaN(parseInt(A, 10)))
-        m = parseInt(A, 10);
+        p = parseInt(A, 10);
       else {
         const E = I.find((ee) => !isNaN(parseInt(ee, 10)));
-        E && (m = parseInt(E, 10));
+        E && (p = parseInt(E, 10));
       }
     }
     const j = I.indexOf(O.VALUES.NATIVE);
@@ -1487,11 +1488,11 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
         E && (b = parseInt(E, 10));
       }
     }
-    if (P) {
-      const A = m + 1;
+    if (G) {
+      const A = p + 1;
       if (A < r)
         throw new Error(
-          `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${r - 1}).`
+          `[MirageEngine] Traveler layer (${p}) cannot be smaller than inherited capture layer (${r - 1}).`
         );
       r = Math.min(A, O.MAX_LAYERS + 1);
     }
@@ -1509,7 +1510,7 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
   if (a.tagName === "IMG")
     D = a.src;
   else if (a.tagName.toLowerCase() === "svg") {
-    const m = a.cloneNode(!0), R = v == null ? void 0 : v.color, F = v == null ? void 0 : v.fill, V = v == null ? void 0 : v.stroke, I = v == null ? void 0 : v.opacity, P = (E, ee) => {
+    const p = a.cloneNode(!0), R = m == null ? void 0 : m.color, F = m == null ? void 0 : m.fill, V = m == null ? void 0 : m.stroke, I = m == null ? void 0 : m.opacity, G = (E, ee) => {
       const Y = window.getComputedStyle(E), ae = ee, ke = Y.fill === Y.color, Ue = Y.stroke === Y.color, fe = F || (ke ? R : void 0) || Y.fill;
       fe && fe !== "none" && (ae.style.fill = fe);
       const ge = V || (Ue ? R : void 0) || Y.stroke;
@@ -1519,19 +1520,19 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
       const pe = I || Y.opacity;
       pe && pe !== "1" && (ae.style.opacity = pe);
       for (let he = 0; he < E.children.length; he++)
-        P(E.children[he], ee.children[he]);
+        G(E.children[he], ee.children[he]);
     };
-    P(a, m);
+    G(a, p);
     const X = a.getBoundingClientRect(), j = window.devicePixelRatio * c;
-    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${X.width} ${X.height}`), m.setAttribute("width", (X.width * j).toString()), m.setAttribute("height", (X.height * j).toString());
-    let A = new XMLSerializer().serializeToString(m);
+    p.hasAttribute("viewBox") || p.setAttribute("viewBox", `0 0 ${X.width} ${X.height}`), p.setAttribute("width", (X.width * j).toString()), p.setAttribute("height", (X.height * j).toString());
+    let A = new XMLSerializer().serializeToString(p);
     A.includes("xmlns=") || (A = A.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
     )), D = `data:image/svg+xml;utf8,${encodeURIComponent(A)}`;
   } else if (x.backgroundImage && x.backgroundImage !== "none") {
-    const m = x.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    m && (D = m[1]);
+    const p = x.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    p && (D = p[1]);
   }
   const k = {
     backgroundColor: x.backgroundColor,
@@ -1546,16 +1547,16 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
   }, $ = k;
   let ie, se;
   const z = [];
-  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((m) => {
-    const R = m.nodeType === Node.TEXT_NODE ? h : d, F = Ie(
-      m,
+  return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((p) => {
+    const R = p.nodeType === Node.TEXT_NODE ? h : d, F = Ie(
+      p,
       e,
       R,
       r,
       T,
       c,
-      m.nodeType === Node.TEXT_NODE ? b : void 0,
-      m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
+      p.nodeType === Node.TEXT_NODE ? b : void 0,
+      p.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
     );
     F && z.push(F);
   }), {
@@ -1577,21 +1578,21 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
     captureLayer: r,
     nativeLayer: b,
     nativeStyles: b !== void 0 ? xe(J({}, k), {
-      backgroundColor: (N = v.backgroundColor) != null ? N : k.backgroundColor,
-      backgroundImage: (Z = v.backgroundImage) != null ? Z : k.backgroundImage,
-      opacity: (ne = v.opacity) != null ? ne : k.opacity,
-      zIndex: v.zIndex !== void 0 ? v.zIndex + T : k.zIndex,
-      borderRadius: (oe = v.borderRadius) != null ? oe : k.borderRadius,
-      borderColor: (B = v.borderColor) != null ? B : k.borderColor,
-      borderWidth: (_ = v.borderWidth) != null ? _ : k.borderWidth,
+      backgroundColor: (N = m.backgroundColor) != null ? N : k.backgroundColor,
+      backgroundImage: (Z = m.backgroundImage) != null ? Z : k.backgroundImage,
+      opacity: (ne = m.opacity) != null ? ne : k.opacity,
+      zIndex: m.zIndex !== void 0 ? m.zIndex + T : k.zIndex,
+      borderRadius: (oe = m.borderRadius) != null ? oe : k.borderRadius,
+      borderColor: (B = m.borderColor) != null ? B : k.borderColor,
+      borderWidth: (_ = m.borderWidth) != null ? _ : k.borderWidth,
       isTraveler: k.isTraveler,
-      transform: v.transform
+      transform: m.transform
     }) : void 0,
     nativeRect: b !== void 0 ? {
-      x: v.x !== void 0 ? parseFloat(v.x) : S.left + window.scrollX,
-      y: v.y !== void 0 ? parseFloat(v.y) : S.top + window.scrollY,
-      width: v.width !== void 0 ? parseFloat(v.width) : S.width,
-      height: v.height !== void 0 ? parseFloat(v.height) : S.height
+      x: m.x !== void 0 ? parseFloat(m.x) : S.left + window.scrollX,
+      y: m.y !== void 0 ? parseFloat(m.y) : S.top + window.scrollY,
+      width: m.width !== void 0 ? parseFloat(m.width) : S.width,
+      height: m.height !== void 0 ? parseFloat(m.height) : S.height
     } : void 0,
     isFixed: x.position === "fixed",
     children: z,
@@ -1630,7 +1631,7 @@ class st {
       const a = Ie(
         this.target,
         c,
-        q,
+        P,
         1,
         0,
         this.renderer.qualityFactor
@@ -1745,7 +1746,7 @@ export {
   K as ATTR_DOM,
   W as ATTR_FILTER,
   at as ATTR_SANDWICH,
-  G as ATTR_SELECT,
+  q as ATTR_SELECT,
   Xe as ATTR_SHADER,
   O as ATTR_TRAVEL,
   ve as DIRTY_CONTENT,
@@ -1760,6 +1761,6 @@ export {
   U as THREE_LAYERS,
   Ce as TRAVEL_VALUES,
   We as Tracker,
-  q as USER_LAYER,
+  P as USER_LAYER,
   Ye as extractFromStyle
 };

package/dist/mirage-engine.umd.js

@@ -1,5 +1,5 @@
-(function(b,S){typeof exports=="object"&&typeof module!="undefined"?S(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],S):(b=typeof globalThis!="undefined"?globalThis:b||self,S(b.MirageEngine={},b.THREE))})(this,function(b,S){"use strict";var ot=Object.defineProperty,ct=Object.defineProperties;var lt=Object.getOwnPropertyDescriptors;var Fe=Object.getOwnPropertySymbols;var ht=Object.prototype.hasOwnProperty,dt=Object.prototype.propertyIsEnumerable;var Ce=(b,S,U)=>S in b?ot(b,S,{enumerable:!0,configurable:!0,writable:!0,value:U}):b[S]=U,re=(b,S)=>{for(var U in S||(S={}))ht.call(S,U)&&Ce(b,U,S[U]);if(Fe)for(var U of Fe(S))dt.call(S,U)&&Ce(b,U,S[U]);return b},Be=(b,S)=>ct(b,lt(S));var g=(b,S,U)=>(Ce(b,typeof S!="symbol"?S+"":S,U),U);var Ne=(b,S,U)=>new Promise((y,oe)=>{var P=O=>{try{_(U.next(O))}catch(X){oe(X)}},ce=O=>{try{_(U.throw(O))}catch(X){oe(X)}},_=O=>O.done?y(O.value):Promise.resolve(O.value).then(P,ce);_((U=U.apply(b,S)).next())});function U(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 y=U(S),oe={INCLUDE_TREE:"include-tree",EXCLUDE_TREE:"exclude-tree",INCLUDE_SELF:"include-self",EXCLUDE_SELF:"exclude-self",END:"end"},P={NAME:"data-mirage-dom",KEY:"mirageDom",VALUES:{HIDE:"hide",SHOW:"show"}},ce={TRAVELER:"traveler",NATIVE:"native",CAPTURE_1:"1",CAPTURE_2:"2",CAPTURE_3:"3",CAPTURE_4:"4",CAPTURE_5:"5",CAPTURE_6:"6",CAPTURE_7:"7",CAPTURE_8:"8",CAPTURE_9:"9",CAPTURE_10:"10"},_={NAME:"data-mirage-travel",KEY:"mirageTravel",VALUES:ce,MAX_LAYERS:Object.keys(ce).length-1},O={NAME:"data-mirage-filter",KEY:"mirageFilter",VALUES:oe},X={NAME:"data-mirage-select",KEY:"mirageSelect",VALUES:oe},Se={NAME:"data-mirage-shader",KEY:"mirageShader"},Xe={NAME:"data-mirage-sandwich",KEY:"mirageSandwich",VALUES:{FRONT:"front"}},le=0,Z=1,ie=2,Re=4,he=8,ve=16;function Ye(s){const e=s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);return e?{r:parseInt(e[1])/255,g:parseInt(e[2])/255,b:parseInt(e[3])/255}:{r:1,g:1,b:1}}function Le(s){const e={};if(s.opacity&&(e.opacity=parseFloat(s.opacity)),s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"){const t=Ye(s.backgroundColor);e.backgroundColor=[t.r,t.g,t.b]}if(s.backgroundImage?e.backgroundImage=s.backgroundImage:s.background&&(e.backgroundImage=s.background),s.borderRadius&&(e.borderRadius=parseFloat(s.borderRadius)),s.width&&(e.width=parseFloat(s.width)),s.height&&(e.height=parseFloat(s.height)),s.transform&&s.transform!=="none"){const t=new DOMMatrix(s.transform);e.x=t.m41,e.y=t.m42,e.z=t.m43}return e}class Me{constructor(e,t){g(this,"target");g(this,"observer");g(this,"pendingDeletions",new Set);g(this,"pendingStyles",new Map);g(this,"isDomDirty",!1);g(this,"isRunning",!1);g(this,"pendingMask",le);g(this,"mutationTimer",null);g(this,"cssTimer",null);g(this,"resizeConfig");g(this,"resizeTimer",null);g(this,"isResizing",!1);g(this,"lastScrollX",0);g(this,"lastScrollY",0);g(this,"scrollTimer",null);g(this,"onBeforeRender",new Set);g(this,"onLayoutChange",new Set);g(this,"onStyleChange",new Set);g(this,"onScrollChange",new Set);g(this,"onRender",new Set);g(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingStyles.size==0&&(this.pendingMask|=Z|ie,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50)))});g(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)});g(this,"renderLoop",()=>{if(!this.isRunning)return;this.onBeforeRender.forEach(r=>r()),this.isDomDirty&&(this.isDomDirty=!1,this.onLayoutChange.forEach(r=>r(this.pendingMask,this.pendingDeletions)),this.pendingDeletions.clear(),this.pendingMask=le);const e=window.scrollX,t=window.scrollY;(e!==this.lastScrollX||t!==this.lastScrollY)&&(this.onScrollChange.forEach(r=>r(e,t)),this.lastScrollX=e,this.lastScrollY=t,this.scrollTimer&&clearTimeout(this.scrollTimer),this.scrollTimer=window.setTimeout(()=>{this.pendingMask|=Z,this.isDomDirty=!0,this.scrollTimer=null},150)),this.pendingStyles.size>0&&(this.onStyleChange.forEach(r=>r(this.pendingStyles)),this.pendingStyles.clear()),this.onRender.forEach(r=>r()),requestAnimationFrame(this.renderLoop)});var i,l;this.target=e;const r=(i=t.resizeDebounce)!=null?i:!0;r===!1?this.resizeConfig={enabled:!1,delay:0}:r===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(l=r.delay)!=null?l:150,onStart:r.onStart,onEnd:r.onEnd},this.observer=new MutationObserver(n=>{let a=le;for(const o of n)if(o.type==="childList")a|=he,o.removedNodes.length>0&&o.removedNodes.forEach(c=>{c instanceof HTMLElement&&this.pendingDeletions.add(c)});else if(o.type==="attributes")if(o.attributeName==="style"){a|=Z|ie;const c=o.target,d=Le(c.style);this.pendingStyles.set(c,d)}else o.attributeName==="class"?a|=Z|ie:o.attributeName&&o.attributeName.startsWith("data-")&&(a|=Z|ie,o.attributeName.startsWith("data-mirage")&&(a|=he));else o.type==="characterData"&&(a|=ve|Z);if(a!==le){if(this.pendingMask|=a,a&he){this.clearTimers(),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.isDomDirty=!0,this.lastScrollX=window.scrollX,this.lastScrollY=window.scrollY,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),this.scrollTimer&&(clearTimeout(this.scrollTimer),this.scrollTimer=null)}}const G=1,te=2,ze=0,B={BASE:0,SELECTED:1,getCaptureLayer:s=>31-s,HIDDEN:31},be=Object.values(O.VALUES);class De{static getBaseline(e){if(this.cache.has(e))return this.cache.get(e);const t=this.calculateBaselineFromDOM(e);return this.cache.set(e,t),t}static calculateBaselineFromDOM(e){if(typeof document=="undefined")return 0;const t=document.createElement("div"),r=document.createElement("span"),i=document.createElement("img");t.style.visibility="hidden",t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.font=e,t.style.margin="0",t.style.padding="0",t.style.border="none",r.style.margin="0",r.style.padding="0",r.style.border="none",r.style.lineHeight="normal",i.width=1,i.height=1,i.style.verticalAlign="baseline",r.appendChild(document.createTextNode("Hidden Text")),t.appendChild(r),t.appendChild(i),document.body.appendChild(t);const l=i.offsetTop-r.offsetTop;return document.body.removeChild(t),l}}g(De,"cache",new Map);class Ve extends y.MeshBasicMaterial{constructor(t,r,i,l,n=2){super({transparent:!0,side:y.FrontSide,color:16777215});g(this,"canvas");g(this,"ctx");g(this,"qualityFactor");if(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),!this.ctx)throw new Error("[Mirage] Failed to create canvas context");this.qualityFactor=n,this.map=new y.CanvasTexture(this.canvas),this.map.colorSpace=y.LinearSRGBColorSpace,this.map.minFilter=y.LinearFilter,this.map.magFilter=y.LinearFilter,this.updateText(t,r,i,l)}wrapText(t,r){const i=t.split(`
-`),l=[];return i.forEach(n=>{const a=n.match(/[^\s\-]+\-?|\-|\s+/g)||[];if(a.length===0){l.push("");return}let o=a[0];for(let c=1;c<a.length;c++){const d=a[c];this.ctx.measureText(o+d).width<=r+2?o+=d:(o&&l.push(o),o=d.trimStart())}o&&l.push(o)}),l}updateText(t,r,i,l,n){n!==void 0&&(this.qualityFactor=n);const o=(window.devicePixelRatio||1)*this.qualityFactor,c=i*o,d=l*o;this.canvas.width!==c||this.canvas.height!==d?(this.canvas.width=c,this.canvas.height=d):this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(o,0,0,o,0,0),this.ctx.font=r.font,this.ctx.fillStyle=r.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const h=this.wrapText(t,i),u=r.lineHeight,p=De.getBaseline(r.font);h.forEach((f,v)=>{const E=v*u+p;let D=0;r.textAlign==="center"?D=i/2:r.textAlign==="right"&&(D=i),this.ctx.textAlign=r.textAlign,this.ctx.fillText(f,D,E)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function se(s,e=0){if(typeof s=="number")return s;const t=parseFloat(s)||0;return typeof s=="string"&&s.includes("%")?t/100*e:t}function de(s){if(!s||s==="transparent")return{color:new y.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),l=e[4]!==void 0?parseFloat(e[4]):1;return{color:new y.Color(`rgb(${t}, ${r}, ${i})`),alpha:l}}return{color:new y.Color(s),alpha:1}}function We(s){const e=[];let t="",r=0;for(let i=0;i<s.length;i++){const l=s[i];if(l==="(")r++;else if(l===")")r--;else if(l===","&&r===0){e.push(t.trim()),t="";continue}t+=l}return t&&e.push(t.trim()),e}function He(s){if(!s||typeof s!="string"||!s.includes("linear-gradient"))return null;const e=s.match(/linear-gradient\((.*)\)/);if(!e)return null;const t=e[1],r=We(t);let i=Math.PI,l=0;const n=r[0].trim();if(n.startsWith("to "))n==="to top"?i=0:n==="to right"?i=Math.PI/2:n==="to bottom"?i=Math.PI:n==="to left"?i=Math.PI*1.5:n==="to top right"||n==="to right top"?i=Math.PI/4:n==="to bottom right"||n==="to right bottom"?i=Math.PI*.75:n==="to bottom left"||n==="to left bottom"?i=Math.PI*1.25:(n==="to top left"||n==="to left top")&&(i=Math.PI*1.75),l=1;else if(n.endsWith("deg")||n.endsWith("rad")||n.endsWith("turn")){const o=parseFloat(n);n.endsWith("deg")?i=o*(Math.PI/180):n.endsWith("rad")?i=o:n.endsWith("turn")&&(i=o*Math.PI*2),l=1}const a=[];for(let o=l;o<r.length&&!(a.length>=8);o++){const c=r[o].trim(),d=c.lastIndexOf(" ");let h=c,u=null;if(d!==-1&&!c.endsWith(")")){const f=c.substring(d+1);(f.endsWith("%")||f.endsWith("px")||!isNaN(parseFloat(f)))&&(h=c.substring(0,d).trim(),u=f)}const p=de(h);a.push({color:p.color,alpha:p.alpha,rawStop:u,stop:0})}if(a.length>0){for(let c=0;c<a.length;c++)a[c].rawStop!==null&&(a[c].stop=parseFloat(a[c].rawStop)/100);a[0].rawStop===null&&(a[0].stop=0),a.length>1&&a[a.length-1].rawStop===null&&(a[a.length-1].stop=1);let o=0;for(let c=1;c<a.length;c++)if(a[c].rawStop!==null||c===a.length-1){const d=c-o;if(d>1){const h=a[o].stop,p=(a[c].stop-h)/d;for(let f=1;f<d;f++)a[o+f].stop=h+p*f}o=c}}return{angle:i,stops:a}}const Pe=`varying vec2 vUv;
+(function(b,S){typeof exports=="object"&&typeof module!="undefined"?S(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],S):(b=typeof globalThis!="undefined"?globalThis:b||self,S(b.MirageEngine={},b.THREE))})(this,function(b,S){"use strict";var at=Object.defineProperty,ct=Object.defineProperties;var lt=Object.getOwnPropertyDescriptors;var Fe=Object.getOwnPropertySymbols;var ht=Object.prototype.hasOwnProperty,dt=Object.prototype.propertyIsEnumerable;var Ce=(b,S,U)=>S in b?at(b,S,{enumerable:!0,configurable:!0,writable:!0,value:U}):b[S]=U,re=(b,S)=>{for(var U in S||(S={}))ht.call(S,U)&&Ce(b,U,S[U]);if(Fe)for(var U of Fe(S))dt.call(S,U)&&Ce(b,U,S[U]);return b},Be=(b,S)=>ct(b,lt(S));var g=(b,S,U)=>(Ce(b,typeof S!="symbol"?S+"":S,U),U);var Ne=(b,S,U)=>new Promise((y,ae)=>{var G=O=>{try{_(U.next(O))}catch(X){ae(X)}},ce=O=>{try{_(U.throw(O))}catch(X){ae(X)}},_=O=>O.done?y(O.value):Promise.resolve(O.value).then(G,ce);_((U=U.apply(b,S)).next())});function U(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 y=U(S),ae={INCLUDE_TREE:"include-tree",EXCLUDE_TREE:"exclude-tree",INCLUDE_SELF:"include-self",EXCLUDE_SELF:"exclude-self",END:"end"},G={NAME:"data-mirage-dom",KEY:"mirageDom",VALUES:{HIDE:"hide",SHOW:"show"}},ce={TRAVELER:"traveler",NATIVE:"native",CAPTURE_1:"1",CAPTURE_2:"2",CAPTURE_3:"3",CAPTURE_4:"4",CAPTURE_5:"5",CAPTURE_6:"6",CAPTURE_7:"7",CAPTURE_8:"8",CAPTURE_9:"9",CAPTURE_10:"10"},_={NAME:"data-mirage-travel",KEY:"mirageTravel",VALUES:ce,MAX_LAYERS:Object.keys(ce).length-1},O={NAME:"data-mirage-filter",KEY:"mirageFilter",VALUES:ae},X={NAME:"data-mirage-select",KEY:"mirageSelect",VALUES:ae},Se={NAME:"data-mirage-shader",KEY:"mirageShader"},Xe={NAME:"data-mirage-sandwich",KEY:"mirageSandwich",VALUES:{FRONT:"front"}},le=0,Z=1,ie=2,Re=4,he=8,ve=16;function Ye(s){const e=s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);return e?{r:parseInt(e[1])/255,g:parseInt(e[2])/255,b:parseInt(e[3])/255}:{r:1,g:1,b:1}}function Le(s){const e={};if(s.opacity&&(e.opacity=parseFloat(s.opacity)),s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"){const t=Ye(s.backgroundColor);e.backgroundColor=[t.r,t.g,t.b]}if(s.backgroundImage?e.backgroundImage=s.backgroundImage:s.background&&(e.backgroundImage=s.background),s.borderRadius&&(e.borderRadius=parseFloat(s.borderRadius)),s.width&&(e.width=parseFloat(s.width)),s.height&&(e.height=parseFloat(s.height)),s.transform&&s.transform!=="none"){const t=new DOMMatrix(s.transform);e.x=t.m41,e.y=t.m42,e.z=t.m43}return e}class Me{constructor(e,t){g(this,"target");g(this,"observer");g(this,"pendingDeletions",new Set);g(this,"pendingStyles",new Map);g(this,"isDomDirty",!1);g(this,"isRunning",!1);g(this,"pendingMask",le);g(this,"mutationTimer",null);g(this,"cssTimer",null);g(this,"resizeConfig");g(this,"resizeTimer",null);g(this,"isResizing",!1);g(this,"lastScrollX",0);g(this,"lastScrollY",0);g(this,"scrollTimer",null);g(this,"onBeforeRender",new Set);g(this,"onLayoutChange",new Set);g(this,"onStyleChange",new Set);g(this,"onScrollChange",new Set);g(this,"onRender",new Set);g(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingStyles.size==0&&(this.pendingMask|=Z|ie,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50)))});g(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)});g(this,"renderLoop",()=>{if(!this.isRunning)return;this.onBeforeRender.forEach(r=>r()),this.isDomDirty&&(this.isDomDirty=!1,this.onLayoutChange.forEach(r=>r(this.pendingMask,this.pendingDeletions)),this.pendingDeletions.clear(),this.pendingMask=le);const e=window.scrollX,t=window.scrollY;(e!==this.lastScrollX||t!==this.lastScrollY)&&(this.onScrollChange.forEach(r=>r(e,t)),this.lastScrollX=e,this.lastScrollY=t,this.scrollTimer&&clearTimeout(this.scrollTimer),this.scrollTimer=window.setTimeout(()=>{this.pendingMask|=Z,this.isDomDirty=!0,this.scrollTimer=null},150)),this.pendingStyles.size>0&&(this.onStyleChange.forEach(r=>r(this.pendingStyles)),this.pendingStyles.clear()),this.onRender.forEach(r=>r()),requestAnimationFrame(this.renderLoop)});var i,l;this.target=e;const r=(i=t.resizeDebounce)!=null?i:!0;r===!1?this.resizeConfig={enabled:!1,delay:0}:r===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(l=r.delay)!=null?l:150,onStart:r.onStart,onEnd:r.onEnd},this.observer=new MutationObserver(n=>{let o=le;for(const a of n)if(a.type==="childList")o|=he,a.removedNodes.length>0&&a.removedNodes.forEach(c=>{c instanceof HTMLElement&&this.pendingDeletions.add(c)});else if(a.type==="attributes")if(a.attributeName==="style"){o|=Z|ie;const c=a.target,d=Le(c.style);this.pendingStyles.set(c,d)}else a.attributeName==="class"?o|=Z|ie:a.attributeName&&a.attributeName.startsWith("data-")&&(o|=Z|ie,a.attributeName.startsWith("data-mirage")&&(o|=he));else a.type==="characterData"&&(o|=ve|Z);if(o!==le){if(this.pendingMask|=o,o&he){this.clearTimers(),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.isDomDirty=!0,this.lastScrollX=window.scrollX,this.lastScrollY=window.scrollY,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),this.scrollTimer&&(clearTimeout(this.scrollTimer),this.scrollTimer=null)}}const W=1,te=2,ze=0,B={BASE:0,SELECTED:1,getCaptureLayer:s=>31-s,HIDDEN:31},be=Object.values(O.VALUES);class De{static getBaseline(e){if(this.cache.has(e))return this.cache.get(e);const t=this.calculateBaselineFromDOM(e);return this.cache.set(e,t),t}static calculateBaselineFromDOM(e){if(typeof document=="undefined")return 0;const t=document.createElement("div"),r=document.createElement("span"),i=document.createElement("img");t.style.visibility="hidden",t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.font=e,t.style.margin="0",t.style.padding="0",t.style.border="none",r.style.margin="0",r.style.padding="0",r.style.border="none",r.style.lineHeight="normal",i.width=1,i.height=1,i.style.verticalAlign="baseline",r.appendChild(document.createTextNode("Hidden Text")),t.appendChild(r),t.appendChild(i),document.body.appendChild(t);const l=i.offsetTop-r.offsetTop;return document.body.removeChild(t),l}}g(De,"cache",new Map);class Ve extends y.MeshBasicMaterial{constructor(t,r,i,l,n=2){super({transparent:!0,side:y.FrontSide,color:16777215});g(this,"canvas");g(this,"ctx");g(this,"qualityFactor");if(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),!this.ctx)throw new Error("[Mirage] Failed to create canvas context");this.qualityFactor=n,this.map=new y.CanvasTexture(this.canvas),this.map.colorSpace=y.LinearSRGBColorSpace,this.map.minFilter=y.LinearFilter,this.map.magFilter=y.LinearFilter,this.updateText(t,r,i,l)}wrapText(t,r){const i=t.split(`
+`),l=[];return i.forEach(n=>{const o=n.match(/[^\s\-]+\-?|\-|\s+/g)||[];if(o.length===0){l.push("");return}let a=o[0];for(let c=1;c<o.length;c++){const d=o[c];this.ctx.measureText(a+d).width<=r+2?a+=d:(a&&l.push(a),a=d.trimStart())}a&&l.push(a)}),l}updateText(t,r,i,l,n){n!==void 0&&(this.qualityFactor=n);const a=(window.devicePixelRatio||1)*this.qualityFactor,c=i*a,d=l*a;this.canvas.width!==c||this.canvas.height!==d?(this.canvas.width=c,this.canvas.height=d):this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(a,0,0,a,0,0),this.ctx.font=r.font,this.ctx.fillStyle=r.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const h=this.wrapText(t,i),u=r.lineHeight,v=De.getBaseline(r.font);h.forEach((f,m)=>{const E=m*u+v;let D=0;r.textAlign==="center"?D=i/2:r.textAlign==="right"&&(D=i),this.ctx.textAlign=r.textAlign,this.ctx.fillText(f,D,E)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function se(s,e=0){if(typeof s=="number")return s;const t=parseFloat(s)||0;return typeof s=="string"&&s.includes("%")?t/100*e:t}function de(s){if(!s||s==="transparent")return{color:new y.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),l=e[4]!==void 0?parseFloat(e[4]):1;return{color:new y.Color(`rgb(${t}, ${r}, ${i})`),alpha:l}}return{color:new y.Color(s),alpha:1}}function We(s){const e=[];let t="",r=0;for(let i=0;i<s.length;i++){const l=s[i];if(l==="(")r++;else if(l===")")r--;else if(l===","&&r===0){e.push(t.trim()),t="";continue}t+=l}return t&&e.push(t.trim()),e}function He(s){if(!s||typeof s!="string"||!s.includes("linear-gradient"))return null;const e=s.match(/linear-gradient\((.*)\)/);if(!e)return null;const t=e[1],r=We(t);let i=Math.PI,l=0;const n=r[0].trim();if(n.startsWith("to "))n==="to top"?i=0:n==="to right"?i=Math.PI/2:n==="to bottom"?i=Math.PI:n==="to left"?i=Math.PI*1.5:n==="to top right"||n==="to right top"?i=Math.PI/4:n==="to bottom right"||n==="to right bottom"?i=Math.PI*.75:n==="to bottom left"||n==="to left bottom"?i=Math.PI*1.25:(n==="to top left"||n==="to left top")&&(i=Math.PI*1.75),l=1;else if(n.endsWith("deg")||n.endsWith("rad")||n.endsWith("turn")){const a=parseFloat(n);n.endsWith("deg")?i=a*(Math.PI/180):n.endsWith("rad")?i=a:n.endsWith("turn")&&(i=a*Math.PI*2),l=1}const o=[];for(let a=l;a<r.length&&!(o.length>=8);a++){const c=r[a].trim(),d=c.lastIndexOf(" ");let h=c,u=null;if(d!==-1&&!c.endsWith(")")){const f=c.substring(d+1);(f.endsWith("%")||f.endsWith("px")||!isNaN(parseFloat(f)))&&(h=c.substring(0,d).trim(),u=f)}const v=de(h);o.push({color:v.color,alpha:v.alpha,rawStop:u,stop:0})}if(o.length>0){for(let c=0;c<o.length;c++)o[c].rawStop!==null&&(o[c].stop=parseFloat(o[c].rawStop)/100);o[0].rawStop===null&&(o[0].stop=0),o.length>1&&o[o.length-1].rawStop===null&&(o[o.length-1].stop=1);let a=0;for(let c=1;c<o.length;c++)if(o[c].rawStop!==null||c===o.length-1){const d=c-a;if(d>1){const h=o[a].stop,v=(o[c].stop-h)/d;for(let f=1;f<d;f++)o[a+f].stop=h+v*f}a=c}}return{angle:i,stops:o}}const Pe=`varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
@@ -152,17 +152,17 @@ uniform vec2 uTextureOffset;`,$e=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w)
 vec2 resultUv = screenUv;
 
 `,je=`vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`,Ae={vertexShader:Pe,fragmentShader:Ge},Ie={declChunk:qe,uvChunk:$e,baseColorChunk:je};function Ke(s,e,t,r=null,i){var T;const l=r!==null||!!s.imageSrc;let n="";const a={};if(i!=null&&i.uniforms)for(const[C,w]of Object.entries(i.uniforms))typeof w=="number"?(n+=`uniform float ${C};
-`,a[C]={value:w}):Array.isArray(w)?w.length===2?(n+=`uniform vec2 ${C};
-`,a[C]={value:new y.Vector2(...w)}):w.length===3?(n+=`uniform vec3 ${C};
-`,a[C]={value:new y.Vector3(...w)}):w.length===4&&(n+=`uniform vec4 ${C};
-`,a[C]={value:new y.Vector4(...w)}):(n+=`uniform float ${C};
-`,a[C]={value:w});const o=i!==void 0,c=(l||o?Ie.declChunk:"")+`
+baseColor = blendSrcOver(baseColor, texColor);`,Ae={vertexShader:Pe,fragmentShader:Ge},Ie={declChunk:qe,uvChunk:$e,baseColorChunk:je};function Ke(s,e,t,r=null,i){var T;const l=r!==null||!!s.imageSrc;let n="";const o={};if(i!=null&&i.uniforms)for(const[C,w]of Object.entries(i.uniforms))typeof w=="number"?(n+=`uniform float ${C};
+`,o[C]={value:w}):Array.isArray(w)?w.length===2?(n+=`uniform vec2 ${C};
+`,o[C]={value:new y.Vector2(...w)}):w.length===3?(n+=`uniform vec3 ${C};
+`,o[C]={value:new y.Vector3(...w)}):w.length===4&&(n+=`uniform vec4 ${C};
+`,o[C]={value:new y.Vector4(...w)}):(n+=`uniform float ${C};
+`,o[C]={value:w});const a=i!==void 0,c=(l||a?Ie.declChunk:"")+`
 `+n,d=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 `,h=s.isTraveler?`vec2 resultUv = screenUv;
 `:`vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`,u=l||o?d+h+((i==null?void 0:i.uvModifier)||""):"",p=l||o?Ie.baseColorChunk:"",f=(i==null?void 0:i.colorModifier)||"",v=Ae.fragmentShader.replace("#INJECT_DECLARATIONS",c).replace("#INJECT_UV_MODIFIER",u).replace("#INJECT_BASE_COLOR",p).replace("#INJECT_COLOR_MODIFIER",f),E=de(s.backgroundColor),D=de(s.borderColor),A={uSize:{value:new y.Vector2(e,t)},uBgColor:{value:new y.Vector4(E.color.r,E.color.g,E.color.b,E.alpha)},uBorderColor:{value:new y.Vector4(D.color.r,D.color.g,D.color.b,D.alpha)},uBorderRadius:{value:new y.Vector4(0,0,0,0)},uBorderWidth:{value:se(s.borderWidth)},uOpacity:{value:(T=s.opacity)!=null?T:1},uTexture:{value:null},uTextureRepeat:{value:new y.Vector2(1,1)},uTextureOffset:{value:new y.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new y.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};ke(A.uBorderRadius.value,s.borderRadius,Math.min(e,t)),l&&(A.uTexture.value=r);const R=new y.ShaderMaterial({uniforms:re(re({},A),a),vertexShader:Ae.vertexShader,fragmentShader:v,transparent:!0,side:y.FrontSide});return s.backgroundImage&&Ee(R,{backgroundImage:s.backgroundImage}),R}function Je(s,e,t,r,i){const l=se(e.borderWidth);Ee(s,{width:t,height:r,borderRadius:e.borderRadius,borderWidth:l,backgroundColor:e.backgroundColor,borderColor:e.borderColor,opacity:e.opacity,texture:i,backgroundImage:e.backgroundImage})}function Ee(s,e){var r,i,l;if(e.width!==void 0&&e.height!==void 0&&s.uniforms.uSize.value.set(e.width,e.height),e.borderRadius!==void 0){const n=e.width!==void 0&&e.height!==void 0?Math.min(e.width,e.height):Math.min(s.uniforms.uSize.value.x,s.uniforms.uSize.value.y);ke(s.uniforms.uBorderRadius.value,e.borderRadius,n)}if(e.borderWidth!==void 0&&(s.uniforms.uBorderWidth.value=e.borderWidth),e.backgroundColor!==void 0)if(Array.isArray(e.backgroundColor)){const n=s.uniforms.uBgColor.value.w;s.uniforms.uBgColor.value.set(e.backgroundColor[0],e.backgroundColor[1],e.backgroundColor[2],n)}else if(typeof e.backgroundColor=="string"){const n=de(e.backgroundColor);s.uniforms.uBgColor.value.set(n.color.r,n.color.g,n.color.b,n.alpha)}else{const n=s.uniforms.uBgColor.value.w;s.uniforms.uBgColor.value.set(e.backgroundColor.r,e.backgroundColor.g,e.backgroundColor.b,n)}if(e.borderColor!==void 0)if(Array.isArray(e.borderColor)){const n=s.uniforms.uBorderColor.value.w;s.uniforms.uBorderColor.value.set(e.borderColor[0],e.borderColor[1],e.borderColor[2],n)}else if(typeof e.borderColor=="string"){const n=de(e.borderColor);s.uniforms.uBorderColor.value.set(n.color.r,n.color.g,n.color.b,n.alpha)}else{const n=s.uniforms.uBorderColor.value.w;s.uniforms.uBorderColor.value.set(e.borderColor.r,e.borderColor.g,e.borderColor.b,n)}e.opacity!==void 0&&(s.uniforms.uOpacity.value=e.opacity),e.bgOpacity!==void 0&&(s.uniforms.uBgColor.value.w=e.bgOpacity),e.borderOpacity!==void 0&&(s.uniforms.uBorderColor.value.w=e.borderOpacity),s.uniforms.uTexture&&e.texture!==void 0&&(s.uniforms.uTexture.value=e.texture);const t=e.texture!==void 0?e.texture:(r=s.uniforms.uTexture)==null?void 0:r.value;if(t&&(t.image instanceof ImageBitmap||t.image instanceof HTMLImageElement||t.image instanceof HTMLCanvasElement)){const n=t.image.naturalWidth||t.image.videoWidth||t.image.width,a=t.image.naturalHeight||t.image.videoHeight||t.image.height,o=(i=e.width)!=null?i:s.uniforms.uSize.value.x,c=(l=e.height)!=null?l:s.uniforms.uSize.value.y;if(n&&a&&o&&c){const d=n/a,h=o/c;if(d>h){const u=h/d;s.uniforms.uTextureRepeat.value.set(u,1),s.uniforms.uTextureOffset.value.set((1-u)/2,0)}else{const u=d/h;s.uniforms.uTextureRepeat.value.set(1,u),s.uniforms.uTextureOffset.value.set(0,(1-u)/2)}}}else s.uniforms.uTextureRepeat&&(s.uniforms.uTextureRepeat.value.set(1,1),s.uniforms.uTextureOffset.value.set(0,0));if(e.backgroundImage!==void 0){const n=He(e.backgroundImage);if(n){s.uniforms.uGradientCount.value=n.stops.length,s.uniforms.uGradientAngle.value=n.angle;for(let a=0;a<8;a++)if(a<n.stops.length){const o=n.stops[a];s.uniforms.uGradientColors.value[a].set(o.color.r,o.color.g,o.color.b,o.alpha),s.uniforms.uGradientStops.value[a]=o.stop}else s.uniforms.uGradientColors.value[a].set(0,0,0,0),s.uniforms.uGradientStops.value[a]=1}else s.uniforms.uGradientCount.value=0}for(const n of Object.keys(e))n!=="width"&&n!=="height"&&n!=="borderRadius"&&n!=="borderWidth"&&n!=="backgroundColor"&&n!=="borderColor"&&n!=="opacity"&&n!=="bgOpacity"&&n!=="borderOpacity"&&n!=="texture"&&n!=="backgroundImage"&&s.uniforms[n]!==void 0&&(s.uniforms[n].value!==void 0&&s.uniforms[n].value!==null&&typeof s.uniforms[n].value.set=="function"?Array.isArray(e[n])?s.uniforms[n].value.set(...e[n]):e[n]!==void 0&&(e[n].copy?s.uniforms[n].value.copy(e[n]):s.uniforms[n].value=e[n]):s.uniforms[n].value=e[n])}function ke(s,e,t=0){var o,c,d,h;if(e==null){s.set(0,0,0,0);return}if(typeof e=="number"){s.set(e,e,e,e);return}if(Array.isArray(e)){s.set(e[0],e[1],e[2],e[3]);return}const r=e.split("/")[0].trim().split(/\s+/),i=se(r[0],t),l=se((o=r[1])!=null?o:r[0],t),n=se((c=r[2])!=null?c:r[0],t),a=se((h=(d=r[3])!=null?d:r[1])!=null?h:r[0],t);s.set(i,l,n,a)}const q={create(s,e,t,r,i,l=2,n=null,a){return s==="BOX"?Ke(e,r,i,n,a):s==="TEXT"?new Ve(t||"",e,r,i,l):new y.MeshBasicMaterial({visible:!1})},update(s,e,t,r,i,l,n=2,a){e==="BOX"?Je(s,t,i,l,a):e==="TEXT"&&s.updateText(r||"",t,i,l,n)},forceUpdateUniforms(s,e){Ee(s,e)}};class Ze{constructor(e,t=!0){g(this,"observer");g(this,"textures",new WeakMap);g(this,"loadStatus",new WeakMap);g(this,"elementUrls",new WeakMap);g(this,"onUpdate");this.onUpdate=e,t&&(this.observer=new IntersectionObserver(r=>{for(const i of r){const l=i.target;i.isIntersecting?this.loadTexture(l):this.disposeTexture(l)}},{rootMargin:"300px"}))}register(e,t){if(e.nodeType!==Node.ELEMENT_NODE)return;this.elementUrls.get(e)!==t&&(this.elementUrls.set(e,t),this.observer?(this.observer.unobserve(e),this.observer.observe(e)):this.loadTexture(e))}unregister(e){e.nodeType===Node.ELEMENT_NODE&&this.observer&&this.observer.unobserve(e),this.disposeTexture(e),this.elementUrls.delete(e),this.loadStatus.delete(e)}loadTexture(e){return Ne(this,null,function*(){if(this.loadStatus.get(e)||this.textures.has(e))return;const t=this.elementUrls.get(e);if(t){this.loadStatus.set(e,!0);try{let r;if(t.startsWith("data:image/svg+xml"))r=yield new Promise((l,n)=>{const a=new Image;a.onload=()=>l(a),a.onerror=n,a.src=t});else{const n=yield(yield fetch(t)).blob();r=yield createImageBitmap(n,{imageOrientation:"flipY"})}if(this.elementUrls.get(e)!==t){"close"in r&&r.close();return}const i=new y.Texture(r);r instanceof HTMLImageElement||(i.flipY=!1),i.colorSpace=y.LinearSRGBColorSpace,i.needsUpdate=!0,this.textures.set(e,i),this.onUpdate(e,i)}catch(r){console.warn("[MirageEngine] Failed to load texture:",t,r)}finally{this.elementUrls.has(e)&&this.loadStatus.set(e,!1)}}})}disposeTexture(e){const t=this.textures.get(e);t&&(t.dispose(),this.textures.delete(e),this.onUpdate(e,null)),this.loadStatus.set(e,!1)}get(e){return this.textures.get(e)}disposeAll(){this.observer&&this.observer.disconnect()}}class Qe{constructor(e,t,r,i){g(this,"canvas");g(this,"scene");g(this,"camera");g(this,"renderer");g(this,"renderTargets",[]);g(this,"renderOrder",0);g(this,"qualityFactor",2);g(this,"mode","overlay");g(this,"canvasSize","viewport");g(this,"clipArea",1);g(this,"targetLayer","base");g(this,"overscan",200);g(this,"target");g(this,"mountContainer");g(this,"registry");g(this,"targetRect");g(this,"travelersByLayer",Array.from({length:_.MAX_LAYERS},()=>new Set));g(this,"textureManager");g(this,"fixedMeshes",new Set);var a,o,c,d,h;this.target=e,this.mountContainer=r,this.registry=i,this.mode=(a=t.mode)!=null?a:"overlay",this.canvasSize=(o=t.canvasSize)!=null?o:"viewport",this.clipArea=(c=t.travelerClipArea)!=null?c:1,this.targetLayer=(d=t.layer)!=null?d:"base",this.textureManager=new Ze((u,p)=>{const f=this.registry.get(u);f&&f.material instanceof y.ShaderMaterial&&q.forceUpdateUniforms(f.material,{texture:p})},this.isViewport),this.canvas=document.createElement("canvas"),this.scene=new y.Scene,this.targetRect=this.target.getBoundingClientRect();const l=this.isViewport?window.innerWidth+this.overscan*2:this.targetRect.width,n=this.isViewport?window.innerHeight+this.overscan*2:this.targetRect.height;this.camera=new y.OrthographicCamera(l/-2,l/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(this.getSceneLayer()),this.renderer=new y.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),y.ColorManagement.enabled=!1,this.renderer.outputColorSpace=y.LinearSRGBColorSpace,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(l,n),this.applyTextQuality((h=t.quality)!=null?h:"medium")}get isViewport(){return this.mode==="overlay"&&this.canvasSize==="viewport"}getSceneLayer(){return typeof this.targetLayer=="number"?this.targetLayer:this.targetLayer==="selected"?B.SELECTED:B.BASE}createRenderTarget(){for(let e=0;e<_.MAX_LAYERS;e++){const t=this.isViewport?window.innerWidth+this.overscan*2:this.targetRect.width,r=this.isViewport?window.innerHeight+this.overscan*2:this.targetRect.height;this.renderTargets.push(new y.WebGLRenderTarget(t*this.qualityFactor,r*this.qualityFactor,{minFilter:y.LinearFilter,magFilter:y.LinearFilter,format:y.RGBAFormat,stencilBuffer:!1,depthBuffer:!0}))}}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":this.qualityFactor=2;break;default:this.qualityFactor=2;break}}mount(){this.mountContainer.prepend(this.canvas),this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){const e=this.isViewport?window.innerWidth+this.overscan*2:this.targetRect.width,t=this.isViewport?window.innerHeight+this.overscan*2:this.targetRect.height;this.canvas.style.width=`${e}px`,this.canvas.style.height=`${t}px`,this.mode==="duplicate"?(this.canvas.style.position="",this.canvas.style.top="",this.canvas.style.left="",this.canvas.style.display="block"):(this.canvas.style.position=this.isViewport?"fixed":"absolute",this.canvas.style.top=this.isViewport?`-${this.overscan}px`:`${this.target.offsetTop}px`,this.canvas.style.left=this.isViewport?`-${this.overscan}px`:`${this.target.offsetLeft}px`,this.canvas.style.display="block")}updateUniforms(e,t){const r=this.registry.get(e);r&&(r.traverse(i=>{i.isMesh&&i.material&&q.forceUpdateUniforms(i.material,t)}),r.userData.nativeMesh&&r.userData.nativeMesh.traverse(i=>{i.isMesh&&i.material&&q.forceUpdateUniforms(i.material,t)}))}dispose(){this.renderer.dispose(),this.canvas.remove(),this.textureManager.disposeAll()}setSize(e,t){this.renderer.setSize(e,t);for(const r of this.renderTargets)r.setSize(e*this.qualityFactor,t*this.qualityFactor);this.camera.left=e/-2,this.camera.right=e/2,this.camera.top=t/2,this.camera.bottom=t/-2,this.camera.updateProjectionMatrix()}syncScene(e,t){const r=this.target.getBoundingClientRect(),i=this.isViewport?window.innerWidth+this.overscan*2:r.width,l=this.isViewport?window.innerHeight+this.overscan*2:r.height,n=this.isViewport?this.canvas.clientWidth:this.targetRect.width,a=this.isViewport?this.canvas.clientHeight:this.targetRect.height,o=Math.abs(i-n)>.1||Math.abs(l-a)>.1,c=this.mode==="overlay"&&(Math.abs(r.top-this.targetRect.top)>.1||Math.abs(r.left-this.targetRect.left)>.1);o?(this.targetRect=r,this.setSize(i,l),this.updateCanvasLayout()):c?(this.targetRect=r,this.updateCanvasLayout()):this.targetRect=r,this.renderOrder=0,this.reconcileNode(e),t.size>0&&t.forEach(d=>{const h=this.registry.get(d);if(h){this.scene.remove(h);for(const u of this.travelersByLayer)u.delete(h);this.fixedMeshes.delete(h),h.geometry.dispose(),h.userData.nativeMesh&&(this.scene.remove(h.userData.nativeMesh),Array.isArray(h.userData.nativeMesh.material)?h.userData.nativeMesh.material.forEach(u=>u.dispose()):h.userData.nativeMesh.material.dispose(),h.userData.nativeMesh.geometry.dispose()),h.traverse(u=>{u instanceof y.Mesh&&(u.geometry&&u.geometry.dispose(),u.material&&(Array.isArray(u.material)?u.material.forEach(p=>p.dispose()):u.material.dispose()))}),this.registry.remove(d),this.textureManager.unregister(d)}})}reconcileNode(e){var i,l;let t=this.registry.get(e.element);const r=JSON.stringify(e.shaderHooks||null);if(t&&t.userData.shaderHash!==r&&(this.scene.remove(t),t.geometry.dispose(),t.material instanceof y.Material&&t.material.dispose(),this.registry.remove(e.element),t=void 0),!t){const n=new y.PlaneGeometry(1,1),a=e.isTraveler?(i=this.renderTargets[e.captureLayer-2])==null?void 0:i.texture:this.textureManager.get(e.element),o=q.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,a,e.shaderHooks);t=new y.Mesh(n,o),e.type==="TEXT"&&(t.name="BG_MESH"),this.scene.add(t),this.registry.register(e.element,t),t.userData.baseMaterial=o,t.userData.domElement=e.element,t.userData.shaderHash=r}if((l=e.nativeStyles)!=null&&l.transform?t.userData.nativeTransform=e.nativeStyles.transform:t.userData.nativeTransform=void 0,this.updateMeshProperties(t,e),this.updateMeshLayers(t,e),e.isTraveler)for(let n=0;n<_.MAX_LAYERS;n++)n===e.captureLayer-2?this.travelersByLayer[n].add(t):this.travelersByLayer[n].delete(t);else for(const n of this.travelersByLayer)n.delete(t);if(e.isFixed?this.fixedMeshes.add(t):this.fixedMeshes.delete(t),e.styles.imageSrc?this.textureManager.register(e.element,e.styles.imageSrc):this.textureManager.unregister(e.element),e.type==="BOX")for(const n of e.children)this.reconcileNode(n);else e.type==="TEXT"&&(this.reconcileTextChild(t,e,!1),t.userData.nativeMesh&&e.nativeStyles&&this.reconcileTextChild(t.userData.nativeMesh,e,!0))}reconcileTextChild(e,t,r){var c;const i=t.textLines||[{text:t.textContent||"",rect:t.rect}],l=r?t.nativeStyles:t.textStyles,n=JSON.stringify(l)+t.textContent+i.map(d=>d.text).join("|"),a=(c=e.userData)==null?void 0:c.textChildStyleHash;if(t.dirtyMask&ve||n!==a){e.children.filter(f=>f.name.startsWith("TEXT_CHILD")).forEach(f=>{var E;const v=f;(E=v.material.map)==null||E.dispose(),v.geometry.dispose(),e.remove(v)});const h=t.rect,u=h.x+h.width/2,p=h.y+h.height/2;i.forEach((f,v)=>{const E=q.create("TEXT",l,f.text,f.rect.width,f.rect.height,this.qualityFactor),D=new y.PlaneGeometry(1,1),A=new y.Mesh(D,E);A.name=`TEXT_CHILD_${v}`;const R=t.rect.width===0?1:f.rect.width/t.rect.width,T=t.rect.height===0?1:f.rect.height/t.rect.height;A.scale.set(R,T,1);const C=f.rect.x+f.rect.width/2,w=f.rect.y+f.rect.height/2,L=C-u,I=-(w-p);A.position.set(t.rect.width===0?0:L/t.rect.width,t.rect.height===0?0:I/t.rect.height,.005),e.add(A)}),e.userData.textChildStyleHash=n}e.children.forEach(d=>{if(!d.name.startsWith("TEXT_CHILD"))return;const h=d,u=t.visibility&G?B.BASE:B.HIDDEN;if(h.layers.set(u),t.visibility&te&&h.layers.enable(B.SELECTED),t.visibility&G)if(!r&&t.nativeLayer!==void 0&&t.nativeStyles!==void 0)for(let p=t.captureLayer;p<t.nativeLayer;p++)h.layers.enable(B.getCaptureLayer(p));else if(r&&t.nativeLayer!==void 0)for(let p=Math.max(t.captureLayer,t.nativeLayer);p<=_.MAX_LAYERS+1;p++)h.layers.enable(B.getCaptureLayer(p));else for(let p=t.captureLayer;p<=_.MAX_LAYERS+1;p++)h.layers.enable(B.getCaptureLayer(p))})}updateMeshProperties(e,t){var R,T,C;const{rect:r,styles:i}=t,l=this.renderer.getPixelRatio(),n=this.renderer.domElement.width/l,a=this.renderer.domElement.height/l;e.material=e.userData.baseMaterial,e.scale.set(r.width,r.height,1),e.userData.domRect={x:r.x,y:r.y,width:r.width,height:r.height};const o=.001;this.renderOrder++;const c=this.targetRect.left+window.scrollX,d=this.targetRect.top+window.scrollY;let h,u;if(this.isViewport)h=r.x-window.innerWidth/2+r.width/2,u=-r.y+window.innerHeight/2-r.height/2;else{const w=r.x-c,L=r.y-d;h=w-n/2+r.width/2,u=-L+a/2-r.height/2}e.position.set(h,u,i.zIndex+this.renderOrder*o);const p=r.x,f=r.y;e.userData.basePosition={x:h,y:u},e.userData.originalBasePosition={x:h,y:u},e.userData.baseSize={width:r.width,height:r.height},e.userData.baseDOM={x:p,y:f},e.userData.isFixed=t.isFixed,e.userData.initialScroll={x:window.scrollX,y:window.scrollY};const v=t.element.nodeType===Node.TEXT_NODE?t.element.parentElement:t.element,E=window.getComputedStyle(v);let D=0,A=0;if(E.transform&&E.transform!=="none"){const w=new DOMMatrix(E.transform);D=w.m41,A=w.m42}if(e.userData.baseTransform={x:D,y:A},delete e.userData.originRatioX,delete e.userData.originRatioY,q.update(e.userData.baseMaterial,"BOX",i,"",r.width,r.height,this.qualityFactor,t.isTraveler?(R=this.renderTargets[t.captureLayer-2])==null?void 0:R.texture:this.textureManager.get(t.element)),t.nativeStyles&&t.nativeRect){if(!e.userData.nativeMesh){const $=q.create("BOX",t.nativeStyles,"",t.nativeRect.width,t.nativeRect.height,this.qualityFactor,t.isTraveler?(T=this.renderTargets[t.captureLayer-2])==null?void 0:T.texture:this.textureManager.get(t.element),t.shaderHooks),W=new y.Mesh(e.geometry,$);t.type==="TEXT"&&(W.name="BG_MESH"),this.scene.add(W),e.userData.nativeMesh=W}const w=e.userData.nativeMesh;let L,I;if(this.isViewport)L=t.nativeRect.x-window.innerWidth/2+t.nativeRect.width/2,I=-t.nativeRect.y+window.innerHeight/2-t.nativeRect.height/2;else{const $=t.nativeRect.x-c,W=t.nativeRect.y-d;L=$-n/2+t.nativeRect.width/2,I=-W+a/2-t.nativeRect.height/2}let N=t.nativeRect.width,Q=t.nativeRect.height,ue=L,fe=I;if(t.nativeStyles.transform){const $=t.nativeStyles.transform,W=$.match(/scale\(([\d.]+%?)\)/);if(W){let Y=parseFloat(W[1]);W[1].includes("%")&&(Y/=100),N*=Y,Q*=Y}const ne=$.match(/translate\(([^,]+),\s*([^)]+)\)/);if(ne){const Y=ne[1].trim(),V=ne[2].trim();let m=parseFloat(Y);Y.includes("%")&&(m=m/100*t.nativeRect.width);let M=parseFloat(V);V.includes("%")&&(M=M/100*t.nativeRect.height),ue+=m,fe-=M}const ge=$.match(/translateX\(([^)]+)\)/);if(ge){const Y=ge[1].trim();let V=parseFloat(Y);Y.includes("%")&&(V=V/100*t.nativeRect.width),ue+=V}const pe=$.match(/translateY\(([^)]+)\)/);if(pe){const Y=pe[1].trim();let V=parseFloat(Y);Y.includes("%")&&(V=V/100*t.nativeRect.height),fe-=V}}w.scale.set(N,Q,1),w.position.set(ue,fe,t.nativeStyles.zIndex+this.renderOrder*o),q.update(w.material,"BOX",t.nativeStyles,"",t.nativeRect.width,t.nativeRect.height,this.qualityFactor,t.isTraveler?(C=this.renderTargets[t.captureLayer-2])==null?void 0:C.texture:this.textureManager.get(t.element))}else e.userData.nativeMesh&&(this.scene.remove(e.userData.nativeMesh),e.userData.nativeMesh.material instanceof y.Material&&e.userData.nativeMesh.material.dispose(),delete e.userData.nativeMesh)}updateMeshLayers(e,t){const r=t.visibility&G?B.BASE:B.HIDDEN;if(e.layers.set(r),t.visibility&te&&e.layers.enable(B.SELECTED),e.userData.nativeMesh&&t.nativeLayer!==void 0){const i=e.userData.nativeMesh;if(i.layers.set(B.HIDDEN),t.visibility&G){for(let l=t.captureLayer;l<t.nativeLayer;l++)e.layers.enable(B.getCaptureLayer(l));for(let l=Math.max(t.captureLayer,t.nativeLayer);l<=_.MAX_LAYERS+1;l++)i.layers.enable(B.getCaptureLayer(l))}}else if(t.visibility&G)for(let i=t.captureLayer;i<=_.MAX_LAYERS+1;i++)e.layers.enable(B.getCaptureLayer(i))}captureRenderTarget(e,t,r){if(e.size===0||!r)return;const i=new y.Color,l=this.renderer.getClearAlpha();this.renderer.getClearColor(i),this.renderer.setClearColor(0,0),this.renderer.setRenderTarget(r),this.renderer.clear(),this.renderer.autoClear=!1,this.renderer.setScissorTest(!0),this.camera.layers.set(t);const n=new y.Vector3,a=this.isViewport?window.innerWidth+this.overscan*2:this.targetRect.width,o=this.isViewport?window.innerHeight+this.overscan*2:this.targetRect.height,c=this.renderer.getPixelRatio();for(const d of e){n.setFromMatrixPosition(d.matrixWorld),n.project(this.camera);const h=(n.x+1)/2*a,u=(n.y+1)/2*o;let p=0,f=1;typeof this.clipArea=="number"?f=this.clipArea:this.clipArea.endsWith("%")?f=parseFloat(this.clipArea)/100:this.clipArea.endsWith("px")&&(p=parseFloat(this.clipArea));const v=d.scale.x*f+.5,E=d.scale.y*f+.5,D=h-v/2,A=u-E/2,R=(D*this.qualityFactor-p)/c,T=(A*this.qualityFactor-p)/c,C=(v*this.qualityFactor+p*2)/c,w=(E*this.qualityFactor+p*2)/c;this.renderer.setScissor(R,T,C,w),this.renderer.render(this.scene,this.camera)}this.renderer.setScissorTest(!1),this.renderer.autoClear=!0,this.renderer.setRenderTarget(null),this.camera.layers.set(this.getSceneLayer()),this.renderer.setClearColor(i,l)}render(){for(let e=0;e<_.MAX_LAYERS;e++){const t=e+1;this.captureRenderTarget(this.travelersByLayer[e],B.getCaptureLayer(t),this.renderTargets[e])}this.renderer.render(this.scene,this.camera)}syncMeshesByDOM(){const e=this.targetRect.left+window.scrollX,t=this.targetRect.top+window.scrollY,r=this.renderer.getPixelRatio(),i=this.renderer.domElement.width/r,l=this.renderer.domElement.height/r;this.scene.children.forEach(n=>{const a=n;if(!a.userData||!a.userData.domElement)return;const o=a.userData.domElement;if(!o.isConnected)return;let c;if(o.nodeType===Node.TEXT_NODE){const h=document.createRange();h.selectNode(o),c=h.getBoundingClientRect()}else c=o.getBoundingClientRect();const d=a.userData.domRect;if(!d||Math.abs(c.x-d.x)>.5||Math.abs(c.y-d.y)>.5||Math.abs(c.width-d.width)>.5||Math.abs(c.height-d.height)>.5){a.userData.domRect={x:c.x,y:c.y,width:c.width,height:c.height};let h,u;if(this.isViewport)h=c.x-window.innerWidth/2+c.width/2,u=-c.y+window.innerHeight/2-c.height/2;else{const p=c.x-e,f=c.y-t;h=p-i/2+c.width/2,u=-f+l/2-c.height/2}if(a.position.setX(h),a.position.setY(u),a.scale.set(c.width,c.height,1),a.updateMatrixWorld(),a.material instanceof y.ShaderMaterial&&q.forceUpdateUniforms(a.material,{width:c.width,height:c.height}),a.userData.nativeMesh){const p=a.userData.nativeMesh;let f=c.width,v=c.height,E=h,D=u;if(a.userData.nativeTransform){const A=a.userData.nativeTransform,R=A.match(/scale\(([\d.]+%?)\)/);if(R){let L=parseFloat(R[1]);R[1].includes("%")&&(L/=100),f*=L,v*=L}const T=A.match(/translate\(([^,]+),\s*([^)]+)\)/);if(T){const L=T[1].trim(),I=T[2].trim();let N=parseFloat(L);L.includes("%")&&(N=N/100*c.width);let Q=parseFloat(I);I.includes("%")&&(Q=Q/100*c.height),E+=N,D-=Q}const C=A.match(/translateX\(([^)]+)\)/);if(C){const L=C[1].trim();let I=parseFloat(L);L.includes("%")&&(I=I/100*c.width),E+=I}const w=A.match(/translateY\(([^)]+)\)/);if(w){const L=w[1].trim();let I=parseFloat(L);L.includes("%")&&(I=I/100*c.height),D-=I}}p.position.setX(E),p.position.setY(D),p.scale.set(f,v,1),p.updateMatrixWorld()}}})}}function et(s){const e=s.textContent||"",t=[];let r="",i=null,l=-1;const n=(c,d)=>{for(let h=0;h<c.length;h++){const u=c[h],p=document.createRange();p.setStart(s,d+h),p.setEnd(s,d+h+1);const f=p.getBoundingClientRect();if(f.width===0&&f.height===0){r+=u;continue}l===-1||Math.abs(f.top-l)>f.height/2?(r&&i&&t.push({text:r,rect:{left:i.left,top:i.top,width:i.right-i.left,height:i.bottom-i.top}}),r=u,i={left:f.left,top:f.top,right:f.right,bottom:f.bottom},l=f.top):(r+=u,i&&(i.left=Math.min(i.left,f.left),i.top=Math.min(i.top,f.top),i.right=Math.max(i.right,f.right),i.bottom=Math.max(i.bottom,f.bottom)))}},a=e.match(/[^\s\-]+\-?|\-|\s+/g)||[];let o=0;for(const c of a){const d=document.createRange();d.setStart(s,o),d.setEnd(s,o+c.length);const h=d.getClientRects();if(h.length>1)n(c,o);else{const u=h.length===1?h[0]:d.getBoundingClientRect();if(u.width===0&&u.height===0){r+=c,o+=c.length;continue}l===-1||Math.abs(u.top-l)>u.height/2?(r&&i&&t.push({text:r,rect:{left:i.left,top:i.top,width:i.right-i.left,height:i.bottom-i.top}}),r=c,i={left:u.left,top:u.top,right:u.right,bottom:u.bottom},l=u.top):(r+=c,i&&(i.left=Math.min(i.left,u.left),i.top=Math.min(i.top,u.top),i.right=Math.max(i.right,u.right),i.bottom=Math.max(i.bottom,u.bottom)))}o+=c.length}return r&&i&&t.push({text:r,rect:{left:i.left,top:i.top,width:i.right-i.left,height:i.bottom-i.top}}),t.filter(c=>c.text.trim().length>0&&c.rect.width>0&&c.rect.height>0)}function Ue(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}`,fontSize:s.fontSize,color:s.color,textAlign:s.textAlign||"start",textBaseline:"alphabetic",direction:s.direction||"inherit",lineHeight:t,letterSpacing:r}}function Oe(s,e=Z|ie|Re|ve|he,t,r=1,i=0,l=2,n,a){var W,ne,ge,pe,Y,V;if(s.nodeType===Node.TEXT_NODE){const m=s;if(!m.textContent||!m.textContent.trim())return null;const M=m.textContent.replace(/\s+/g," ");if(M.length===0)return null;const z=et(m);if(z.length===0)return null;const j=m.parentElement,F=j?window.getComputedStyle(j):null;if(!F)return null;const J=Math.min(...z.map(x=>x.rect.left)),H=Math.min(...z.map(x=>x.rect.top)),ee=Math.max(...z.map(x=>x.rect.left+x.rect.width)),k=Math.max(...z.map(x=>x.rect.top+x.rect.height));return{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:m,rect:{x:J+window.scrollX,y:H+window.scrollY,width:ee-J,height:k-H},styles:{backgroundColor:"transparent",backgroundImage:"",opacity:j&&j.dataset[P.KEY]===P.VALUES.HIDE?1:parseFloat(F.opacity),zIndex:(isNaN(parseInt(F.zIndex))?0:parseInt(F.zIndex))+i,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px",isTraveler:!1},textContent:M,textLines:z.map(x=>({text:x.text.trim(),rect:{x:x.rect.left+window.scrollX,y:x.rect.top+window.scrollY,width:x.rect.width,height:x.rect.height}})),textStyles:Ue(F),dirtyMask:e,visibility:t,isTraveler:!1,captureLayer:r,isFixed:F.position==="fixed",nativeLayer:n,nativeStyles:a?re(re({backgroundColor:"transparent",backgroundImage:"",opacity:j&&j.dataset[P.KEY]===P.VALUES.HIDE?1:parseFloat(F.opacity),zIndex:(isNaN(parseInt(F.zIndex))?0:parseInt(F.zIndex))+i,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px",isTraveler:!1},Ue(F)),a):void 0,nativeRect:a?{x:J+window.scrollX,y:H+window.scrollY,width:ee-J,height:k-H}:void 0,children:[]}}if(s.nodeType!==Node.ELEMENT_NODE)return null;const o=s,c=o.dataset[O.KEY];let d=t,h=t;if(c){const m=new Set(c.split(/\s+/));for(const M of m)if(!be.includes(M))throw new Error(`[MirageEngine] Invalid filter token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(m.has(O.VALUES.END))return null;if(m.has(O.VALUES.INCLUDE_TREE)&&m.has(O.VALUES.EXCLUDE_TREE))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(m.has(O.VALUES.INCLUDE_SELF)&&m.has(O.VALUES.EXCLUDE_SELF))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");m.has(O.VALUES.INCLUDE_TREE)?d=d|G:m.has(O.VALUES.EXCLUDE_TREE)&&(d=d&~G),h=d,m.has(O.VALUES.INCLUDE_SELF)?h=h|G:m.has(O.VALUES.EXCLUDE_SELF)&&(h=h&~G)}const u=o.dataset[X.KEY];if(u){const m=new Set(u.split(/\s+/));for(const M of m)if(!be.includes(M))throw new Error(`[MirageEngine] Invalid select token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(m.has(X.VALUES.END))return null;if(m.has(X.VALUES.INCLUDE_TREE)&&m.has(X.VALUES.EXCLUDE_TREE))throw new Error("[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(m.has(X.VALUES.INCLUDE_SELF)&&m.has(X.VALUES.EXCLUDE_SELF))throw new Error("[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element.");m.has(X.VALUES.INCLUDE_TREE)?d=d|te:m.has(X.VALUES.EXCLUDE_TREE)&&(d=d&~te),h=d,m.has(X.VALUES.INCLUDE_SELF)?h=h|te:m.has(X.VALUES.EXCLUDE_SELF)&&(h=h&~te)}const p=o.dataset[_.KEY];let f=!1,v=a?re({},a):{},E=n;if(p){let m=1;const M=p.indexOf("{"),z=p.lastIndexOf("}");let j=p;if(M!==-1&&z!==-1&&z>M){j=p.substring(0,M).trim();const k=p.substring(M,z+1);try{v=new Function("return "+k)()}catch(x){console.warn(`[MirageEngine] Failed to parse travel styles JSON: ${k}`)}}const F=j.split(/\s+/);let J=!1;const H=F.indexOf(_.VALUES.TRAVELER);if(H!==-1){f=!0,J=!0;const k=F[H+1];if(k&&!isNaN(parseInt(k,10)))m=parseInt(k,10);else{const x=F.find(ae=>!isNaN(parseInt(ae,10)));x&&(m=parseInt(x,10))}}const ee=F.indexOf(_.VALUES.NATIVE);if(ee!==-1){const k=F[ee+1];if(k&&!isNaN(parseInt(k,10)))E=parseInt(k,10);else if(!f){const x=F.find(ae=>!isNaN(parseInt(ae,10)));x&&(E=parseInt(x,10))}}if(J){const k=m+1;if(k<r)throw new Error(`[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${r-1}).`);r=Math.min(k,_.MAX_LAYERS+1)}}const D=o.dataset[Se.KEY];let A;D&&(A=JSON.parse(D));const R=o.getBoundingClientRect(),T=window.getComputedStyle(o);if(R.width===0||R.height===0||T.display==="none")return null;let C=o.getAttribute("data-mid");C||(C=Math.random().toString(36).substring(2,11),o.setAttribute("data-mid",C));const w=parseInt(T.zIndex),L=(isNaN(w)?0:w)+i;let I;if(o.tagName==="IMG")I=o.src;else if(o.tagName.toLowerCase()==="svg"){const m=o.cloneNode(!0),M=v==null?void 0:v.color,z=v==null?void 0:v.fill,j=v==null?void 0:v.stroke,F=v==null?void 0:v.opacity,J=(x,ae)=>{const K=window.getComputedStyle(x),me=ae,nt=K.fill===K.color,at=K.stroke===K.color,we=z||(nt?M:void 0)||K.fill;we&&we!=="none"&&(me.style.fill=we);const Te=j||(at?M:void 0)||K.stroke;Te&&Te!=="none"&&(me.style.stroke=Te),K.strokeWidth&&K.strokeWidth!=="0px"&&(me.style.strokeWidth=K.strokeWidth);const _e=M||K.color;_e&&(me.style.color=_e);const xe=F||K.opacity;xe&&xe!=="1"&&(me.style.opacity=xe);for(let ye=0;ye<x.children.length;ye++)J(x.children[ye],ae.children[ye])};J(o,m);const H=o.getBoundingClientRect(),ee=window.devicePixelRatio*l;m.hasAttribute("viewBox")||m.setAttribute("viewBox",`0 0 ${H.width} ${H.height}`),m.setAttribute("width",(H.width*ee).toString()),m.setAttribute("height",(H.height*ee).toString());let k=new XMLSerializer().serializeToString(m);k.includes("xmlns=")||(k=k.replace("<svg",'<svg xmlns="http://www.w3.org/2000/svg"')),I=`data:image/svg+xml;utf8,${encodeURIComponent(k)}`}else if(T.backgroundImage&&T.backgroundImage!=="none"){const m=T.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);m&&(I=m[1])}const N={backgroundColor:T.backgroundColor,backgroundImage:T.backgroundImage,opacity:o.dataset[P.KEY]===P.VALUES.HIDE?1:parseFloat(T.opacity),zIndex:L,borderRadius:T.borderRadius,borderColor:T.borderColor,borderWidth:T.borderWidth,imageSrc:I,isTraveler:f},Q=N;let ue,fe;const $=[];return o.tagName.toLowerCase()!=="svg"&&Array.from(o.childNodes).forEach(m=>{const M=m.nodeType===Node.TEXT_NODE?h:d,z=Oe(m,e,M,r,L,l,m.nodeType===Node.TEXT_NODE?E:void 0,m.nodeType===Node.TEXT_NODE&&Object.keys(v).length>0?v:void 0);z&&$.push(z)}),{id:C,type:"BOX",element:o,rect:{x:R.left+window.scrollX,y:R.top+window.scrollY,width:R.width,height:R.height},styles:Q,textContent:ue,textStyles:fe,dirtyMask:e,visibility:h,isTraveler:f,captureLayer:r,nativeLayer:E,nativeStyles:E!==void 0?Be(re({},N),{backgroundColor:(W=v.backgroundColor)!=null?W:N.backgroundColor,backgroundImage:(ne=v.backgroundImage)!=null?ne:N.backgroundImage,opacity:(ge=v.opacity)!=null?ge:N.opacity,zIndex:v.zIndex!==void 0?v.zIndex+L:N.zIndex,borderRadius:(pe=v.borderRadius)!=null?pe:N.borderRadius,borderColor:(Y=v.borderColor)!=null?Y:N.borderColor,borderWidth:(V=v.borderWidth)!=null?V:N.borderWidth,isTraveler:N.isTraveler,transform:v.transform}):void 0,nativeRect:E!==void 0?{x:v.x!==void 0?parseFloat(v.x):R.left+window.scrollX,y:v.y!==void 0?parseFloat(v.y):R.top+window.scrollY,width:v.width!==void 0?parseFloat(v.width):R.width,height:v.height!==void 0?parseFloat(v.height):R.height}:void 0,isFixed:T.position==="fixed",children:$,shaderHooks:A}}function tt(s,e){e.size!==0&&e.forEach((t,r)=>{var l,n,a,o;const i=s.get(r);!i||!i.userData.basePosition||(q.forceUpdateUniforms(i.material,{backgroundColor:t.backgroundColor,backgroundImage:t.backgroundImage,opacity:t.opacity,borderRadius:(n=t.borderRadius)!=null?n:(l=i.userData.baseStyles)==null?void 0:l.borderRadius}),i.userData.nativeMesh&&q.forceUpdateUniforms(i.userData.nativeMesh.material,{backgroundColor:t.backgroundColor,backgroundImage:t.backgroundImage,opacity:t.opacity,borderRadius:(o=t.borderRadius)!=null?o:(a=i.userData.baseStyles)==null?void 0:a.borderRadius}))})}class rt{constructor(e,t,r,i){g(this,"target");g(this,"renderer");g(this,"registry");g(this,"isTravelEnabled",!1);g(this,"tracker");this.target=e,this.renderer=t,this.registry=r,this.tracker=new Me(e,{resizeDebounce:i.resizeDebounce}),this.tracker.onLayoutChange.add((l,n)=>{document.querySelector(`[${_.NAME}~='${_.VALUES.TRAVELER}']`)!==null&&!this.isTravelEnabled&&(this.isTravelEnabled=!0,this.renderer.createRenderTarget());const o=Oe(this.target,l,G,1,0,this.renderer.qualityFactor);o&&this.renderer.syncScene(o,n)}),this.tracker.onStyleChange.add(l=>{tt(this.registry,l)}),this.tracker.onRender.add(()=>{this.renderer.syncMeshesByDOM(),this.renderer.render()})}start(){this.tracker.start()}stop(){this.tracker.stop()}}class it{constructor(){g(this,"store");this.store=new WeakMap}register(e,t){this.store.set(e,t)}get(e){return this.store.get(e)}has(e){return this.store.has(e)}remove(e){this.store.delete(e)}}class st{constructor(e,t){g(this,"renderer");g(this,"syncer");g(this,"target");g(this,"registry");var i,l,n;if(this.target=e,this.registry=new it,!document.getElementById("mirage-engine-styles")){const a=document.createElement("style");a.id="mirage-engine-styles",a.textContent=`
-        [${P.NAME}="${P.VALUES.HIDE}"] {
+`,u=l||a?d+h+((i==null?void 0:i.uvModifier)||""):"",v=l||a?Ie.baseColorChunk:"",f=(i==null?void 0:i.colorModifier)||"",m=Ae.fragmentShader.replace("#INJECT_DECLARATIONS",c).replace("#INJECT_UV_MODIFIER",u).replace("#INJECT_BASE_COLOR",v).replace("#INJECT_COLOR_MODIFIER",f),E=de(s.backgroundColor),D=de(s.borderColor),A={uSize:{value:new y.Vector2(e,t)},uBgColor:{value:new y.Vector4(E.color.r,E.color.g,E.color.b,E.alpha)},uBorderColor:{value:new y.Vector4(D.color.r,D.color.g,D.color.b,D.alpha)},uBorderRadius:{value:new y.Vector4(0,0,0,0)},uBorderWidth:{value:se(s.borderWidth)},uOpacity:{value:(T=s.opacity)!=null?T:1},uTexture:{value:null},uTextureRepeat:{value:new y.Vector2(1,1)},uTextureOffset:{value:new y.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new y.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};ke(A.uBorderRadius.value,s.borderRadius,Math.min(e,t)),l&&(A.uTexture.value=r);const R=new y.ShaderMaterial({uniforms:re(re({},A),o),vertexShader:Ae.vertexShader,fragmentShader:m,transparent:!0,side:y.FrontSide});return s.backgroundImage&&Ee(R,{backgroundImage:s.backgroundImage}),R}function Je(s,e,t,r,i){const l=se(e.borderWidth);Ee(s,{width:t,height:r,borderRadius:e.borderRadius,borderWidth:l,backgroundColor:e.backgroundColor,borderColor:e.borderColor,opacity:e.opacity,texture:i,backgroundImage:e.backgroundImage})}function Ee(s,e){var r,i,l;if(e.width!==void 0&&e.height!==void 0&&s.uniforms.uSize.value.set(e.width,e.height),e.borderRadius!==void 0){const n=e.width!==void 0&&e.height!==void 0?Math.min(e.width,e.height):Math.min(s.uniforms.uSize.value.x,s.uniforms.uSize.value.y);ke(s.uniforms.uBorderRadius.value,e.borderRadius,n)}if(e.borderWidth!==void 0&&(s.uniforms.uBorderWidth.value=e.borderWidth),e.backgroundColor!==void 0)if(Array.isArray(e.backgroundColor)){const n=s.uniforms.uBgColor.value.w;s.uniforms.uBgColor.value.set(e.backgroundColor[0],e.backgroundColor[1],e.backgroundColor[2],n)}else if(typeof e.backgroundColor=="string"){const n=de(e.backgroundColor);s.uniforms.uBgColor.value.set(n.color.r,n.color.g,n.color.b,n.alpha)}else{const n=s.uniforms.uBgColor.value.w;s.uniforms.uBgColor.value.set(e.backgroundColor.r,e.backgroundColor.g,e.backgroundColor.b,n)}if(e.borderColor!==void 0)if(Array.isArray(e.borderColor)){const n=s.uniforms.uBorderColor.value.w;s.uniforms.uBorderColor.value.set(e.borderColor[0],e.borderColor[1],e.borderColor[2],n)}else if(typeof e.borderColor=="string"){const n=de(e.borderColor);s.uniforms.uBorderColor.value.set(n.color.r,n.color.g,n.color.b,n.alpha)}else{const n=s.uniforms.uBorderColor.value.w;s.uniforms.uBorderColor.value.set(e.borderColor.r,e.borderColor.g,e.borderColor.b,n)}e.opacity!==void 0&&(s.uniforms.uOpacity.value=e.opacity),e.bgOpacity!==void 0&&(s.uniforms.uBgColor.value.w=e.bgOpacity),e.borderOpacity!==void 0&&(s.uniforms.uBorderColor.value.w=e.borderOpacity),s.uniforms.uTexture&&e.texture!==void 0&&(s.uniforms.uTexture.value=e.texture);const t=e.texture!==void 0?e.texture:(r=s.uniforms.uTexture)==null?void 0:r.value;if(t&&(t.image instanceof ImageBitmap||t.image instanceof HTMLImageElement||t.image instanceof HTMLCanvasElement)){const n=t.image.naturalWidth||t.image.videoWidth||t.image.width,o=t.image.naturalHeight||t.image.videoHeight||t.image.height,a=(i=e.width)!=null?i:s.uniforms.uSize.value.x,c=(l=e.height)!=null?l:s.uniforms.uSize.value.y;if(n&&o&&a&&c){const d=n/o,h=a/c;if(d>h){const u=h/d;s.uniforms.uTextureRepeat.value.set(u,1),s.uniforms.uTextureOffset.value.set((1-u)/2,0)}else{const u=d/h;s.uniforms.uTextureRepeat.value.set(1,u),s.uniforms.uTextureOffset.value.set(0,(1-u)/2)}}}else s.uniforms.uTextureRepeat&&(s.uniforms.uTextureRepeat.value.set(1,1),s.uniforms.uTextureOffset.value.set(0,0));if(e.backgroundImage!==void 0){const n=He(e.backgroundImage);if(n){s.uniforms.uGradientCount.value=n.stops.length,s.uniforms.uGradientAngle.value=n.angle;for(let o=0;o<8;o++)if(o<n.stops.length){const a=n.stops[o];s.uniforms.uGradientColors.value[o].set(a.color.r,a.color.g,a.color.b,a.alpha),s.uniforms.uGradientStops.value[o]=a.stop}else s.uniforms.uGradientColors.value[o].set(0,0,0,0),s.uniforms.uGradientStops.value[o]=1}else s.uniforms.uGradientCount.value=0}for(const n of Object.keys(e))n!=="width"&&n!=="height"&&n!=="borderRadius"&&n!=="borderWidth"&&n!=="backgroundColor"&&n!=="borderColor"&&n!=="opacity"&&n!=="bgOpacity"&&n!=="borderOpacity"&&n!=="texture"&&n!=="backgroundImage"&&s.uniforms[n]!==void 0&&(s.uniforms[n].value!==void 0&&s.uniforms[n].value!==null&&typeof s.uniforms[n].value.set=="function"?Array.isArray(e[n])?s.uniforms[n].value.set(...e[n]):e[n]!==void 0&&(e[n].copy?s.uniforms[n].value.copy(e[n]):s.uniforms[n].value=e[n]):s.uniforms[n].value=e[n])}function ke(s,e,t=0){var a,c,d,h;if(e==null){s.set(0,0,0,0);return}if(typeof e=="number"){s.set(e,e,e,e);return}if(Array.isArray(e)){s.set(e[0],e[1],e[2],e[3]);return}const r=e.split("/")[0].trim().split(/\s+/),i=se(r[0],t),l=se((a=r[1])!=null?a:r[0],t),n=se((c=r[2])!=null?c:r[0],t),o=se((h=(d=r[3])!=null?d:r[1])!=null?h:r[0],t);s.set(i,l,n,o)}const q={create(s,e,t,r,i,l=2,n=null,o){return s==="BOX"?Ke(e,r,i,n,o):s==="TEXT"?new Ve(t||"",e,r,i,l):new y.MeshBasicMaterial({visible:!1})},update(s,e,t,r,i,l,n=2,o){e==="BOX"?Je(s,t,i,l,o):e==="TEXT"&&s.updateText(r||"",t,i,l,n)},forceUpdateUniforms(s,e){Ee(s,e)}};class Ze{constructor(e,t=!0){g(this,"observer");g(this,"textures",new WeakMap);g(this,"loadStatus",new WeakMap);g(this,"elementUrls",new WeakMap);g(this,"onUpdate");this.onUpdate=e,t&&(this.observer=new IntersectionObserver(r=>{for(const i of r){const l=i.target;i.isIntersecting?this.loadTexture(l):this.disposeTexture(l)}},{rootMargin:"300px"}))}register(e,t){if(e.nodeType!==Node.ELEMENT_NODE)return;this.elementUrls.get(e)!==t&&(this.elementUrls.set(e,t),this.observer?(this.observer.unobserve(e),this.observer.observe(e)):this.loadTexture(e))}unregister(e){e.nodeType===Node.ELEMENT_NODE&&this.observer&&this.observer.unobserve(e),this.disposeTexture(e),this.elementUrls.delete(e),this.loadStatus.delete(e)}loadTexture(e){return Ne(this,null,function*(){if(this.loadStatus.get(e)||this.textures.has(e))return;const t=this.elementUrls.get(e);if(t){this.loadStatus.set(e,!0);try{let r;if(t.startsWith("data:image/svg+xml"))r=yield new Promise((l,n)=>{const o=new Image;o.onload=()=>l(o),o.onerror=n,o.src=t});else{const n=yield(yield fetch(t)).blob();r=yield createImageBitmap(n,{imageOrientation:"flipY"})}if(this.elementUrls.get(e)!==t){"close"in r&&r.close();return}const i=new y.Texture(r);r instanceof HTMLImageElement||(i.flipY=!1),i.colorSpace=y.LinearSRGBColorSpace,i.needsUpdate=!0,this.textures.set(e,i),this.onUpdate(e,i)}catch(r){console.warn("[MirageEngine] Failed to load texture:",t,r)}finally{this.elementUrls.has(e)&&this.loadStatus.set(e,!1)}}})}disposeTexture(e){const t=this.textures.get(e);t&&(t.dispose(),this.textures.delete(e),this.onUpdate(e,null)),this.loadStatus.set(e,!1)}get(e){return this.textures.get(e)}disposeAll(){this.observer&&this.observer.disconnect()}}class Qe{constructor(e,t,r,i){g(this,"canvas");g(this,"scene");g(this,"camera");g(this,"renderer");g(this,"renderTargets",[]);g(this,"renderOrder",0);g(this,"qualityFactor",2);g(this,"mode","overlay");g(this,"canvasSize","viewport");g(this,"clipArea",1);g(this,"targetLayer","base");g(this,"overscan",200);g(this,"target");g(this,"mountContainer");g(this,"registry");g(this,"targetRect");g(this,"travelersByLayer",Array.from({length:_.MAX_LAYERS},()=>new Set));g(this,"textureManager");g(this,"fixedMeshes",new Set);var o,a,c,d,h;this.target=e,this.mountContainer=r,this.registry=i,this.mode=(o=t.mode)!=null?o:"overlay",this.canvasSize=(a=t.canvasSize)!=null?a:"viewport",this.clipArea=(c=t.travelerClipArea)!=null?c:1,this.targetLayer=(d=t.layer)!=null?d:"base",this.textureManager=new Ze((u,v)=>{const f=this.registry.get(u);f&&f.material instanceof y.ShaderMaterial&&q.forceUpdateUniforms(f.material,{texture:v})},this.isViewport),this.canvas=document.createElement("canvas"),this.scene=new y.Scene,this.targetRect=this.target.getBoundingClientRect();const l=this.isViewport?window.innerWidth+this.overscan*2:this.targetRect.width,n=this.isViewport?window.innerHeight+this.overscan*2:this.targetRect.height;this.camera=new y.OrthographicCamera(l/-2,l/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(this.getSceneLayer()),this.renderer=new y.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),y.ColorManagement.enabled=!1,this.renderer.outputColorSpace=y.LinearSRGBColorSpace,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(l,n),this.applyTextQuality((h=t.quality)!=null?h:"medium")}get isViewport(){return this.mode==="overlay"&&this.canvasSize==="viewport"}getSceneLayer(){return typeof this.targetLayer=="number"?this.targetLayer:this.targetLayer==="selected"?B.SELECTED:B.BASE}createRenderTarget(){for(let e=0;e<_.MAX_LAYERS;e++){const t=this.isViewport?window.innerWidth+this.overscan*2:this.targetRect.width,r=this.isViewport?window.innerHeight+this.overscan*2:this.targetRect.height;this.renderTargets.push(new y.WebGLRenderTarget(t*this.qualityFactor,r*this.qualityFactor,{minFilter:y.LinearFilter,magFilter:y.LinearFilter,format:y.RGBAFormat,stencilBuffer:!1,depthBuffer:!0}))}}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":this.qualityFactor=2;break;default:this.qualityFactor=2;break}}mount(){this.mountContainer.prepend(this.canvas),this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){const e=this.isViewport?window.innerWidth+this.overscan*2:this.targetRect.width,t=this.isViewport?window.innerHeight+this.overscan*2:this.targetRect.height;this.canvas.style.width=`${e}px`,this.canvas.style.height=`${t}px`,this.mode==="duplicate"?(this.canvas.style.position="",this.canvas.style.top="",this.canvas.style.left="",this.canvas.style.display="block"):(this.canvas.style.position=this.isViewport?"fixed":"absolute",this.canvas.style.top=this.isViewport?`-${this.overscan}px`:`${this.target.offsetTop}px`,this.canvas.style.left=this.isViewport?`-${this.overscan}px`:`${this.target.offsetLeft}px`,this.canvas.style.display="block")}updateUniforms(e,t){const r=this.registry.get(e);r&&(r.traverse(i=>{i.isMesh&&i.material&&q.forceUpdateUniforms(i.material,t)}),r.userData.nativeMesh&&r.userData.nativeMesh.traverse(i=>{i.isMesh&&i.material&&q.forceUpdateUniforms(i.material,t)}))}dispose(){this.renderer.dispose(),this.canvas.remove(),this.textureManager.disposeAll()}setSize(e,t){this.renderer.setSize(e,t);for(const r of this.renderTargets)r.setSize(e*this.qualityFactor,t*this.qualityFactor);this.camera.left=e/-2,this.camera.right=e/2,this.camera.top=t/2,this.camera.bottom=t/-2,this.camera.updateProjectionMatrix()}syncScene(e,t){const r=this.target.getBoundingClientRect(),i=this.isViewport?window.innerWidth+this.overscan*2:r.width,l=this.isViewport?window.innerHeight+this.overscan*2:r.height,n=this.isViewport?this.canvas.clientWidth:this.targetRect.width,o=this.isViewport?this.canvas.clientHeight:this.targetRect.height,a=Math.abs(i-n)>.1||Math.abs(l-o)>.1,c=this.mode==="overlay"&&(Math.abs(r.top-this.targetRect.top)>.1||Math.abs(r.left-this.targetRect.left)>.1);a?(this.targetRect=r,this.setSize(i,l),this.updateCanvasLayout()):c?(this.targetRect=r,this.updateCanvasLayout()):this.targetRect=r,this.renderOrder=0,this.reconcileNode(e),t.size>0&&t.forEach(d=>{const h=this.registry.get(d);if(h){this.scene.remove(h);for(const u of this.travelersByLayer)u.delete(h);this.fixedMeshes.delete(h),h.geometry.dispose(),h.userData.nativeMesh&&(this.scene.remove(h.userData.nativeMesh),Array.isArray(h.userData.nativeMesh.material)?h.userData.nativeMesh.material.forEach(u=>u.dispose()):h.userData.nativeMesh.material.dispose(),h.userData.nativeMesh.geometry.dispose()),h.traverse(u=>{u instanceof y.Mesh&&(u.geometry&&u.geometry.dispose(),u.material&&(Array.isArray(u.material)?u.material.forEach(v=>v.dispose()):u.material.dispose()))}),this.registry.remove(d),this.textureManager.unregister(d)}})}reconcileNode(e){var i,l;let t=this.registry.get(e.element);const r=JSON.stringify(e.shaderHooks||null);if(t&&t.userData.shaderHash!==r&&(this.scene.remove(t),t.geometry.dispose(),t.material instanceof y.Material&&t.material.dispose(),this.registry.remove(e.element),t=void 0),!t){const n=new y.PlaneGeometry(1,1),o=e.isTraveler?(i=this.renderTargets[e.captureLayer-2])==null?void 0:i.texture:this.textureManager.get(e.element),a=q.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,o,e.shaderHooks);t=new y.Mesh(n,a),e.type==="TEXT"&&(t.name="BG_MESH"),this.scene.add(t),this.registry.register(e.element,t),t.userData.baseMaterial=a,t.userData.domElement=e.element,t.userData.shaderHash=r}if((l=e.nativeStyles)!=null&&l.transform?t.userData.nativeTransform=e.nativeStyles.transform:t.userData.nativeTransform=void 0,this.updateMeshProperties(t,e),this.updateMeshLayers(t,e),e.isTraveler)for(let n=0;n<_.MAX_LAYERS;n++)n===e.captureLayer-2?this.travelersByLayer[n].add(t):this.travelersByLayer[n].delete(t);else for(const n of this.travelersByLayer)n.delete(t);if(e.isFixed?this.fixedMeshes.add(t):this.fixedMeshes.delete(t),e.styles.imageSrc?this.textureManager.register(e.element,e.styles.imageSrc):this.textureManager.unregister(e.element),e.type==="BOX")for(const n of e.children)this.reconcileNode(n);else e.type==="TEXT"&&(this.reconcileTextChild(t,e,!1),t.userData.nativeMesh&&e.nativeStyles&&this.reconcileTextChild(t.userData.nativeMesh,e,!0))}reconcileTextChild(e,t,r){var c;const i=t.textLines||[{text:t.textContent||"",rect:t.rect}],l=r?t.nativeStyles:t.textStyles,n=JSON.stringify(l)+t.textContent+i.map(d=>d.text).join("|"),o=(c=e.userData)==null?void 0:c.textChildStyleHash;if(t.dirtyMask&ve||n!==o){e.children.filter(f=>f.name.startsWith("TEXT_CHILD")).forEach(f=>{var E;const m=f;(E=m.material.map)==null||E.dispose(),m.geometry.dispose(),e.remove(m)});const h=t.rect,u=h.x+h.width/2,v=h.y+h.height/2;i.forEach((f,m)=>{const E=q.create("TEXT",l,f.text,f.rect.width,f.rect.height,this.qualityFactor),D=new y.PlaneGeometry(1,1),A=new y.Mesh(D,E);A.name=`TEXT_CHILD_${m}`;const R=t.rect.width===0?1:f.rect.width/t.rect.width,T=t.rect.height===0?1:f.rect.height/t.rect.height;A.scale.set(R,T,1);const C=f.rect.x+f.rect.width/2,w=f.rect.y+f.rect.height/2,L=C-u,I=-(w-v);A.position.set(t.rect.width===0?0:L/t.rect.width,t.rect.height===0?0:I/t.rect.height,.005),e.add(A)}),e.userData.textChildStyleHash=n}e.children.forEach(d=>{if(!d.name.startsWith("TEXT_CHILD"))return;const h=d;if(r&&t.nativeLayer!==void 0)h.layers.set(B.HIDDEN),t.visibility&W&&h.layers.enable(B.getCaptureLayer(t.nativeLayer));else{const u=t.visibility&W?B.BASE:B.HIDDEN;if(h.layers.set(u),t.visibility&te&&h.layers.enable(B.SELECTED),t.visibility&W)if(!r&&t.nativeLayer!==void 0&&t.nativeStyles!==void 0)for(let v=t.captureLayer;v<=_.MAX_LAYERS+1;v++)v!==t.nativeLayer&&h.layers.enable(B.getCaptureLayer(v));else for(let v=t.captureLayer;v<=_.MAX_LAYERS+1;v++)h.layers.enable(B.getCaptureLayer(v))}})}updateMeshProperties(e,t){var R,T,C;const{rect:r,styles:i}=t,l=this.renderer.getPixelRatio(),n=this.renderer.domElement.width/l,o=this.renderer.domElement.height/l;e.material=e.userData.baseMaterial,e.scale.set(r.width,r.height,1),e.userData.domRect={x:r.x,y:r.y,width:r.width,height:r.height};const a=.001;this.renderOrder++;const c=this.targetRect.left+window.scrollX,d=this.targetRect.top+window.scrollY;let h,u;if(this.isViewport)h=r.x-window.innerWidth/2+r.width/2,u=-r.y+window.innerHeight/2-r.height/2;else{const w=r.x-c,L=r.y-d;h=w-n/2+r.width/2,u=-L+o/2-r.height/2}e.position.set(h,u,i.zIndex+this.renderOrder*a);const v=r.x,f=r.y;e.userData.basePosition={x:h,y:u},e.userData.originalBasePosition={x:h,y:u},e.userData.baseSize={width:r.width,height:r.height},e.userData.baseDOM={x:v,y:f},e.userData.isFixed=t.isFixed,e.userData.initialScroll={x:window.scrollX,y:window.scrollY};const m=t.element.nodeType===Node.TEXT_NODE?t.element.parentElement:t.element,E=window.getComputedStyle(m);let D=0,A=0;if(E.transform&&E.transform!=="none"){const w=new DOMMatrix(E.transform);D=w.m41,A=w.m42}if(e.userData.baseTransform={x:D,y:A},delete e.userData.originRatioX,delete e.userData.originRatioY,q.update(e.userData.baseMaterial,"BOX",i,"",r.width,r.height,this.qualityFactor,t.isTraveler?(R=this.renderTargets[t.captureLayer-2])==null?void 0:R.texture:this.textureManager.get(t.element)),t.nativeStyles&&t.nativeRect){if(!e.userData.nativeMesh){const $=q.create("BOX",t.nativeStyles,"",t.nativeRect.width,t.nativeRect.height,this.qualityFactor,t.isTraveler?(T=this.renderTargets[t.captureLayer-2])==null?void 0:T.texture:this.textureManager.get(t.element),t.shaderHooks),H=new y.Mesh(e.geometry,$);t.type==="TEXT"&&(H.name="BG_MESH"),this.scene.add(H),e.userData.nativeMesh=H}const w=e.userData.nativeMesh;let L,I;if(this.isViewport)L=t.nativeRect.x-window.innerWidth/2+t.nativeRect.width/2,I=-t.nativeRect.y+window.innerHeight/2-t.nativeRect.height/2;else{const $=t.nativeRect.x-c,H=t.nativeRect.y-d;L=$-n/2+t.nativeRect.width/2,I=-H+o/2-t.nativeRect.height/2}let N=t.nativeRect.width,Q=t.nativeRect.height,ue=L,fe=I;if(t.nativeStyles.transform){const $=t.nativeStyles.transform,H=$.match(/scale\(([\d.]+%?)\)/);if(H){let Y=parseFloat(H[1]);H[1].includes("%")&&(Y/=100),N*=Y,Q*=Y}const ne=$.match(/translate\(([^,]+),\s*([^)]+)\)/);if(ne){const Y=ne[1].trim(),V=ne[2].trim();let p=parseFloat(Y);Y.includes("%")&&(p=p/100*t.nativeRect.width);let M=parseFloat(V);V.includes("%")&&(M=M/100*t.nativeRect.height),ue+=p,fe-=M}const ge=$.match(/translateX\(([^)]+)\)/);if(ge){const Y=ge[1].trim();let V=parseFloat(Y);Y.includes("%")&&(V=V/100*t.nativeRect.width),ue+=V}const pe=$.match(/translateY\(([^)]+)\)/);if(pe){const Y=pe[1].trim();let V=parseFloat(Y);Y.includes("%")&&(V=V/100*t.nativeRect.height),fe-=V}}w.scale.set(N,Q,1),w.position.set(ue,fe,t.nativeStyles.zIndex+this.renderOrder*a),q.update(w.material,"BOX",t.nativeStyles,"",t.nativeRect.width,t.nativeRect.height,this.qualityFactor,t.isTraveler?(C=this.renderTargets[t.captureLayer-2])==null?void 0:C.texture:this.textureManager.get(t.element))}else e.userData.nativeMesh&&(this.scene.remove(e.userData.nativeMesh),e.userData.nativeMesh.material instanceof y.Material&&e.userData.nativeMesh.material.dispose(),delete e.userData.nativeMesh)}updateMeshLayers(e,t){const r=t.visibility&W?B.BASE:B.HIDDEN;if(e.layers.set(r),t.visibility&te&&e.layers.enable(B.SELECTED),e.userData.nativeMesh&&t.nativeLayer!==void 0){const i=e.userData.nativeMesh;if(i.layers.set(B.HIDDEN),t.visibility&W){i.layers.enable(B.getCaptureLayer(t.nativeLayer));for(let l=t.captureLayer;l<=_.MAX_LAYERS+1;l++)l!==t.nativeLayer&&e.layers.enable(B.getCaptureLayer(l))}}else if(t.visibility&W)for(let i=t.captureLayer;i<=_.MAX_LAYERS+1;i++)e.layers.enable(B.getCaptureLayer(i))}captureRenderTarget(e,t,r){if(e.size===0||!r)return;const i=new y.Color,l=this.renderer.getClearAlpha();this.renderer.getClearColor(i),this.renderer.setClearColor(0,0),this.renderer.setRenderTarget(r),this.renderer.clear(),this.renderer.autoClear=!1,this.renderer.setScissorTest(!0),this.camera.layers.set(t);const n=new y.Vector3,o=this.isViewport?window.innerWidth+this.overscan*2:this.targetRect.width,a=this.isViewport?window.innerHeight+this.overscan*2:this.targetRect.height,c=this.renderer.getPixelRatio();for(const d of e){n.setFromMatrixPosition(d.matrixWorld),n.project(this.camera);const h=(n.x+1)/2*o,u=(n.y+1)/2*a;let v=0,f=1;typeof this.clipArea=="number"?f=this.clipArea:this.clipArea.endsWith("%")?f=parseFloat(this.clipArea)/100:this.clipArea.endsWith("px")&&(v=parseFloat(this.clipArea));const m=d.scale.x*f+.5,E=d.scale.y*f+.5,D=h-m/2,A=u-E/2,R=(D*this.qualityFactor-v)/c,T=(A*this.qualityFactor-v)/c,C=(m*this.qualityFactor+v*2)/c,w=(E*this.qualityFactor+v*2)/c;this.renderer.setScissor(R,T,C,w),this.renderer.render(this.scene,this.camera)}this.renderer.setScissorTest(!1),this.renderer.autoClear=!0,this.renderer.setRenderTarget(null),this.camera.layers.set(this.getSceneLayer()),this.renderer.setClearColor(i,l)}render(){for(let e=0;e<_.MAX_LAYERS;e++){const t=e+1;this.captureRenderTarget(this.travelersByLayer[e],B.getCaptureLayer(t),this.renderTargets[e])}this.renderer.render(this.scene,this.camera)}syncMeshesByDOM(){const e=this.targetRect.left+window.scrollX,t=this.targetRect.top+window.scrollY,r=this.renderer.getPixelRatio(),i=this.renderer.domElement.width/r,l=this.renderer.domElement.height/r;this.scene.children.forEach(n=>{const o=n;if(!o.userData||!o.userData.domElement)return;const a=o.userData.domElement;if(!a.isConnected)return;let c;if(a.nodeType===Node.TEXT_NODE){const h=document.createRange();h.selectNode(a),c=h.getBoundingClientRect()}else c=a.getBoundingClientRect();const d=o.userData.domRect;if(!d||Math.abs(c.x-d.x)>.5||Math.abs(c.y-d.y)>.5||Math.abs(c.width-d.width)>.5||Math.abs(c.height-d.height)>.5){o.userData.domRect={x:c.x,y:c.y,width:c.width,height:c.height};let h,u;if(this.isViewport)h=c.x-window.innerWidth/2+c.width/2,u=-c.y+window.innerHeight/2-c.height/2;else{const v=c.x-e,f=c.y-t;h=v-i/2+c.width/2,u=-f+l/2-c.height/2}if(o.position.setX(h),o.position.setY(u),o.scale.set(c.width,c.height,1),o.updateMatrixWorld(),o.material instanceof y.ShaderMaterial&&q.forceUpdateUniforms(o.material,{width:c.width,height:c.height}),o.userData.nativeMesh){const v=o.userData.nativeMesh;let f=c.width,m=c.height,E=h,D=u;if(o.userData.nativeTransform){const A=o.userData.nativeTransform,R=A.match(/scale\(([\d.]+%?)\)/);if(R){let L=parseFloat(R[1]);R[1].includes("%")&&(L/=100),f*=L,m*=L}const T=A.match(/translate\(([^,]+),\s*([^)]+)\)/);if(T){const L=T[1].trim(),I=T[2].trim();let N=parseFloat(L);L.includes("%")&&(N=N/100*c.width);let Q=parseFloat(I);I.includes("%")&&(Q=Q/100*c.height),E+=N,D-=Q}const C=A.match(/translateX\(([^)]+)\)/);if(C){const L=C[1].trim();let I=parseFloat(L);L.includes("%")&&(I=I/100*c.width),E+=I}const w=A.match(/translateY\(([^)]+)\)/);if(w){const L=w[1].trim();let I=parseFloat(L);L.includes("%")&&(I=I/100*c.height),D-=I}}v.position.setX(E),v.position.setY(D),v.scale.set(f,m,1),v.updateMatrixWorld()}}})}}function et(s){const e=s.textContent||"",t=[];let r="",i=null,l=-1;const n=(c,d)=>{for(let h=0;h<c.length;h++){const u=c[h],v=document.createRange();v.setStart(s,d+h),v.setEnd(s,d+h+1);const f=v.getBoundingClientRect();if(f.width===0&&f.height===0){r+=u;continue}l===-1||Math.abs(f.top-l)>f.height/2?(r&&i&&t.push({text:r,rect:{left:i.left,top:i.top,width:i.right-i.left,height:i.bottom-i.top}}),r=u,i={left:f.left,top:f.top,right:f.right,bottom:f.bottom},l=f.top):(r+=u,i&&(i.left=Math.min(i.left,f.left),i.top=Math.min(i.top,f.top),i.right=Math.max(i.right,f.right),i.bottom=Math.max(i.bottom,f.bottom)))}},o=e.match(/[^\s\-]+\-?|\-|\s+/g)||[];let a=0;for(const c of o){const d=document.createRange();d.setStart(s,a),d.setEnd(s,a+c.length);const h=d.getClientRects();if(h.length>1)n(c,a);else{const u=h.length===1?h[0]:d.getBoundingClientRect();if(u.width===0&&u.height===0){r+=c,a+=c.length;continue}l===-1||Math.abs(u.top-l)>u.height/2?(r&&i&&t.push({text:r,rect:{left:i.left,top:i.top,width:i.right-i.left,height:i.bottom-i.top}}),r=c,i={left:u.left,top:u.top,right:u.right,bottom:u.bottom},l=u.top):(r+=c,i&&(i.left=Math.min(i.left,u.left),i.top=Math.min(i.top,u.top),i.right=Math.max(i.right,u.right),i.bottom=Math.max(i.bottom,u.bottom)))}a+=c.length}return r&&i&&t.push({text:r,rect:{left:i.left,top:i.top,width:i.right-i.left,height:i.bottom-i.top}}),t.filter(c=>c.text.trim().length>0&&c.rect.width>0&&c.rect.height>0)}function Ue(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}`,fontSize:s.fontSize,color:s.color,textAlign:s.textAlign||"start",textBaseline:"alphabetic",direction:s.direction||"inherit",lineHeight:t,letterSpacing:r}}function Oe(s,e=Z|ie|Re|ve|he,t,r=1,i=0,l=2,n,o){var H,ne,ge,pe,Y,V;if(s.nodeType===Node.TEXT_NODE){const p=s;if(!p.textContent||!p.textContent.trim())return null;const M=p.textContent.replace(/\s+/g," ");if(M.length===0)return null;const z=et(p);if(z.length===0)return null;const j=p.parentElement,F=j?window.getComputedStyle(j):null;if(!F)return null;const J=Math.min(...z.map(x=>x.rect.left)),P=Math.min(...z.map(x=>x.rect.top)),ee=Math.max(...z.map(x=>x.rect.left+x.rect.width)),k=Math.max(...z.map(x=>x.rect.top+x.rect.height));return{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:p,rect:{x:J+window.scrollX,y:P+window.scrollY,width:ee-J,height:k-P},styles:{backgroundColor:"transparent",backgroundImage:"",opacity:j&&j.dataset[G.KEY]===G.VALUES.HIDE?1:parseFloat(F.opacity),zIndex:(isNaN(parseInt(F.zIndex))?0:parseInt(F.zIndex))+i,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px",isTraveler:!1},textContent:M,textLines:z.map(x=>({text:x.text.trim(),rect:{x:x.rect.left+window.scrollX,y:x.rect.top+window.scrollY,width:x.rect.width,height:x.rect.height}})),textStyles:Ue(F),dirtyMask:e,visibility:t,isTraveler:!1,captureLayer:r,isFixed:F.position==="fixed",nativeLayer:n,nativeStyles:o?re(re({backgroundColor:"transparent",backgroundImage:"",opacity:j&&j.dataset[G.KEY]===G.VALUES.HIDE?1:parseFloat(F.opacity),zIndex:(isNaN(parseInt(F.zIndex))?0:parseInt(F.zIndex))+i,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px",isTraveler:!1},Ue(F)),o):void 0,nativeRect:o?{x:J+window.scrollX,y:P+window.scrollY,width:ee-J,height:k-P}:void 0,children:[]}}if(s.nodeType!==Node.ELEMENT_NODE)return null;const a=s,c=a.dataset[O.KEY];let d=t,h=t;if(c){const p=new Set(c.split(/\s+/));for(const M of p)if(!be.includes(M))throw new Error(`[MirageEngine] Invalid filter token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(p.has(O.VALUES.END))return null;if(p.has(O.VALUES.INCLUDE_TREE)&&p.has(O.VALUES.EXCLUDE_TREE))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(p.has(O.VALUES.INCLUDE_SELF)&&p.has(O.VALUES.EXCLUDE_SELF))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");p.has(O.VALUES.INCLUDE_TREE)?d=d|W:p.has(O.VALUES.EXCLUDE_TREE)&&(d=d&~W),h=d,p.has(O.VALUES.INCLUDE_SELF)?h=h|W:p.has(O.VALUES.EXCLUDE_SELF)&&(h=h&~W)}const u=a.dataset[X.KEY];if(u){const p=new Set(u.split(/\s+/));for(const M of p)if(!be.includes(M))throw new Error(`[MirageEngine] Invalid select token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(p.has(X.VALUES.END))return null;if(p.has(X.VALUES.INCLUDE_TREE)&&p.has(X.VALUES.EXCLUDE_TREE))throw new Error("[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(p.has(X.VALUES.INCLUDE_SELF)&&p.has(X.VALUES.EXCLUDE_SELF))throw new Error("[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element.");p.has(X.VALUES.INCLUDE_TREE)?d=d|te:p.has(X.VALUES.EXCLUDE_TREE)&&(d=d&~te),h=d,p.has(X.VALUES.INCLUDE_SELF)?h=h|te:p.has(X.VALUES.EXCLUDE_SELF)&&(h=h&~te)}const v=a.dataset[_.KEY];let f=!1,m=o?re({},o):{},E=n;if(v){let p=1;const M=v.indexOf("{"),z=v.lastIndexOf("}");let j=v;if(M!==-1&&z!==-1&&z>M){j=v.substring(0,M).trim();const k=v.substring(M,z+1);try{m=new Function("return "+k)()}catch(x){console.warn(`[MirageEngine] Failed to parse travel styles JSON: ${k}`)}}const F=j.split(/\s+/);let J=!1;const P=F.indexOf(_.VALUES.TRAVELER);if(P!==-1){f=!0,J=!0;const k=F[P+1];if(k&&!isNaN(parseInt(k,10)))p=parseInt(k,10);else{const x=F.find(oe=>!isNaN(parseInt(oe,10)));x&&(p=parseInt(x,10))}}const ee=F.indexOf(_.VALUES.NATIVE);if(ee!==-1){const k=F[ee+1];if(k&&!isNaN(parseInt(k,10)))E=parseInt(k,10);else if(!f){const x=F.find(oe=>!isNaN(parseInt(oe,10)));x&&(E=parseInt(x,10))}}if(J){const k=p+1;if(k<r)throw new Error(`[MirageEngine] Traveler layer (${p}) cannot be smaller than inherited capture layer (${r-1}).`);r=Math.min(k,_.MAX_LAYERS+1)}}const D=a.dataset[Se.KEY];let A;D&&(A=JSON.parse(D));const R=a.getBoundingClientRect(),T=window.getComputedStyle(a);if(R.width===0||R.height===0||T.display==="none")return null;let C=a.getAttribute("data-mid");C||(C=Math.random().toString(36).substring(2,11),a.setAttribute("data-mid",C));const w=parseInt(T.zIndex),L=(isNaN(w)?0:w)+i;let I;if(a.tagName==="IMG")I=a.src;else if(a.tagName.toLowerCase()==="svg"){const p=a.cloneNode(!0),M=m==null?void 0:m.color,z=m==null?void 0:m.fill,j=m==null?void 0:m.stroke,F=m==null?void 0:m.opacity,J=(x,oe)=>{const K=window.getComputedStyle(x),me=oe,nt=K.fill===K.color,ot=K.stroke===K.color,we=z||(nt?M:void 0)||K.fill;we&&we!=="none"&&(me.style.fill=we);const Te=j||(ot?M:void 0)||K.stroke;Te&&Te!=="none"&&(me.style.stroke=Te),K.strokeWidth&&K.strokeWidth!=="0px"&&(me.style.strokeWidth=K.strokeWidth);const _e=M||K.color;_e&&(me.style.color=_e);const xe=F||K.opacity;xe&&xe!=="1"&&(me.style.opacity=xe);for(let ye=0;ye<x.children.length;ye++)J(x.children[ye],oe.children[ye])};J(a,p);const P=a.getBoundingClientRect(),ee=window.devicePixelRatio*l;p.hasAttribute("viewBox")||p.setAttribute("viewBox",`0 0 ${P.width} ${P.height}`),p.setAttribute("width",(P.width*ee).toString()),p.setAttribute("height",(P.height*ee).toString());let k=new XMLSerializer().serializeToString(p);k.includes("xmlns=")||(k=k.replace("<svg",'<svg xmlns="http://www.w3.org/2000/svg"')),I=`data:image/svg+xml;utf8,${encodeURIComponent(k)}`}else if(T.backgroundImage&&T.backgroundImage!=="none"){const p=T.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);p&&(I=p[1])}const N={backgroundColor:T.backgroundColor,backgroundImage:T.backgroundImage,opacity:a.dataset[G.KEY]===G.VALUES.HIDE?1:parseFloat(T.opacity),zIndex:L,borderRadius:T.borderRadius,borderColor:T.borderColor,borderWidth:T.borderWidth,imageSrc:I,isTraveler:f},Q=N;let ue,fe;const $=[];return a.tagName.toLowerCase()!=="svg"&&Array.from(a.childNodes).forEach(p=>{const M=p.nodeType===Node.TEXT_NODE?h:d,z=Oe(p,e,M,r,L,l,p.nodeType===Node.TEXT_NODE?E:void 0,p.nodeType===Node.TEXT_NODE&&Object.keys(m).length>0?m:void 0);z&&$.push(z)}),{id:C,type:"BOX",element:a,rect:{x:R.left+window.scrollX,y:R.top+window.scrollY,width:R.width,height:R.height},styles:Q,textContent:ue,textStyles:fe,dirtyMask:e,visibility:h,isTraveler:f,captureLayer:r,nativeLayer:E,nativeStyles:E!==void 0?Be(re({},N),{backgroundColor:(H=m.backgroundColor)!=null?H:N.backgroundColor,backgroundImage:(ne=m.backgroundImage)!=null?ne:N.backgroundImage,opacity:(ge=m.opacity)!=null?ge:N.opacity,zIndex:m.zIndex!==void 0?m.zIndex+L:N.zIndex,borderRadius:(pe=m.borderRadius)!=null?pe:N.borderRadius,borderColor:(Y=m.borderColor)!=null?Y:N.borderColor,borderWidth:(V=m.borderWidth)!=null?V:N.borderWidth,isTraveler:N.isTraveler,transform:m.transform}):void 0,nativeRect:E!==void 0?{x:m.x!==void 0?parseFloat(m.x):R.left+window.scrollX,y:m.y!==void 0?parseFloat(m.y):R.top+window.scrollY,width:m.width!==void 0?parseFloat(m.width):R.width,height:m.height!==void 0?parseFloat(m.height):R.height}:void 0,isFixed:T.position==="fixed",children:$,shaderHooks:A}}function tt(s,e){e.size!==0&&e.forEach((t,r)=>{var l,n,o,a;const i=s.get(r);!i||!i.userData.basePosition||(q.forceUpdateUniforms(i.material,{backgroundColor:t.backgroundColor,backgroundImage:t.backgroundImage,opacity:t.opacity,borderRadius:(n=t.borderRadius)!=null?n:(l=i.userData.baseStyles)==null?void 0:l.borderRadius}),i.userData.nativeMesh&&q.forceUpdateUniforms(i.userData.nativeMesh.material,{backgroundColor:t.backgroundColor,backgroundImage:t.backgroundImage,opacity:t.opacity,borderRadius:(a=t.borderRadius)!=null?a:(o=i.userData.baseStyles)==null?void 0:o.borderRadius}))})}class rt{constructor(e,t,r,i){g(this,"target");g(this,"renderer");g(this,"registry");g(this,"isTravelEnabled",!1);g(this,"tracker");this.target=e,this.renderer=t,this.registry=r,this.tracker=new Me(e,{resizeDebounce:i.resizeDebounce}),this.tracker.onLayoutChange.add((l,n)=>{document.querySelector(`[${_.NAME}~='${_.VALUES.TRAVELER}']`)!==null&&!this.isTravelEnabled&&(this.isTravelEnabled=!0,this.renderer.createRenderTarget());const a=Oe(this.target,l,W,1,0,this.renderer.qualityFactor);a&&this.renderer.syncScene(a,n)}),this.tracker.onStyleChange.add(l=>{tt(this.registry,l)}),this.tracker.onRender.add(()=>{this.renderer.syncMeshesByDOM(),this.renderer.render()})}start(){this.tracker.start()}stop(){this.tracker.stop()}}class it{constructor(){g(this,"store");this.store=new WeakMap}register(e,t){this.store.set(e,t)}get(e){return this.store.get(e)}has(e){return this.store.has(e)}remove(e){this.store.delete(e)}}class st{constructor(e,t){g(this,"renderer");g(this,"syncer");g(this,"target");g(this,"registry");var i,l,n;if(this.target=e,this.registry=new it,!document.getElementById("mirage-engine-styles")){const o=document.createElement("style");o.id="mirage-engine-styles",o.textContent=`
+        [${G.NAME}="${G.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
-      `,document.head.appendChild(a)}let r;if(t.mode==="duplicate"?r=(l=(i=t.container)!=null?i:this.target.parentElement)!=null?l: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 Qe(this.target,t,r,this.registry),this.renderer.mount(),this.syncer=new rt(this.target,this.renderer,this.registry,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}getTracker(){return this.syncer.tracker}updateUniforms(e,t){this.renderer.updateUniforms(e,t)}getCanvas(){return this.renderer.canvas}test(){const e=this.registry.get(document.querySelector("#box2"));if(!e)return;const t={ArrowRight:!1,ArrowLeft:!1,ArrowUp:!1,ArrowDown:!1};window.addEventListener("keydown",l=>{t[l.key]!==void 0&&(t[l.key]=!0)}),window.addEventListener("keyup",l=>{t[l.key]!==void 0&&(t[l.key]=!1)});const r=2,i=()=>{requestAnimationFrame(i),t.ArrowRight&&e.position.setX(e.position.x+r),t.ArrowLeft&&e.position.setX(e.position.x-r),t.ArrowUp&&e.position.setY(e.position.y+r),t.ArrowDown&&e.position.setY(e.position.y-r)};i()}}b.ALLOWED_FILTERS=be,b.ATTR_DOM=P,b.ATTR_FILTER=O,b.ATTR_SANDWICH=Xe,b.ATTR_SELECT=X,b.ATTR_SHADER=Se,b.ATTR_TRAVEL=_,b.DIRTY_CONTENT=ve,b.DIRTY_NONE=le,b.DIRTY_RECT=Z,b.DIRTY_STRUCTURE=he,b.DIRTY_STYLE=ie,b.DIRTY_ZINDEX=Re,b.EXCLUDED=ze,b.Engine=st,b.SELECT_LAYER=te,b.THREE_LAYERS=B,b.TRAVEL_VALUES=ce,b.Tracker=Me,b.USER_LAYER=G,b.extractFromStyle=Le,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
+      `,document.head.appendChild(o)}let r;if(t.mode==="duplicate"?r=(l=(i=t.container)!=null?i:this.target.parentElement)!=null?l: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 Qe(this.target,t,r,this.registry),this.renderer.mount(),this.syncer=new rt(this.target,this.renderer,this.registry,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}getTracker(){return this.syncer.tracker}updateUniforms(e,t){this.renderer.updateUniforms(e,t)}getCanvas(){return this.renderer.canvas}test(){const e=this.registry.get(document.querySelector("#box2"));if(!e)return;const t={ArrowRight:!1,ArrowLeft:!1,ArrowUp:!1,ArrowDown:!1};window.addEventListener("keydown",l=>{t[l.key]!==void 0&&(t[l.key]=!0)}),window.addEventListener("keyup",l=>{t[l.key]!==void 0&&(t[l.key]=!1)});const r=2,i=()=>{requestAnimationFrame(i),t.ArrowRight&&e.position.setX(e.position.x+r),t.ArrowLeft&&e.position.setX(e.position.x-r),t.ArrowUp&&e.position.setY(e.position.y+r),t.ArrowDown&&e.position.setY(e.position.y-r)};i()}}b.ALLOWED_FILTERS=be,b.ATTR_DOM=G,b.ATTR_FILTER=O,b.ATTR_SANDWICH=Xe,b.ATTR_SELECT=X,b.ATTR_SHADER=Se,b.ATTR_TRAVEL=_,b.DIRTY_CONTENT=ve,b.DIRTY_NONE=le,b.DIRTY_RECT=Z,b.DIRTY_STRUCTURE=he,b.DIRTY_STYLE=ie,b.DIRTY_ZINDEX=Re,b.EXCLUDED=ze,b.Engine=st,b.SELECT_LAYER=te,b.THREE_LAYERS=B,b.TRAVEL_VALUES=ce,b.Tracker=Me,b.USER_LAYER=W,b.extractFromStyle=Le,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirage-engine/core",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@types/three": "^0.181.0",
-    "@mirage-engine/dom-tracker": "0.3.10",
-    "@mirage-engine/painter": "1.0.4"
+    "@mirage-engine/painter": "1.0.4",
+    "@mirage-engine/dom-tracker": "0.3.10"
   },
   "private": false,
   "publishConfig": {

package/src/renderer/Renderer.ts

@@ -515,38 +515,39 @@ export class Renderer {
       if (!child.name.startsWith("TEXT_CHILD")) return;
       const textMesh = child as THREE.Mesh;
 
-      const layerNum =
-        node.visibility & USER_LAYER ? THREE_LAYERS.BASE : THREE_LAYERS.HIDDEN;
-      textMesh.layers.set(layerNum);
+      if (isNative && node.nativeLayer !== undefined) {
+        textMesh.layers.set(THREE_LAYERS.HIDDEN);
+        if (node.visibility & USER_LAYER) {
+          textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(node.nativeLayer));
+        }
+      } else {
+        const layerNum =
+          node.visibility & USER_LAYER ? THREE_LAYERS.BASE : THREE_LAYERS.HIDDEN;
+        textMesh.layers.set(layerNum);
 
-      if (node.visibility & SELECT_LAYER) {
-        textMesh.layers.enable(THREE_LAYERS.SELECTED);
-      }
+        if (node.visibility & SELECT_LAYER) {
+          textMesh.layers.enable(THREE_LAYERS.SELECTED);
+        }
 
-      if (node.visibility & USER_LAYER) {
-        if (
-          !isNative &&
-          node.nativeLayer !== undefined &&
-          node.nativeStyles !== undefined
-        ) {
-          for (let i = node.captureLayer; i < node.nativeLayer; i++) {
-            textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
-          }
-        } else if (isNative && node.nativeLayer !== undefined) {
-          for (
-            let i = Math.max(node.captureLayer, node.nativeLayer);
-            i <= ATTR_TRAVEL.MAX_LAYERS + 1;
-            i++
-          ) {
-            textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
-          }
-        } else {
-          for (
-            let i = node.captureLayer;
-            i <= ATTR_TRAVEL.MAX_LAYERS + 1;
-            i++
+        if (node.visibility & USER_LAYER) {
+          if (
+            !isNative &&
+            node.nativeLayer !== undefined &&
+            node.nativeStyles !== undefined
           ) {
-            textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+            for (let i = node.captureLayer; i <= ATTR_TRAVEL.MAX_LAYERS + 1; i++) {
+              if (i !== node.nativeLayer) {
+                textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+              }
+            }
+          } else {
+            for (
+              let i = node.captureLayer;
+              i <= ATTR_TRAVEL.MAX_LAYERS + 1;
+              i++
+            ) {
+              textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+            }
           }
         }
       }
@@ -765,15 +766,12 @@ export class Renderer {
       nativeMesh.layers.set(THREE_LAYERS.HIDDEN);
 
       if (node.visibility & USER_LAYER) {
-        for (let i = node.captureLayer; i < node.nativeLayer; i++) {
-          mesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
-        }
-        for (
-          let i = Math.max(node.captureLayer, node.nativeLayer);
-          i <= ATTR_TRAVEL.MAX_LAYERS + 1;
-          i++
-        ) {
-          nativeMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+        nativeMesh.layers.enable(THREE_LAYERS.getCaptureLayer(node.nativeLayer));
+        
+        for (let i = node.captureLayer; i <= ATTR_TRAVEL.MAX_LAYERS + 1; i++) {
+          if (i !== node.nativeLayer) {
+            mesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+          }
         }
       }
     } else {