@mirage-engine/core 0.0.2 → 0.1.0

package/dist/mirage-engine.js

@@ -1,154 +1,203 @@
-var B = Object.defineProperty;
-var z = (r, t, e) => t in r ? B(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var c = (r, t, e) => (z(r, typeof t != "symbol" ? t + "" : t, e), e);
-import * as h from "three";
-const v = 0, R = 1, b = 2, D = 4, C = 8, E = 16;
-function F(r, t, e) {
+var k = Object.defineProperty;
+var I = (r, t, e) => t in r ? k(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var l = (r, t, e) => (I(r, typeof t != "symbol" ? t + "" : t, e), e);
+import * as d from "three";
+const T = 0, S = 1, B = 2, A = 4, M = 8, z = 16, D = 0, j = 29, F = 30, _ = [
+  "include-tree",
+  "exclude-tree",
+  "include-self",
+  "exclude-self",
+  "end"
+];
+function P(r, t, e) {
   const i = t.split(`
 `), s = [];
   return i.forEach((n) => {
     const a = n.split(" ");
     let o = a[0];
-    for (let l = 1; l < a.length; l++) {
-      const d = a[l];
-      r.measureText(o + " " + d).width < e ? o += " " + d : (s.push(o), o = d);
+    for (let h = 1; h < a.length; h++) {
+      const c = a[h];
+      r.measureText(o + " " + c).width < e ? o += " " + c : (s.push(o), o = c);
     }
     s.push(o);
   }), s;
 }
-function S(r, t, e, i, s = 2) {
+function L(r, t, e, i, 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 = e * l, n.height = i * l, a.scale(l, l), a.font = t.font, a.fillStyle = t.color, a.textBaseline = "top", a.globalAlpha = 1;
-  const d = F(a, r, e), p = t.lineHeight;
-  d.forEach((m, f) => {
-    const y = f * p + 2;
-    let g = 0;
-    t.textAlign === "center" ? g = e / 2 : t.textAlign === "right" && (g = e), a.textAlign = t.textAlign, a.fillText(m, g, y);
+  const h = (window.devicePixelRatio || 1) * s;
+  n.width = e * h, n.height = i * h, a.scale(h, h), a.font = t.font, a.fillStyle = t.color, a.textBaseline = "top", a.globalAlpha = 1;
+  const c = P(a, r, e), p = t.lineHeight;
+  c.forEach((y, w) => {
+    const b = w * p + 2;
+    let x = 0;
+    t.textAlign === "center" ? x = e / 2 : t.textAlign === "right" && (x = e), a.textAlign = t.textAlign, a.fillText(y, x, b);
   });
-  const u = new h.CanvasTexture(n);
-  return u.colorSpace = h.SRGBColorSpace, u.minFilter = h.LinearFilter, u.magFilter = h.LinearFilter, u.needsUpdate = !0, u;
+  const f = new d.CanvasTexture(n);
+  return f.colorSpace = d.SRGBColorSpace, f.minFilter = d.LinearFilter, f.magFilter = d.LinearFilter, f.needsUpdate = !0, f;
 }
-function x(r) {
+function v(r) {
   return typeof r == "number" ? r : parseFloat(r) || 0;
 }
-const O = `
+function X(r, t) {
+  var o, h, c, p;
+  if (!t) {
+    r.set(0, 0, 0, 0);
+    return;
+  }
+  const e = t.split("/")[0].trim().split(/\s+/), i = v(e[0]), s = v((o = e[1]) != null ? o : e[0]), n = v((h = e[2]) != null ? h : e[0]), a = v((p = (c = e[3]) != null ? c : e[1]) != null ? p : e[0]);
+  r.set(i, s, n, a);
+}
+const Y = (
+  /* glsl */
+  `
   varying vec2 vUv;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
-`, A = `
+`
+), W = (
+  /* glsl */
+  `
+
   varying vec2 vUv;
   
   uniform vec2 uSize;
-  uniform float uRadius;
+  uniform vec4 uRadius;
   uniform float uBorderWidth;
-  uniform vec3 uColor;
+  uniform vec3 uBgColor;
   uniform vec3 uBorderColor;
   uniform float uOpacity;
   uniform float uBgOpacity;
+  uniform float uBorderOpacity;
 
-  // SDF 박스 함수
+  // SDF box
   float sdRoundedBox(vec2 p, vec2 b, float r) {
     vec2 q = abs(p) - b + r;
+    // return length(max(q, 0.0)) - r;
     return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
   }
 
   void main() {
+    // uVu: (0.0, 0.0) ~ (1.0, 1.0) / center: (0.5, 0.5)
+    // p: (-1.0, -1.0) ~ (1.0, 1.0) / center: (0.0, 0.0)
     vec2 p = (vUv - 0.5) * uSize;
     vec2 halfSize = uSize * 0.5;
     
-    float d = sdRoundedBox(p, halfSize, uRadius);
-    
-    float smoothEdge = 1.0; 
+    // # border-radius
+    vec2 xRadii = mix(uRadius.xw, uRadius.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 fillAlpha = 1.0 - smoothstep(-uBorderWidth - smoothEdge, -uBorderWidth, d);
-    
-    float borderAlpha = 0.0;
-    
-    if (uBorderWidth > 0.01) {
-      borderAlpha = (1.0 - smoothstep(0.0, smoothEdge, d)) - fillAlpha;
-    }
+    // 1px blur for anti-aliasing
+    float aa = 1.0; 
 
-    vec3 color = uColor;
-    float totalAlpha = borderAlpha + fillAlpha;
-    
-    if (totalAlpha > 0.001) {
-       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    // x == 0~aa -> 1
+    // x < 0 -> 0 
+    // x > aa -> 1
+    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+
+    // v valley
+    // 10px -> 5
+    float halfBorder = uBorderWidth * 0.5;
+    // 10px :
+    // 0 -> 0
+    // -10 -> 0
+    // -5 -> -5
+    float borderD = abs(d + halfBorder) - halfBorder;
+    // ^ border 내부는 음수/외부는 양수
+
+    // [!] 내부가 음수인 곳에서 시작점이 0이면 내부는 안티 얼리어싱 되지 않음.
+    // 1에서 빼든 그대로든 상관없이 경계선 밖 1px
+
+    // 최종 alpha를 위해 border 부분에 해당하는 픽셀 만 1로 반환.
+    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;
-    
+
+    float aFront = borderAlpha;
+    float aBack = uBgOpacity;
+    float aOut = aFront + aBack * (1.0 - aFront);
+
+    float safeAlpha = max(aOut, 0.0001);
+    vec3 cOut = (uBorderColor * aFront + uBgColor * aBack * (1.0 - aFront)) / safeAlpha;
+
+    float finalOpacity = aOut * bgMask * uOpacity;
+
     if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(color, finalOpacity);
+    gl_FragColor = vec4(cOut, finalOpacity);
+
+    #include <colorspace_fragment>
   }
-`;
-function w(r) {
+`
+);
+function R(r) {
   if (!r || r === "transparent")
-    return { color: new h.Color(16777215), alpha: 0 };
+    return { color: new d.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), s = parseInt(t[3], 10), n = t[4] !== void 0 ? parseFloat(t[4]) : 1;
-    return { color: new h.Color(`rgb(${e}, ${i}, ${s})`), alpha: n };
+    return { color: new d.Color(`rgb(${e}, ${i}, ${s})`), alpha: n };
   }
-  return { color: new h.Color(r), alpha: 1 };
+  return { color: new d.Color(r), alpha: 1 };
 }
-function I(r, t, e) {
+function H(r, t, e) {
   var o;
-  const i = w(r.backgroundColor), s = w(r.borderColor), n = {
-    uSize: { value: new h.Vector2(t, e) },
-    uRadius: { value: x(r.borderRadius) },
-    uBorderWidth: { value: x(r.borderWidth) },
-    uColor: { value: i.color },
+  const i = R(r.backgroundColor), s = R(r.borderColor), n = {
+    uSize: { value: new d.Vector2(t, e) },
+    uRadius: { value: new d.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: v(r.borderWidth) },
+    uBgColor: { value: i.color },
     uBorderColor: { value: s.color },
     uOpacity: { value: (o = r.opacity) != null ? o : 1 },
-    uBgOpacity: { value: i.alpha }
+    uBgOpacity: { value: i.alpha },
+    uBorderOpacity: { value: s.alpha }
   };
-  return new h.ShaderMaterial({
+  return X(n.uRadius.value, r.borderRadius), new d.ShaderMaterial({
     uniforms: n,
-    vertexShader: O,
-    fragmentShader: A,
+    vertexShader: Y,
+    fragmentShader: W,
     transparent: !0,
-    side: h.FrontSide
+    side: d.FrontSide
     // for better performance
   });
 }
-function L(r, t, e, i) {
+function U(r, t, e, i) {
   var a;
-  const s = w(t.backgroundColor), n = w(t.borderColor);
-  r.uniforms.uSize.value.set(e, i), r.uniforms.uRadius.value = x(t.borderRadius), r.uniforms.uBorderWidth.value = x(t.borderWidth), r.uniforms.uColor.value.copy(s.color), r.uniforms.uBorderColor.value.copy(n.color), r.uniforms.uOpacity.value = (a = t.opacity) != null ? a : 1, r.uniforms.uBgOpacity.value = s.alpha;
+  const s = R(t.backgroundColor), n = R(t.borderColor);
+  r.uniforms.uSize.value.set(e, i), X(r.uniforms.uRadius.value, t.borderRadius), r.uniforms.uBorderWidth.value = v(t.borderWidth), r.uniforms.uBgColor.value.copy(s.color), r.uniforms.uBorderColor.value.copy(n.color), r.uniforms.uOpacity.value = (a = t.opacity) != null ? a : 1, r.uniforms.uBgOpacity.value = s.alpha, r.uniforms.uBorderOpacity.value = n.alpha;
 }
-const T = {
+const E = {
   create(r, t, e, i, s, n = 2) {
     if (r === "BOX")
-      return I(t, i, s);
+      return H(t, i, s);
     if (r === "TEXT") {
-      const a = S(
+      const a = L(
         e || "",
         t,
         i,
         s,
         n
       );
-      return new h.MeshBasicMaterial({
+      return new d.MeshBasicMaterial({
         map: a,
         transparent: !0,
-        side: h.FrontSide,
+        side: d.FrontSide,
         color: 16777215
       });
     }
-    return new h.MeshBasicMaterial({ visible: !1 });
+    return new d.MeshBasicMaterial({ visible: !1 });
   },
   update(r, t, e, i, s, n, a = 2) {
     if (t === "BOX")
-      L(
+      U(
         r,
         e,
         s,
@@ -157,46 +206,47 @@ const T = {
     else if (t === "TEXT") {
       const o = r;
       o.map && o.map.dispose();
-      const l = S(
+      const h = L(
         i || "",
         e,
         s,
         n,
         a
       );
-      o.map = l, o.needsUpdate = !0;
+      o.map = h, o.needsUpdate = !0;
     }
   }
 };
-class X {
+class $ {
   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", /* @__PURE__ */ 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();
+    l(this, "canvas");
+    l(this, "scene");
+    l(this, "camera");
+    l(this, "renderer");
+    l(this, "renderOrder", 0);
+    l(this, "textQualityFactor", 2);
+    l(this, "mode", "overlay");
+    l(this, "target");
+    l(this, "mountContainer");
+    l(this, "targetRect");
+    l(this, "meshMap", /* @__PURE__ */ new Map());
+    var a, o;
+    this.target = t, this.mountContainer = i, this.mode = (a = e.mode) != null ? a : "overlay", 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 h.OrthographicCamera(
+    this.camera = new d.OrthographicCamera(
       s / -2,
       s / 2,
       n / 2,
       n / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.renderer = new h.WebGLRenderer({
+    ), this.camera.position.z = 100, 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 = e.textQuality) != null ? l : "medium");
+      // [new]
+      // premultipliedAlpha: true
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, n), this.applyTextQuality((o = e.textQuality) != null ? o : "medium");
   }
   applyTextQuality(t) {
     if (typeof t == "number") {
@@ -217,7 +267,7 @@ class X {
     }
   }
   mount() {
-    this.mountContainer.appendChild(this.canvas), this.canvas.style.zIndex = this.customZIndex, this.canvas.style.pointerEvents = this.mode === "overlay" ? "none" : "auto", this.updateCanvasLayout();
+    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");
@@ -230,24 +280,24 @@ class X {
   }
   syncScene(t) {
     const e = this.target.getBoundingClientRect(), i = Math.abs(e.width - this.targetRect.width) > 0.1 || Math.abs(e.height - this.targetRect.height) > 0.1, s = this.mode === "overlay" && (Math.abs(e.top - this.targetRect.top) > 0.1 || Math.abs(e.left - this.targetRect.left) > 0.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()) : s ? (this.targetRect = e, this.updateCanvasLayout()) : this.targetRect = e, this.renderOrder = 0;
+    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.layers.set(0), this.camera.updateProjectionMatrix(), this.updateCanvasLayout()) : s ? (this.targetRect = e, this.updateCanvasLayout()) : this.targetRect = e, this.renderOrder = 0;
     const n = /* @__PURE__ */ new Set();
     this.reconcileNode(t, 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));
+      n.has(a) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.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 s = new h.PlaneGeometry(1, 1), n = T.create(
+      const s = new d.PlaneGeometry(1, 1), n = E.create(
         "BOX",
         t.styles,
         "",
         t.rect.width,
         t.rect.height
       );
-      i = new h.Mesh(s, n), t.type === "TEXT" && (i.name = "BG_MESH"), this.scene.add(i), this.meshMap.set(t.element, i);
+      i = new d.Mesh(s, n), i.layers.set(t.visibility), 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 s of t.children)
@@ -256,39 +306,39 @@ class X {
       t.type === "TEXT" && this.reconcileTextChild(i, t);
   }
   reconcileTextChild(t, e) {
-    var o, l;
+    var o, h;
     let i = t.children.find(
-      (d) => d.name === "TEXT_CHILD"
+      (c) => c.name === "TEXT_CHILD"
     );
     const s = JSON.stringify(e.textStyles), n = (o = i == null ? void 0 : i.userData) == null ? void 0 : o.styleHash;
-    if (!i || e.dirtyMask & E || s !== n) {
-      i && ((l = i.material.map) == null || l.dispose(), i.geometry.dispose(), t.remove(i));
-      const d = T.create(
+    if (!i || e.dirtyMask & z || s !== n) {
+      i && ((h = i.material.map) == null || h.dispose(), i.geometry.dispose(), t.remove(i));
+      const c = E.create(
         "TEXT",
         e.textStyles,
         e.textContent || "",
         e.rect.width,
         e.rect.height,
         this.textQualityFactor
-      ), p = new h.PlaneGeometry(1, 1);
-      i = new h.Mesh(p, d), i.name = "TEXT_CHILD", i.userData = { styleHash: s }, i.position.z = 5e-3, t.add(i);
+      ), p = new d.PlaneGeometry(1, 1);
+      i = new d.Mesh(p, c), i.name = "TEXT_CHILD", i.userData = { styleHash: s }, i.layers.set(e.visibility), i.position.z = 5e-3, t.add(i);
     }
     if (i) {
-      const d = t.userData.domRect, p = d.x + d.width / 2, u = d.y + d.height / 2, m = e.rect.x + e.rect.width / 2, f = e.rect.y + e.rect.height / 2, y = m - p, g = -(f - u);
-      i.position.set(y, g, 5e-3);
+      const c = t.userData.domRect, p = c.x + c.width / 2, f = c.y + c.height / 2, y = e.rect.x + e.rect.width / 2, w = e.rect.y + e.rect.height / 2, b = y - p, x = -(w - f);
+      i.position.set(b, x, 5e-3);
     }
   }
   updateMeshProperties(t, e) {
     const { rect: i, styles: s } = e, n = this.renderer.getPixelRatio(), a = this.renderer.domElement.width / n, o = this.renderer.domElement.height / n;
     t.scale.set(i.width, i.height, 1);
-    const l = 1e-3;
+    const h = 1e-3;
     this.renderOrder++;
-    const d = this.targetRect.left + window.scrollX, p = this.targetRect.top + window.scrollY, u = i.x - d, m = i.y - p;
+    const c = this.targetRect.left + window.scrollX, p = this.targetRect.top + window.scrollY, f = i.x - c, y = i.y - p;
     t.position.set(
-      u - a / 2 + i.width / 2,
-      -m + o / 2 - i.height / 2,
-      s.zIndex + this.renderOrder * l
-    ), T.update(
+      f - a / 2 + i.width / 2,
+      -y + o / 2 - i.height / 2,
+      s.zIndex + this.renderOrder * h
+    ), E.update(
       t.material,
       "BOX",
       e.styles,
@@ -301,7 +351,7 @@ class X {
     this.renderer.render(this.scene, this.camera);
   }
 }
-function N(r) {
+function Q(r) {
   const t = document.createRange();
   t.selectNodeContents(r);
   const e = t.getBoundingClientRect();
@@ -312,7 +362,7 @@ function N(r) {
     height: e.height
   };
 }
-function k(r) {
+function G(r) {
   const t = parseFloat(r.fontSize);
   let e = parseFloat(r.lineHeight);
   isNaN(e) && (e = t * 1.2);
@@ -327,7 +377,7 @@ function k(r) {
     letterSpacing: i
   };
 }
-function M(r, t = R | b | D | E | C) {
+function N(r, t = S | B | A | z | M, e, i) {
   if (r.nodeType === Node.TEXT_NODE) {
     const u = r;
     if (!u.textContent || !u.textContent.trim())
@@ -335,96 +385,129 @@ function M(r, t = R | b | D | E | C) {
     const m = u.textContent.replace(/\s+/g, " ").trim();
     if (m.length === 0)
       return null;
-    const f = N(u);
-    if (f.width === 0 || f.height === 0)
+    const g = Q(u);
+    if (g.width === 0 || g.height === 0)
       return null;
-    const y = u.parentElement, g = y ? window.getComputedStyle(y) : null;
-    return g ? {
+    const O = u.parentElement, C = O ? window.getComputedStyle(O) : null;
+    return C ? {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: u,
       rect: {
-        x: f.left + window.scrollX,
-        y: f.top + window.scrollY,
-        width: f.width,
-        height: f.height
+        x: g.left + window.scrollX,
+        y: g.top + window.scrollY,
+        width: g.width,
+        height: g.height
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(g.opacity),
+        opacity: parseFloat(C.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px"
       },
       textContent: m,
-      textStyles: k(g),
+      textStyles: G(C),
       dirtyMask: t,
+      visibility: e,
       children: []
     } : null;
   }
-  const e = r, i = e.getBoundingClientRect(), s = window.getComputedStyle(e);
-  if (i.width === 0 || i.height === 0 || s.display === "none")
+  const s = r, n = s.dataset.mirageFilter;
+  let a = e, o = e;
+  if (n) {
+    const u = new Set(n.split(/\s+/));
+    for (const m of u)
+      if (!_.includes(m))
+        throw new Error(
+          `[MirageEngine] Invalid filter token: '${m}'. 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 = D : u.has("exclude-tree") && (a = F), o = a, u.has("include-self") ? o = D : u.has("exclude-self") && (o = F);
+  }
+  if (i && i.end && i.end.length > 0 && i.end.some(
+    (m) => s.classList.contains(m)
+  ))
+    return null;
+  const h = s.getBoundingClientRect(), c = window.getComputedStyle(s);
+  if (h.width === 0 || h.height === 0 || c.display === "none")
     return null;
-  let n = e.getAttribute("data-mid");
-  n || (n = Math.random().toString(36).substring(2, 11), e.setAttribute("data-mid", n));
-  const a = parseInt(s.zIndex), o = {
-    backgroundColor: s.backgroundColor,
-    opacity: parseFloat(s.opacity),
-    zIndex: isNaN(a) ? 0 : a,
-    borderRadius: s.borderRadius,
-    borderColor: s.borderColor,
-    borderWidth: s.borderWidth
+  let p = s.getAttribute("data-mid");
+  p || (p = Math.random().toString(36).substring(2, 11), s.setAttribute("data-mid", p));
+  const f = parseInt(c.zIndex), y = {
+    backgroundColor: c.backgroundColor,
+    opacity: parseFloat(c.opacity),
+    zIndex: isNaN(f) ? 0 : f,
+    borderRadius: c.borderRadius,
+    borderColor: c.borderColor,
+    borderWidth: c.borderWidth
   };
-  let l, d;
-  const p = [];
-  return Array.from(e.childNodes).forEach((u) => {
-    const m = M(u, t);
-    m && p.push(m);
+  let w, b;
+  const x = [];
+  return Array.from(s.childNodes).forEach((u) => {
+    const m = u.nodeType === Node.TEXT_NODE ? o : a, g = N(
+      u,
+      t,
+      m,
+      i
+    );
+    g && x.push(g);
   }), {
-    id: n,
+    id: p,
     type: "BOX",
-    element: e,
+    element: s,
     rect: {
-      x: i.left + window.scrollX,
-      y: i.top + window.scrollY,
-      width: i.width,
-      height: i.height
+      x: h.left + window.scrollX,
+      y: h.top + window.scrollY,
+      width: h.width,
+      height: h.height
     },
-    styles: o,
-    textContent: l,
-    textStyles: d,
+    styles: y,
+    textContent: w,
+    textStyles: b,
     dirtyMask: t,
-    children: p
+    visibility: o,
+    children: x
   };
 }
-class P {
-  constructor(t, e) {
-    c(this, "target");
-    c(this, "renderer");
-    c(this, "observer");
-    c(this, "isDomDirty", !1);
-    c(this, "isRunning", !1);
-    c(this, "pendingMask", v);
-    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(() => {
+class V {
+  constructor(t, e, i) {
+    l(this, "target");
+    l(this, "renderer");
+    l(this, "filter");
+    l(this, "observer");
+    l(this, "isDomDirty", !1);
+    l(this, "isRunning", !1);
+    l(this, "pendingMask", T);
+    l(this, "mutationTimer", null);
+    l(this, "cssTimer", null);
+    l(this, "onTransitionFinished", (t) => {
+      this.target.contains(t.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= S | B, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
-    c(this, "onWindowResize", () => {
+    l(this, "onWindowResize", () => {
       this.renderer.setSize(window.innerWidth, window.innerHeight), this.isDomDirty = !0;
     });
-    c(this, "renderLoop", () => {
+    l(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 s = v;
-      for (const n of i)
-        n.type === "childList" ? s |= C : n.type === "attributes" && (n.attributeName === "style" || n.attributeName === "class") && (s |= R | b);
-      if (s !== v) {
-        if (this.pendingMask |= s, s & C) {
+    this.target = t, this.renderer = e, this.filter = i, this.observer = new MutationObserver((s) => {
+      let n = T;
+      for (const a of s)
+        a.type === "childList" ? n |= M : a.type === "attributes" && (a.attributeName === "style" || a.attributeName === "class") && (n |= S | B);
+      if (n !== T) {
+        if (this.pendingMask |= n, n & M) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -450,21 +533,21 @@ class P {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const t = M(this.target, this.pendingMask);
-    t && this.renderer.syncScene(t), this.pendingMask = v;
+    const t = N(this.target, this.pendingMask, D, this.filter);
+    t && this.renderer.syncScene(t), this.pendingMask = T;
   }
 }
-class Y {
+class Z {
   constructor(t, e) {
-    c(this, "renderer");
-    c(this, "syncer");
-    c(this, "target");
+    l(this, "renderer");
+    l(this, "syncer");
+    l(this, "target");
     var s, n, a;
     this.target = t;
     let i;
     if (e.mode === "duplicate" ? i = (n = (s = e.container) != null ? s : this.target.parentElement) != null ? n : 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 P(this.target, this.renderer);
+    this.renderer = new $(this.target, e, i), this.renderer.mount(), this.syncer = new V(this.target, this.renderer, e.filter);
   }
   start() {
     this.syncer.start();
@@ -477,11 +560,15 @@ class Y {
   }
 }
 export {
-  E as DIRTY_CONTENT,
-  v as DIRTY_NONE,
-  R as DIRTY_RECT,
-  C as DIRTY_STRUCTURE,
-  b as DIRTY_STYLE,
-  D as DIRTY_ZINDEX,
-  Y as Engine
+  _ as ALLOWED_FILTERS,
+  z as DIRTY_CONTENT,
+  T as DIRTY_NONE,
+  S as DIRTY_RECT,
+  M as DIRTY_STRUCTURE,
+  B as DIRTY_STYLE,
+  A as DIRTY_ZINDEX,
+  F as EXCLUDED,
+  Z as Engine,
+  D as INCLUDED,
+  j as SYSTEM
 };