@mirage-engine/core 0.2.2 → 0.3.1

package/dist/mirage-engine.js

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