mirage-engine 0.3.5 → 0.3.7

package/dist/mirage-engine.js

@@ -58,7 +58,7 @@ const Re = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
   VALUES: Re
-}, V = {
+}, Y = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
   VALUES: Re
@@ -671,7 +671,7 @@ function De(s, e) {
   const t = e.split("/")[0].trim().split(/\s+/), i = K(t[0]), r = K((a = t[1]) != null ? a : t[0]), o = K((c = t[2]) != null ? c : t[0]), n = K((d = (l = t[3]) != null ? l : t[1]) != null ? d : t[0]);
   s.set(i, r, o, n);
 }
-const Y = {
+const N = {
   create(s, e, t, i, r, o = 2, n = null, a) {
     return s === "BOX" ? Ze(
       e,
@@ -802,7 +802,7 @@ class rt {
     var a, c, l, d, h;
     this.target = e, this.mountContainer = i, this.registry = r, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (c = t.canvasSize) != null ? c : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new tt((f, p) => {
       const g = this.registry.get(f);
-      g && g.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(g.material, { texture: p });
+      g && g.material instanceof y.ShaderMaterial && N.forceUpdateUniforms(g.material, { texture: p });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
     const o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
     this.camera = new y.OrthographicCamera(
@@ -874,12 +874,12 @@ class rt {
   updateUniforms(e, t) {
     const i = this.registry.get(e);
     i && (i.traverse((r) => {
-      r.isMesh && r.material && Y.forceUpdateUniforms(
+      r.isMesh && r.material && N.forceUpdateUniforms(
         r.material,
         t
       );
     }), i.userData.nativeMesh && i.userData.nativeMesh.traverse((r) => {
-      r.isMesh && r.material && Y.forceUpdateUniforms(
+      r.isMesh && r.material && N.forceUpdateUniforms(
         r.material,
         t
       );
@@ -902,7 +902,9 @@ class rt {
         this.scene.remove(h);
         for (const f of this.travelersByLayer)
           f.delete(h);
-        this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach((f) => f.dispose()) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((f) => {
+        this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach(
+          (f) => f.dispose()
+        ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((f) => {
           f instanceof y.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((p) => p.dispose()) : f.material.dispose()));
         }), this.registry.remove(d), this.textureManager.unregister(d);
       }
@@ -917,7 +919,7 @@ class rt {
     let t = this.registry.get(e.element);
     const i = JSON.stringify(e.shaderHooks || null);
     if (t && t.userData.shaderHash !== i && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
-      const o = new y.PlaneGeometry(1, 1), n = e.isTraveler ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), a = Y.create(
+      const o = new y.PlaneGeometry(1, 1), n = e.isTraveler ? (r = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : r.texture : this.textureManager.get(e.element), a = N.create(
         "BOX",
         e.styles,
         "",
@@ -939,7 +941,11 @@ class rt {
       for (const o of e.children)
         this.reconcileNode(o);
     else
-      e.type === "TEXT" && (this.reconcileTextChild(t, e, !1), t.userData.nativeMesh && e.nativeStyles && this.reconcileTextChild(t.userData.nativeMesh, e, !0));
+      e.type === "TEXT" && (this.reconcileTextChild(t, e, !1), t.userData.nativeMesh && e.nativeStyles && this.reconcileTextChild(
+        t.userData.nativeMesh,
+        e,
+        !0
+      ));
   }
   reconcileTextChild(e, t, i) {
     var l;
@@ -956,7 +962,7 @@ class rt {
       });
       const h = t.rect, f = h.x + h.width / 2, p = h.y + h.height / 2;
       r.forEach((g, m) => {
-        const E = Y.create(
+        const E = N.create(
           "TEXT",
           o,
           g.text,
@@ -967,10 +973,10 @@ class rt {
         M.name = `TEXT_CHILD_${m}`;
         const w = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, b = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
         M.scale.set(w, b, 1);
-        const U = g.rect.x + g.rect.width / 2, A = g.rect.y + g.rect.height / 2, O = U - f, N = -(A - p);
+        const U = g.rect.x + g.rect.width / 2, A = g.rect.y + g.rect.height / 2, O = U - f, z = -(A - p);
         M.position.set(
           t.rect.width === 0 ? 0 : O / t.rect.width,
-          t.rect.height === 0 ? 0 : N / t.rect.height,
+          t.rect.height === 0 ? 0 : z / t.rect.height,
           5e-3
         ), e.add(M);
       }), e.userData.textChildStyleHash = n;
@@ -1023,7 +1029,7 @@ class rt {
       const A = new DOMMatrix(E.transform);
       L = A.m41, M = A.m42;
     }
-    if (e.userData.baseTransform = { x: L, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, Y.update(
+    if (e.userData.baseTransform = { x: L, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, N.update(
       e.userData.baseMaterial,
       "BOX",
       r,
@@ -1034,7 +1040,7 @@ class rt {
       t.isTraveler ? (w = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : w.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const k = Y.create(
+        const k = N.create(
           "BOX",
           t.nativeStyles,
           "",
@@ -1047,18 +1053,18 @@ class rt {
         t.type === "TEXT" && (P.name = "BG_MESH"), this.scene.add(P), e.userData.nativeMesh = P;
       }
       const A = e.userData.nativeMesh;
-      let O, N;
+      let O, z;
       if (this.isViewport)
-        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, N = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        O = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, z = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
         const k = t.nativeRect.x - l, P = t.nativeRect.y - d;
-        O = k - n / 2 + t.nativeRect.width / 2, N = -P + a / 2 - t.nativeRect.height / 2;
+        O = k - n / 2 + t.nativeRect.width / 2, z = -P + a / 2 - t.nativeRect.height / 2;
       }
       A.scale.set(t.nativeRect.width, t.nativeRect.height, 1), A.position.set(
         O,
-        N,
+        z,
         t.nativeStyles.zIndex + this.renderOrder * c
-      ), Y.update(
+      ), N.update(
         A.material,
         "BOX",
         t.nativeStyles,
@@ -1129,7 +1135,12 @@ class rt {
         l = c.getBoundingClientRect();
       const d = a.userData.domRect;
       if (!d || Math.abs(l.x - d.x) > 0.5 || Math.abs(l.y - d.y) > 0.5 || Math.abs(l.width - d.width) > 0.5 || Math.abs(l.height - d.height) > 0.5) {
-        a.userData.domRect = { x: l.x, y: l.y, width: l.width, height: l.height };
+        a.userData.domRect = {
+          x: l.x,
+          y: l.y,
+          width: l.width,
+          height: l.height
+        };
         let h, f;
         if (this.isViewport)
           h = l.x - window.innerWidth / 2 + l.width / 2, f = -l.y + window.innerHeight / 2 - l.height / 2;
@@ -1137,7 +1148,7 @@ class rt {
           const p = l.x - e, g = l.y - t;
           h = p - r / 2 + l.width / 2, f = -g + o / 2 - l.height / 2;
         }
-        if (a.position.setX(h), a.position.setY(f), a.scale.set(l.width, l.height, 1), a.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(a.material, {
+        if (a.position.setX(h), a.position.setY(f), a.scale.set(l.width, l.height, 1), a.material instanceof y.ShaderMaterial && N.forceUpdateUniforms(a.material, {
           width: l.width,
           height: l.height
         }), a.userData.nativeMesh) {
@@ -1255,15 +1266,15 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
     const B = v.parentElement, S = B ? window.getComputedStyle(B) : null;
     if (!S)
       return null;
-    const z = Math.min(...D.map((T) => T.rect.left)), x = Math.min(...D.map((T) => T.rect.top)), X = Math.max(...D.map((T) => T.rect.left + T.rect.width)), G = Math.max(...D.map((T) => T.rect.top + T.rect.height));
+    const X = Math.min(...D.map((T) => T.rect.left)), x = Math.min(...D.map((T) => T.rect.top)), V = Math.max(...D.map((T) => T.rect.left + T.rect.width)), G = Math.max(...D.map((T) => T.rect.top + T.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: v,
       rect: {
-        x: z + window.scrollX,
+        x: X + window.scrollX,
         y: x + window.scrollY,
-        width: X - z,
+        width: V - X,
         height: G - x
       },
       styles: {
@@ -1304,9 +1315,9 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
         isTraveler: !1
       }, Le(S)), a) : void 0,
       nativeRect: a ? {
-        x: z + window.scrollX,
+        x: X + window.scrollX,
         y: x + window.scrollY,
-        width: X - z,
+        width: V - X,
         height: G - x
       } : void 0,
       children: []
@@ -1335,7 +1346,7 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
       );
     v.has(F.VALUES.INCLUDE_TREE) ? d = d | W : v.has(F.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, v.has(F.VALUES.INCLUDE_SELF) ? h = h | W : v.has(F.VALUES.EXCLUDE_SELF) && (h = h & ~W);
   }
-  const f = c.dataset[V.KEY];
+  const f = c.dataset[Y.KEY];
   if (f) {
     const v = new Set(f.split(/\s+/));
     for (const C of v)
@@ -1343,17 +1354,17 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
         throw new Error(
           `[MirageEngine] Invalid select token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(V.VALUES.END))
+    if (v.has(Y.VALUES.END))
       return null;
-    if (v.has(V.VALUES.INCLUDE_TREE) && v.has(V.VALUES.EXCLUDE_TREE))
+    if (v.has(Y.VALUES.INCLUDE_TREE) && v.has(Y.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (v.has(V.VALUES.INCLUDE_SELF) && v.has(V.VALUES.EXCLUDE_SELF))
+    if (v.has(Y.VALUES.INCLUDE_SELF) && v.has(Y.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(V.VALUES.INCLUDE_TREE) ? d = d | j : v.has(V.VALUES.EXCLUDE_TREE) && (d = d & ~j), h = d, v.has(V.VALUES.INCLUDE_SELF) ? h = h | j : v.has(V.VALUES.EXCLUDE_SELF) && (h = h & ~j);
+    v.has(Y.VALUES.INCLUDE_TREE) ? d = d | j : v.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~j), h = d, v.has(Y.VALUES.INCLUDE_SELF) ? h = h | j : v.has(Y.VALUES.EXCLUDE_SELF) && (h = h & ~j);
   }
   const p = c.dataset[I.KEY];
   let g = !1, m = a ? $({}, a) : {}, E = n;
@@ -1366,24 +1377,24 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
       const x = p.substring(C, D + 1);
       try {
         m = new Function("return " + x)();
-      } catch (X) {
+      } catch (V) {
         console.warn(
           `[MirageEngine] Failed to parse travel styles JSON: ${x}`
         );
       }
     }
     const S = B.split(/\s+/);
-    let z = !1;
+    let X = !1;
     if (S.includes(I.VALUES.TRAVELER)) {
-      g = !0, z = !0;
-      const x = S.find((X) => !isNaN(parseInt(X, 10)));
+      g = !0, X = !0;
+      const x = S.find((V) => !isNaN(parseInt(V, 10)));
       x && (v = parseInt(x, 10));
     } else if (S.includes(I.VALUES.NATIVE)) {
       g = !1;
-      const x = S.find((X) => !isNaN(parseInt(X, 10)));
+      const x = S.find((V) => !isNaN(parseInt(V, 10)));
       x && (E = parseInt(x, 10));
     }
-    if (z) {
+    if (X) {
       const x = v + 1;
       if (x < i)
         throw new Error(
@@ -1401,11 +1412,11 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
   let U = c.getAttribute("data-mid");
   U || (U = Math.random().toString(36).substring(2, 11), c.setAttribute("data-mid", U));
   const A = parseInt(b.zIndex), O = (isNaN(A) ? 0 : A) + r;
-  let N;
+  let z;
   if (c.tagName === "IMG")
-    N = c.src;
+    z = c.src;
   else if (c.tagName.toLowerCase() === "svg") {
-    const v = c.cloneNode(!0), C = m == null ? void 0 : m.color, D = m == null ? void 0 : m.fill, B = m == null ? void 0 : m.stroke, S = m == null ? void 0 : m.opacity, z = (T, ve) => {
+    const v = c.cloneNode(!0), C = m == null ? void 0 : m.color, D = m == null ? void 0 : m.fill, B = m == null ? void 0 : m.stroke, S = m == null ? void 0 : m.opacity, X = (T, ve) => {
       const _ = window.getComputedStyle(T), J = ve, Oe = _.fill === _.color, Be = _.stroke === _.color, ie = D || (Oe ? C : void 0) || _.fill;
       ie && ie !== "none" && (J.style.fill = ie);
       const se = B || (Be ? C : void 0) || _.stroke;
@@ -1415,19 +1426,19 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
       const ne = S || _.opacity;
       ne && ne !== "1" && (J.style.opacity = ne);
       for (let ee = 0; ee < T.children.length; ee++)
-        z(T.children[ee], ve.children[ee]);
+        X(T.children[ee], ve.children[ee]);
     };
-    z(c, v);
-    const x = c.getBoundingClientRect(), X = window.devicePixelRatio * o;
-    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${x.width} ${x.height}`), v.setAttribute("width", (x.width * X).toString()), v.setAttribute("height", (x.height * X).toString());
+    X(c, v);
+    const x = c.getBoundingClientRect(), V = window.devicePixelRatio * o;
+    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${x.width} ${x.height}`), v.setAttribute("width", (x.width * V).toString()), v.setAttribute("height", (x.height * V).toString());
     let G = new XMLSerializer().serializeToString(v);
     G.includes("xmlns=") || (G = G.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), N = `data:image/svg+xml;utf8,${encodeURIComponent(G)}`;
+    )), z = `data:image/svg+xml;utf8,${encodeURIComponent(G)}`;
   } else if (b.backgroundImage && b.backgroundImage !== "none") {
     const v = b.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    v && (N = v[1]);
+    v && (z = v[1]);
   }
   const k = {
     backgroundColor: b.backgroundColor,
@@ -1437,7 +1448,7 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
     borderRadius: b.borderRadius,
     borderColor: b.borderColor,
     borderWidth: b.borderWidth,
-    imageSrc: N,
+    imageSrc: z,
     isTraveler: g
   }, P = k;
   let Ie, Ue;
@@ -1495,15 +1506,20 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
 }
 function st(s, e) {
   e.size !== 0 && e.forEach((t, i) => {
-    var o, n;
+    var o, n, a, c;
     const r = s.get(i);
-    !r || !r.userData.basePosition || Y.forceUpdateUniforms(r.material, {
+    !r || !r.userData.basePosition || (N.forceUpdateUniforms(r.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
       borderRadius: (n = t.borderRadius) != null ? n : (o = r.userData.baseStyles) == null ? void 0 : o.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    });
+    }), r.userData.nativeMesh && N.forceUpdateUniforms(r.userData.nativeMesh.material, {
+      backgroundColor: t.backgroundColor,
+      backgroundImage: t.backgroundImage,
+      opacity: t.opacity,
+      borderRadius: (c = t.borderRadius) != null ? c : (a = r.userData.baseStyles) == null ? void 0 : a.borderRadius
+    }));
   });
 }
 class nt {

package/dist/mirage-engine.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirage-engine",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "An engine that mirrors HTML DOM elements to a WebGL scene in real-time.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -21,9 +21,9 @@
     "dist"
   ],
   "dependencies": {
-    "@mirage-engine/core": "0.3.5",
-    "@mirage-engine/sandwich": "0.2.4",
-    "@mirage-engine/painter": "1.0.2"
+    "@mirage-engine/painter": "1.0.2",
+    "@mirage-engine/sandwich": "0.2.6",
+    "@mirage-engine/core": "0.3.7"
   },
   "peerDependencies": {
     "three": "^0.160.0"