@mirage-engine/core 0.3.16 → 0.3.17

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @mirage-engine/core
 
+## 0.3.17
+
+### Patch Changes
+
+- 312cb70: alpha
+- Updated dependencies [312cb70]
+  - @mirage-engine/painter@1.0.7
+
 ## 0.3.16
 
 ### Patch Changes

package/dist/mirage-engine.js

@@ -78,18 +78,19 @@ const De = {
   }
 }, ue = 0, re = 1, he = 2, Ye = 4, fe = 8, we = 16;
 function We(r) {
-  const e = r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  const e = r.match(/rgba?\((\d+),\s*(\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 };
+    b: parseInt(e[3]) / 255,
+    a: e[4] !== void 0 ? parseFloat(e[4]) : 1
+  } : { r: 1, g: 1, b: 1, a: 1 };
 }
 function Pe(r) {
   const e = {};
-  if (r.opacity && (e.opacity = parseFloat(r.opacity)), r.backgroundColor && r.backgroundColor !== "rgba(0, 0, 0, 0)") {
+  if (r.opacity && (e.opacity = parseFloat(r.opacity)), r.backgroundColor) {
     const t = We(r.backgroundColor);
-    e.backgroundColor = [t.r, t.g, t.b];
+    e.backgroundColor = [t.r, t.g, t.b, t.a];
   }
   if (r.backgroundImage ? e.backgroundImage = r.backgroundImage : r.background && (e.backgroundImage = r.background), r.boxShadow && (e.boxShadow = r.boxShadow), r.borderRadius && (e.borderRadius = parseFloat(r.borderRadius)), r.width && (e.width = parseFloat(r.width)), r.height && (e.height = parseFloat(r.height)), r.transform && r.transform !== "none") {
     const t = new DOMMatrix(r.transform);
@@ -192,7 +193,7 @@ class He {
     this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
   }
 }
-const q = 1, ae = 2, ht = 0, F = {
+const q = 1, ae = 2, ht = 0, B = {
   BASE: 0,
   SELECTED: 1,
   getCaptureLayer: (r) => 31 - r,
@@ -642,7 +643,7 @@ function be(r, e) {
   }
   if (e.borderWidth !== void 0 && (r.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
-      const o = r.uniforms.uBgColor.value.w;
+      const o = e.backgroundColor[3] !== void 0 ? e.backgroundColor[3] : r.uniforms.uBgColor.value.w;
       r.uniforms.uBgColor.value.set(
         e.backgroundColor[0],
         e.backgroundColor[1],
@@ -899,7 +900,7 @@ class it {
     return this.mode === "overlay" && this.canvasSize === "viewport";
   }
   getSceneLayer() {
-    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? F.SELECTED : F.BASE;
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? B.SELECTED : B.BASE;
   }
   createRenderTarget() {
     for (let e = 0; e < _.MAX_LAYERS; e++) {
@@ -1061,16 +1062,16 @@ class it {
         return;
       const h = d;
       if (i && t.nativeLayer !== void 0)
-        h.layers.set(F.HIDDEN), t.visibility & q && h.layers.enable(F.getCaptureLayer(t.nativeLayer));
+        h.layers.set(B.HIDDEN), t.visibility & q && h.layers.enable(B.getCaptureLayer(t.nativeLayer));
       else {
-        const u = t.visibility & q ? F.BASE : F.HIDDEN;
-        if (h.layers.set(u), t.visibility & ae && h.layers.enable(F.SELECTED), t.visibility & q)
+        const u = t.visibility & q ? B.BASE : B.HIDDEN;
+        if (h.layers.set(u), t.visibility & ae && h.layers.enable(B.SELECTED), t.visibility & q)
           if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
             for (let f = t.captureLayer; f <= _.MAX_LAYERS + 1; f++)
-              f !== t.nativeLayer && h.layers.enable(F.getCaptureLayer(f));
+              f !== t.nativeLayer && h.layers.enable(B.getCaptureLayer(f));
           else
             for (let f = t.captureLayer; f <= _.MAX_LAYERS + 1; f++)
-              h.layers.enable(F.getCaptureLayer(f));
+              h.layers.enable(B.getCaptureLayer(f));
       }
     });
   }
@@ -1139,7 +1140,7 @@ class it {
         const z = t.nativeRect.x - d, Y = t.nativeRect.y - h;
         P = z - o / 2 + t.nativeRect.width / 2, J = -Y + a / 2 - t.nativeRect.height / 2;
       }
-      let Z = t.nativeRect.width, L = t.nativeRect.height, B = P, $ = J;
+      let Z = t.nativeRect.width, L = t.nativeRect.height, F = P, $ = J;
       if (t.nativeStyles.transform) {
         const z = t.nativeStyles.transform, Y = z.match(/scale\(([\d.]+%?)\)/);
         if (Y) {
@@ -1162,13 +1163,13 @@ class it {
           let X = parseFloat(y);
           y.includes("%") && (X = X / 100 * t.nativeRect.width);
           let O = parseFloat(x);
-          x.includes("%") && (O = O / 100 * t.nativeRect.height), B += X, $ -= O;
+          x.includes("%") && (O = O / 100 * t.nativeRect.height), F += X, $ -= O;
         }
         const A = z.match(/translateX\(([^)]+)\)/);
         if (A) {
           const y = A[1].trim();
           let x = parseFloat(y);
-          y.includes("%") && (x = x / 100 * t.nativeRect.width), B += x;
+          y.includes("%") && (x = x / 100 * t.nativeRect.width), F += x;
         }
         const U = z.match(/translateY\(([^)]+)\)/);
         if (U) {
@@ -1179,7 +1180,7 @@ class it {
       }
       let K = ((V = M.material.userData) == null ? void 0 : V.shadowPadding) || 0;
       M.scale.set(Z + K * 2, L + K * 2, 1), M.position.set(
-        B,
+        F,
         $,
         t.nativeStyles.zIndex + this.renderOrder * l
       ), W.update(
@@ -1196,17 +1197,17 @@ class it {
       e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof w.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const i = t.visibility & q ? F.BASE : F.HIDDEN;
-    if (e.layers.set(i), t.visibility & ae && e.layers.enable(F.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
+    const i = t.visibility & q ? B.BASE : B.HIDDEN;
+    if (e.layers.set(i), t.visibility & ae && e.layers.enable(B.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
       const s = e.userData.nativeMesh;
-      if (s.layers.set(F.HIDDEN), t.visibility & q) {
-        s.layers.enable(F.getCaptureLayer(t.nativeLayer));
+      if (s.layers.set(B.HIDDEN), t.visibility & q) {
+        s.layers.enable(B.getCaptureLayer(t.nativeLayer));
         for (let c = t.captureLayer; c <= _.MAX_LAYERS + 1; c++)
-          c !== t.nativeLayer && e.layers.enable(F.getCaptureLayer(c));
+          c !== t.nativeLayer && e.layers.enable(B.getCaptureLayer(c));
       }
     } else if (t.visibility & q)
       for (let s = t.captureLayer; s <= _.MAX_LAYERS + 1; s++)
-        e.layers.enable(F.getCaptureLayer(s));
+        e.layers.enable(B.getCaptureLayer(s));
   }
   captureRenderTarget(e, t, i) {
     if (e.size === 0 || !i)
@@ -1229,7 +1230,7 @@ class it {
       const t = e + 1;
       this.captureRenderTarget(
         this.travelersByLayer[e],
-        F.getCaptureLayer(t),
+        B.getCaptureLayer(t),
         this.renderTargets[e]
       );
     }
@@ -1292,23 +1293,23 @@ class it {
             }
             const P = E.match(/translate\(([^,]+),\s*([^)]+)\)/);
             if (P) {
-              const L = P[1].trim(), B = P[2].trim();
+              const L = P[1].trim(), F = P[2].trim();
               let $ = parseFloat(L);
               L.includes("%") && ($ = $ / 100 * l.width);
-              let K = parseFloat(B);
-              B.includes("%") && (K = K / 100 * l.height), D += $, S -= K;
+              let K = parseFloat(F);
+              F.includes("%") && (K = K / 100 * l.height), D += $, S -= K;
             }
             const J = E.match(/translateX\(([^)]+)\)/);
             if (J) {
               const L = J[1].trim();
-              let B = parseFloat(L);
-              L.includes("%") && (B = B / 100 * l.width), D += B;
+              let F = parseFloat(L);
+              L.includes("%") && (F = F / 100 * l.width), D += F;
             }
             const Z = E.match(/translateY\(([^)]+)\)/);
             if (Z) {
               const L = Z[1].trim();
-              let B = parseFloat(L);
-              L.includes("%") && (B = B / 100 * l.height), S -= B;
+              let F = parseFloat(L);
+              L.includes("%") && (F = F / 100 * l.height), S -= F;
             }
           }
           let R = ((u = b.material.userData) == null ? void 0 : u.shadowPadding) || 0;
@@ -1414,7 +1415,7 @@ function Le(r) {
   };
 }
 function Ue(r, e = re | he | Ye | we | fe, t, i = 1, s = 0, c = 2, o, a) {
-  var B, $, K, z, Y, ie, se;
+  var F, $, K, z, Y, ie, se;
   if (r.nodeType === Node.TEXT_NODE) {
     const m = r;
     if (!m.textContent || !m.textContent.trim())
@@ -1591,9 +1592,9 @@ function Ue(r, e = re | he | Ye | we | fe, t, i = 1, s = 0, c = 2, o, a) {
     N = n.src;
   else if (n.tagName.toLowerCase() === "svg") {
     const m = n.cloneNode(!0), A = v == null ? void 0 : v.color, U = v == null ? void 0 : v.fill, y = v == null ? void 0 : v.stroke, x = v == null ? void 0 : v.opacity, X = (T, oe) => {
-      const H = window.getComputedStyle(T), ce = oe, Be = H.fill === H.color, Fe = H.stroke === H.color, ge = U || (Be ? A : void 0) || H.fill;
+      const H = window.getComputedStyle(T), ce = oe, Fe = H.fill === H.color, Be = H.stroke === H.color, ge = U || (Fe ? A : void 0) || H.fill;
       ge && ge !== "none" && (ce.style.fill = ge);
-      const pe = y || (Fe ? A : void 0) || H.stroke;
+      const pe = y || (Be ? A : void 0) || H.stroke;
       pe && pe !== "none" && (ce.style.stroke = pe), H.strokeWidth && H.strokeWidth !== "0px" && (ce.style.strokeWidth = H.strokeWidth);
       const ye = A || H.color;
       ye && (ce.style.color = ye);
@@ -1659,7 +1660,7 @@ function Ue(r, e = re | he | Ye | we | fe, t, i = 1, s = 0, c = 2, o, a) {
     captureLayer: i,
     nativeLayer: b,
     nativeStyles: b !== void 0 ? Se(te({}, M), {
-      backgroundColor: (B = v.backgroundColor) != null ? B : M.backgroundColor,
+      backgroundColor: (F = v.backgroundColor) != null ? F : M.backgroundColor,
       backgroundImage: ($ = v.backgroundImage) != null ? $ : M.backgroundImage,
       opacity: (K = v.opacity) != null ? K : M.opacity,
       zIndex: v.zIndex !== void 0 ? v.zIndex + V : M.zIndex,
@@ -1842,7 +1843,7 @@ export {
   ht as EXCLUDED,
   dt as Engine,
   ae as SELECT_LAYER,
-  F as THREE_LAYERS,
+  B as THREE_LAYERS,
   Ce as TRAVEL_VALUES,
   He as Tracker,
   q as USER_LAYER,

package/dist/mirage-engine.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirage-engine/core",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@types/three": "^0.181.0",
-    "@mirage-engine/painter": "1.0.6",
+    "@mirage-engine/painter": "1.0.7",
     "@mirage-engine/dom-tracker": "0.3.10"
   },
   "private": false,