@mirage-engine/core 0.3.8 → 0.3.9

package/dist/mirage-engine.umd.js

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

package/package.json

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

package/src/dom/Extractor.ts

@@ -656,6 +656,7 @@ export function extractSceneGraph(
             borderWidth:
               nativeParsedStyles.borderWidth ?? baseStyles.borderWidth,
             isTraveler: baseStyles.isTraveler,
+            transform: nativeParsedStyles.transform,
           }
         : undefined,
     nativeRect:

package/src/renderer/Renderer.ts

@@ -379,6 +379,12 @@ export class Renderer {
       mesh.userData.domElement = node.element;
       mesh.userData.shaderHash = currentShaderHash;
     }
+    
+    if (node.nativeStyles?.transform) {
+      mesh.userData.nativeTransform = node.nativeStyles.transform;
+    } else {
+      mesh.userData.nativeTransform = undefined;
+    }
 
     // [Important] use whene mesh animating with js
 
@@ -889,9 +895,41 @@ export class Renderer {
         // Update native mesh if exists
         if (mesh.userData.nativeMesh) {
           const nativeMesh = mesh.userData.nativeMesh as THREE.Mesh;
-          nativeMesh.position.setX(baseX);
-          nativeMesh.position.setY(baseY);
-          nativeMesh.scale.set(rect.width, rect.height, 1);
+          let nScaleX = rect.width;
+          let nScaleY = rect.height;
+          let nPosX = baseX;
+          let nPosY = baseY;
+
+          if (mesh.userData.nativeTransform) {
+            const transformStr = mesh.userData.nativeTransform as string;
+            
+            const scaleMatch = transformStr.match(/scale\(([\d.]+%?)\)/);
+            if (scaleMatch) {
+              let scaleVal = parseFloat(scaleMatch[1]);
+              if (scaleMatch[1].includes("%")) scaleVal /= 100;
+              nScaleX *= scaleVal;
+              nScaleY *= scaleVal;
+            }
+
+            const translateMatch = transformStr.match(/translate\(([^,]+),\s*([^)]+)\)/);
+            if (translateMatch) {
+              const txStr = translateMatch[1].trim();
+              const tyStr = translateMatch[2].trim();
+              
+              let tx = parseFloat(txStr);
+              if (txStr.includes("%")) tx = (tx / 100) * rect.width;
+              
+              let ty = parseFloat(tyStr);
+              if (tyStr.includes("%")) ty = (ty / 100) * rect.height;
+              
+              nPosX += tx;
+              nPosY -= ty; // Three.js Y is up, so subtract positive Y translation to move down
+            }
+          }
+
+          nativeMesh.position.setX(nPosX);
+          nativeMesh.position.setY(nPosY);
+          nativeMesh.scale.set(nScaleX, nScaleY, 1);
           nativeMesh.updateMatrixWorld();
         }
       }