@mirage-engine/core 0.0.2 → 0.2.0

package/dist/mirage-engine.umd.js

@@ -1,55 +1,85 @@
-(function(d,f){typeof exports=="object"&&typeof module!="undefined"?f(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],f):(d=typeof globalThis!="undefined"?globalThis:d||self,f(d.MirageEngine={},d.THREE))})(this,function(d,f){"use strict";var H=Object.defineProperty;var W=(d,f,T)=>f in d?H(d,f,{enumerable:!0,configurable:!0,writable:!0,value:T}):d[f]=T;var c=(d,f,T)=>(W(d,typeof f!="symbol"?f+"":f,T),T);function T(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const h=T(f),x=0,R=1,b=2,B=4,C=8,M=16;function I(r,t,e){const i=t.split(`
-`),n=[];return i.forEach(s=>{const a=s.split(" ");let o=a[0];for(let l=1;l<a.length;l++){const u=a[l];r.measureText(o+" "+u).width<e?o+=" "+u:(n.push(o),o=u)}n.push(o)}),n}function O(r,t,e,i,n=2){const s=document.createElement("canvas"),a=s.getContext("2d");if(!a)throw new Error("[Mirage] Failed to create canvas context");const l=(window.devicePixelRatio||1)*n;s.width=e*l,s.height=i*l,a.scale(l,l),a.font=t.font,a.fillStyle=t.color,a.textBaseline="top",a.globalAlpha=1;const u=I(a,r,e),m=t.lineHeight;u.forEach((g,y)=>{const w=y*m+2;let v=0;t.textAlign==="center"?v=e/2:t.textAlign==="right"&&(v=e),a.textAlign=t.textAlign,a.fillText(g,v,w)});const p=new h.CanvasTexture(s);return p.colorSpace=h.SRGBColorSpace,p.minFilter=h.LinearFilter,p.magFilter=h.LinearFilter,p.needsUpdate=!0,p}function S(r){return typeof r=="number"?r:parseFloat(r)||0}const F=`
+(function(u,T){typeof exports=="object"&&typeof module!="undefined"?T(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],T):(u=typeof globalThis!="undefined"?globalThis:u||self,T(u.MirageEngine={},u.THREE))})(this,function(u,T){"use strict";var ee=Object.defineProperty;var te=(u,T,w)=>T in u?ee(u,T,{enumerable:!0,configurable:!0,writable:!0,value:w}):u[T]=w;var d=(u,T,w)=>(te(u,typeof T!="symbol"?T+"":T,w),w);function w(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 h=w(T),M=0,B=1,O=2,A=4,D=8,L=16,R=1,E=2,q=0,X=["include-tree","exclude-tree","include-self","exclude-self","end"];function W(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 c=a[l];i.measureText(o+" "+c).width<t?o+=" "+c:(s.push(o),o=c)}s.push(o)}),s}function Y(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 c=W(a,i,t),p=e.lineHeight;c.forEach((m,v)=>{const b=v*p+2;let y=0;e.textAlign==="center"?y=t/2:e.textAlign==="right"&&(y=t),a.textAlign=e.textAlign,a.fillText(m,y,b)});const f=new h.CanvasTexture(n);return f.colorSpace=h.SRGBColorSpace,f.minFilter=h.LinearFilter,f.magFilter=h.LinearFilter,f.needsUpdate=!0,f}function S(i){return typeof i=="number"?i:parseFloat(i)||0}function P(i,e){var o,l,c,p;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((p=(c=t[3])!=null?c:t[1])!=null?p:t[0]);i.set(r,s,n,a)}const H=`
   varying vec2 vUv;
+  varying vec4 vScreenPos;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vScreenPos = gl_Position;
   }
-`,N=`
+`,$=`
+
   varying vec2 vUv;
   
   uniform vec2 uSize;
-  uniform float uRadius;
+  uniform vec4 uBorderRadius;
   uniform float uBorderWidth;
-  uniform vec3 uColor;
+  uniform vec3 uBgColor;
   uniform vec3 uBorderColor;
   uniform float uOpacity;
   uniform float uBgOpacity;
+  uniform float uBorderOpacity;
+
+  #INJECT_DECLARATIONS
 
-  // SDF 박스 함수
   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;
-    
-    float d = sdRoundedBox(p, halfSize, uRadius);
-    
-    float smoothEdge = 1.0; 
 
-    float fillAlpha = 1.0 - smoothstep(-uBorderWidth - smoothEdge, -uBorderWidth, d);
+    #INJECT_UV_MODIFIER
     
-    float borderAlpha = 0.0;
-    
-    if (uBorderWidth > 0.01) {
-      borderAlpha = (1.0 - smoothstep(0.0, smoothEdge, d)) - fillAlpha;
-    }
+    // color decision pipeline
+    vec4 baseColor = vec4(uBgColor, uBgOpacity);
 
-    vec3 color = uColor;
-    float totalAlpha = borderAlpha + fillAlpha;
-    
-    if (totalAlpha > 0.001) {
-       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    #INJECT_BASE_COLOR
+
+    // 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);
+
+    float aa = 1.0; 
+    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+
+    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;
     }
-    
-    float shapeAlpha = borderAlpha + (fillAlpha * uBgOpacity);
-    float finalOpacity = shapeAlpha * uOpacity;
-    
+
+    // final blending (border + background)
+    float aFront = borderAlpha;
+    float aBack = baseColor.a;
+    float aOut = aFront + aBack * (1.0 - aFront);
+
+    float safeAlpha = max(aOut, 0.0001);
+    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
+    vec4 finalColor = vec4(cOut, aOut);
+
+    // final color control (Tint, Noise)
+    #INJECT_COLOR_MODIFIER
+
+    float finalOpacity = finalColor.a * bgMask * uOpacity;
     if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(color, finalOpacity);
+    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+
+    #include <colorspace_fragment>
   }
-`;function E(r){if(!r||r==="transparent")return{color:new h.Color(16777215),alpha:0};const t=r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(t){const e=parseInt(t[1],10),i=parseInt(t[2],10),n=parseInt(t[3],10),s=t[4]!==void 0?parseFloat(t[4]):1;return{color:new h.Color(`rgb(${e}, ${i}, ${n})`),alpha:s}}return{color:new h.Color(r),alpha:1}}function L(r,t,e){var o;const i=E(r.backgroundColor),n=E(r.borderColor),s={uSize:{value:new h.Vector2(t,e)},uRadius:{value:S(r.borderRadius)},uBorderWidth:{value:S(r.borderWidth)},uColor:{value:i.color},uBorderColor:{value:n.color},uOpacity:{value:(o=r.opacity)!=null?o:1},uBgOpacity:{value:i.alpha}};return new h.ShaderMaterial({uniforms:s,vertexShader:F,fragmentShader:N,transparent:!0,side:h.FrontSide})}function A(r,t,e,i){var a;const n=E(t.backgroundColor),s=E(t.borderColor);r.uniforms.uSize.value.set(e,i),r.uniforms.uRadius.value=S(t.borderRadius),r.uniforms.uBorderWidth.value=S(t.borderWidth),r.uniforms.uColor.value.copy(n.color),r.uniforms.uBorderColor.value.copy(s.color),r.uniforms.uOpacity.value=(a=t.opacity)!=null?a:1,r.uniforms.uBgOpacity.value=n.alpha}const D={create(r,t,e,i,n,s=2){if(r==="BOX")return L(t,i,n);if(r==="TEXT"){const a=O(e||"",t,i,n,s);return new h.MeshBasicMaterial({map:a,transparent:!0,side:h.FrontSide,color:16777215})}return new h.MeshBasicMaterial({visible:!1})},update(r,t,e,i,n,s,a=2){if(t==="BOX")A(r,e,n,s);else if(t==="TEXT"){const o=r;o.map&&o.map.dispose();const l=O(i||"",e,n,s,a);o.map=l,o.needsUpdate=!0}}};class X{constructor(t,e,i){c(this,"canvas");c(this,"scene");c(this,"camera");c(this,"renderer");c(this,"renderOrder",0);c(this,"textQualityFactor",2);c(this,"mode","overlay");c(this,"customZIndex","9999");c(this,"target");c(this,"mountContainer");c(this,"targetRect");c(this,"meshMap",new Map);var a,o,l;this.target=t,this.mountContainer=i,this.mode=(a=e.mode)!=null?a:"overlay",(o=e.style)!=null&&o.zIndex&&(this.customZIndex=e.style.zIndex),this.canvas=document.createElement("canvas"),this.scene=new h.Scene,this.targetRect=this.target.getBoundingClientRect();const n=this.targetRect.width,s=this.targetRect.height;this.camera=new h.OrthographicCamera(n/-2,n/2,s/2,s/-2,1,1e3),this.camera.position.z=100,this.renderer=new h.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(n,s),this.applyTextQuality((l=e.textQuality)!=null?l:"medium")}applyTextQuality(t){if(typeof t=="number"){this.textQualityFactor=Math.max(.1,t);return}switch(t){case"low":this.textQualityFactor=1;break;case"high":this.textQualityFactor=4;break;case"medium":default:this.textQualityFactor=2;break}}mount(){this.mountContainer.appendChild(this.canvas),this.canvas.style.zIndex=this.customZIndex,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(t,e){this.renderer.setSize(t,e),this.camera.left=t/-2,this.camera.right=t/2,this.camera.top=e/2,this.camera.bottom=e/-2,this.camera.updateProjectionMatrix()}syncScene(t){const e=this.target.getBoundingClientRect(),i=Math.abs(e.width-this.targetRect.width)>.1||Math.abs(e.height-this.targetRect.height)>.1,n=this.mode==="overlay"&&(Math.abs(e.top-this.targetRect.top)>.1||Math.abs(e.left-this.targetRect.left)>.1);i?(this.targetRect=e,this.renderer.setSize(this.targetRect.width,this.targetRect.height),this.camera.left=this.targetRect.width/-2,this.camera.right=this.targetRect.width/2,this.camera.top=this.targetRect.height/2,this.camera.bottom=this.targetRect.height/-2,this.camera.updateProjectionMatrix(),this.updateCanvasLayout()):n?(this.targetRect=e,this.updateCanvasLayout()):this.targetRect=e,this.renderOrder=0;const s=new Set;this.reconcileNode(t,s);for(const[a,o]of this.meshMap.entries())s.has(a)||(this.scene.remove(o),o.geometry.dispose(),o.material instanceof h.Material&&o.material.dispose(),this.meshMap.delete(a))}reconcileNode(t,e){e.add(t.element);let i=this.meshMap.get(t.element);if(!i){const n=new h.PlaneGeometry(1,1),s=D.create("BOX",t.styles,"",t.rect.width,t.rect.height);i=new h.Mesh(n,s),t.type==="TEXT"&&(i.name="BG_MESH"),this.scene.add(i),this.meshMap.set(t.element,i)}if(i.userData.domRect=t.rect,this.updateMeshProperties(i,t),t.type==="BOX")for(const n of t.children)this.reconcileNode(n,e);else t.type==="TEXT"&&this.reconcileTextChild(i,t)}reconcileTextChild(t,e){var o,l;let i=t.children.find(u=>u.name==="TEXT_CHILD");const n=JSON.stringify(e.textStyles),s=(o=i==null?void 0:i.userData)==null?void 0:o.styleHash;if(!i||e.dirtyMask&M||n!==s){i&&((l=i.material.map)==null||l.dispose(),i.geometry.dispose(),t.remove(i));const u=D.create("TEXT",e.textStyles,e.textContent||"",e.rect.width,e.rect.height,this.textQualityFactor),m=new h.PlaneGeometry(1,1);i=new h.Mesh(m,u),i.name="TEXT_CHILD",i.userData={styleHash:n},i.position.z=.005,t.add(i)}if(i){const u=t.userData.domRect,m=u.x+u.width/2,p=u.y+u.height/2,g=e.rect.x+e.rect.width/2,y=e.rect.y+e.rect.height/2,w=g-m,v=-(y-p);i.position.set(w,v,.005)}}updateMeshProperties(t,e){const{rect:i,styles:n}=e,s=this.renderer.getPixelRatio(),a=this.renderer.domElement.width/s,o=this.renderer.domElement.height/s;t.scale.set(i.width,i.height,1);const l=.001;this.renderOrder++;const u=this.targetRect.left+window.scrollX,m=this.targetRect.top+window.scrollY,p=i.x-u,g=i.y-m;t.position.set(p-a/2+i.width/2,-g+o/2-i.height/2,n.zIndex+this.renderOrder*l),D.update(t.material,"BOX",e.styles,"",e.rect.width,e.rect.height)}render(){this.renderer.render(this.scene,this.camera)}}function _(r){const t=document.createRange();t.selectNodeContents(r);const e=t.getBoundingClientRect();return{left:e.left,top:e.top,width:e.width,height:e.height}}function Y(r){const t=parseFloat(r.fontSize);let e=parseFloat(r.lineHeight);isNaN(e)&&(e=t*1.2);let i=parseFloat(r.letterSpacing);return isNaN(i)&&(i=0),{font:`${r.fontStyle} ${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,color:r.color,textAlign:r.textAlign||"start",textBaseline:"alphabetic",direction:r.direction||"inherit",lineHeight:e,letterSpacing:i}}function z(r,t=R|b|B|M|C){if(r.nodeType===Node.TEXT_NODE){const p=r;if(!p.textContent||!p.textContent.trim())return null;const g=p.textContent.replace(/\s+/g," ").trim();if(g.length===0)return null;const y=_(p);if(y.width===0||y.height===0)return null;const w=p.parentElement,v=w?window.getComputedStyle(w):null;return v?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:p,rect:{x:y.left+window.scrollX,y:y.top+window.scrollY,width:y.width,height:y.height},styles:{backgroundColor:"transparent",opacity:parseFloat(v.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:g,textStyles:Y(v),dirtyMask:t,children:[]}:null}const e=r,i=e.getBoundingClientRect(),n=window.getComputedStyle(e);if(i.width===0||i.height===0||n.display==="none")return null;let s=e.getAttribute("data-mid");s||(s=Math.random().toString(36).substring(2,11),e.setAttribute("data-mid",s));const a=parseInt(n.zIndex),o={backgroundColor:n.backgroundColor,opacity:parseFloat(n.opacity),zIndex:isNaN(a)?0:a,borderRadius:n.borderRadius,borderColor:n.borderColor,borderWidth:n.borderWidth};let l,u;const m=[];return Array.from(e.childNodes).forEach(p=>{const g=z(p,t);g&&m.push(g)}),{id:s,type:"BOX",element:e,rect:{x:i.left+window.scrollX,y:i.top+window.scrollY,width:i.width,height:i.height},styles:o,textContent:l,textStyles:u,dirtyMask:t,children:m}}class k{constructor(t,e){c(this,"target");c(this,"renderer");c(this,"observer");c(this,"isDomDirty",!1);c(this,"isRunning",!1);c(this,"pendingMask",x);c(this,"mutationTimer",null);c(this,"cssTimer",null);c(this,"onTransitionFinished",t=>{this.target.contains(t.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=R|b,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});c(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});c(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=t,this.renderer=e,this.observer=new MutationObserver(i=>{let n=x;for(const s of i)s.type==="childList"?n|=C:s.type==="attributes"&&(s.attributeName==="style"||s.attributeName==="class")&&(n|=R|b);if(n!==x){if(this.pendingMask|=n,n&C){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 t=z(this.target,this.pendingMask);t&&this.renderer.syncScene(t),this.pendingMask=x}}class P{constructor(t,e){c(this,"renderer");c(this,"syncer");c(this,"target");var n,s,a;this.target=t;let i;if(e.mode==="duplicate"?i=(s=(n=e.container)!=null?n:this.target.parentElement)!=null?s:void 0:i=(a=this.target.parentElement)!=null?a:void 0,!i)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new X(this.target,e,i),this.renderer.mount(),this.syncer=new k(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}d.DIRTY_CONTENT=M,d.DIRTY_NONE=x,d.DIRTY_RECT=R,d.DIRTY_STRUCTURE=C,d.DIRTY_STYLE=b,d.DIRTY_ZINDEX=B,d.Engine=P,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+`;function F(i){if(!i||i==="transparent")return{color:new h.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 h.Color(`rgb(${t}, ${r}, ${s})`),alpha:n}}return{color:new h.Color(i),alpha:1}}function G(i,e,t,r=null,s){var y;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);
+  `:"",c=(s==null?void 0:s.colorModifier)||"",p=$.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",o).replace("#INJECT_BASE_COLOR",l).replace("#INJECT_COLOR_MODIFIER",c),f=F(i.backgroundColor),m=F(i.borderColor),v={uSize:{value:new h.Vector2(e,t)},uBorderRadius:{value:new h.Vector4(0,0,0,0)},uBorderWidth:{value:S(i.borderWidth)},uBgColor:{value:f.color},uBorderColor:{value:m.color},uOpacity:{value:(y=i.opacity)!=null?y:1},uBgOpacity:{value:f.alpha},uBorderOpacity:{value:m.alpha},uTexture:{value:null}};return P(v.uBorderRadius.value,i.borderRadius),n&&(v.uTexture.value=r),new h.ShaderMaterial({uniforms:v,vertexShader:H,fragmentShader:p,transparent:!0,side:h.FrontSide})}function j(i,e,t,r,s){var o;const n=F(e.backgroundColor),a=F(e.borderColor);i.uniforms.uSize.value.set(t,r),P(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 I={create(i,e,t,r,s,n=2,a=null){if(i==="BOX")return G(e,r,s,a);if(i==="TEXT"){const o=Y(t||"",e,r,s,n);return new h.MeshBasicMaterial({map:o,transparent:!0,side:h.FrontSide,color:16777215})}return new h.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 c=Y(r||"",t,s,n,a);l.map=c,l.needsUpdate=!0}}};class J{constructor(e,t,r){d(this,"canvas");d(this,"scene");d(this,"camera");d(this,"renderer");d(this,"renderTarget",null);d(this,"renderOrder",0);d(this,"qualityFactor",2);d(this,"mode","overlay");d(this,"target");d(this,"mountContainer");d(this,"targetRect");d(this,"meshMap",new Map);var a,o;this.target=e,this.mountContainer=r,this.mode=(a=t.mode)!=null?a:"overlay",this.canvas=document.createElement("canvas"),this.scene=new h.Scene,this.targetRect=this.target.getBoundingClientRect();const s=this.targetRect.width,n=this.targetRect.height;this.camera=new h.OrthographicCamera(s/-2,s/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(0),this.renderer=new h.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(s,n),this.applyTextQuality((o=t.quality)!=null?o:"medium")}createRenderTarget(){this.renderTarget=new h.WebGLRenderTarget(this.targetRect.width*this.qualityFactor,this.targetRect.height*this.qualityFactor,{minFilter:h.LinearFilter,magFilter:h.LinearFilter,format:h.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 h.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 h.PlaneGeometry(1,1);let a;a=I.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,e.isTraveler?(s=this.renderTarget)==null?void 0:s.texture:void 0),r=new h.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(c=>c.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&L||s!==n){r&&((l=r.material.map)==null||l.dispose(),r.geometry.dispose(),e.remove(r));const c=I.create("TEXT",t.textStyles,t.textContent||"",t.rect.width,t.rect.height,this.qualityFactor),p=new h.PlaneGeometry(1,1);r=new h.Mesh(p,c),r.name="TEXT_CHILD",r.userData={styleHash:s},this.updateMeshLayers(r,t),r.position.z=.005,e.add(r)}if(r){const c=e.userData.domRect,p=c.x+c.width/2,f=c.y+c.height/2,m=t.rect.x+t.rect.width/2,v=t.rect.y+t.rect.height/2,b=m-p,y=-(v-f);r.position.set(b,y,.005)}}updateMeshProperties(e,t){var v;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 c=this.targetRect.left+window.scrollX,p=this.targetRect.top+window.scrollY,f=r.x-c,m=r.y-p;e.position.set(f-a/2+r.width/2,-m+o/2-r.height/2,s.zIndex+this.renderOrder*l),I.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height,this.qualityFactor,t.isTraveler?(v=this.renderTarget)==null?void 0:v.texture:void 0)}updateMeshLayers(e,t){const r=(1-(t.visibility&R))*30;e.layers.set(r),t.visibility===(R|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 h.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 h.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 c=(s.x+1)/2*n,p=(s.y+1)/2*a,f=l.scale.x,m=l.scale.y,v=c-f/2,b=p-m/2,y=v*this.qualityFactor/o,_=b*this.qualityFactor/o,z=f*this.qualityFactor/o,g=m*this.qualityFactor/o;this.renderer.setScissor(y,_,z,g),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 h.PlaneGeometry(e,t),s=new h.MeshBasicMaterial({map:this.renderTarget.texture,side:h.DoubleSide,transparent:!0,opacity:.8}),n=new h.Mesh(r,s);n.position.set(0,0,90),n.layers.set(28),this.scene.add(n)}}function V(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 U(i,e=B|O|A|L|D,t,r){if(i.nodeType===Node.TEXT_NODE){const g=i;if(!g.textContent||!g.textContent.trim())return null;const x=g.textContent.replace(/\s+/g," ").trim();if(x.length===0)return null;const C=V(g);if(C.width===0||C.height===0)return null;const k=g.parentElement,N=k?window.getComputedStyle(k):null;return N?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:g,rect:{x:C.left+window.scrollX,y:C.top+window.scrollY,width:C.width,height:C.height},styles:{backgroundColor:"transparent",opacity:parseFloat(N.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:x,textStyles:Z(N),dirtyMask:e,visibility:t,isTraveler:!1,children:[]}:null}const s=i,n=s.dataset.mirageFilter;let a=t,o=t;if(n){const g=new Set(n.split(/\s+/));for(const x of g)if(!X.includes(x))throw new Error(`[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(g.has("end"))return null;if(g.has("include-tree")&&g.has("exclude-tree"))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(g.has("include-self")&&g.has("exclude-self"))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");g.has("include-tree")?a=a|R:g.has("exclude-tree")&&(a=a&~R),o=a,g.has("include-self")?o=o|R:g.has("exclude-self")&&(o=o&~R)}o=o|t&E;const l=s.dataset.mirageTravel;let c=!1;l&&new Set(l.split(/\s+/)).has("traveler")&&(o=o&~E,a=a&~E,c=!0);const p=s.getBoundingClientRect(),f=window.getComputedStyle(s);if(p.width===0||p.height===0||f.display==="none")return null;let m=s.getAttribute("data-mid");m||(m=Math.random().toString(36).substring(2,11),s.setAttribute("data-mid",m));const v=parseInt(f.zIndex),b={backgroundColor:f.backgroundColor,opacity:parseFloat(f.opacity),zIndex:isNaN(v)?0:v,borderRadius:f.borderRadius,borderColor:f.borderColor,borderWidth:f.borderWidth};let y,_;const z=[];return Array.from(s.childNodes).forEach(g=>{const x=g.nodeType===Node.TEXT_NODE?o:a,C=U(g,e,x);C&&z.push(C)}),{id:m,type:"BOX",element:s,rect:{x:p.left+window.scrollX,y:p.top+window.scrollY,width:p.width,height:p.height},styles:b,textContent:y,textStyles:_,dirtyMask:e,visibility:o,isTraveler:c,children:z}}class Q{constructor(e,t,r){d(this,"target");d(this,"renderer");d(this,"filter");d(this,"observer");d(this,"isDomDirty",!1);d(this,"isRunning",!1);d(this,"isTravelEnabled",!1);d(this,"pendingMask",M);d(this,"mutationTimer",null);d(this,"cssTimer",null);d(this,"resizeConfig");d(this,"resizeTimer",null);d(this,"isResizing",!1);d(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=B|O,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});d(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)});d(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 c of o)c.type==="childList"?l|=D:c.type==="attributes"&&(c.attributeName==="style"||c.attributeName==="class")&&(l|=B|O);if(l!==M){if(this.pendingMask|=l,l&D){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=U(this.target,this.pendingMask,e?R|E:R,this.filter);t&&this.renderer.syncScene(t),this.pendingMask=M}}class K{constructor(e,t){d(this,"renderer");d(this,"syncer");d(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 J(this.target,t,r),this.renderer.mount(),this.syncer=new Q(this.target,this.renderer,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}u.ALLOWED_FILTERS=X,u.DIRTY_CONTENT=L,u.DIRTY_NONE=M,u.DIRTY_RECT=B,u.DIRTY_STRUCTURE=D,u.DIRTY_STYLE=O,u.DIRTY_ZINDEX=A,u.EXCLUDED=q,u.Engine=K,u.SYSTEM_LAYER=E,u.USER_LAYER=R,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

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

@@ -1,15 +1,21 @@
+import { CoreConfig } from '../types/config';
 import { Renderer } from '../renderer/Renderer';
 
 export declare class Syncer {
     private target;
     private renderer;
+    private filter;
     private observer;
     private isDomDirty;
     private isRunning;
+    private isTravelEnabled;
     private pendingMask;
     private mutationTimer;
     private cssTimer;
-    constructor(target: HTMLElement, renderer: Renderer);
+    private resizeConfig;
+    private resizeTimer;
+    private isResizing;
+    constructor(target: HTMLElement, renderer: Renderer, config: CoreConfig);
     start(): void;
     stop(): void;
     private clearTimers;

package/dist/src/dom/Extractor.d.ts

@@ -1,3 +1,4 @@
-import { SceneNode } from '../types';
+import { SceneNode, Visibility } from '../types';
+import { FilterConfig } from '../types/config';
 
-export declare function extractSceneGraph(sourceNode: HTMLElement | Node, initialMask?: number): SceneNode | null;
+export declare function extractSceneGraph(sourceNode: HTMLElement | Node, initialMask: number | undefined, inheritedFlow: Visibility, filterConfig?: FilterConfig): SceneNode | null;

package/dist/src/renderer/Renderer.d.ts

@@ -5,15 +5,16 @@ export declare class Renderer {
     private readonly scene;
     private readonly camera;
     private readonly renderer;
+    private renderTarget;
     private renderOrder;
-    private textQualityFactor;
+    private qualityFactor;
     private mode;
-    private customZIndex;
     private target;
     private mountContainer;
     private targetRect;
     private meshMap;
     constructor(target: HTMLElement, config: CoreConfig, mountContainer: HTMLElement);
+    createRenderTarget(): void;
     private applyTextQuality;
     mount(): void;
     private updateCanvasLayout;
@@ -23,5 +24,8 @@ export declare class Renderer {
     private reconcileNode;
     private reconcileTextChild;
     private updateMeshProperties;
+    private updateMeshLayers;
+    private captureRenderTarget;
     render(): void;
+    showScissoredRenderTarget(): void;
 }

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

@@ -1,4 +1,5 @@
 import { TextStyles, BoxStyles } from '../../packages/painter/src/index.ts';
+import { Visibility } from './flags';
 
 export type NodeType = "BOX" | "TEXT";
 export interface NodeRect {
@@ -16,5 +17,7 @@ export interface SceneNode {
     textContent?: string;
     textStyles?: TextStyles;
     dirtyMask: number;
+    visibility: Visibility;
+    isTraveler: boolean;
     children: SceneNode[];
 }

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

@@ -1,11 +1,25 @@
-export type TextQuality = "low" | "medium" | "high" | number;
+export type Quality = "low" | "medium" | "high" | number;
 export type MirageMode = "overlay" | "duplicate";
+export interface FilterConfig {
+    includeTree?: string[];
+    excludeTree?: string[];
+    includeSelf?: string[];
+    excludeSelf?: string[];
+    end?: string[];
+}
+export interface ResizeConfig {
+    delay?: number;
+    onStart?: () => void;
+    onEnd?: () => void;
+}
 interface BaseConfig {
     debug?: boolean;
-    textQuality?: TextQuality;
+    quality?: Quality;
     style?: {
         zIndex?: string;
     };
+    filter?: FilterConfig;
+    resizeDebounce?: boolean | ResizeConfig;
 }
 export interface OverlayConfig extends BaseConfig {
     mode?: "overlay";

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

@@ -4,3 +4,8 @@ export declare const DIRTY_STYLE: number;
 export declare const DIRTY_ZINDEX: number;
 export declare const DIRTY_STRUCTURE: number;
 export declare const DIRTY_CONTENT: number;
+export declare const USER_LAYER: number;
+export declare const SYSTEM_LAYER: number;
+export declare const EXCLUDED = 0;
+export type Visibility = 0 | 1 | 2 | 3;
+export declare const ALLOWED_FILTERS: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirage-engine/core",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@types/three": "^0.181.0",
-    "@mirage-engine/painter": "0.2.3"
+    "@mirage-engine/painter": "0.3.0"
   },
   "private": false,
   "publishConfig": {

package/src/core/Engine.ts

@@ -27,7 +27,7 @@ export class Engine {
 
     this.renderer.mount();
 
-    this.syncer = new Syncer(this.target, this.renderer);
+    this.syncer = new Syncer(this.target, this.renderer, config);
   }
 
   public start() {

package/src/core/Syncer.ts

@@ -1,3 +1,4 @@
+import { CoreConfig } from "../types/config";
 import { Renderer } from "../renderer/Renderer";
 import { extractSceneGraph } from "../dom/Extractor";
 import {
@@ -5,24 +6,57 @@ import {
   DIRTY_RECT,
   DIRTY_STRUCTURE,
   DIRTY_STYLE,
+  USER_LAYER,
+  SYSTEM_LAYER,
+  Visibility,
 } from "../types";
 
+interface InternalResizeConfig {
+  enabled: boolean;
+  delay: number;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
 export class Syncer {
   private target: HTMLElement;
   private renderer: Renderer;
+  private filter: CoreConfig["filter"];
+
   private observer: MutationObserver;
 
   private isDomDirty: boolean = false;
   private isRunning: boolean = false;
+  private isTravelEnabled: boolean = false;
 
   private pendingMask: number = DIRTY_NONE;
 
   private mutationTimer: number | null = null;
   private cssTimer: number | null = null;
 
-  constructor(target: HTMLElement, renderer: Renderer) {
+  private resizeConfig: InternalResizeConfig;
+  private resizeTimer: number | null = null;
+  private isResizing: boolean = false;
+
+  constructor(target: HTMLElement, renderer: Renderer, config: CoreConfig) {
     this.target = target;
     this.renderer = renderer;
+    this.filter = config.filter;
+
+    // Resize Debounce Configuration
+    const debounceOpt = config.resizeDebounce ?? true;
+    if (debounceOpt === false) {
+      this.resizeConfig = { enabled: false, delay: 0 };
+    } else if (debounceOpt === true) {
+      this.resizeConfig = { enabled: true, delay: 150 };
+    } else {
+      this.resizeConfig = {
+        enabled: true,
+        delay: debounceOpt.delay ?? 150,
+        onStart: debounceOpt.onStart,
+        onEnd: debounceOpt.onEnd,
+      };
+    }
 
     this.observer = new MutationObserver((mutations) => {
       let currentMask = DIRTY_NONE;
@@ -80,6 +114,8 @@ export class Syncer {
 
     this.forceUpdateScene();
     this.renderLoop();
+    // for debugging
+    // this.renderer.showScissoredRenderTarget();
   }
 
   public stop() {
@@ -120,13 +156,45 @@ export class Syncer {
   };
 
   private onWindowResize = () => {
-    this.renderer.setSize(window.innerWidth, window.innerHeight);
-    this.isDomDirty = true;
+    if (!this.resizeConfig.enabled) {
+      this.isDomDirty = true;
+      return;
+    }
+
+    if (!this.isResizing) {
+      this.isResizing = true;
+      if (this.resizeConfig.onStart) this.resizeConfig.onStart();
+    }
+
+    if (this.resizeTimer) clearTimeout(this.resizeTimer);
+
+    this.resizeTimer = window.setTimeout(() => {
+      this.isDomDirty = true;
+
+      if (this.resizeConfig.onEnd) this.resizeConfig.onEnd();
+      this.isResizing = false;
+      this.resizeTimer = null;
+    }, this.resizeConfig.delay);
   };
 
   private forceUpdateScene() {
     this.isDomDirty = false;
-    const sceneGraph = extractSceneGraph(this.target, this.pendingMask);
+
+    const discoveredTraveler =
+      document.querySelector("[data-mirage-travel='traveler']") !== null;
+    if (discoveredTraveler && !this.isTravelEnabled) {
+      this.isTravelEnabled = true;
+      this.renderer.createRenderTarget();
+    }
+
+    const sceneGraph = extractSceneGraph(
+      this.target,
+      this.pendingMask,
+      (discoveredTraveler
+        ? USER_LAYER | SYSTEM_LAYER
+        : USER_LAYER) as Visibility,
+      this.filter,
+    );
 
     if (sceneGraph) {
       this.renderer.syncScene(sceneGraph);

package/src/dom/Extractor.ts

@@ -5,9 +5,14 @@ import {
   DIRTY_ZINDEX,
   DIRTY_STRUCTURE,
   SceneNode,
+  Visibility,
+  USER_LAYER,
+  SYSTEM_LAYER,
+  ALLOWED_FILTERS,
 } from "../types";
 
 import { BoxStyles, TextStyles } from "@mirage-engine/painter";
+import { FilterConfig } from "../types/config";
 
 // Helper function: getTextNodeRect, isValidTextNode, isLeafTextElement, extractTextStyles
 
@@ -50,12 +55,13 @@ export function extractSceneGraph(
     DIRTY_STYLE |
     DIRTY_ZINDEX |
     DIRTY_CONTENT |
-    DIRTY_STRUCTURE
+    DIRTY_STRUCTURE,
+  inheritedFlow: Visibility,
+  filterConfig?: FilterConfig,
 ): SceneNode | null {
   // Check text node
   if (sourceNode.nodeType === Node.TEXT_NODE) {
     const textNode = sourceNode as Text;
-
     // empthy text check
     if (!textNode.textContent || !textNode.textContent.trim()) return null;
     const normalizedText = textNode.textContent.replace(/\s+/g, " ").trim();
@@ -93,11 +99,80 @@ export function extractSceneGraph(
       textContent: normalizedText,
       textStyles: extractTextStyles(computed),
       dirtyMask: initialMask,
+      visibility: inheritedFlow,
+      isTraveler: false,
       children: [],
     };
   }
 
   const element = sourceNode as HTMLElement;
+  // [[Filter]] data attribute based filtering
+  const filterData = element.dataset.mirageFilter;
+  let visibleFlow = inheritedFlow;
+  let visibleFlag = inheritedFlow;
+  if (filterData) {
+    const filterSet = new Set(filterData.split(/\s+/));
+    // error check
+    for (const token of filterSet) {
+      if (!ALLOWED_FILTERS.includes(token)) {
+        throw new Error(
+          `[MirageEngine] Invalid filter token: '${token}'. ` +
+            `Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`,
+        );
+      }
+    }
+
+    if (filterSet.has("end")) return null;
+
+    // error check
+    if (filterSet.has("include-tree") && filterSet.has("exclude-tree")) {
+      throw new Error(
+        `[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.`,
+      );
+    }
+    if (filterSet.has("include-self") && filterSet.has("exclude-self")) {
+      throw new Error(
+        `[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.`,
+      );
+    }
+
+    if (filterSet.has("include-tree")) {
+      visibleFlow = (visibleFlow | USER_LAYER) as Visibility;
+    } else if (filterSet.has("exclude-tree")) {
+      visibleFlow = (visibleFlow & ~USER_LAYER) as Visibility;
+    }
+
+    visibleFlag = visibleFlow;
+
+    if (filterSet.has("include-self")) {
+      visibleFlag = (visibleFlag | USER_LAYER) as Visibility;
+    } else if (filterSet.has("exclude-self")) {
+      visibleFlag = (visibleFlag & ~USER_LAYER) as Visibility;
+    }
+  }
+
+  // [[filter]] class based filtering
+  // [Filter] end
+  // if (filterConfig && filterConfig.end && filterConfig.end.length > 0) {
+  //   const isEnd = filterConfig.end.some((cls) =>
+  //     element.classList.contains(cls),
+  //   );
+  //   if (isEnd) return null;
+  // }
+
+  visibleFlag = (visibleFlag | (inheritedFlow & SYSTEM_LAYER)) as Visibility;
+
+  const travelData = element.dataset.mirageTravel;
+  let isTraveler = false;
+  if (travelData) {
+    const travelSet = new Set(travelData.split(/\s+/));
+    if (travelSet.has("traveler")) {
+      visibleFlag = (visibleFlag & ~SYSTEM_LAYER) as Visibility;
+      visibleFlow = (visibleFlow & ~SYSTEM_LAYER) as Visibility;
+      isTraveler = true;
+    }
+  }
+
   const rect = element.getBoundingClientRect();
   const computed = window.getComputedStyle(element);
 
@@ -127,8 +202,14 @@ export function extractSceneGraph(
   const children: SceneNode[] = [];
 
   Array.from(element.childNodes).forEach((child) => {
-    // Recurring
-    const childNode = extractSceneGraph(child, initialMask);
+    const visibleFlowToPass =
+      child.nodeType === Node.TEXT_NODE ? visibleFlag : visibleFlow;
+    const childNode = extractSceneGraph(
+      child,
+      initialMask,
+      visibleFlowToPass,
+      filterConfig,
+    );
     if (childNode) {
       children.push(childNode);
     }
@@ -148,6 +229,8 @@ export function extractSceneGraph(
     textContent,
     textStyles,
     dirtyMask: initialMask,
+    visibility: visibleFlag,
+    isTraveler: isTraveler,
     children,
   };
 }