mirage-engine 0.2.17 → 0.3.0

package/dist/mirage-engine.umd.js

@@ -1,85 +1,155 @@
-(function(v,y){typeof exports=="object"&&typeof module!="undefined"?y(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],y):(v=typeof globalThis!="undefined"?globalThis:v||self,y(v.MirageEngine={},v.THREE))})(this,function(v,y){"use strict";var re=Object.defineProperty;var ie=(v,y,b)=>y in v?re(v,y,{enumerable:!0,configurable:!0,writable:!0,value:b}):v[y]=b;var c=(v,y,b)=>(ie(v,typeof y!="symbol"?y+"":y,b),b);function b(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const d=b(y),M=0,F=1,D=2,W=4,z=8,X=16,w=1,E=2,H=["include-tree","exclude-tree","include-self","exclude-self","end"];function U(i,e,t){const r=e.split(`
-`),s=[];return r.forEach(n=>{const a=n.split(" ");let o=a[0];for(let l=1;l<a.length;l++){const h=a[l];i.measureText(o+" "+h).width<t?o+=" "+h:(s.push(o),o=h)}s.push(o)}),s}function P(i,e,t,r,s=2){const n=document.createElement("canvas"),a=n.getContext("2d");if(!a)throw new Error("[Mirage] Failed to create canvas context");const l=(window.devicePixelRatio||1)*s;n.width=t*l,n.height=r*l,a.scale(l,l),a.font=e.font,a.fillStyle=e.color,a.textBaseline="top",a.globalAlpha=1;const h=U(a,i,t),m=e.lineHeight;h.forEach((g,p)=>{const x=p*m+2;let T=0;e.textAlign==="center"?T=t/2:e.textAlign==="right"&&(T=t),a.textAlign=e.textAlign,a.fillText(g,T,x)});const f=new d.CanvasTexture(n);return f.colorSpace=d.SRGBColorSpace,f.minFilter=d.LinearFilter,f.magFilter=d.LinearFilter,f.needsUpdate=!0,f}function S(i){return typeof i=="number"?i:parseFloat(i)||0}function k(i,e){var o,l,h,m;if(!e){i.set(0,0,0,0);return}const t=e.split("/")[0].trim().split(/\s+/),r=S(t[0]),s=S((o=t[1])!=null?o:t[0]),n=S((l=t[2])!=null?l:t[0]),a=S((m=(h=t[3])!=null?h:t[1])!=null?m:t[0]);i.set(r,s,n,a)}const $=`
-  varying vec2 vUv;
-  varying vec4 vScreenPos;
-  void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    vScreenPos = gl_Position;
-  }
-`,G=`
-
-  varying vec2 vUv;
+(function(L,w){typeof exports=="object"&&typeof module!="undefined"?w(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],w):(L=typeof globalThis!="undefined"?globalThis:L||self,w(L.MirageEngine={},L.THREE))})(this,function(L,w){"use strict";var lt=Object.defineProperty,ht=Object.defineProperties;var dt=Object.getOwnPropertyDescriptors;var Ue=Object.getOwnPropertySymbols;var ut=Object.prototype.hasOwnProperty,ft=Object.prototype.propertyIsEnumerable;var we=(L,w,M)=>w in L?lt(L,w,{enumerable:!0,configurable:!0,writable:!0,value:M}):L[w]=M,K=(L,w)=>{for(var M in w||(w={}))ut.call(w,M)&&we(L,M,w[M]);if(Ue)for(var M of Ue(w))ft.call(w,M)&&we(L,M,w[M]);return L},Te=(L,w)=>ht(L,dt(w));var h=(L,w,M)=>(we(L,typeof w!="symbol"?w+"":w,M),M);var _e=(L,w,M)=>new Promise((b,se)=>{var H=D=>{try{k(M.next(D))}catch(X){se(X)}},fe=D=>{try{k(M.throw(D))}catch(X){se(X)}},k=D=>D.done?b(D.value):Promise.resolve(D.value).then(H,fe);k((M=M.apply(L,w)).next())});function M(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const b=M(w),se={INCLUDE_TREE:"include-tree",EXCLUDE_TREE:"exclude-tree",INCLUDE_SELF:"include-self",EXCLUDE_SELF:"exclude-self",END:"end"},H={NAME:"data-mirage-dom",KEY:"mirageDom",VALUES:{HIDE:"hide"}},fe={TRAVELER:"traveler",NATIVE:"native",CAPTURE_1:"1",CAPTURE_2:"2",CAPTURE_3:"3",CAPTURE_4:"4",CAPTURE_5:"5"},k={NAME:"data-mirage-travel",KEY:"mirageTravel",VALUES:fe,MAX_LAYERS:Object.keys(fe).length-1},D={NAME:"data-mirage-filter",KEY:"mirageFilter",VALUES:se},X={NAME:"data-mirage-select",KEY:"mirageSelect",VALUES:se},Fe={NAME:"data-mirage-shader",KEY:"mirageShader"},Se={NAME:"data-mirage-sandwich",KEY:"mirageSandwich",VALUES:{FRONT:"front"}},ge=0,J=1,ne=2,Xe=4,me=8,ye=16;function ze(s){const e=s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);return e?{r:parseInt(e[1])/255,g:parseInt(e[2])/255,b:parseInt(e[3])/255}:{r:1,g:1,b:1}}function Ne(s){const e={};if(s.opacity&&(e.opacity=parseFloat(s.opacity)),s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"){const t=ze(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 Le{constructor(e,t){h(this,"target");h(this,"observer");h(this,"pendingDeletions",new Set);h(this,"pendingStyles",new Map);h(this,"isDomDirty",!1);h(this,"isRunning",!1);h(this,"pendingMask",ge);h(this,"mutationTimer",null);h(this,"cssTimer",null);h(this,"resizeConfig");h(this,"resizeTimer",null);h(this,"isResizing",!1);h(this,"lastScrollX",0);h(this,"lastScrollY",0);h(this,"scrollTimer",null);h(this,"onBeforeRender",new Set);h(this,"onLayoutChange",new Set);h(this,"onStyleChange",new Set);h(this,"onScrollChange",new Set);h(this,"onRender",new Set);h(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingStyles.size==0&&(this.pendingMask|=J|ne,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50)))});h(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)});h(this,"renderLoop",()=>{if(!this.isRunning)return;this.onBeforeRender.forEach(i=>i()),this.isDomDirty&&(this.isDomDirty=!1,this.onLayoutChange.forEach(i=>i(this.pendingMask,this.pendingDeletions)),this.pendingDeletions.clear(),this.pendingMask=ge);const e=window.scrollX,t=window.scrollY;(e!==this.lastScrollX||t!==this.lastScrollY)&&(this.onScrollChange.forEach(i=>i(e,t)),this.lastScrollX=e,this.lastScrollY=t,this.scrollTimer&&clearTimeout(this.scrollTimer),this.scrollTimer=window.setTimeout(()=>{this.pendingMask|=J,this.isDomDirty=!0,this.scrollTimer=null},150)),this.pendingStyles.size>0&&(this.onStyleChange.forEach(i=>i(this.pendingStyles)),this.pendingStyles.clear()),this.onRender.forEach(i=>i()),requestAnimationFrame(this.renderLoop)});var r,c;this.target=e;const i=(r=t.resizeDebounce)!=null?r:!0;i===!1?this.resizeConfig={enabled:!1,delay:0}:i===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(c=i.delay)!=null?c:150,onStart:i.onStart,onEnd:i.onEnd},this.observer=new MutationObserver(n=>{let o=ge;for(const a of n)if(a.type==="childList")o|=me,a.removedNodes.length>0&&a.removedNodes.forEach(l=>{l instanceof HTMLElement&&this.pendingDeletions.add(l)});else if(a.type==="attributes")if(a.attributeName==="style"){o|=J|ne;const l=a.target,d=Ne(l.style);this.pendingStyles.set(l,d)}else(a.attributeName==="class"||a.attributeName&&a.attributeName.startsWith("data-"))&&(o|=J|ne);else a.type==="characterData"&&(o|=ye|J);if(o!==ge){if(this.pendingMask|=o,o&me){this.clearTimers(),this.isDomDirty=!0;return}this.mutationTimer&&clearTimeout(this.mutationTimer),this.mutationTimer=window.setTimeout(()=>{this.mutationTimer=null,this.isDomDirty=!0},200)}})}start(){this.isRunning||(this.isRunning=!0,this.observer.observe(this.target,{childList:!0,subtree:!0,attributes:!0,characterData:!0}),this.target.addEventListener("transitionend",this.onTransitionFinished),this.target.addEventListener("animationend",this.onTransitionFinished),window.addEventListener("resize",this.onWindowResize),this.isDomDirty=!0,this.lastScrollX=window.scrollX,this.lastScrollY=window.scrollY,this.renderLoop())}stop(){this.isRunning=!1,this.observer.disconnect(),this.clearTimers(),this.target.removeEventListener("transitionend",this.onTransitionFinished),this.target.removeEventListener("animationend",this.onTransitionFinished),window.removeEventListener("resize",this.onWindowResize)}clearTimers(){this.mutationTimer&&(clearTimeout(this.mutationTimer),this.mutationTimer=null),this.cssTimer&&(clearTimeout(this.cssTimer),this.cssTimer=null),this.scrollTimer&&(clearTimeout(this.scrollTimer),this.scrollTimer=null)}}const G=1,Z=2,B={BASE:0,SELECTED:1,getCaptureLayer:s=>31-s,HIDDEN:31},Re=Object.values(D.VALUES);class Me{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"),i=document.createElement("span"),r=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",i.style.margin="0",i.style.padding="0",i.style.border="none",i.style.lineHeight="normal",r.width=1,r.height=1,r.style.verticalAlign="baseline",i.appendChild(document.createTextNode("Hidden Text")),t.appendChild(i),t.appendChild(r),document.body.appendChild(t);const c=r.offsetTop-i.offsetTop;return document.body.removeChild(t),c}}h(Me,"cache",new Map);class Ye extends b.MeshBasicMaterial{constructor(t,i,r,c,n=2){super({transparent:!0,side:b.FrontSide,color:16777215});h(this,"canvas");h(this,"ctx");h(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 b.CanvasTexture(this.canvas),this.map.colorSpace=b.LinearSRGBColorSpace,this.map.minFilter=b.LinearFilter,this.map.magFilter=b.LinearFilter,this.updateText(t,i,r,c)}wrapText(t,i){const r=t.split(`
+`),c=[];return r.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<=i+2?a+=d:(a&&c.push(a),a=d.trimStart())}a&&c.push(a)}),c}updateText(t,i,r,c,n){n!==void 0&&(this.qualityFactor=n);const a=(window.devicePixelRatio||1)*this.qualityFactor,l=r*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=i.font,this.ctx.fillStyle=i.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const f=this.wrapText(t,r),y=i.lineHeight,p=Me.getBaseline(i.font);f.forEach((u,g)=>{const T=g*y+p;let I=0;i.textAlign==="center"?I=r/2:i.textAlign==="right"&&(I=r),this.ctx.textAlign=i.textAlign,this.ctx.fillText(u,I,T)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function ee(s){return typeof s=="number"?s:parseFloat(s)||0}function oe(s){if(!s||s==="transparent")return{color:new b.Color(16777215),alpha:0};const e=s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),r=parseInt(e[3],10),c=e[4]!==void 0?parseFloat(e[4]):1;return{color:new b.Color(`rgb(${t}, ${i}, ${r})`),alpha:c}}return{color:new b.Color(s),alpha:1}}function Pe(s){const e=[];let t="",i=0;for(let r=0;r<s.length;r++){const c=s[r];if(c==="(")i++;else if(c===")")i--;else if(c===","&&i===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],i=Pe(t);let r=Math.PI,c=0;const n=i[0].trim();if(n.startsWith("to "))n==="to top"?r=0:n==="to right"?r=Math.PI/2:n==="to bottom"?r=Math.PI:n==="to left"?r=Math.PI*1.5:n==="to top right"||n==="to right top"?r=Math.PI/4:n==="to bottom right"||n==="to right bottom"?r=Math.PI*.75:n==="to bottom left"||n==="to left bottom"?r=Math.PI*1.25:(n==="to top left"||n==="to left top")&&(r=Math.PI*1.75),c=1;else if(n.endsWith("deg")||n.endsWith("rad")||n.endsWith("turn")){const a=parseFloat(n);n.endsWith("deg")?r=a*(Math.PI/180):n.endsWith("rad")?r=a:n.endsWith("turn")&&(r=a*Math.PI*2),c=1}const o=[];for(let a=c;a<i.length&&!(o.length>=8);a++){const l=i[a].trim(),d=l.lastIndexOf(" ");let f=l,y=null;if(d!==-1&&!l.endsWith(")")){const u=l.substring(d+1);(u.endsWith("%")||u.endsWith("px")||!isNaN(parseFloat(u)))&&(f=l.substring(0,d).trim(),y=u)}const p=oe(f);o.push({color:p.color,alpha:p.alpha,rawStop:y,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 f=o[a].stop,p=(o[l].stop-f)/d;for(let u=1;u<d;u++)o[a+u].stop=f+p*u}a=l}}return{angle:r,stops:o}}const We=`varying vec2 vUv;
+varying vec4 vScreenPos;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  vScreenPos = gl_Position;
+}`,He=`varying vec2 vUv;
+uniform vec2 uSize;
+uniform vec4 uBorderRadius;
+uniform float uBorderWidth;
+uniform vec4 uBgColor;
+uniform vec4 uBorderColor;
+uniform float uOpacity;
+
+uniform int uGradientCount;
+uniform float uGradientAngle;
+uniform vec4 uGradientColors[8];
+uniform float uGradientStops[8];
+
+#INJECT_DECLARATIONS
+
+vec3 linearToSrgb(vec3 linearColor) {
+    vec3 linearPart = 12.92 * linearColor;
+    vec3 curvePart = 1.055 * pow(linearColor, vec3(1.0 / 2.4)) - 0.055;
+    vec3 switchCondition = step(vec3(0.0031308), linearColor);
+    return mix(linearPart, curvePart, switchCondition);
+}
+
+vec3 srgbToLinear(vec3 srgbColor) {
+    vec3 linearPart = srgbColor / 12.92;
+    vec3 curvePart = pow((srgbColor + vec3(0.055)) / 1.055, vec3(2.4));
+    vec3 switchCondition = step(vec3(0.04045), srgbColor);
+    return mix(linearPart, curvePart, switchCondition);
+}
+
+vec4 blendSrcOverInLinear(vec4 front, vec4 back) {
+  front.rgb = srgbToLinear(front.rgb);
+  back.rgb  = srgbToLinear(back.rgb);
+  float aOut = front.a + back.a * (1.0 - front.a);
+  float safeAlpha = max(aOut, 0.0001);
+  vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
+  return vec4(linearToSrgb(cOut), aOut);
+}
+
+vec4 blendSrcOver(vec4 front, vec4 back) {
+  float aOut = front.a + back.a * (1.0 - front.a);
+  float safeAlpha = max(aOut, 0.0001);
+  vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
+  return vec4(cOut, aOut);
+}
+
+float sdRoundedBox(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
+}
+
+float sdVisualBox(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  float n = 2.01; 
+  float d = pow(pow(max(q.x, 0.0), n) + pow(max(q.y, 0.0), n), 1.0/n) - r;
+  return min(max(q.x, q.y), 0.0) + d;
+}
+
+vec4 calculateGradientLayer(vec2 uv) {
+  if (uGradientCount < 2) return uGradientColors[0];
+
+  vec2 dir = vec2(sin(uGradientAngle), cos(uGradientAngle));
+  vec2 p = (uv - 0.5) * uSize;
+  float proj = dot(p, dir);
+  float L = abs(uSize.x * dir.x) + abs(uSize.y * dir.y);
+  float t = clamp((proj / L) + 0.5, 0.0, 1.0);
   
-  uniform vec2 uSize;
-  uniform vec4 uBorderRadius;
-  uniform float uBorderWidth;
-  uniform vec3 uBgColor;
-  uniform vec3 uBorderColor;
-  uniform float uOpacity;
-  uniform float uBgOpacity;
-  uniform float uBorderOpacity;
-
-  #INJECT_DECLARATIONS
-
-  float sdRoundedBox(vec2 p, vec2 b, float r) {
-    vec2 q = abs(p) - b + r;
-
-    return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
-  }
-
-  void main() {
-    vec2 p = (vUv - 0.5) * uSize;
-    vec2 halfSize = uSize * 0.5;
-
-    #INJECT_UV_MODIFIER
+  vec4 color = uGradientColors[0];
+  for (int i = 1; i < 8; i++) {
+    if (i >= uGradientCount) break;
+    float prevStop = uGradientStops[i-1];
+    float currStop = uGradientStops[i];
     
-    // color decision pipeline
-    vec4 baseColor = vec4(uBgColor, uBgOpacity);
+    float factor = clamp((t - prevStop) / (currStop - prevStop + 0.00001), 0.0, 1.0);
+    color = mix(color, uGradientColors[i], factor);
+  }
+  // return vec4(linearToSrgb(color.rgb), color.a);
+  return vec4(color);
+}
 
-    #INJECT_BASE_COLOR
+void main() {
+  vec2 p = (vUv - 0.5) * uSize;
+  vec2 halfSize = uSize * 0.5;
 
-    // sdf shape pipeline
-    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
-    float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
-    float d = sdRoundedBox(p, halfSize, r);
+  #INJECT_UV_MODIFIER
 
-    float aa = 1.0; 
-    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+  // color decision pipeline
+  vec4 baseColor = vec4(uBgColor.rgb, uBgColor.a);
 
-    float halfBorder = uBorderWidth * 0.5;
-    float borderD = abs(d + halfBorder) - halfBorder;
-    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
-    if (uBorderWidth <= 0.01) {
-      borderAlpha = 0.0;
-    }
+  if (uGradientCount > 0) {
+    vec4 gradColor = calculateGradientLayer(vUv);
+    baseColor = blendSrcOver(gradColor, baseColor);
+  }
 
-    // final blending (border + background)
-    float aFront = borderAlpha;
-    float aBack = baseColor.a;
-    float aOut = aFront + aBack * (1.0 - aFront);
+  #INJECT_BASE_COLOR
 
-    float safeAlpha = max(aOut, 0.0001);
-    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
-    vec4 finalColor = vec4(cOut, aOut);
+  // Hybrid SDF
+  vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+  float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
+  r = min(r, min(halfSize.x, halfSize.y));
 
-    // final color control (Tint, Noise)
-    #INJECT_COLOR_MODIFIER
+  float d = sdRoundedBox(p, halfSize, r);
 
-    float finalOpacity = finalColor.a * bgMask * uOpacity;
-    if (finalOpacity < 0.001) discard;
+  float d_smooth = sdVisualBox(p, halfSize, r);
+  float d_visual = d_smooth / fwidth(d_smooth);
 
-    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+  // rendering pipeline
+  float bgMask = 1.0 - smoothstep(-0.5, 0.5, d_visual);
 
-    #include <colorspace_fragment>
+  float halfBorder = uBorderWidth * 0.5;
+  float borderD = abs(d + halfBorder) - halfBorder;
+  float borderAlpha = (1.0 - smoothstep(0.0, 1.0, borderD)) * uBorderColor.a; 
+  if (uBorderWidth <= 0.01) {
+    borderAlpha = 0.0;
   }
-`;function B(i){if(!i||i==="transparent")return{color:new d.Color(16777215),alpha:0};const e=i.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){const t=parseInt(e[1],10),r=parseInt(e[2],10),s=parseInt(e[3],10),n=e[4]!==void 0?parseFloat(e[4]):1;return{color:new d.Color(`rgb(${t}, ${r}, ${s})`),alpha:n}}return{color:new d.Color(i),alpha:1}}function J(i,e,t,r=null,s){var T;const n=r!==null,a=n?`
-    uniform sampler2D uTexture;
-    varying vec4 vScreenPos;
-  `:"",o=n?`
-    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-    vec2 resultUv = screenUv;
-    ${(s==null?void 0:s.uvModifier)||""}
-  `:"",l=n?`
-    baseColor = texture2D(uTexture, resultUv);
-  `:"",h=(s==null?void 0:s.colorModifier)||"",m=G.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",o).replace("#INJECT_BASE_COLOR",l).replace("#INJECT_COLOR_MODIFIER",h),f=B(i.backgroundColor),g=B(i.borderColor),p={uSize:{value:new d.Vector2(e,t)},uBorderRadius:{value:new d.Vector4(0,0,0,0)},uBorderWidth:{value:S(i.borderWidth)},uBgColor:{value:f.color},uBorderColor:{value:g.color},uOpacity:{value:(T=i.opacity)!=null?T:1},uBgOpacity:{value:f.alpha},uBorderOpacity:{value:g.alpha},uTexture:{value:null}};return k(p.uBorderRadius.value,i.borderRadius),n&&(p.uTexture.value=r),new d.ShaderMaterial({uniforms:p,vertexShader:$,fragmentShader:m,transparent:!0,side:d.FrontSide})}function j(i,e,t,r,s){var o;const n=B(e.backgroundColor),a=B(e.borderColor);i.uniforms.uSize.value.set(t,r),k(i.uniforms.uBorderRadius.value,e.borderRadius),i.uniforms.uBorderWidth.value=S(e.borderWidth),i.uniforms.uBgColor.value.copy(n.color),i.uniforms.uBorderColor.value.copy(a.color),i.uniforms.uOpacity.value=(o=e.opacity)!=null?o:1,i.uniforms.uBgOpacity.value=n.alpha,i.uniforms.uBorderOpacity.value=a.alpha,i.uniforms.uTexture&&s!==void 0&&(i.uniforms.uTexture.value=s)}const L={create(i,e,t,r,s,n=2,a=null,o){if(i==="BOX")return J(e,r,s,a,o);if(i==="TEXT"){const l=P(t||"",e,r,s,n);return new d.MeshBasicMaterial({map:l,transparent:!0,side:d.FrontSide,color:16777215})}return new d.MeshBasicMaterial({visible:!1})},update(i,e,t,r,s,n,a=2,o){if(e==="BOX")j(i,t,s,n,o);else if(e==="TEXT"){const l=i;l.map&&l.map.dispose();const h=P(r||"",t,s,n,a);l.map=h,l.needsUpdate=!0}}};class V{constructor(e,t,r){c(this,"canvas");c(this,"scene");c(this,"camera");c(this,"renderer");c(this,"renderTarget",null);c(this,"renderOrder",0);c(this,"qualityFactor",2);c(this,"mode","overlay");c(this,"clipArea",1);c(this,"target");c(this,"mountContainer");c(this,"targetRect");c(this,"meshMap",new Map);var a,o,l;this.target=e,this.mountContainer=r,this.mode=(a=t.mode)!=null?a:"overlay",this.clipArea=(o=t.travelerClipArea)!=null?o:1,this.canvas=document.createElement("canvas"),this.scene=new d.Scene,this.targetRect=this.target.getBoundingClientRect();const s=this.targetRect.width,n=this.targetRect.height;this.camera=new d.OrthographicCamera(s/-2,s/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(0),this.renderer=new d.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(s,n),this.applyTextQuality((l=t.quality)!=null?l:"medium")}createRenderTarget(){this.renderTarget=new d.WebGLRenderTarget(this.targetRect.width*this.qualityFactor,this.targetRect.height*this.qualityFactor,{minFilter:d.LinearFilter,magFilter:d.LinearFilter,format:d.RGBAFormat,stencilBuffer:!1,depthBuffer:!0,samples:4})}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":default:this.qualityFactor=2;break}}mount(){this.mountContainer.prepend(this.canvas),this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){this.canvas.style.width=`${this.targetRect.width}px`,this.canvas.style.height=`${this.targetRect.height}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="absolute",this.canvas.style.top=`${this.target.offsetTop}px`,this.canvas.style.left=`${this.target.offsetLeft}px`,this.canvas.style.display="block")}dispose(){this.renderer.dispose(),this.canvas.remove()}setSize(e,t){this.renderer.setSize(e,t),this.renderTarget&&this.renderTarget.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){const t=this.target.getBoundingClientRect(),r=Math.abs(t.width-this.targetRect.width)>.1||Math.abs(t.height-this.targetRect.height)>.1,s=this.mode==="overlay"&&(Math.abs(t.top-this.targetRect.top)>.1||Math.abs(t.left-this.targetRect.left)>.1);r?(this.targetRect=t,this.setSize(this.targetRect.width,this.targetRect.height),this.updateCanvasLayout()):s?(this.targetRect=t,this.updateCanvasLayout()):this.targetRect=t,this.renderOrder=0;const n=new Set;this.reconcileNode(e,n);for(const[a,o]of this.meshMap.entries())n.has(a)||(this.scene.remove(o),o.geometry.dispose(),o.material instanceof d.Material&&o.material.dispose(),this.meshMap.delete(a))}reconcileNode(e,t){var s;t.add(e.element);let r=this.meshMap.get(e.element);if(!r){const n=new d.PlaneGeometry(1,1);let a;a=L.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,e.isTraveler?(s=this.renderTarget)==null?void 0:s.texture:void 0,e.shaderHooks),r=new d.Mesh(n,a),e.type==="TEXT"&&(r.name="BG_MESH"),this.scene.add(r),this.meshMap.set(e.element,r)}if(r.userData.domRect=e.rect,this.updateMeshProperties(r,e),this.updateMeshLayers(r,e),e.isTraveler&&r.layers.enable(28),e.type==="BOX")for(const n of e.children)this.reconcileNode(n,t);else e.type==="TEXT"&&this.reconcileTextChild(r,e)}reconcileTextChild(e,t){var o,l;let r=e.children.find(h=>h.name==="TEXT_CHILD");const s=JSON.stringify(t.textStyles),n=(o=r==null?void 0:r.userData)==null?void 0:o.styleHash;if(!r||t.dirtyMask&X||s!==n){r&&((l=r.material.map)==null||l.dispose(),r.geometry.dispose(),e.remove(r));const h=L.create("TEXT",t.textStyles,t.textContent||"",t.rect.width,t.rect.height,this.qualityFactor),m=new d.PlaneGeometry(1,1);r=new d.Mesh(m,h),r.name="TEXT_CHILD",r.userData={styleHash:s},this.updateMeshLayers(r,t),r.position.z=.005,e.add(r)}if(r){const h=e.userData.domRect,m=h.x+h.width/2,f=h.y+h.height/2,g=t.rect.x+t.rect.width/2,p=t.rect.y+t.rect.height/2,x=g-m,T=-(p-f);r.position.set(x,T,.005)}}updateMeshProperties(e,t){var p;const{rect:r,styles:s}=t,n=this.renderer.getPixelRatio(),a=this.renderer.domElement.width/n,o=this.renderer.domElement.height/n;e.scale.set(r.width,r.height,1);const l=.001;this.renderOrder++;const h=this.targetRect.left+window.scrollX,m=this.targetRect.top+window.scrollY,f=r.x-h,g=r.y-m;e.position.set(f-a/2+r.width/2,-g+o/2-r.height/2,s.zIndex+this.renderOrder*l),L.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height,this.qualityFactor,t.isTraveler?(p=this.renderTarget)==null?void 0:p.texture:void 0)}updateMeshLayers(e,t){const r=(1-(t.visibility&w))*30;e.layers.set(r),t.visibility===(w|E)&&e.layers.enable(29)}captureRenderTarget(){const e=[];for(const l of this.meshMap.values())l.layers.mask&1<<28&&e.push(l);if(e.length===0)return;const t=new d.Color,r=this.renderer.getClearAlpha();this.renderer.getClearColor(t),this.renderer.setClearColor(0,0),this.renderer.setRenderTarget(this.renderTarget),this.renderer.clear(),this.renderer.autoClear=!1,this.renderer.setScissorTest(!0),this.camera.layers.set(29);const s=new d.Vector3,n=this.targetRect.width,a=this.targetRect.height,o=this.renderer.getPixelRatio();for(const l of e){s.setFromMatrixPosition(l.matrixWorld),s.project(this.camera);const h=(s.x+1)/2*n,m=(s.y+1)/2*a;let f=0,g=1;typeof this.clipArea=="number"?g=this.clipArea:this.clipArea.endsWith("%")?g=parseFloat(this.clipArea)/100:this.clipArea.endsWith("px")&&(f=parseFloat(this.clipArea));const p=l.scale.x*g+.5,x=l.scale.y*g+.5,T=h-p/2,_=m-x/2,I=(T*this.qualityFactor-f)/o,N=(_*this.qualityFactor-f)/o,O=(p*this.qualityFactor+f*2)/o,u=(x*this.qualityFactor+f*2)/o;this.renderer.setScissor(I,N,O,u),this.renderer.render(this.scene,this.camera)}this.renderer.setScissorTest(!1),this.renderer.autoClear=!0,this.renderer.setRenderTarget(null),this.camera.layers.set(28),this.renderer.setClearColor(t,r)}render(){this.renderTarget&&this.captureRenderTarget(),this.renderer.render(this.scene,this.camera)}showScissoredRenderTarget(){if(!this.renderTarget)return;const e=this.targetRect.width,t=this.targetRect.height,r=new d.PlaneGeometry(e,t),s=new d.MeshBasicMaterial({map:this.renderTarget.texture,side:d.DoubleSide,transparent:!0,opacity:.8}),n=new d.Mesh(r,s);n.position.set(0,0,90),n.layers.set(28),this.scene.add(n)}}function Q(i){const e=document.createRange();e.selectNodeContents(i);const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}function Z(i){const e=parseFloat(i.fontSize);let t=parseFloat(i.lineHeight);isNaN(t)&&(t=e*1.2);let r=parseFloat(i.letterSpacing);return isNaN(r)&&(r=0),{font:`${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,color:i.color,textAlign:i.textAlign||"start",textBaseline:"alphabetic",direction:i.direction||"inherit",lineHeight:t,letterSpacing:r}}function q(i,e=F|D|W|X|z,t,r){if(i.nodeType===Node.TEXT_NODE){const u=i;if(!u.textContent||!u.textContent.trim())return null;const R=u.textContent.replace(/\s+/g," ").trim();if(R.length===0)return null;const C=Q(u);if(C.width===0||C.height===0)return null;const Y=u.parentElement,A=Y?window.getComputedStyle(Y):null;return A?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:u,rect:{x:C.left+window.scrollX,y:C.top+window.scrollY,width:C.width,height:C.height},styles:{backgroundColor:"transparent",opacity:parseFloat(A.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:R,textStyles:Z(A),dirtyMask:e,visibility:t,isTraveler:!1,children:[]}:null}const s=i,n=s.dataset.mirageFilter;let a=t,o=t;if(n){const u=new Set(n.split(/\s+/));for(const R of u)if(!H.includes(R))throw new Error(`[MirageEngine] Invalid filter token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(u.has("end"))return null;if(u.has("include-tree")&&u.has("exclude-tree"))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(u.has("include-self")&&u.has("exclude-self"))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");u.has("include-tree")?a=a|w:u.has("exclude-tree")&&(a=a&~w),o=a,u.has("include-self")?o=o|w:u.has("exclude-self")&&(o=o&~w)}o=o|t&E;const l=s.dataset.mirageTravel;let h=!1;l&&new Set(l.split(/\s+/)).has("traveler")&&(o=o&~E,a=a&~E,h=!0);const m=s.dataset.mirageShader;let f;m&&(f=JSON.parse(m));const g=s.getBoundingClientRect(),p=window.getComputedStyle(s);if(g.width===0||g.height===0||p.display==="none")return null;let x=s.getAttribute("data-mid");x||(x=Math.random().toString(36).substring(2,11),s.setAttribute("data-mid",x));const T=parseInt(p.zIndex),_={backgroundColor:p.backgroundColor,opacity:parseFloat(p.opacity),zIndex:isNaN(T)?0:T,borderRadius:p.borderRadius,borderColor:p.borderColor,borderWidth:p.borderWidth};let I,N;const O=[];return Array.from(s.childNodes).forEach(u=>{const R=u.nodeType===Node.TEXT_NODE?o:a,C=q(u,e,R);C&&O.push(C)}),{id:x,type:"BOX",element:s,rect:{x:g.left+window.scrollX,y:g.top+window.scrollY,width:g.width,height:g.height},styles:_,textContent:I,textStyles:N,dirtyMask:e,visibility:o,isTraveler:h,children:O,shaderHooks:f}}class K{constructor(e,t,r){c(this,"target");c(this,"renderer");c(this,"filter");c(this,"observer");c(this,"isDomDirty",!1);c(this,"isRunning",!1);c(this,"isTravelEnabled",!1);c(this,"pendingMask",M);c(this,"mutationTimer",null);c(this,"cssTimer",null);c(this,"resizeConfig");c(this,"resizeTimer",null);c(this,"isResizing",!1);c(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=F|D,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});c(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)});c(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});var n,a;this.target=e,this.renderer=t,this.filter=r.filter;const s=(n=r.resizeDebounce)!=null?n:!0;s===!1?this.resizeConfig={enabled:!1,delay:0}:s===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(a=s.delay)!=null?a:150,onStart:s.onStart,onEnd:s.onEnd},this.observer=new MutationObserver(o=>{let l=M;for(const h of o)h.type==="childList"?l|=z:h.type==="attributes"&&(h.attributeName==="style"||h.attributeName==="class")&&(l|=F|D);if(l!==M){if(this.pendingMask|=l,l&z){this.clearTimers(),console.log("Structural Change detected"),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.forceUpdateScene(),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)}forceUpdateScene(){this.isDomDirty=!1;const e=document.querySelector("[data-mirage-travel='traveler']")!==null;e&&!this.isTravelEnabled&&(this.isTravelEnabled=!0,this.renderer.createRenderTarget());const t=q(this.target,this.pendingMask,e?w|E:w,this.filter);t&&this.renderer.syncScene(t),this.pendingMask=M}}class ee{constructor(e,t){c(this,"renderer");c(this,"syncer");c(this,"target");var s,n,a;this.target=e;let r;if(t.mode==="duplicate"?r=(n=(s=t.container)!=null?s:this.target.parentElement)!=null?n:void 0:r=(a=this.target.parentElement)!=null?a:void 0,!r)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new V(this.target,t,r),this.renderer.mount(),this.syncer=new K(this.target,this.renderer,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}class te{constructor(e,t){c(this,"_engine");if(!e)throw new Error("[Mirage] Target element is required.");this._engine=new ee(e,t)}start(){this._engine.start()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}}v.Mirage=te,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});
+
+  // final blending (border + background) using blendSrcOver
+  vec4 borderLayer = vec4(uBorderColor.rgb, borderAlpha);
+  vec4 finalColor = blendSrcOver(borderLayer, baseColor);
+  // final color control (Tint, Noise)
+  #INJECT_COLOR_MODIFIER
+
+  float finalOpacity = finalColor.a * bgMask * uOpacity;
+  if (finalOpacity < 0.001) discard;
+
+  gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+
+
+  // #include <colorspace_fragment>
+}
+`,Ge=`uniform sampler2D uTexture;
+varying vec4 vScreenPos;
+uniform vec2 uTextureRepeat;
+uniform vec2 uTextureOffset;`,$e=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+vec2 resultUv = screenUv;
+
+`,qe=`vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`,De={vertexShader:We,fragmentShader:He},be={declChunk:Ge,uvChunk:$e,baseColorChunk:qe};function je(s,e,t,i=null,r){var A;const c=i!==null||!!s.imageSrc;let n="";const o={};if(r!=null&&r.uniforms)for(const[E,x]of Object.entries(r.uniforms))typeof x=="number"?(n+=`uniform float ${E};
+`,o[E]={value:x}):Array.isArray(x)?x.length===2?(n+=`uniform vec2 ${E};
+`,o[E]={value:new b.Vector2(...x)}):x.length===3?(n+=`uniform vec3 ${E};
+`,o[E]={value:new b.Vector3(...x)}):x.length===4&&(n+=`uniform vec4 ${E};
+`,o[E]={value:new b.Vector4(...x)}):(n+=`uniform float ${E};
+`,o[E]={value:x});const a=(c?be.declChunk:"")+`
+`+n,l=s.isTraveler?be.uvChunk:`vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
+`,d=c?l+((r==null?void 0:r.uvModifier)||""):"",f=c?be.baseColorChunk:"",y=(r==null?void 0:r.colorModifier)||"",p=De.fragmentShader.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",d).replace("#INJECT_BASE_COLOR",f).replace("#INJECT_COLOR_MODIFIER",y),u=oe(s.backgroundColor),g=oe(s.borderColor),T={uSize:{value:new b.Vector2(e,t)},uBgColor:{value:new b.Vector4(u.color.r,u.color.g,u.color.b,u.alpha)},uBorderColor:{value:new b.Vector4(g.color.r,g.color.g,g.color.b,g.alpha)},uBorderRadius:{value:new b.Vector4(0,0,0,0)},uBorderWidth:{value:ee(s.borderWidth)},uOpacity:{value:(A=s.opacity)!=null?A:1},uTexture:{value:null},uTextureRepeat:{value:new b.Vector2(1,1)},uTextureOffset:{value:new b.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new b.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};Ae(T.uBorderRadius.value,s.borderRadius),c&&(T.uTexture.value=i);const I=new b.ShaderMaterial({uniforms:K(K({},T),o),vertexShader:De.vertexShader,fragmentShader:p,transparent:!0,side:b.FrontSide});return s.backgroundImage&&ve(I,{backgroundImage:s.backgroundImage}),I}function Ke(s,e,t,i,r){const c=ee(e.borderWidth);ve(s,{width:t,height:i,borderRadius:e.borderRadius,borderWidth:c,backgroundColor:e.backgroundColor,borderColor:e.borderColor,opacity:e.opacity,texture:r,backgroundImage:e.backgroundImage})}function ve(s,e){var i,r,c;if(e.width!==void 0&&e.height!==void 0&&s.uniforms.uSize.value.set(e.width,e.height),e.borderRadius!==void 0&&Ae(s.uniforms.uBorderRadius.value,e.borderRadius),e.borderWidth!==void 0&&(s.uniforms.uBorderWidth.value=e.borderWidth),e.backgroundColor!==void 0)if(Array.isArray(e.backgroundColor)){const n=s.uniforms.uBgColor.value.w;s.uniforms.uBgColor.value.set(e.backgroundColor[0],e.backgroundColor[1],e.backgroundColor[2],n)}else if(typeof e.backgroundColor=="string"){const n=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:(i=s.uniforms.uTexture)==null?void 0:i.value;if(t&&(t.image instanceof ImageBitmap||t.image instanceof HTMLImageElement||t.image instanceof HTMLCanvasElement)){const n=t.image.width,o=t.image.height,a=(r=e.width)!=null?r: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,f=a/l;if(d>f){const y=f/d;s.uniforms.uTextureRepeat.value.set(y,1),s.uniforms.uTextureOffset.value.set((1-y)/2,0)}else{const y=d/f;s.uniforms.uTextureRepeat.value.set(1,y),s.uniforms.uTextureOffset.value.set(0,(1-y)/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 Ae(s,e){var o,a,l,d;if(e==null){s.set(0,0,0,0);return}if(typeof e=="number"){s.set(e,e,e,e);return}if(Array.isArray(e)){s.set(e[0],e[1],e[2],e[3]);return}const t=e.split("/")[0].trim().split(/\s+/),i=ee(t[0]),r=ee((o=t[1])!=null?o:t[0]),c=ee((a=t[2])!=null?a:t[0]),n=ee((d=(l=t[3])!=null?l:t[1])!=null?d:t[0]);s.set(i,r,c,n)}const $={create(s,e,t,i,r,c=2,n=null,o){return s==="BOX"?je(e,i,r,n,o):s==="TEXT"?new Ye(t||"",e,i,r,c):new b.MeshBasicMaterial({visible:!1})},update(s,e,t,i,r,c,n=2,o){e==="BOX"?Ke(s,t,r,c,o):e==="TEXT"&&s.updateText(i||"",t,r,c,n)},forceUpdateUniforms(s,e){ve(s,e)}};class Je{constructor(e){h(this,"observer");h(this,"textures",new WeakMap);h(this,"loadStatus",new WeakMap);h(this,"elementUrls",new WeakMap);h(this,"onUpdate");this.onUpdate=e,this.observer=new IntersectionObserver(t=>{for(const i of t){const r=i.target;i.isIntersecting?this.loadTexture(r):this.disposeTexture(r)}},{rootMargin:"300px"})}register(e,t){if(e.nodeType!==Node.ELEMENT_NODE)return;this.elementUrls.get(e)!==t&&(this.elementUrls.set(e,t),this.observer.unobserve(e),this.observer.observe(e))}unregister(e){e.nodeType===Node.ELEMENT_NODE&&this.observer.unobserve(e),this.disposeTexture(e),this.elementUrls.delete(e),this.loadStatus.delete(e)}loadTexture(e){return _e(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 i;if(t.startsWith("data:image/svg+xml"))i=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();i=yield createImageBitmap(n,{imageOrientation:"flipY"})}if(this.elementUrls.get(e)!==t){"close"in i&&i.close();return}const r=new b.Texture(i);i instanceof HTMLImageElement||(r.flipY=!1),r.colorSpace=b.LinearSRGBColorSpace,r.needsUpdate=!0,this.textures.set(e,r),this.onUpdate(e,r)}catch(i){console.warn("[MirageEngine] Failed to load texture:",t,i)}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.disconnect()}}class Qe{constructor(e,t,i,r){h(this,"canvas");h(this,"scene");h(this,"camera");h(this,"renderer");h(this,"renderTargets",[]);h(this,"renderOrder",0);h(this,"qualityFactor",2);h(this,"mode","overlay");h(this,"clipArea",1);h(this,"targetLayer","base");h(this,"target");h(this,"mountContainer");h(this,"registry");h(this,"targetRect");h(this,"travelersByLayer",Array.from({length:k.MAX_LAYERS},()=>new Set));h(this,"textureManager");h(this,"fixedMeshes",new Set);var o,a,l,d;this.target=e,this.mountContainer=i,this.registry=r,this.textureManager=new Je((f,y)=>{const p=this.registry.get(f);p&&p.material instanceof b.ShaderMaterial&&$.forceUpdateUniforms(p.material,{texture:y})}),this.mode=(o=t.mode)!=null?o:"overlay",this.clipArea=(a=t.travelerClipArea)!=null?a:1,this.targetLayer=(l=t.layer)!=null?l:"base",this.canvas=document.createElement("canvas"),this.scene=new b.Scene,this.targetRect=this.target.getBoundingClientRect();const c=this.targetRect.width,n=this.targetRect.height;this.camera=new b.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 b.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),b.ColorManagement.enabled=!1,this.renderer.outputColorSpace=b.LinearSRGBColorSpace,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(c,n),this.applyTextQuality((d=t.quality)!=null?d:"medium")}getSceneLayer(){return typeof this.targetLayer=="number"?this.targetLayer:this.targetLayer==="selected"?B.SELECTED:B.BASE}createRenderTarget(){for(let e=0;e<k.MAX_LAYERS;e++)this.renderTargets.push(new b.WebGLRenderTarget(this.targetRect.width*this.qualityFactor,this.targetRect.height*this.qualityFactor,{minFilter:b.LinearFilter,magFilter:b.LinearFilter,format:b.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(){this.canvas.style.width=`${this.targetRect.width}px`,this.canvas.style.height=`${this.targetRect.height}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="absolute",this.canvas.style.top=`${this.target.offsetTop}px`,this.canvas.style.left=`${this.target.offsetLeft}px`,this.canvas.style.display="block")}updateUniforms(e,t){const i=this.registry.get(e);i&&(i.traverse(r=>{r.isMesh&&r.material&&$.forceUpdateUniforms(r.material,t)}),i.userData.nativeMesh&&i.userData.nativeMesh.traverse(r=>{r.isMesh&&r.material&&$.forceUpdateUniforms(r.material,t)}))}dispose(){this.renderer.dispose(),this.canvas.remove(),this.textureManager.disposeAll()}setSize(e,t){this.renderer.setSize(e,t);for(const i of this.renderTargets)i.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 i=this.target.getBoundingClientRect(),r=Math.abs(i.width-this.targetRect.width)>.1||Math.abs(i.height-this.targetRect.height)>.1,c=this.mode==="overlay"&&(Math.abs(i.top-this.targetRect.top)>.1||Math.abs(i.left-this.targetRect.left)>.1);r?(this.targetRect=i,this.setSize(this.targetRect.width,this.targetRect.height),this.updateCanvasLayout()):c?(this.targetRect=i,this.updateCanvasLayout()):this.targetRect=i,this.renderOrder=0,this.reconcileNode(e),t.size>0&&t.forEach(n=>{const o=this.registry.get(n);if(o){this.scene.remove(o);for(const a of this.travelersByLayer)a.delete(o);this.fixedMeshes.delete(o),o.geometry.dispose(),o.userData.nativeMesh&&(this.scene.remove(o.userData.nativeMesh),Array.isArray(o.userData.nativeMesh.material)?o.userData.nativeMesh.material.forEach(a=>a.dispose()):o.userData.nativeMesh.material.dispose(),o.userData.nativeMesh.geometry.dispose()),o.traverse(a=>{a instanceof b.Mesh&&(a.geometry&&a.geometry.dispose(),a.material&&(Array.isArray(a.material)?a.material.forEach(l=>l.dispose()):a.material.dispose()))}),this.registry.remove(n),this.textureManager.unregister(n)}})}reconcileNode(e){var i;let t=this.registry.get(e.element);if(!t){const r=new b.PlaneGeometry(1,1),c=e.isTraveler?(i=this.renderTargets[e.captureLayer-2])==null?void 0:i.texture:this.textureManager.get(e.element),n=$.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,c,e.shaderHooks);t=new b.Mesh(r,n),e.type==="TEXT"&&(t.name="BG_MESH"),this.scene.add(t),this.registry.register(e.element,t),t.userData.baseMaterial=n}if(this.updateMeshProperties(t,e),this.updateMeshLayers(t,e),e.isTraveler)for(let r=0;r<k.MAX_LAYERS;r++)r===e.captureLayer-2?this.travelersByLayer[r].add(t):this.travelersByLayer[r].delete(t);else for(const r of this.travelersByLayer)r.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 r of e.children)this.reconcileNode(r);else e.type==="TEXT"&&(this.reconcileTextChild(t,e,!1),t.userData.nativeMesh&&e.nativeStyles&&this.reconcileTextChild(t.userData.nativeMesh,e,!0))}reconcileTextChild(e,t,i){var l;const r=t.textLines||[{text:t.textContent||"",rect:t.rect}],c=i?t.nativeStyles:t.textStyles,n=JSON.stringify(c)+t.textContent+r.map(d=>d.text).join("|"),o=(l=e.userData)==null?void 0:l.textChildStyleHash;if(t.dirtyMask&ye||n!==o){e.children.filter(u=>u.name.startsWith("TEXT_CHILD")).forEach(u=>{var T;const g=u;(T=g.material.map)==null||T.dispose(),g.geometry.dispose(),e.remove(g)});const f=t.rect,y=f.x+f.width/2,p=f.y+f.height/2;r.forEach((u,g)=>{const T=$.create("TEXT",c,u.text,u.rect.width,u.rect.height,this.qualityFactor),I=new b.PlaneGeometry(1,1),A=new b.Mesh(I,T);A.name=`TEXT_CHILD_${g}`;const E=t.rect.width===0?1:u.rect.width/t.rect.width,x=t.rect.height===0?1:u.rect.height/t.rect.height;A.scale.set(E,x,1);const z=u.rect.x+u.rect.width/2,Y=u.rect.y+u.rect.height/2,V=z-y,U=-(Y-p);A.position.set(t.rect.width===0?0:V/t.rect.width,t.rect.height===0?0:U/t.rect.height,.005),e.add(A)}),e.userData.textChildStyleHash=n}e.children.forEach(d=>{if(!d.name.startsWith("TEXT_CHILD"))return;const f=d,y=t.visibility&G?B.BASE:B.HIDDEN;if(f.layers.set(y),t.visibility&Z&&f.layers.enable(B.SELECTED),t.visibility&G)if(!i&&t.nativeLayer!==void 0&&t.nativeStyles!==void 0)for(let p=t.captureLayer;p<t.nativeLayer;p++)f.layers.enable(B.getCaptureLayer(p));else if(i&&t.nativeLayer!==void 0)for(let p=Math.max(t.captureLayer,t.nativeLayer);p<=k.MAX_LAYERS+1;p++)f.layers.enable(B.getCaptureLayer(p));else for(let p=t.captureLayer;p<=k.MAX_LAYERS+1;p++)f.layers.enable(B.getCaptureLayer(p))})}updateMeshProperties(e,t){var z,Y,V;const{rect:i,styles:r}=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(i.width,i.height,1),e.userData.domRect=Te(K({},i),{width:i.width,height:i.height});const a=.001;this.renderOrder++;const l=this.targetRect.left+window.scrollX,d=this.targetRect.top+window.scrollY,f=i.x-l,y=i.y-d,p=f-n/2+i.width/2,u=-y+o/2-i.height/2;e.position.set(p,u,r.zIndex+this.renderOrder*a);const g=i.x,T=i.y;e.userData.basePosition={x:p,y:u},e.userData.originalBasePosition={x:p,y:u},e.userData.baseSize={width:i.width,height:i.height},e.userData.baseDOM={x:g,y:T},e.userData.isFixed=t.isFixed,e.userData.initialScroll={x:window.scrollX,y:window.scrollY};const I=t.element.nodeType===Node.TEXT_NODE?t.element.parentElement:t.element,A=window.getComputedStyle(I);let E=0,x=0;if(A.transform&&A.transform!=="none"){const U=new DOMMatrix(A.transform);E=U.m41,x=U.m42}if(e.userData.baseTransform={x:E,y:x},delete e.userData.originRatioX,delete e.userData.originRatioY,$.update(e.userData.baseMaterial,"BOX",r,"",i.width,i.height,this.qualityFactor,t.isTraveler?(z=this.renderTargets[t.captureLayer-2])==null?void 0:z.texture:this.textureManager.get(t.element)),t.nativeStyles&&t.nativeRect){if(!e.userData.nativeMesh){const Q=$.create("BOX",t.nativeStyles,"",t.nativeRect.width,t.nativeRect.height,this.qualityFactor,t.isTraveler?(Y=this.renderTargets[t.captureLayer-2])==null?void 0:Y.texture:this.textureManager.get(t.element),t.shaderHooks),q=new b.Mesh(e.geometry,Q);t.type==="TEXT"&&(q.name="BG_MESH"),this.scene.add(q),e.userData.nativeMesh=q}const U=e.userData.nativeMesh,_=t.nativeRect.x-l,te=t.nativeRect.y-d,re=_-n/2+t.nativeRect.width/2,ie=-te+o/2-t.nativeRect.height/2;U.scale.set(t.nativeRect.width,t.nativeRect.height,1),U.position.set(re,ie,t.nativeStyles.zIndex+this.renderOrder*a),$.update(U.material,"BOX",t.nativeStyles,"",t.nativeRect.width,t.nativeRect.height,this.qualityFactor,t.isTraveler?(V=this.renderTargets[t.captureLayer-2])==null?void 0:V.texture:this.textureManager.get(t.element))}else e.userData.nativeMesh&&(this.scene.remove(e.userData.nativeMesh),e.userData.nativeMesh.material instanceof b.Material&&e.userData.nativeMesh.material.dispose(),delete e.userData.nativeMesh)}updateMeshLayers(e,t){const i=t.visibility&G?B.BASE:B.HIDDEN;if(e.layers.set(i),t.visibility&Z&&e.layers.enable(B.SELECTED),e.userData.nativeMesh&&t.nativeLayer!==void 0){const r=e.userData.nativeMesh;if(r.layers.set(B.HIDDEN),t.visibility&G){for(let c=t.captureLayer;c<t.nativeLayer;c++)e.layers.enable(B.getCaptureLayer(c));for(let c=Math.max(t.captureLayer,t.nativeLayer);c<=k.MAX_LAYERS+1;c++)r.layers.enable(B.getCaptureLayer(c))}}else if(t.visibility&G)for(let r=t.captureLayer;r<=k.MAX_LAYERS+1;r++)e.layers.enable(B.getCaptureLayer(r))}captureRenderTarget(e,t,i){if(e.size===0||!i)return;const r=new b.Color,c=this.renderer.getClearAlpha();this.renderer.getClearColor(r),this.renderer.setClearColor(0,0),this.renderer.setRenderTarget(i),this.renderer.clear(),this.renderer.autoClear=!1,this.renderer.setScissorTest(!0),this.camera.layers.set(t);const n=new b.Vector3,o=this.targetRect.width,a=this.targetRect.height,l=this.renderer.getPixelRatio();for(const d of e){n.setFromMatrixPosition(d.matrixWorld),n.project(this.camera);const f=(n.x+1)/2*o,y=(n.y+1)/2*a;let p=0,u=1;typeof this.clipArea=="number"?u=this.clipArea:this.clipArea.endsWith("%")?u=parseFloat(this.clipArea)/100:this.clipArea.endsWith("px")&&(p=parseFloat(this.clipArea));const g=d.scale.x*u+.5,T=d.scale.y*u+.5,I=f-g/2,A=y-T/2,E=(I*this.qualityFactor-p)/l,x=(A*this.qualityFactor-p)/l,z=(g*this.qualityFactor+p*2)/l,Y=(T*this.qualityFactor+p*2)/l;this.renderer.setScissor(E,x,z,Y),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(r,c)}render(){for(let e=0;e<k.MAX_LAYERS;e++){const t=e+1;this.captureRenderTarget(this.travelersByLayer[e],B.getCaptureLayer(t),this.renderTargets[e])}this.renderer.render(this.scene,this.camera)}}function Ze(s){const e=s.textContent||"",t=[];let i="",r=null,c=-1;const n=(l,d)=>{for(let f=0;f<l.length;f++){const y=l[f],p=document.createRange();p.setStart(s,d+f),p.setEnd(s,d+f+1);const u=p.getBoundingClientRect();if(u.width===0&&u.height===0){i+=y;continue}c===-1||Math.abs(u.top-c)>u.height/2?(i&&r&&t.push({text:i,rect:{left:r.left,top:r.top,width:r.right-r.left,height:r.bottom-r.top}}),i=y,r={left:u.left,top:u.top,right:u.right,bottom:u.bottom},c=u.top):(i+=y,r&&(r.left=Math.min(r.left,u.left),r.top=Math.min(r.top,u.top),r.right=Math.max(r.right,u.right),r.bottom=Math.max(r.bottom,u.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 f=d.getClientRects();if(f.length>1)n(l,a);else{const y=f.length===1?f[0]:d.getBoundingClientRect();if(y.width===0&&y.height===0){i+=l,a+=l.length;continue}c===-1||Math.abs(y.top-c)>y.height/2?(i&&r&&t.push({text:i,rect:{left:r.left,top:r.top,width:r.right-r.left,height:r.bottom-r.top}}),i=l,r={left:y.left,top:y.top,right:y.right,bottom:y.bottom},c=y.top):(i+=l,r&&(r.left=Math.min(r.left,y.left),r.top=Math.min(r.top,y.top),r.right=Math.max(r.right,y.right),r.bottom=Math.max(r.bottom,y.bottom)))}a+=l.length}return i&&r&&t.push({text:i,rect:{left:r.left,top:r.top,width:r.right-r.left,height:r.bottom-r.top}}),t.filter(l=>l.text.trim().length>0&&l.rect.width>0&&l.rect.height>0)}function ke(s){const e=parseFloat(s.fontSize);let t=parseFloat(s.lineHeight);isNaN(t)&&(t=e*1.2);let i=parseFloat(s.letterSpacing);return isNaN(i)&&(i=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:i}}function Ie(s,e=J|ne|Xe|ye|me,t,i=1,r=0,c=2,n,o){var q,ae,ce,le,he,de;if(s.nodeType===Node.TEXT_NODE){const m=s;if(!m.textContent||!m.textContent.trim())return null;const S=m.textContent.replace(/\s+/g," ");if(S.length===0)return null;const O=Ze(m);if(O.length===0)return null;const F=m.parentElement,R=F?window.getComputedStyle(F):null;if(!R)return null;const N=Math.min(...O.map(v=>v.rect.left)),C=Math.min(...O.map(v=>v.rect.top)),P=Math.max(...O.map(v=>v.rect.left+v.rect.width)),j=Math.max(...O.map(v=>v.rect.top+v.rect.height));return{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:m,rect:{x:N+window.scrollX,y:C+window.scrollY,width:P-N,height:j-C},styles:{backgroundColor:"transparent",backgroundImage:"",opacity:F&&F.dataset[H.KEY]===H.VALUES.HIDE?1:parseFloat(R.opacity),zIndex:(isNaN(parseInt(R.zIndex))?0:parseInt(R.zIndex))+r,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px",isTraveler:!1},textContent:S,textLines:O.map(v=>({text:v.text.trim(),rect:{x:v.rect.left+window.scrollX,y:v.rect.top+window.scrollY,width:v.rect.width,height:v.rect.height}})),textStyles:ke(R),dirtyMask:e,visibility:t,isTraveler:!1,captureLayer:i,isFixed:R.position==="fixed",nativeLayer:n,nativeStyles:o?K(K({backgroundColor:"transparent",backgroundImage:"",opacity:F&&F.dataset[H.KEY]===H.VALUES.HIDE?1:parseFloat(R.opacity),zIndex:(isNaN(parseInt(R.zIndex))?0:parseInt(R.zIndex))+r,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px",isTraveler:!1},ke(R)),o):void 0,nativeRect:o?{x:N+window.scrollX,y:C+window.scrollY,width:P-N,height:j-C}:void 0,children:[]}}if(s.nodeType!==Node.ELEMENT_NODE)return null;const a=s,l=a.dataset[D.KEY];let d=t,f=t;if(l){const m=new Set(l.split(/\s+/));for(const S of m)if(!Re.includes(S))throw new Error(`[MirageEngine] Invalid filter token: '${S}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(m.has(D.VALUES.END))return null;if(m.has(D.VALUES.INCLUDE_TREE)&&m.has(D.VALUES.EXCLUDE_TREE))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(m.has(D.VALUES.INCLUDE_SELF)&&m.has(D.VALUES.EXCLUDE_SELF))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");m.has(D.VALUES.INCLUDE_TREE)?d=d|G:m.has(D.VALUES.EXCLUDE_TREE)&&(d=d&~G),f=d,m.has(D.VALUES.INCLUDE_SELF)?f=f|G:m.has(D.VALUES.EXCLUDE_SELF)&&(f=f&~G)}const y=a.dataset[X.KEY];if(y){const m=new Set(y.split(/\s+/));for(const S of m)if(!Re.includes(S))throw new Error(`[MirageEngine] Invalid select token: '${S}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(m.has(X.VALUES.END))return null;if(m.has(X.VALUES.INCLUDE_TREE)&&m.has(X.VALUES.EXCLUDE_TREE))throw new Error("[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(m.has(X.VALUES.INCLUDE_SELF)&&m.has(X.VALUES.EXCLUDE_SELF))throw new Error("[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element.");m.has(X.VALUES.INCLUDE_TREE)?d=d|Z:m.has(X.VALUES.EXCLUDE_TREE)&&(d=d&~Z),f=d,m.has(X.VALUES.INCLUDE_SELF)?f=f|Z:m.has(X.VALUES.EXCLUDE_SELF)&&(f=f&~Z)}const p=a.dataset[k.KEY];let u=!1,g=o?K({},o):{},T=n;if(p){let m=1;const S=p.indexOf("{"),O=p.lastIndexOf("}");let F=p;if(S!==-1&&O!==-1&&O>S){F=p.substring(0,S).trim();const C=p.substring(S,O+1);try{g=new Function("return "+C)()}catch(P){console.warn(`[MirageEngine] Failed to parse travel styles JSON: ${C}`)}}const R=F.split(/\s+/);let N=!1;if(R.includes(k.VALUES.TRAVELER)){u=!0,N=!0;const C=R.find(P=>!isNaN(parseInt(P,10)));C&&(m=parseInt(C,10))}else if(R.includes(k.VALUES.NATIVE)){u=!1;const C=R.find(P=>!isNaN(parseInt(P,10)));C&&(T=parseInt(C,10))}if(N){const C=m+1;if(C<i)throw new Error(`[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${i-1}).`);i=Math.min(C,k.MAX_LAYERS+1)}}const I=a.dataset[Fe.KEY];let A;I&&(A=JSON.parse(I));const E=a.getBoundingClientRect(),x=window.getComputedStyle(a);if(E.width===0||E.height===0||x.display==="none")return null;let z=a.getAttribute("data-mid");z||(z=Math.random().toString(36).substring(2,11),a.setAttribute("data-mid",z));const Y=parseInt(x.zIndex),V=(isNaN(Y)?0:Y)+r;let U;if(a.tagName==="IMG")U=a.src;else if(a.tagName.toLowerCase()==="svg"){const m=a.cloneNode(!0),S=g==null?void 0:g.color,O=g==null?void 0:g.fill,F=g==null?void 0:g.stroke,R=g==null?void 0:g.opacity,N=(v,Oe)=>{const W=window.getComputedStyle(v),ue=Oe,at=W.fill===W.color,ct=W.stroke===W.color,xe=O||(at?S:void 0)||W.fill;xe&&xe!=="none"&&(ue.style.fill=xe);const Ee=F||(ct?S:void 0)||W.stroke;Ee&&Ee!=="none"&&(ue.style.stroke=Ee),W.strokeWidth&&W.strokeWidth!=="0px"&&(ue.style.strokeWidth=W.strokeWidth);const Be=S||W.color;Be&&(ue.style.color=Be);const Ce=R||W.opacity;Ce&&Ce!=="1"&&(ue.style.opacity=Ce);for(let pe=0;pe<v.children.length;pe++)N(v.children[pe],Oe.children[pe])};N(a,m);const C=a.getBoundingClientRect(),P=window.devicePixelRatio*c;m.hasAttribute("viewBox")||m.setAttribute("viewBox",`0 0 ${C.width} ${C.height}`),m.setAttribute("width",(C.width*P).toString()),m.setAttribute("height",(C.height*P).toString());let j=new XMLSerializer().serializeToString(m);j.includes("xmlns=")||(j=j.replace("<svg",'<svg xmlns="http://www.w3.org/2000/svg"')),U=`data:image/svg+xml;utf8,${encodeURIComponent(j)}`}else if(x.backgroundImage&&x.backgroundImage!=="none"){const m=x.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);m&&(U=m[1])}const _={backgroundColor:x.backgroundColor,backgroundImage:x.backgroundImage,opacity:a.dataset[H.KEY]===H.VALUES.HIDE?1:parseFloat(x.opacity),zIndex:V,borderRadius:x.borderRadius,borderColor:x.borderColor,borderWidth:x.borderWidth,imageSrc:U,isTraveler:u},te=_;let re,ie;const Q=[];return a.tagName.toLowerCase()!=="svg"&&Array.from(a.childNodes).forEach(m=>{const S=m.nodeType===Node.TEXT_NODE?f:d,O=Ie(m,e,S,i,V,c,T,m.nodeType===Node.TEXT_NODE&&Object.keys(g).length>0?g:void 0);O&&Q.push(O)}),{id:z,type:"BOX",element:a,rect:{x:E.left+window.scrollX,y:E.top+window.scrollY,width:E.width,height:E.height},styles:te,textContent:re,textStyles:ie,dirtyMask:e,visibility:f,isTraveler:u,captureLayer:i,nativeLayer:T,nativeStyles:T!==void 0?Te(K({},_),{backgroundColor:(q=g.backgroundColor)!=null?q:_.backgroundColor,backgroundImage:(ae=g.backgroundImage)!=null?ae:_.backgroundImage,opacity:(ce=g.opacity)!=null?ce:_.opacity,zIndex:g.zIndex!==void 0?g.zIndex+V:_.zIndex,borderRadius:(le=g.borderRadius)!=null?le:_.borderRadius,borderColor:(he=g.borderColor)!=null?he:_.borderColor,borderWidth:(de=g.borderWidth)!=null?de:_.borderWidth,isTraveler:_.isTraveler}):void 0,nativeRect:T!==void 0?{x:g.x!==void 0?parseFloat(g.x):E.left+window.scrollX,y:g.y!==void 0?parseFloat(g.y):E.top+window.scrollY,width:g.width!==void 0?parseFloat(g.width):E.width,height:g.height!==void 0?parseFloat(g.height):E.height}:void 0,isFixed:x.position==="fixed",children:Q,shaderHooks:A}}function et(s,e){e.size!==0&&e.forEach((t,i)=>{var z,Y,V,U,_,te,re,ie,Q,q,ae,ce,le,he,de,m,S,O;const r=s.get(i);if(!r||!r.userData.basePosition)return;let{x:c,y:n}=r.userData.basePosition;const{width:o,height:a}=r.userData.baseSize,l=(z=t.width)!=null?z:o,d=(Y=t.height)!=null?Y:a,f=l-o,y=d-a;if(t.width!==void 0&&r.userData.originRatioX===void 0&&Math.abs(f)>.1){const F=i.getBoundingClientRect(),R=(V=t.x)!=null?V:0,N=(_=(U=r.userData.baseTransform)==null?void 0:U.x)!=null?_:0,C=r.userData.isFixed?0:window.scrollX;let v=-(F.left+C-R+N-r.userData.baseDOM.x)/f;Math.abs(v)<.05?v=0:Math.abs(v-1)<.05?v=1:Math.abs(v-.5)<.05&&(v=.5),r.userData.originRatioX=v}if(t.height!==void 0&&r.userData.originRatioY===void 0&&Math.abs(y)>.1){const F=i.getBoundingClientRect(),R=(te=t.y)!=null?te:0,N=(ie=(re=r.userData.baseTransform)==null?void 0:re.y)!=null?ie:0,C=r.userData.isFixed?0:window.scrollY;let v=-(F.top+C-R+N-r.userData.baseDOM.y)/y;Math.abs(v)<.05?v=0:Math.abs(v-1)<.05?v=1:Math.abs(v-.5)<.05&&(v=.5),r.userData.originRatioY=v}const p=(Q=r.userData.originRatioX)!=null?Q:.5,u=(q=r.userData.originRatioY)!=null?q:.5,g=f*(.5-p),T=y*(.5-u),I=(ce=(ae=r.userData.baseTransform)==null?void 0:ae.x)!=null?ce:0,A=(he=(le=r.userData.baseTransform)==null?void 0:le.y)!=null?he:0,E=((de=t.x)!=null?de:I)-I,x=((m=t.y)!=null?m:A)-A;r.position.setX(c+g+E),r.position.setY(n-(T+x)),r.scale.set(l,d,1),$.forceUpdateUniforms(r.material,{backgroundColor:t.backgroundColor,backgroundImage:t.backgroundImage,opacity:t.opacity,borderRadius:(O=t.borderRadius)!=null?O:(S=r.userData.baseStyles)==null?void 0:S.borderRadius,width:l,height:d})})}function tt(s,e,t){s.forEach(i=>{if(i.userData.isFixed&&i.userData.initialScroll&&i.userData.originalBasePosition){const r=e-i.userData.initialScroll.x,c=t-i.userData.initialScroll.y;i.userData.basePosition.x=i.userData.originalBasePosition.x+r,i.userData.basePosition.y=i.userData.originalBasePosition.y-c,i.position.x=i.userData.basePosition.x,i.position.y=i.userData.basePosition.y}})}class rt{constructor(e,t,i,r){h(this,"target");h(this,"renderer");h(this,"registry");h(this,"isTravelEnabled",!1);h(this,"tracker");this.target=e,this.renderer=t,this.registry=i,this.tracker=new Le(e,{resizeDebounce:r.resizeDebounce}),this.tracker.onLayoutChange.add((c,n)=>{document.querySelector(`[${k.NAME}~='${k.VALUES.TRAVELER}']`)!==null&&!this.isTravelEnabled&&(this.isTravelEnabled=!0,this.renderer.createRenderTarget());const a=Ie(this.target,c,G,1,0,this.renderer.qualityFactor);a&&this.renderer.syncScene(a,n)}),this.tracker.onScrollChange.add((c,n)=>{tt(this.renderer.fixedMeshes,c,n)}),this.tracker.onStyleChange.add(c=>{et(this.registry,c)}),this.tracker.onRender.add(()=>{this.renderer.render()})}start(){this.tracker.start()}stop(){this.tracker.stop()}}class it{constructor(){h(this,"store");this.store=new WeakMap}register(e,t){this.store.set(e,t)}get(e){return this.store.get(e)}has(e){return this.store.has(e)}remove(e){this.store.delete(e)}}class st{constructor(e,t){h(this,"renderer");h(this,"syncer");h(this,"target");h(this,"registry");var r,c,n;if(this.target=e,this.registry=new it,!document.getElementById("mirage-engine-styles")){const o=document.createElement("style");o.id="mirage-engine-styles",o.textContent=`
+        [${H.NAME}="${H.VALUES.HIDE}"] {
+          opacity: 0 !important;
+        }
+      `,document.head.appendChild(o)}let i;if(t.mode==="duplicate"?i=(c=(r=t.container)!=null?r:this.target.parentElement)!=null?c:void 0:i=(n=this.target.parentElement)!=null?n:void 0,!i)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new Qe(this.target,t,i,this.registry),this.renderer.mount(),this.syncer=new rt(this.target,this.renderer,this.registry,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}getTracker(){return this.syncer.tracker}updateUniforms(e,t){this.renderer.updateUniforms(e,t)}getCanvas(){return this.renderer.canvas}test(){const e=this.registry.get(document.querySelector("#box2"));if(!e)return;const t={ArrowRight:!1,ArrowLeft:!1,ArrowUp:!1,ArrowDown:!1};window.addEventListener("keydown",c=>{t[c.key]!==void 0&&(t[c.key]=!0)}),window.addEventListener("keyup",c=>{t[c.key]!==void 0&&(t[c.key]=!1)});const i=2,r=()=>{requestAnimationFrame(r),t.ArrowRight&&e.position.setX(e.position.x+i),t.ArrowLeft&&e.position.setX(e.position.x-i),t.ArrowUp&&e.position.setY(e.position.y+i),t.ArrowDown&&e.position.setY(e.position.y-i)};r()}}class nt{constructor(e={}){h(this,"frontSelector");h(this,"midLayerElement");h(this,"items",[]);h(this,"isInitialized",!1);h(this,"midLayer",null);h(this,"frontLayer",null);h(this,"tracker",null);this.frontSelector=e.frontSelector||".front",this.midLayerElement=e.midLayerElement||null,this.items=[],this.isInitialized=!1,this.tracker=new Le(document.body,e.trackerConfig||{resizeDebounce:!0})}init(){var e;this.isInitialized||(this.createLayers(),this.setupMidLayer(),this.hijackFrontElements(),this.setupHooks(),(e=this.tracker)==null||e.start(),this.isInitialized=!0,console.log("🥪 sand-telepochi initialized!"))}useTracker(e){this.tracker=e,this.setupHooks()}createLayers(){this.midLayer=document.createElement("div"),this.midLayer.id="sand-layer-mid",Object.assign(this.midLayer.style,{position:"fixed",inset:"0",zIndex:"9998",pointerEvents:"none"}),this.frontLayer=document.createElement("div"),this.frontLayer.id="sand-layer-front",Object.assign(this.frontLayer.style,{position:"fixed",inset:"0",zIndex:"9999",pointerEvents:"none"}),document.body.appendChild(this.midLayer),document.body.appendChild(this.frontLayer)}setupMidLayer(){this.midLayerElement&&this.midLayer&&(this.midLayer.appendChild(this.midLayerElement),this.midLayerElement.style.pointerEvents="auto")}hijackFrontElements(){const e=document.querySelectorAll(this.frontSelector);this.frontLayer&&e.forEach(t=>{var n;const i=t.getBoundingClientRect(),r=window.getComputedStyle(t),c=document.createElement("div");c.className="sand-placeholder",Object.assign(c.style,{display:r.display==="inline"?"inline-block":r.display,width:`${i.width}px`,height:`${i.height}px`,boxSizing:"border-box",marginTop:r.marginTop,marginBottom:r.marginBottom,marginLeft:r.marginLeft,marginRight:r.marginRight,visibility:"hidden",pointerEvents:"none"}),(n=t.parentNode)==null||n.insertBefore(c,t),this.frontLayer.appendChild(t),Object.assign(t.style,{position:"fixed",margin:"0",boxSizing:"border-box",width:`${i.width}px`,height:`${i.height}px`,pointerEvents:"auto"}),this.items.push({placeholder:c,original:t})})}setupHooks(){this.tracker&&this.tracker.onBeforeRender.add(()=>{const e=this.items.map(({placeholder:t})=>t.getBoundingClientRect());this.items.forEach(({original:t},i)=>{const r=e[i];t.style.top=`${r.top}px`,t.style.left=`${r.left}px`,t.style.width=`${r.width}px`,t.style.height=`${r.height}px`})})}}class ot{constructor(e,t){h(this,"_engine");h(this,"_sandwich");if(!e)throw new Error("[Mirage] Target element is required.");if(this._engine=new st(e,t),t.sandwich!==!1){const i=typeof t.sandwich=="object"?t.sandwich:{};this._sandwich=new nt({frontSelector:i.frontSelector||`[${Se.NAME}='${Se.VALUES.FRONT}']`}),this._sandwich.useTracker(this._engine.getTracker())}}start(){this._engine.start(),this._sandwich&&this._sandwich.init()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}getTracker(){return this._engine.getTracker()}getCanvas(){return this._engine.getCanvas()}updateUniforms(e,t){this._engine.updateUniforms(e,t)}test(){this._engine.test()}}L.Mirage=ot,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})});

package/dist/src/core/Mirage.d.ts

@@ -1,8 +1,13 @@
 import { MirageConfig } from '../types';
 export declare class Mirage {
     private _engine;
+    private _sandwich?;
     constructor(target: HTMLElement, config: MirageConfig);
     start(): void;
     stop(): void;
     destroy(): void;
+    getTracker(): import('../../packages/core/src/index.ts').Tracker;
+    getCanvas(): HTMLCanvasElement;
+    updateUniforms(element: HTMLElement, uniforms: Record<string, any>): void;
+    test(): void;
 }

package/dist/src/index.d.ts

@@ -1 +1,2 @@
 export { Mirage } from './core/Mirage';
+export type * from './types';

package/dist/src/types/config.d.ts

@@ -1,2 +1,7 @@
 import { CoreConfig } from '../../packages/core/src/index.ts';
-export type MirageConfig = CoreConfig;
+export interface SandwichConfig {
+    frontSelector?: string;
+}
+export type MirageConfig = CoreConfig & {
+    sandwich?: boolean | SandwichConfig;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirage-engine",
-  "version": "0.2.17",
+  "version": "0.3.0",
   "description": "An engine that mirrors HTML DOM elements to a WebGL scene in real-time.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -21,15 +21,16 @@
     "dist"
   ],
   "dependencies": {
-    "@mirage-engine/painter": "0.4.0",
-    "@mirage-engine/core": "0.2.1"
+    "@mirage-engine/sandwich": "0.2.0",
+    "@mirage-engine/painter": "1.0.1",
+    "@mirage-engine/core": "0.3.0"
   },
   "peerDependencies": {
-    "three": "^0.150.0"
+    "three": "^0.160.0"
   },
   "devDependencies": {
     "@types/three": "^0.181.0",
-    "three": "^0.150.0",
+    "three": "^0.160.0",
     "typescript": "^5.0.0",
     "vite": "^4.0.0",
     "vite-plugin-dts": "^4.5.4"
@@ -49,7 +50,6 @@
   "author": "dltldn333@gmail.com",
   "license": "MIT",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build"
   }
 }

package/dist/dev/main.d.ts

@@ -1 +0,0 @@
-export {};