@mirage-engine/core 0.0.2 → 0.2.0

package/dist/mirage-engine.js

@@ -1,223 +1,302 @@
-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) {
-  const i = t.split(`
+var A = Object.defineProperty;
+var P = (i, e, t) => e in i ? A(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var h = (i, e, t) => (P(i, typeof e != "symbol" ? e + "" : e, t), t);
+import * as d from "three";
+const E = 0, O = 1, D = 2, k = 4, z = 8, N = 16, x = 1, R = 2, Z = 0, q = [
+  "include-tree",
+  "exclude-tree",
+  "include-self",
+  "exclude-self",
+  "end"
+];
+function Y(i, e, t) {
+  const r = e.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);
+  return r.forEach((a) => {
+    const n = a.split(" ");
+    let o = n[0];
+    for (let l = 1; l < n.length; l++) {
+      const c = n[l];
+      i.measureText(o + " " + c).width < t ? o += " " + c : (s.push(o), o = c);
     }
     s.push(o);
   }), s;
 }
-function S(r, t, e, i, s = 2) {
-  const n = document.createElement("canvas"), a = n.getContext("2d");
-  if (!a)
+function I(i, e, t, r, s = 2) {
+  const a = document.createElement("canvas"), n = a.getContext("2d");
+  if (!n)
     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);
+  a.width = t * l, a.height = r * l, n.scale(l, l), n.font = e.font, n.fillStyle = e.color, n.textBaseline = "top", n.globalAlpha = 1;
+  const c = Y(n, i, t), g = e.lineHeight;
+  c.forEach((p, m) => {
+    const T = m * g + 2;
+    let v = 0;
+    e.textAlign === "center" ? v = t / 2 : e.textAlign === "right" && (v = t), n.textAlign = e.textAlign, n.fillText(p, v, T);
   });
-  const u = new h.CanvasTexture(n);
-  return u.colorSpace = h.SRGBColorSpace, u.minFilter = h.LinearFilter, u.magFilter = h.LinearFilter, u.needsUpdate = !0, u;
+  const u = new d.CanvasTexture(a);
+  return u.colorSpace = d.SRGBColorSpace, u.minFilter = d.LinearFilter, u.magFilter = d.LinearFilter, u.needsUpdate = !0, u;
 }
-function x(r) {
-  return typeof r == "number" ? r : parseFloat(r) || 0;
+function w(i) {
+  return typeof i == "number" ? i : parseFloat(i) || 0;
 }
-const O = `
+function _(i, e) {
+  var o, l, c, g;
+  if (!e) {
+    i.set(0, 0, 0, 0);
+    return;
+  }
+  const t = e.split("/")[0].trim().split(/\s+/), r = w(t[0]), s = w((o = t[1]) != null ? o : t[0]), a = w((l = t[2]) != null ? l : t[0]), n = w((g = (c = t[3]) != null ? c : t[1]) != null ? g : t[0]);
+  i.set(r, s, a, n);
+}
+const U = (
+  /* glsl */
+  `
   varying vec2 vUv;
+  varying vec4 vScreenPos;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vScreenPos = gl_Position;
   }
-`, A = `
+`
+), W = (
+  /* glsl */
+  `
+
   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);
-    
-    float borderAlpha = 0.0;
+    #INJECT_UV_MODIFIER
     
-    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 w(r) {
-  if (!r || r === "transparent")
-    return { color: new h.Color(16777215), alpha: 0 };
-  const t = r.match(
+`
+);
+function S(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 (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 };
+  if (e) {
+    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), s = parseInt(e[3], 10), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new d.Color(`rgb(${t}, ${r}, ${s})`), alpha: a };
   }
-  return { color: new h.Color(r), alpha: 1 };
+  return { color: new d.Color(i), alpha: 1 };
 }
-function I(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 },
-    uBorderColor: { value: s.color },
-    uOpacity: { value: (o = r.opacity) != null ? o : 1 },
-    uBgOpacity: { value: i.alpha }
+function H(i, e, t, r = null, s) {
+  var v;
+  const a = r !== null, n = a ? (
+    /* glsl */
+    `
+    uniform sampler2D uTexture;
+    varying vec4 vScreenPos;
+  `
+  ) : "", o = a ? (
+    /* glsl */
+    `
+    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+    vec2 resultUv = screenUv;
+    ${(s == null ? void 0 : s.uvModifier) || ""}
+  `
+  ) : "", l = a ? (
+    /* glsl */
+    `
+    baseColor = texture2D(uTexture, resultUv);
+  `
+  ) : "", c = (s == null ? void 0 : s.colorModifier) || "", g = W.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", c), u = S(i.backgroundColor), p = S(i.borderColor), m = {
+    uSize: { value: new d.Vector2(e, t) },
+    uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: w(i.borderWidth) },
+    uBgColor: { value: u.color },
+    uBorderColor: { value: p.color },
+    uOpacity: { value: (v = i.opacity) != null ? v : 1 },
+    uBgOpacity: { value: u.alpha },
+    uBorderOpacity: { value: p.alpha },
+    uTexture: { value: null }
   };
-  return new h.ShaderMaterial({
-    uniforms: n,
-    vertexShader: O,
-    fragmentShader: A,
+  return _(m.uBorderRadius.value, i.borderRadius), a && (m.uTexture.value = r), new d.ShaderMaterial({
+    uniforms: m,
+    vertexShader: U,
+    fragmentShader: g,
     transparent: !0,
-    side: h.FrontSide
+    side: d.FrontSide
     // for better performance
   });
 }
-function L(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;
+function $(i, e, t, r, s) {
+  var o;
+  const a = S(e.backgroundColor), n = S(e.borderColor);
+  i.uniforms.uSize.value.set(t, r), _(i.uniforms.uBorderRadius.value, e.borderRadius), i.uniforms.uBorderWidth.value = w(e.borderWidth), i.uniforms.uBgColor.value.copy(a.color), i.uniforms.uBorderColor.value.copy(n.color), i.uniforms.uOpacity.value = (o = e.opacity) != null ? o : 1, i.uniforms.uBgOpacity.value = a.alpha, i.uniforms.uBorderOpacity.value = n.alpha, i.uniforms.uTexture && s !== void 0 && (i.uniforms.uTexture.value = s);
 }
-const T = {
-  create(r, t, e, i, s, n = 2) {
-    if (r === "BOX")
-      return I(t, i, s);
-    if (r === "TEXT") {
-      const a = S(
-        e || "",
-        t,
-        i,
+const F = {
+  create(i, e, t, r, s, a = 2, n = null) {
+    if (i === "BOX")
+      return H(e, r, s, n);
+    if (i === "TEXT") {
+      const o = I(
+        t || "",
+        e,
+        r,
         s,
-        n
+        a
       );
-      return new h.MeshBasicMaterial({
-        map: a,
+      return new d.MeshBasicMaterial({
+        map: o,
         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(
-        r,
-        e,
+  update(i, e, t, r, s, a, n = 2, o) {
+    if (e === "BOX")
+      $(
+        i,
+        t,
         s,
-        n
+        a,
+        o
       );
-    else if (t === "TEXT") {
-      const o = r;
-      o.map && o.map.dispose();
-      const l = S(
-        i || "",
-        e,
+    else if (e === "TEXT") {
+      const l = i;
+      l.map && l.map.dispose();
+      const c = I(
+        r || "",
+        t,
         s,
-        n,
-        a
+        a,
+        n
       );
-      o.map = l, o.needsUpdate = !0;
+      l.map = c, l.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", /* @__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();
-    const s = this.targetRect.width, n = this.targetRect.height;
-    this.camera = new h.OrthographicCamera(
+class G {
+  constructor(e, t, r) {
+    h(this, "canvas");
+    h(this, "scene");
+    h(this, "camera");
+    h(this, "renderer");
+    h(this, "renderTarget", null);
+    h(this, "renderOrder", 0);
+    h(this, "qualityFactor", 2);
+    h(this, "mode", "overlay");
+    h(this, "target");
+    h(this, "mountContainer");
+    h(this, "targetRect");
+    h(this, "meshMap", /* @__PURE__ */ new Map());
+    var n, o;
+    this.target = e, this.mountContainer = r, this.mode = (n = t.mode) != null ? n : "overlay", this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const s = this.targetRect.width, a = this.targetRect.height;
+    this.camera = new d.OrthographicCamera(
       s / -2,
       s / 2,
-      n / 2,
-      n / -2,
+      a / 2,
+      a / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.renderer = new h.WebGLRenderer({
+    ), 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 = e.textQuality) != null ? l : "medium");
+      // [new]
+      // premultipliedAlpha: true
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, a), this.applyTextQuality((o = t.quality) != null ? o : "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(t) {
-    if (typeof t == "number") {
-      this.textQualityFactor = Math.max(0.1, t);
+  applyTextQuality(e) {
+    if (typeof e == "number") {
+      this.qualityFactor = Math.max(0.1, e);
       return;
     }
-    switch (t) {
+    switch (e) {
       case "low":
-        this.textQualityFactor = 1;
+        this.qualityFactor = 1;
         break;
       case "high":
-        this.textQualityFactor = 4;
+        this.qualityFactor = 4;
         break;
       case "medium":
       default:
-        this.textQualityFactor = 2;
+        this.qualityFactor = 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();
+    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");
@@ -225,206 +304,300 @@ class X {
   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) > 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;
-    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));
-  }
-  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(
+  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) > 0.1 || Math.abs(t.height - this.targetRect.height) > 0.1, s = this.mode === "overlay" && (Math.abs(t.top - this.targetRect.top) > 0.1 || Math.abs(t.left - this.targetRect.left) > 0.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 a = /* @__PURE__ */ new Set();
+    this.reconcileNode(e, a);
+    for (const [n, o] of this.meshMap.entries())
+      a.has(n) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.Material && o.material.dispose(), this.meshMap.delete(n));
+  }
+  reconcileNode(e, t) {
+    var s;
+    t.add(e.element);
+    let r = this.meshMap.get(e.element);
+    if (!r) {
+      const a = new d.PlaneGeometry(1, 1);
+      let n;
+      n = F.create(
         "BOX",
-        t.styles,
+        e.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);
+        e.rect.width,
+        e.rect.height,
+        this.qualityFactor,
+        e.isTraveler ? (s = this.renderTarget) == null ? void 0 : s.texture : void 0
+      ), r = new d.Mesh(a, n), e.type === "TEXT" && (r.name = "BG_MESH"), this.scene.add(r), this.meshMap.set(e.element, r);
     }
-    if (i.userData.domRect = t.rect, this.updateMeshProperties(i, t), t.type === "BOX")
-      for (const s of t.children)
-        this.reconcileNode(s, e);
+    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 a of e.children)
+        this.reconcileNode(a, t);
     else
-      t.type === "TEXT" && this.reconcileTextChild(i, t);
+      e.type === "TEXT" && this.reconcileTextChild(r, e);
   }
-  reconcileTextChild(t, e) {
+  reconcileTextChild(e, t) {
     var o, l;
-    let i = t.children.find(
-      (d) => d.name === "TEXT_CHILD"
+    let r = e.children.find(
+      (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(
+    const s = JSON.stringify(t.textStyles), a = (o = r == null ? void 0 : r.userData) == null ? void 0 : o.styleHash;
+    if (!r || t.dirtyMask & N || s !== a) {
+      r && ((l = r.material.map) == null || l.dispose(), r.geometry.dispose(), e.remove(r));
+      const c = F.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);
+        t.textStyles,
+        t.textContent || "",
+        t.rect.width,
+        t.rect.height,
+        this.qualityFactor
+      ), g = new d.PlaneGeometry(1, 1);
+      r = new d.Mesh(g, c), r.name = "TEXT_CHILD", r.userData = { styleHash: s }, this.updateMeshLayers(r, t), r.position.z = 5e-3, e.add(r);
     }
-    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);
+    if (r) {
+      const c = e.userData.domRect, g = c.x + c.width / 2, u = c.y + c.height / 2, p = t.rect.x + t.rect.width / 2, m = t.rect.y + t.rect.height / 2, T = p - g, v = -(m - u);
+      r.position.set(T, v, 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);
+  updateMeshProperties(e, t) {
+    var m;
+    const { rect: r, styles: s } = t, a = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / a, o = this.renderer.domElement.height / a;
+    e.scale.set(r.width, r.height, 1);
     const l = 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;
-    t.position.set(
-      u - a / 2 + i.width / 2,
-      -m + o / 2 - i.height / 2,
+    const c = this.targetRect.left + window.scrollX, g = this.targetRect.top + window.scrollY, u = r.x - c, p = r.y - g;
+    e.position.set(
+      u - n / 2 + r.width / 2,
+      -p + o / 2 - r.height / 2,
       s.zIndex + this.renderOrder * l
-    ), T.update(
-      t.material,
+    ), F.update(
+      e.material,
       "BOX",
-      e.styles,
+      t.styles,
       "",
-      e.rect.width,
-      e.rect.height
+      t.rect.width,
+      t.rect.height,
+      this.qualityFactor,
+      t.isTraveler ? (m = this.renderTarget) == null ? void 0 : m.texture : void 0
     );
   }
+  updateMeshLayers(e, t) {
+    const r = (1 - (t.visibility & x)) * 30;
+    e.layers.set(r), t.visibility === (x | R) && 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(), a = this.targetRect.width, n = 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 * a, g = (s.y + 1) / 2 * n, u = l.scale.x, p = l.scale.y, m = c - u / 2, T = g - p / 2, v = m * this.qualityFactor / o, B = T * this.qualityFactor / o, b = u * this.qualityFactor / o, f = p * this.qualityFactor / o;
+      this.renderer.setScissor(v, B, b, f), 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.renderer.render(this.scene, this.camera);
+    this.renderTarget && this.captureRenderTarget(), this.renderer.render(this.scene, this.camera);
+  }
+  // for debugging
+  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: 0.8
+    }), a = new d.Mesh(r, s);
+    a.position.set(0, 0, 90), a.layers.set(28), this.scene.add(a);
   }
 }
-function N(r) {
-  const t = document.createRange();
-  t.selectNodeContents(r);
-  const e = t.getBoundingClientRect();
+function J(i) {
+  const e = document.createRange();
+  e.selectNodeContents(i);
+  const t = e.getBoundingClientRect();
   return {
-    left: e.left,
-    top: e.top,
-    width: e.width,
-    height: e.height
+    left: t.left,
+    top: t.top,
+    width: t.width,
+    height: t.height
   };
 }
-function k(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",
+function V(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: r.direction || "inherit",
-    lineHeight: e,
-    letterSpacing: i
+    direction: i.direction || "inherit",
+    lineHeight: t,
+    letterSpacing: r
   };
 }
-function M(r, t = R | b | D | E | C) {
-  if (r.nodeType === Node.TEXT_NODE) {
-    const u = r;
-    if (!u.textContent || !u.textContent.trim())
+function X(i, e = O | D | k | N | z, t, r) {
+  if (i.nodeType === Node.TEXT_NODE) {
+    const f = i;
+    if (!f.textContent || !f.textContent.trim())
       return null;
-    const m = u.textContent.replace(/\s+/g, " ").trim();
-    if (m.length === 0)
+    const C = f.textContent.replace(/\s+/g, " ").trim();
+    if (C.length === 0)
       return null;
-    const f = N(u);
-    if (f.width === 0 || f.height === 0)
+    const y = J(f);
+    if (y.width === 0 || y.height === 0)
       return null;
-    const y = u.parentElement, g = y ? window.getComputedStyle(y) : null;
-    return g ? {
+    const L = f.parentElement, M = L ? window.getComputedStyle(L) : null;
+    return M ? {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: u,
+      element: f,
       rect: {
-        x: f.left + window.scrollX,
-        y: f.top + window.scrollY,
-        width: f.width,
-        height: f.height
+        x: y.left + window.scrollX,
+        y: y.top + window.scrollY,
+        width: y.width,
+        height: y.height
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(g.opacity),
+        opacity: parseFloat(M.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px"
       },
-      textContent: m,
-      textStyles: k(g),
-      dirtyMask: t,
+      textContent: C,
+      textStyles: V(M),
+      dirtyMask: e,
+      visibility: t,
+      isTraveler: !1,
       children: []
     } : null;
   }
-  const e = r, i = e.getBoundingClientRect(), s = window.getComputedStyle(e);
-  if (i.width === 0 || i.height === 0 || s.display === "none")
+  const s = i, a = s.dataset.mirageFilter;
+  let n = t, o = t;
+  if (a) {
+    const f = new Set(a.split(/\s+/));
+    for (const C of f)
+      if (!q.includes(C))
+        throw new Error(
+          `[MirageEngine] Invalid filter token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+        );
+    if (f.has("end"))
+      return null;
+    if (f.has("include-tree") && f.has("exclude-tree"))
+      throw new Error(
+        "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
+      );
+    if (f.has("include-self") && f.has("exclude-self"))
+      throw new Error(
+        "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
+      );
+    f.has("include-tree") ? n = n | x : f.has("exclude-tree") && (n = n & ~x), o = n, f.has("include-self") ? o = o | x : f.has("exclude-self") && (o = o & ~x);
+  }
+  o = o | t & R;
+  const l = s.dataset.mirageTravel;
+  let c = !1;
+  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~R, n = n & ~R, c = !0);
+  const g = s.getBoundingClientRect(), u = window.getComputedStyle(s);
+  if (g.width === 0 || g.height === 0 || u.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 m = parseInt(u.zIndex), T = {
+    backgroundColor: u.backgroundColor,
+    opacity: parseFloat(u.opacity),
+    zIndex: isNaN(m) ? 0 : m,
+    borderRadius: u.borderRadius,
+    borderColor: u.borderColor,
+    borderWidth: u.borderWidth
   };
-  let l, d;
-  const p = [];
-  return Array.from(e.childNodes).forEach((u) => {
-    const m = M(u, t);
-    m && p.push(m);
+  let v, B;
+  const b = [];
+  return Array.from(s.childNodes).forEach((f) => {
+    const C = f.nodeType === Node.TEXT_NODE ? o : n, y = X(
+      f,
+      e,
+      C
+    );
+    y && b.push(y);
   }), {
-    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: g.left + window.scrollX,
+      y: g.top + window.scrollY,
+      width: g.width,
+      height: g.height
     },
-    styles: o,
-    textContent: l,
-    textStyles: d,
-    dirtyMask: t,
-    children: p
+    styles: T,
+    textContent: v,
+    textStyles: B,
+    dirtyMask: e,
+    visibility: o,
+    isTraveler: c,
+    children: b
   };
 }
-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 j {
+  constructor(e, t, r) {
+    h(this, "target");
+    h(this, "renderer");
+    h(this, "filter");
+    h(this, "observer");
+    h(this, "isDomDirty", !1);
+    h(this, "isRunning", !1);
+    h(this, "isTravelEnabled", !1);
+    h(this, "pendingMask", E);
+    h(this, "mutationTimer", null);
+    h(this, "cssTimer", null);
+    h(this, "resizeConfig");
+    h(this, "resizeTimer", null);
+    h(this, "isResizing", !1);
+    h(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= O | D, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
-    c(this, "onWindowResize", () => {
-      this.renderer.setSize(window.innerWidth, window.innerHeight), this.isDomDirty = !0;
+    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);
     });
-    c(this, "renderLoop", () => {
+    h(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) {
+    var a, n;
+    this.target = e, this.renderer = t, this.filter = r.filter;
+    const s = (a = r.resizeDebounce) != null ? a : !0;
+    s === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : s === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
+      enabled: !0,
+      delay: (n = s.delay) != null ? n : 150,
+      onStart: s.onStart,
+      onEnd: s.onEnd
+    }, this.observer = new MutationObserver((o) => {
+      let l = E;
+      for (const c of o)
+        c.type === "childList" ? l |= z : c.type === "attributes" && (c.attributeName === "style" || c.attributeName === "class") && (l |= O | D);
+      if (l !== E) {
+        if (this.pendingMask |= l, l & z) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -450,21 +623,28 @@ class P {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const t = M(this.target, this.pendingMask);
-    t && this.renderer.syncScene(t), this.pendingMask = v;
+    const e = document.querySelector("[data-mirage-travel='traveler']") !== null;
+    e && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+    const t = X(
+      this.target,
+      this.pendingMask,
+      e ? x | R : x,
+      this.filter
+    );
+    t && this.renderer.syncScene(t), this.pendingMask = E;
   }
 }
-class Y {
-  constructor(t, e) {
-    c(this, "renderer");
-    c(this, "syncer");
-    c(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)
+class K {
+  constructor(e, t) {
+    h(this, "renderer");
+    h(this, "syncer");
+    h(this, "target");
+    var s, a, n;
+    this.target = e;
+    let r;
+    if (t.mode === "duplicate" ? r = (a = (s = t.container) != null ? s : this.target.parentElement) != null ? a : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new X(this.target, e, i), this.renderer.mount(), this.syncer = new P(this.target, this.renderer);
+    this.renderer = new G(this.target, t, r), this.renderer.mount(), this.syncer = new j(this.target, this.renderer, t);
   }
   start() {
     this.syncer.start();
@@ -477,11 +657,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
+  q as ALLOWED_FILTERS,
+  N as DIRTY_CONTENT,
+  E as DIRTY_NONE,
+  O as DIRTY_RECT,
+  z as DIRTY_STRUCTURE,
+  D as DIRTY_STYLE,
+  k as DIRTY_ZINDEX,
+  Z as EXCLUDED,
+  K as Engine,
+  R as SYSTEM_LAYER,
+  x as USER_LAYER
 };