mirage-engine 0.3.9 → 0.3.10

package/dist/mirage-engine.js

@@ -34,7 +34,7 @@ const Le = {
   INCLUDE_SELF: "include-self",
   EXCLUDE_SELF: "exclude-self",
   END: "end"
-}, P = {
+}, G = {
   NAME: "data-mirage-dom",
   KEY: "mirageDom",
   VALUES: {
@@ -59,11 +59,11 @@ const Le = {
   KEY: "mirageTravel",
   VALUES: xe,
   MAX_LAYERS: Object.keys(xe).length - 1
-}, z = {
+}, X = {
   NAME: "data-mirage-filter",
   KEY: "mirageFilter",
   VALUES: Le
-}, Y = {
+}, W = {
   NAME: "data-mirage-select",
   KEY: "mirageSelect",
   VALUES: Le
@@ -192,12 +192,12 @@ class Me {
     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, K = 2, D = {
+const H = 1, K = 2, U = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (s) => 31 - s,
   HIDDEN: 31
-}, Ce = Object.values(z.VALUES);
+}, Ce = Object.values(X.VALUES);
 class Ae {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
@@ -257,9 +257,9 @@ class Pe extends y.MeshBasicMaterial {
     this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(a, 0, 0, a, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
     const h = this.wrapText(t, i), f = r.lineHeight, p = Ae.getBaseline(r.font);
     h.forEach((g, m) => {
-      const x = m * f + p;
-      let S = 0;
-      r.textAlign === "center" ? S = i / 2 : r.textAlign === "right" && (S = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, S, x);
+      const b = m * f + p;
+      let R = 0;
+      r.textAlign === "center" ? R = i / 2 : r.textAlign === "right" && (R = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, R, b);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
@@ -512,43 +512,43 @@ baseColor = blendSrcOver(baseColor, texColor);`, Te = {
   baseColorChunk: Qe
 };
 function Ze(s, e, t, r = null, i) {
-  var E;
+  var x;
   const c = r !== null || !!s.imageSrc;
   let n = "";
   const o = {};
   if (i != null && i.uniforms)
-    for (const [b, w] of Object.entries(i.uniforms))
-      typeof w == "number" ? (n += `uniform float ${b};
-`, o[b] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${b};
-`, o[b] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${b};
-`, o[b] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${b};
-`, o[b] = { value: new y.Vector4(...w) }) : (n += `uniform float ${b};
-`, o[b] = { value: w });
+    for (const [C, w] of Object.entries(i.uniforms))
+      typeof w == "number" ? (n += `uniform float ${C};
+`, o[C] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${C};
+`, o[C] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${C};
+`, o[C] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${C};
+`, o[C] = { value: new y.Vector4(...w) }) : (n += `uniform float ${C};
+`, o[C] = { value: w });
   const a = i !== void 0, l = (c || a ? Se.declChunk : "") + `
 ` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 `, h = s.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = c || a ? Se.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", m = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), x = ee(s.backgroundColor), S = ee(s.borderColor), L = {
+`, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = c || a ? Se.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", m = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), b = ee(s.backgroundColor), R = ee(s.borderColor), L = {
     uSize: { value: new y.Vector2(e, t) },
     uBgColor: {
       value: new y.Vector4(
-        x.color.r,
-        x.color.g,
-        x.color.b,
-        x.alpha
+        b.color.r,
+        b.color.g,
+        b.color.b,
+        b.alpha
       )
     },
     uBorderColor: {
       value: new y.Vector4(
-        S.color.r,
-        S.color.g,
-        S.color.b,
-        S.alpha
+        R.color.r,
+        R.color.g,
+        R.color.b,
+        R.alpha
       )
     },
     uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
     uBorderWidth: { value: J(s.borderWidth) },
-    uOpacity: { value: (E = s.opacity) != null ? E : 1 },
+    uOpacity: { value: (x = s.opacity) != null ? x : 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new y.Vector2(1, 1) },
     uTextureOffset: { value: new y.Vector2(0, 0) },
@@ -696,7 +696,7 @@ function De(s, e, t = 0) {
   const r = e.split("/")[0].trim().split(/\s+/), i = J(r[0], t), c = J((a = r[1]) != null ? a : r[0], t), n = J((l = r[2]) != null ? l : r[0], t), o = J((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
   s.set(i, c, n, o);
 }
-const X = {
+const V = {
   create(s, e, t, r, i, c = 2, n = null, o) {
     return s === "BOX" ? Ze(
       e,
@@ -827,7 +827,7 @@ class rt {
     var o, a, l, d, h;
     this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new tt((f, p) => {
       const g = this.registry.get(f);
-      g && g.material instanceof y.ShaderMaterial && X.forceUpdateUniforms(g.material, { texture: p });
+      g && g.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(g.material, { texture: p });
     }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
     const c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
     this.camera = new y.OrthographicCamera(
@@ -849,7 +849,7 @@ class rt {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? D.SELECTED : D.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? U.SELECTED : U.BASE;
   }
   createRenderTarget() {
     for (let e = 0; e < O.MAX_LAYERS; e++) {
@@ -899,12 +899,12 @@ class rt {
   updateUniforms(e, t) {
     const r = this.registry.get(e);
     r && (r.traverse((i) => {
-      i.isMesh && i.material && X.forceUpdateUniforms(
+      i.isMesh && i.material && V.forceUpdateUniforms(
         i.material,
         t
       );
     }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
-      i.isMesh && i.material && X.forceUpdateUniforms(
+      i.isMesh && i.material && V.forceUpdateUniforms(
         i.material,
         t
       );
@@ -944,7 +944,7 @@ class rt {
     let t = this.registry.get(e.element);
     const r = JSON.stringify(e.shaderHooks || null);
     if (t && t.userData.shaderHash !== r && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
-      const n = new y.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = X.create(
+      const n = new y.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = V.create(
         "BOX",
         e.styles,
         "",
@@ -981,27 +981,27 @@ class rt {
       e.children.filter(
         (g) => g.name.startsWith("TEXT_CHILD")
       ).forEach((g) => {
-        var x;
+        var b;
         const m = g;
-        (x = m.material.map) == null || x.dispose(), m.geometry.dispose(), e.remove(m);
+        (b = m.material.map) == null || b.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 = X.create(
+        const b = V.create(
           "TEXT",
           c,
           g.text,
           g.rect.width,
           g.rect.height,
           this.qualityFactor
-        ), S = new y.PlaneGeometry(1, 1), L = new y.Mesh(S, x);
+        ), R = new y.PlaneGeometry(1, 1), L = new y.Mesh(R, b);
         L.name = `TEXT_CHILD_${m}`;
-        const T = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, E = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
-        L.scale.set(T, E, 1);
-        const b = g.rect.x + g.rect.width / 2, w = g.rect.y + g.rect.height / 2, k = b - f, U = -(w - p);
+        const T = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, x = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
+        L.scale.set(T, x, 1);
+        const C = g.rect.x + g.rect.width / 2, w = g.rect.y + g.rect.height / 2, S = C - f, M = -(w - p);
         L.position.set(
-          t.rect.width === 0 ? 0 : k / t.rect.width,
-          t.rect.height === 0 ? 0 : U / t.rect.height,
+          t.rect.width === 0 ? 0 : S / t.rect.width,
+          t.rect.height === 0 ? 0 : M / t.rect.height,
           5e-3
         ), e.add(L);
       }), e.userData.textChildStyleHash = n;
@@ -1009,21 +1009,21 @@ class rt {
     e.children.forEach((d) => {
       if (!d.name.startsWith("TEXT_CHILD"))
         return;
-      const h = d, f = t.visibility & W ? D.BASE : D.HIDDEN;
-      if (h.layers.set(f), t.visibility & K && h.layers.enable(D.SELECTED), t.visibility & W)
+      const h = d, f = t.visibility & H ? U.BASE : U.HIDDEN;
+      if (h.layers.set(f), t.visibility & K && h.layers.enable(U.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(D.getCaptureLayer(p));
+            h.layers.enable(U.getCaptureLayer(p));
         else if (r && t.nativeLayer !== void 0)
           for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= O.MAX_LAYERS + 1; p++)
-            h.layers.enable(D.getCaptureLayer(p));
+            h.layers.enable(U.getCaptureLayer(p));
         else
           for (let p = t.captureLayer; p <= O.MAX_LAYERS + 1; p++)
-            h.layers.enable(D.getCaptureLayer(p));
+            h.layers.enable(U.getCaptureLayer(p));
     });
   }
   updateMeshProperties(e, t) {
-    var T, E, b;
+    var T, x, C;
     const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, o = this.renderer.domElement.height / c;
     e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
       x: r.x,
@@ -1038,8 +1038,8 @@ class rt {
     if (this.isViewport)
       h = r.x - window.innerWidth / 2 + r.width / 2, f = -r.y + window.innerHeight / 2 - r.height / 2;
     else {
-      const w = r.x - l, k = r.y - d;
-      h = w - n / 2 + r.width / 2, f = -k + o / 2 - r.height / 2;
+      const w = r.x - l, S = r.y - d;
+      h = w - n / 2 + r.width / 2, f = -S + o / 2 - r.height / 2;
     }
     e.position.set(
       h,
@@ -1048,13 +1048,13 @@ class rt {
     );
     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 S = 0, L = 0;
-    if (x.transform && x.transform !== "none") {
-      const w = new DOMMatrix(x.transform);
-      S = w.m41, L = w.m42;
+    const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, b = window.getComputedStyle(m);
+    let R = 0, L = 0;
+    if (b.transform && b.transform !== "none") {
+      const w = new DOMMatrix(b.transform);
+      R = w.m41, L = w.m42;
     }
-    if (e.userData.baseTransform = { x: S, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, X.update(
+    if (e.userData.baseTransform = { x: R, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, V.update(
       e.userData.baseMaterial,
       "BOX",
       i,
@@ -1065,31 +1065,31 @@ class rt {
       t.isTraveler ? (T = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : T.texture : this.textureManager.get(t.element)
     ), t.nativeStyles && t.nativeRect) {
       if (!e.userData.nativeMesh) {
-        const B = X.create(
+        const I = V.create(
           "BOX",
           t.nativeStyles,
           "",
           t.nativeRect.width,
           t.nativeRect.height,
           this.qualityFactor,
-          t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
+          t.isTraveler ? (x = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : x.texture : this.textureManager.get(t.element),
           t.shaderHooks
-        ), G = new y.Mesh(e.geometry, B);
-        t.type === "TEXT" && (G.name = "BG_MESH"), this.scene.add(G), e.userData.nativeMesh = G;
+        ), F = new y.Mesh(e.geometry, I);
+        t.type === "TEXT" && (F.name = "BG_MESH"), this.scene.add(F), e.userData.nativeMesh = F;
       }
       const w = e.userData.nativeMesh;
-      let k, U;
+      let S, M;
       if (this.isViewport)
-        k = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, U = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
+        S = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, M = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
       else {
-        const B = t.nativeRect.x - l, G = t.nativeRect.y - d;
-        k = B - n / 2 + t.nativeRect.width / 2, U = -G + o / 2 - t.nativeRect.height / 2;
+        const I = t.nativeRect.x - l, F = t.nativeRect.y - d;
+        S = I - n / 2 + t.nativeRect.width / 2, M = -F + o / 2 - t.nativeRect.height / 2;
       }
       w.scale.set(t.nativeRect.width, t.nativeRect.height, 1), w.position.set(
-        k,
-        U,
+        S,
+        M,
         t.nativeStyles.zIndex + this.renderOrder * a
-      ), X.update(
+      ), V.update(
         w.material,
         "BOX",
         t.nativeStyles,
@@ -1097,24 +1097,24 @@ class rt {
         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.isTraveler ? (C = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : C.texture : this.textureManager.get(t.element)
       );
     } else
       e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const r = t.visibility & W ? D.BASE : D.HIDDEN;
-    if (e.layers.set(r), t.visibility & K && e.layers.enable(D.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    const r = t.visibility & H ? U.BASE : U.HIDDEN;
+    if (e.layers.set(r), t.visibility & K && e.layers.enable(U.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const i = e.userData.nativeMesh;
-      if (i.layers.set(D.HIDDEN), t.visibility & W) {
+      if (i.layers.set(U.HIDDEN), t.visibility & H) {
         for (let c = t.captureLayer; c < t.nativeLayer; c++)
-          e.layers.enable(D.getCaptureLayer(c));
+          e.layers.enable(U.getCaptureLayer(c));
         for (let c = Math.max(t.captureLayer, t.nativeLayer); c <= O.MAX_LAYERS + 1; c++)
-          i.layers.enable(D.getCaptureLayer(c));
+          i.layers.enable(U.getCaptureLayer(c));
       }
-    } else if (t.visibility & W)
+    } else if (t.visibility & H)
       for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
-        e.layers.enable(D.getCaptureLayer(i));
+        e.layers.enable(U.getCaptureLayer(i));
   }
   captureRenderTarget(e, t, r) {
     if (e.size === 0 || !r)
@@ -1127,8 +1127,8 @@ class rt {
       const h = (n.x + 1) / 2 * o, f = (n.y + 1) / 2 * a;
       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 + 0.5, x = d.scale.y * g + 0.5, S = h - m / 2, L = f - x / 2, T = (S * this.qualityFactor - p) / l, E = (L * this.qualityFactor - p) / l, b = (m * this.qualityFactor + p * 2) / l, w = (x * this.qualityFactor + p * 2) / l;
-      this.renderer.setScissor(T, E, b, w), this.renderer.render(this.scene, this.camera);
+      const m = d.scale.x * g + 0.5, b = d.scale.y * g + 0.5, R = h - m / 2, L = f - b / 2, T = (R * this.qualityFactor - p) / l, x = (L * this.qualityFactor - p) / l, C = (m * this.qualityFactor + p * 2) / l, w = (b * this.qualityFactor + p * 2) / l;
+      this.renderer.setScissor(T, x, C, w), this.renderer.render(this.scene, this.camera);
     }
     this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, c);
   }
@@ -1137,7 +1137,7 @@ class rt {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        D.getCaptureLayer(t),
+        U.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
@@ -1173,28 +1173,40 @@ class rt {
           const p = l.x - e, g = l.y - t;
           h = p - i / 2 + l.width / 2, f = -g + c / 2 - l.height / 2;
         }
-        if (o.position.setX(h), o.position.setY(f), o.scale.set(l.width, l.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && X.forceUpdateUniforms(o.material, {
+        if (o.position.setX(h), o.position.setY(f), o.scale.set(l.width, l.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(o.material, {
           width: l.width,
           height: l.height
         }), o.userData.nativeMesh) {
           const p = o.userData.nativeMesh;
-          let g = l.width, m = l.height, x = h, S = f;
+          let g = l.width, m = l.height, b = h, R = f;
           if (o.userData.nativeTransform) {
             const L = o.userData.nativeTransform, T = L.match(/scale\(([\d.]+%?)\)/);
             if (T) {
-              let b = parseFloat(T[1]);
-              T[1].includes("%") && (b /= 100), g *= b, m *= b;
+              let S = parseFloat(T[1]);
+              T[1].includes("%") && (S /= 100), g *= S, m *= S;
             }
-            const E = L.match(/translate\(([^,]+),\s*([^)]+)\)/);
-            if (E) {
-              const b = E[1].trim(), w = E[2].trim();
-              let k = parseFloat(b);
-              b.includes("%") && (k = k / 100 * l.width);
-              let U = parseFloat(w);
-              w.includes("%") && (U = U / 100 * l.height), x += k, S -= U;
+            const x = L.match(/translate\(([^,]+),\s*([^)]+)\)/);
+            if (x) {
+              const S = x[1].trim(), M = x[2].trim();
+              let I = parseFloat(S);
+              S.includes("%") && (I = I / 100 * l.width);
+              let F = parseFloat(M);
+              M.includes("%") && (F = F / 100 * l.height), b += I, R -= F;
+            }
+            const C = L.match(/translateX\(([^)]+)\)/);
+            if (C) {
+              const S = C[1].trim();
+              let M = parseFloat(S);
+              S.includes("%") && (M = M / 100 * l.width), b += M;
+            }
+            const w = L.match(/translateY\(([^)]+)\)/);
+            if (w) {
+              const S = w[1].trim();
+              let M = parseFloat(S);
+              S.includes("%") && (M = M / 100 * l.height), R -= M;
             }
           }
-          p.position.setX(x), p.position.setY(S), p.scale.set(g, m, 1), p.updateMatrixWorld();
+          p.position.setX(b), p.position.setY(R), p.scale.set(g, m, 1), p.updateMatrixWorld();
         }
       }
     });
@@ -1298,228 +1310,228 @@ function ke(s, e = q | Z | Ye | ce | ie, t, r = 1, i = 0, c = 2, n, o) {
     const v = s;
     if (!v.textContent || !v.textContent.trim())
       return null;
-    const M = v.textContent.replace(/\s+/g, " ");
-    if (M.length === 0)
+    const D = v.textContent.replace(/\s+/g, " ");
+    if (D.length === 0)
       return null;
-    const I = it(v);
-    if (I.length === 0)
+    const B = it(v);
+    if (B.length === 0)
       return null;
-    const F = v.parentElement, A = F ? window.getComputedStyle(F) : null;
-    if (!A)
+    const N = v.parentElement, k = N ? window.getComputedStyle(N) : null;
+    if (!k)
       return null;
-    const V = Math.min(...I.map((C) => C.rect.left)), _ = Math.min(...I.map((C) => C.rect.top)), H = Math.max(...I.map((C) => C.rect.left + C.rect.width)), R = Math.max(...I.map((C) => C.rect.top + C.rect.height));
+    const Y = Math.min(...B.map((E) => E.rect.left)), _ = Math.min(...B.map((E) => E.rect.top)), P = Math.max(...B.map((E) => E.rect.left + E.rect.width)), A = Math.max(...B.map((E) => E.rect.top + E.rect.height));
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: v,
       rect: {
-        x: V + window.scrollX,
+        x: Y + window.scrollX,
         y: _ + window.scrollY,
-        width: H - V,
-        height: R - _
+        width: P - Y,
+        height: A - _
       },
       styles: {
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(A.opacity),
-        zIndex: (isNaN(parseInt(A.zIndex)) ? 0 : parseInt(A.zIndex)) + i,
+        opacity: N && N.dataset[G.KEY] === G.VALUES.HIDE ? 1 : parseFloat(k.opacity),
+        zIndex: (isNaN(parseInt(k.zIndex)) ? 0 : parseInt(k.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
       },
-      textContent: M,
-      textLines: I.map((C) => ({
-        text: C.text.trim(),
+      textContent: D,
+      textLines: B.map((E) => ({
+        text: E.text.trim(),
         rect: {
-          x: C.rect.left + window.scrollX,
-          y: C.rect.top + window.scrollY,
-          width: C.rect.width,
-          height: C.rect.height
+          x: E.rect.left + window.scrollX,
+          y: E.rect.top + window.scrollY,
+          width: E.rect.width,
+          height: E.rect.height
         }
       })),
-      textStyles: Re(A),
+      textStyles: Re(k),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
       captureLayer: r,
-      isFixed: A.position === "fixed",
+      isFixed: k.position === "fixed",
       nativeLayer: n,
       nativeStyles: o ? $($({
         backgroundColor: "transparent",
         backgroundImage: "",
-        opacity: F && F.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(A.opacity),
-        zIndex: (isNaN(parseInt(A.zIndex)) ? 0 : parseInt(A.zIndex)) + i,
+        opacity: N && N.dataset[G.KEY] === G.VALUES.HIDE ? 1 : parseFloat(k.opacity),
+        zIndex: (isNaN(parseInt(k.zIndex)) ? 0 : parseInt(k.zIndex)) + i,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: !1
-      }, Re(A)), o) : void 0,
+      }, Re(k)), o) : void 0,
       nativeRect: o ? {
-        x: V + window.scrollX,
+        x: Y + window.scrollX,
         y: _ + window.scrollY,
-        width: H - V,
-        height: R - _
+        width: P - Y,
+        height: A - _
       } : void 0,
       children: []
     };
   }
   if (s.nodeType !== Node.ELEMENT_NODE)
     return null;
-  const a = s, l = a.dataset[z.KEY];
+  const a = s, l = a.dataset[X.KEY];
   let d = t, h = t;
   if (l) {
     const v = new Set(l.split(/\s+/));
-    for (const M of v)
-      if (!Ce.includes(M))
+    for (const D of v)
+      if (!Ce.includes(D))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${D}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(z.VALUES.END))
+    if (v.has(X.VALUES.END))
       return null;
-    if (v.has(z.VALUES.INCLUDE_TREE) && v.has(z.VALUES.EXCLUDE_TREE))
+    if (v.has(X.VALUES.INCLUDE_TREE) && v.has(X.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (v.has(z.VALUES.INCLUDE_SELF) && v.has(z.VALUES.EXCLUDE_SELF))
+    if (v.has(X.VALUES.INCLUDE_SELF) && v.has(X.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(z.VALUES.INCLUDE_TREE) ? d = d | W : v.has(z.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, v.has(z.VALUES.INCLUDE_SELF) ? h = h | W : v.has(z.VALUES.EXCLUDE_SELF) && (h = h & ~W);
+    v.has(X.VALUES.INCLUDE_TREE) ? d = d | H : v.has(X.VALUES.EXCLUDE_TREE) && (d = d & ~H), h = d, v.has(X.VALUES.INCLUDE_SELF) ? h = h | H : v.has(X.VALUES.EXCLUDE_SELF) && (h = h & ~H);
   }
-  const f = a.dataset[Y.KEY];
+  const f = a.dataset[W.KEY];
   if (f) {
     const v = new Set(f.split(/\s+/));
-    for (const M of v)
-      if (!Ce.includes(M))
+    for (const D of v)
+      if (!Ce.includes(D))
         throw new Error(
-          `[MirageEngine] Invalid select token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid select token: '${D}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (v.has(Y.VALUES.END))
+    if (v.has(W.VALUES.END))
       return null;
-    if (v.has(Y.VALUES.INCLUDE_TREE) && v.has(Y.VALUES.EXCLUDE_TREE))
+    if (v.has(W.VALUES.INCLUDE_TREE) && v.has(W.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(Y.VALUES.INCLUDE_SELF) && v.has(Y.VALUES.EXCLUDE_SELF))
+    if (v.has(W.VALUES.INCLUDE_SELF) && v.has(W.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    v.has(Y.VALUES.INCLUDE_TREE) ? d = d | K : v.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~K), h = d, v.has(Y.VALUES.INCLUDE_SELF) ? h = h | K : v.has(Y.VALUES.EXCLUDE_SELF) && (h = h & ~K);
+    v.has(W.VALUES.INCLUDE_TREE) ? d = d | K : v.has(W.VALUES.EXCLUDE_TREE) && (d = d & ~K), h = d, v.has(W.VALUES.INCLUDE_SELF) ? h = h | K : v.has(W.VALUES.EXCLUDE_SELF) && (h = h & ~K);
   }
   const p = a.dataset[O.KEY];
-  let g = !1, m = o ? $({}, o) : {}, x = n;
+  let g = !1, m = o ? $({}, o) : {}, b = n;
   if (p) {
     let v = 1;
-    const M = p.indexOf("{"), I = p.lastIndexOf("}");
-    let F = p;
-    if (M !== -1 && I !== -1 && I > M) {
-      F = p.substring(0, M).trim();
-      const R = p.substring(M, I + 1);
+    const D = p.indexOf("{"), B = p.lastIndexOf("}");
+    let N = p;
+    if (D !== -1 && B !== -1 && B > D) {
+      N = p.substring(0, D).trim();
+      const A = p.substring(D, B + 1);
       try {
-        m = new Function("return " + R)();
-      } catch (C) {
+        m = new Function("return " + A)();
+      } catch (E) {
         console.warn(
-          `[MirageEngine] Failed to parse travel styles JSON: ${R}`
+          `[MirageEngine] Failed to parse travel styles JSON: ${A}`
         );
       }
     }
-    const A = F.split(/\s+/);
-    let V = !1;
-    const _ = A.indexOf(O.VALUES.TRAVELER);
+    const k = N.split(/\s+/);
+    let Y = !1;
+    const _ = k.indexOf(O.VALUES.TRAVELER);
     if (_ !== -1) {
-      g = !0, V = !0;
-      const R = A[_ + 1];
-      if (R && !isNaN(parseInt(R, 10)))
-        v = parseInt(R, 10);
+      g = !0, Y = !0;
+      const A = k[_ + 1];
+      if (A && !isNaN(parseInt(A, 10)))
+        v = parseInt(A, 10);
       else {
-        const C = A.find((j) => !isNaN(parseInt(j, 10)));
-        C && (v = parseInt(C, 10));
+        const E = k.find((j) => !isNaN(parseInt(j, 10)));
+        E && (v = parseInt(E, 10));
       }
     }
-    const H = A.indexOf(O.VALUES.NATIVE);
-    if (H !== -1) {
-      const R = A[H + 1];
-      if (R && !isNaN(parseInt(R, 10)))
-        x = parseInt(R, 10);
+    const P = k.indexOf(O.VALUES.NATIVE);
+    if (P !== -1) {
+      const A = k[P + 1];
+      if (A && !isNaN(parseInt(A, 10)))
+        b = parseInt(A, 10);
       else if (!g) {
-        const C = A.find((j) => !isNaN(parseInt(j, 10)));
-        C && (x = parseInt(C, 10));
+        const E = k.find((j) => !isNaN(parseInt(j, 10)));
+        E && (b = parseInt(E, 10));
       }
     }
-    if (V) {
-      const R = v + 1;
-      if (R < r)
+    if (Y) {
+      const A = v + 1;
+      if (A < r)
         throw new Error(
           `[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${r - 1}).`
         );
-      r = Math.min(R, O.MAX_LAYERS + 1);
+      r = Math.min(A, O.MAX_LAYERS + 1);
     }
   }
-  const S = a.dataset[Ve.KEY];
+  const R = a.dataset[Ve.KEY];
   let L;
-  S && (L = JSON.parse(S));
-  const T = a.getBoundingClientRect(), E = window.getComputedStyle(a);
-  if (T.width === 0 || T.height === 0 || E.display === "none")
+  R && (L = JSON.parse(R));
+  const T = a.getBoundingClientRect(), x = window.getComputedStyle(a);
+  if (T.width === 0 || T.height === 0 || x.display === "none")
     return null;
-  let b = a.getAttribute("data-mid");
-  b || (b = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", b));
-  const w = parseInt(E.zIndex), k = (isNaN(w) ? 0 : w) + i;
-  let U;
+  let C = a.getAttribute("data-mid");
+  C || (C = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", C));
+  const w = parseInt(x.zIndex), S = (isNaN(w) ? 0 : w) + i;
+  let M;
   if (a.tagName === "IMG")
-    U = a.src;
+    M = a.src;
   else if (a.tagName.toLowerCase() === "svg") {
-    const v = a.cloneNode(!0), M = m == null ? void 0 : m.color, I = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, A = m == null ? void 0 : m.opacity, V = (C, j) => {
-      const N = window.getComputedStyle(C), Q = j, Be = N.fill === N.color, Oe = N.stroke === N.color, se = I || (Be ? M : void 0) || N.fill;
+    const v = a.cloneNode(!0), D = m == null ? void 0 : m.color, B = m == null ? void 0 : m.fill, N = m == null ? void 0 : m.stroke, k = m == null ? void 0 : m.opacity, Y = (E, j) => {
+      const z = window.getComputedStyle(E), Q = j, Be = z.fill === z.color, Oe = z.stroke === z.color, se = B || (Be ? D : void 0) || z.fill;
       se && se !== "none" && (Q.style.fill = se);
-      const ne = F || (Oe ? M : void 0) || N.stroke;
-      ne && ne !== "none" && (Q.style.stroke = ne), N.strokeWidth && N.strokeWidth !== "0px" && (Q.style.strokeWidth = N.strokeWidth);
-      const ve = M || N.color;
+      const ne = N || (Oe ? D : void 0) || z.stroke;
+      ne && ne !== "none" && (Q.style.stroke = ne), z.strokeWidth && z.strokeWidth !== "0px" && (Q.style.strokeWidth = z.strokeWidth);
+      const ve = D || z.color;
       ve && (Q.style.color = ve);
-      const oe = A || N.opacity;
+      const oe = k || z.opacity;
       oe && oe !== "1" && (Q.style.opacity = oe);
-      for (let te = 0; te < C.children.length; te++)
-        V(C.children[te], j.children[te]);
+      for (let te = 0; te < E.children.length; te++)
+        Y(E.children[te], j.children[te]);
     };
-    V(a, v);
-    const _ = a.getBoundingClientRect(), H = window.devicePixelRatio * c;
-    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${_.width} ${_.height}`), v.setAttribute("width", (_.width * H).toString()), v.setAttribute("height", (_.height * H).toString());
-    let R = new XMLSerializer().serializeToString(v);
-    R.includes("xmlns=") || (R = R.replace(
+    Y(a, v);
+    const _ = a.getBoundingClientRect(), P = window.devicePixelRatio * c;
+    v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${_.width} ${_.height}`), v.setAttribute("width", (_.width * P).toString()), v.setAttribute("height", (_.height * P).toString());
+    let A = new XMLSerializer().serializeToString(v);
+    A.includes("xmlns=") || (A = A.replace(
       "<svg",
       '<svg xmlns="http://www.w3.org/2000/svg"'
-    )), U = `data:image/svg+xml;utf8,${encodeURIComponent(R)}`;
-  } else if (E.backgroundImage && E.backgroundImage !== "none") {
-    const v = E.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
-    v && (U = v[1]);
-  }
-  const B = {
-    backgroundColor: E.backgroundColor,
-    backgroundImage: E.backgroundImage,
-    opacity: a.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(E.opacity),
-    zIndex: k,
-    borderRadius: E.borderRadius,
-    borderColor: E.borderColor,
-    borderWidth: E.borderWidth,
-    imageSrc: U,
+    )), M = `data:image/svg+xml;utf8,${encodeURIComponent(A)}`;
+  } else if (x.backgroundImage && x.backgroundImage !== "none") {
+    const v = x.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    v && (M = v[1]);
+  }
+  const I = {
+    backgroundColor: x.backgroundColor,
+    backgroundImage: x.backgroundImage,
+    opacity: a.dataset[G.KEY] === G.VALUES.HIDE ? 1 : parseFloat(x.opacity),
+    zIndex: S,
+    borderRadius: x.borderRadius,
+    borderColor: x.borderColor,
+    borderWidth: x.borderWidth,
+    imageSrc: M,
     isTraveler: g
-  }, G = B;
+  }, F = I;
   let Ie, Ue;
   const he = [];
   return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((v) => {
-    const M = v.nodeType === Node.TEXT_NODE ? h : d, I = ke(
+    const D = v.nodeType === Node.TEXT_NODE ? h : d, B = ke(
       v,
       e,
-      M,
+      D,
       r,
-      k,
+      S,
       c,
-      v.nodeType === Node.TEXT_NODE ? x : void 0,
+      v.nodeType === Node.TEXT_NODE ? b : void 0,
       v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
     );
-    I && he.push(I);
+    B && he.push(B);
   }), {
-    id: b,
+    id: C,
     type: "BOX",
     element: a,
     rect: {
@@ -1528,32 +1540,32 @@ function ke(s, e = q | Z | Ye | ce | ie, t, r = 1, i = 0, c = 2, n, o) {
       width: T.width,
       height: T.height
     },
-    styles: G,
+    styles: F,
     textContent: Ie,
     textStyles: Ue,
     dirtyMask: e,
     visibility: h,
     isTraveler: g,
     captureLayer: r,
-    nativeLayer: x,
-    nativeStyles: x !== void 0 ? be($({}, B), {
-      backgroundColor: (de = m.backgroundColor) != null ? de : B.backgroundColor,
-      backgroundImage: (ue = m.backgroundImage) != null ? ue : B.backgroundImage,
-      opacity: (fe = m.opacity) != null ? fe : B.opacity,
-      zIndex: m.zIndex !== void 0 ? m.zIndex + k : B.zIndex,
-      borderRadius: (ge = m.borderRadius) != null ? ge : B.borderRadius,
-      borderColor: (pe = m.borderColor) != null ? pe : B.borderColor,
-      borderWidth: (me = m.borderWidth) != null ? me : B.borderWidth,
-      isTraveler: B.isTraveler,
+    nativeLayer: b,
+    nativeStyles: b !== void 0 ? be($({}, I), {
+      backgroundColor: (de = m.backgroundColor) != null ? de : I.backgroundColor,
+      backgroundImage: (ue = m.backgroundImage) != null ? ue : I.backgroundImage,
+      opacity: (fe = m.opacity) != null ? fe : I.opacity,
+      zIndex: m.zIndex !== void 0 ? m.zIndex + S : I.zIndex,
+      borderRadius: (ge = m.borderRadius) != null ? ge : I.borderRadius,
+      borderColor: (pe = m.borderColor) != null ? pe : I.borderColor,
+      borderWidth: (me = m.borderWidth) != null ? me : I.borderWidth,
+      isTraveler: I.isTraveler,
       transform: m.transform
     }) : void 0,
-    nativeRect: x !== void 0 ? {
+    nativeRect: b !== void 0 ? {
       x: m.x !== void 0 ? parseFloat(m.x) : T.left + window.scrollX,
       y: m.y !== void 0 ? parseFloat(m.y) : T.top + window.scrollY,
       width: m.width !== void 0 ? parseFloat(m.width) : T.width,
       height: m.height !== void 0 ? parseFloat(m.height) : T.height
     } : void 0,
-    isFixed: E.position === "fixed",
+    isFixed: x.position === "fixed",
     children: he,
     shaderHooks: L
   };
@@ -1562,13 +1574,13 @@ function st(s, e) {
   e.size !== 0 && e.forEach((t, r) => {
     var c, n, o, a;
     const i = s.get(r);
-    !i || !i.userData.basePosition || (X.forceUpdateUniforms(i.material, {
+    !i || !i.userData.basePosition || (V.forceUpdateUniforms(i.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
       borderRadius: (n = t.borderRadius) != null ? n : (c = i.userData.baseStyles) == null ? void 0 : c.borderRadius
       // width and height are no longer updated here, they are updated in syncMeshesByDOM
-    }), i.userData.nativeMesh && X.forceUpdateUniforms(i.userData.nativeMesh.material, {
+    }), i.userData.nativeMesh && V.forceUpdateUniforms(i.userData.nativeMesh.material, {
       backgroundColor: t.backgroundColor,
       backgroundImage: t.backgroundImage,
       opacity: t.opacity,
@@ -1590,7 +1602,7 @@ class nt {
       const a = ke(
         this.target,
         c,
-        W,
+        H,
         1,
         0,
         this.renderer.qualityFactor
@@ -1644,7 +1656,7 @@ class at {
     if (this.target = e, this.registry = new ot(), !document.getElementById("mirage-engine-styles")) {
       const o = document.createElement("style");
       o.id = "mirage-engine-styles", o.textContent = `
-        [${P.NAME}="${P.VALUES.HIDE}"] {
+        [${G.NAME}="${G.VALUES.HIDE}"] {
           opacity: 0 !important;
         }
       `, document.head.appendChild(o);

package/dist/mirage-engine.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirage-engine",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "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/sandwich": "0.2.8",
     "@mirage-engine/painter": "1.0.4",
-    "@mirage-engine/core": "0.3.9"
+    "@mirage-engine/core": "0.3.10",
+    "@mirage-engine/sandwich": "0.2.8"
   },
   "peerDependencies": {
     "three": "^0.160.0"