mirage-engine 0.2.16 → 0.2.18

package/dist/mirage-engine.js

@@ -1,279 +1,639 @@
-var X = Object.defineProperty;
-var P = (i, e, t) => e in i ? X(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var h = (i, e, t) => (P(i, typeof e != "symbol" ? e + "" : e, t), t);
-import * as d from "three";
-const E = 0, O = 1, z = 2, q = 4, D = 8, _ = 16, x = 1, R = 2, k = [
+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) => {
+    try {
+      n(t.next(c));
+    } catch (l) {
+      r(l);
+    }
+  }, o = (c) => {
+    try {
+      n(t.throw(c));
+    } catch (l) {
+      r(l);
+    }
+  }, n = (c) => c.done ? s(c.value) : Promise.resolve(c.value).then(a, o);
+  n((t = t.apply(i, e)).next());
+});
+import * as m from "three";
+const _ = 0, B = 1, N = 2, fe = 4, V = 8, $ = 16, D = 1, X = 2, ge = [
   "include-tree",
   "exclude-tree",
   "include-self",
   "exclude-self",
   "end"
 ];
-function Y(i, e, t) {
-  const r = e.split(`
-`), s = [];
-  return r.forEach((n) => {
-    const a = n.split(" ");
-    let o = a[0];
-    for (let l = 1; l < a.length; l++) {
-      const c = a[l];
-      i.measureText(o + " " + c).width < t ? o += " " + c : (s.push(o), o = c);
-    }
-    s.push(o);
-  }), s;
+class ne {
+  /**
+   * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
+   * @param font CSS font shorthand string (e.g., "400 16px Inter")
+   * @returns Baseline Y offset in pixels
+   */
+  static getBaseline(e) {
+    if (this.cache.has(e))
+      return this.cache.get(e);
+    const t = this.calculateBaselineFromDOM(e);
+    return this.cache.set(e, t), t;
+  }
+  static calculateBaselineFromDOM(e) {
+    if (typeof document == "undefined")
+      return 0;
+    const t = document.createElement("div"), 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;
+  }
 }
-function I(i, e, t, r, s = 2) {
-  const n = document.createElement("canvas"), a = n.getContext("2d");
-  if (!a)
-    throw new Error("[Mirage] Failed to create canvas context");
-  const l = (window.devicePixelRatio || 1) * s;
-  n.width = t * l, n.height = r * l, a.scale(l, l), a.font = e.font, a.fillStyle = e.color, a.textBaseline = "top", a.globalAlpha = 1;
-  const c = Y(a, i, t), g = e.lineHeight;
-  c.forEach((p, m) => {
-    const T = m * g + 2;
-    let v = 0;
-    e.textAlign === "center" ? v = t / 2 : e.textAlign === "right" && (v = t), a.textAlign = e.textAlign, a.fillText(p, v, T);
-  });
-  const u = new d.CanvasTexture(n);
-  return u.colorSpace = d.SRGBColorSpace, u.minFilter = d.LinearFilter, u.magFilter = d.LinearFilter, u.needsUpdate = !0, u;
+u(ne, "cache", /* @__PURE__ */ new Map());
+class pe extends m.MeshBasicMaterial {
+  constructor(t, s, r, a, o = 2) {
+    super({
+      transparent: !0,
+      side: m.FrontSide,
+      color: 16777215
+    });
+    u(this, "canvas");
+    u(this, "ctx");
+    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);
+  }
+  wrapText(t, s) {
+    const r = t.split(`
+`), a = [];
+    return r.forEach((o) => {
+      const n = o.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (n.length === 0) {
+        a.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());
+      }
+      c && a.push(c);
+    }), a;
+  }
+  updateText(t, s, r, a, 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);
+    }), this.map && (this.map.needsUpdate = !0);
+  }
+  dispose() {
+    this.map && this.map.dispose(), super.dispose();
+  }
 }
-function w(i) {
+function F(i) {
   return typeof i == "number" ? i : parseFloat(i) || 0;
 }
-function N(i, e) {
-  var o, l, c, g;
-  if (!e) {
-    i.set(0, 0, 0, 0);
-    return;
+function I(i) {
+  if (!i || i === "transparent")
+    return { color: new m.Color(16777215), alpha: 0 };
+  const e = i.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 };
+  }
+  return { color: new m.Color(i), alpha: 1 };
+}
+function me(i) {
+  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) {
+      e.push(t.trim()), t = "";
+      continue;
+    }
+    t += a;
+  }
+  return t && e.push(t.trim()), e;
+}
+function be(i) {
+  if (!i || typeof i != "string" || !i.includes("linear-gradient"))
+    return null;
+  const e = i.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();
+  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;
+  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 p = I(f);
+    n.push({
+      color: p.color,
+      alpha: p.alpha,
+      rawStop: h,
+      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;
+        }
+        c = l;
+      }
   }
-  const t = e.split("/")[0].trim().split(/\s+/), r = w(t[0]), s = w((o = t[1]) != null ? o : t[0]), n = w((l = t[2]) != null ? l : t[0]), a = w((g = (c = t[3]) != null ? c : t[1]) != null ? g : t[0]);
-  i.set(r, s, n, a);
+  return { angle: r, stops: n };
 }
-const U = (
-  /* glsl */
-  `
-  varying vec2 vUv;
-  varying vec4 vScreenPos;
-  void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    vScreenPos = gl_Position;
-  }
-`
-), W = (
-  /* glsl */
-  `
+const xe = `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;
+uniform vec2 uSize;
+uniform vec4 uBorderRadius;
+uniform float uBorderWidth;
+uniform vec4 uBgColor;
+uniform vec4 uBorderColor;
+uniform float uOpacity;
 
-  varying vec2 vUv;
-  
-  uniform vec2 uSize;
-  uniform vec4 uBorderRadius;
-  uniform float uBorderWidth;
-  uniform vec3 uBgColor;
-  uniform vec3 uBorderColor;
-  uniform float uOpacity;
-  uniform float uBgOpacity;
-  uniform float uBorderOpacity;
+uniform int uGradientCount;
+uniform float uGradientAngle;
+uniform vec4 uGradientColors[8];
+uniform float uGradientStops[8];
 
-  #INJECT_DECLARATIONS
+#INJECT_DECLARATIONS
 
-  float sdRoundedBox(vec2 p, vec2 b, float r) {
-    vec2 q = abs(p) - b + r;
+vec3 linearToSrgb(vec3 linearColor) {
+    vec3 linearPart = 12.92 * linearColor;
+    vec3 curvePart = 1.055 * pow(linearColor, vec3(1.0 / 2.4)) - 0.055;
+    vec3 switchCondition = step(vec3(0.0031308), linearColor);
+    return mix(linearPart, curvePart, switchCondition);
+}
 
-    return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
-  }
+vec3 srgbToLinear(vec3 srgbColor) {
+    vec3 linearPart = srgbColor / 12.92;
+    vec3 curvePart = pow((srgbColor + vec3(0.055)) / 1.055, vec3(2.4));
+    vec3 switchCondition = step(vec3(0.04045), srgbColor);
+    return mix(linearPart, curvePart, switchCondition);
+}
 
-  void main() {
-    vec2 p = (vUv - 0.5) * uSize;
-    vec2 halfSize = uSize * 0.5;
+vec4 blendSrcOverInLinear(vec4 front, vec4 back) {
+  front.rgb = srgbToLinear(front.rgb);
+  back.rgb  = srgbToLinear(back.rgb);
+  float aOut = front.a + back.a * (1.0 - front.a);
+  float safeAlpha = max(aOut, 0.0001);
+  vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
+  return vec4(linearToSrgb(cOut), aOut);
+}
 
-    #INJECT_UV_MODIFIER
+vec4 blendSrcOver(vec4 front, vec4 back) {
+  float aOut = front.a + back.a * (1.0 - front.a);
+  float safeAlpha = max(aOut, 0.0001);
+  vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
+  return vec4(cOut, aOut);
+}
+
+float sdRoundedBox(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
+}
+
+float sdVisualBox(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  float n = 2.01; 
+  float d = pow(pow(max(q.x, 0.0), n) + pow(max(q.y, 0.0), n), 1.0/n) - r;
+  return min(max(q.x, q.y), 0.0) + d;
+}
+
+vec4 calculateGradientLayer(vec2 uv) {
+  if (uGradientCount < 2) return uGradientColors[0];
+
+  vec2 dir = vec2(sin(uGradientAngle), cos(uGradientAngle));
+  vec2 p = (uv - 0.5) * uSize;
+  float proj = dot(p, dir);
+  float L = abs(uSize.x * dir.x) + abs(uSize.y * dir.y);
+  float t = clamp((proj / L) + 0.5, 0.0, 1.0);
+  
+  vec4 color = uGradientColors[0];
+  for (int i = 1; i < 8; i++) {
+    if (i >= uGradientCount) break;
+    float prevStop = uGradientStops[i-1];
+    float currStop = uGradientStops[i];
     
-    // color decision pipeline
-    vec4 baseColor = vec4(uBgColor, uBgOpacity);
+    float factor = clamp((t - prevStop) / (currStop - prevStop + 0.00001), 0.0, 1.0);
+    color = mix(color, uGradientColors[i], factor);
+  }
+  // return vec4(linearToSrgb(color.rgb), color.a);
+  return vec4(color);
+}
 
-    #INJECT_BASE_COLOR
+void main() {
+  vec2 p = (vUv - 0.5) * uSize;
+  vec2 halfSize = uSize * 0.5;
 
-    // sdf shape pipeline
-    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
-    float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
-    float d = sdRoundedBox(p, halfSize, r);
+  #INJECT_UV_MODIFIER
 
-    float aa = 1.0; 
-    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+  // color decision pipeline
+  vec4 baseColor = vec4(uBgColor.rgb, uBgColor.a);
 
-    float halfBorder = uBorderWidth * 0.5;
-    float borderD = abs(d + halfBorder) - halfBorder;
-    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
-    if (uBorderWidth <= 0.01) {
-      borderAlpha = 0.0;
-    }
+  if (uGradientCount > 0) {
+    vec4 gradColor = calculateGradientLayer(vUv);
+    baseColor = blendSrcOver(gradColor, baseColor);
+  }
 
-    // final blending (border + background)
-    float aFront = borderAlpha;
-    float aBack = baseColor.a;
-    float aOut = aFront + aBack * (1.0 - aFront);
+  #INJECT_BASE_COLOR
 
-    float safeAlpha = max(aOut, 0.0001);
-    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
-    vec4 finalColor = vec4(cOut, aOut);
+  // Hybrid SDF
+  vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+  float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
+  r = min(r, min(halfSize.x, halfSize.y));
 
-    // final color control (Tint, Noise)
-    #INJECT_COLOR_MODIFIER
+  float d = sdRoundedBox(p, halfSize, r);
 
-    float finalOpacity = finalColor.a * bgMask * uOpacity;
-    if (finalOpacity < 0.001) discard;
+  float d_smooth = sdVisualBox(p, halfSize, r);
+  float d_visual = d_smooth / fwidth(d_smooth);
 
-    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+  // rendering pipeline
+  float bgMask = 1.0 - smoothstep(-0.5, 0.5, d_visual);
 
-    #include <colorspace_fragment>
-  }
-`
-);
-function S(i) {
-  if (!i || i === "transparent")
-    return { color: new d.Color(16777215), alpha: 0 };
-  const e = i.match(
-    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
-  );
-  if (e) {
-    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), s = parseInt(e[3], 10), n = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new d.Color(`rgb(${t}, ${r}, ${s})`), alpha: n };
+  float halfBorder = uBorderWidth * 0.5;
+  float borderD = abs(d + halfBorder) - halfBorder;
+  float borderAlpha = (1.0 - smoothstep(0.0, 1.0, borderD)) * uBorderColor.a; 
+  if (uBorderWidth <= 0.01) {
+    borderAlpha = 0.0;
   }
-  return { color: new d.Color(i), alpha: 1 };
+
+  // final blending (border + background) using blendSrcOver
+  vec4 borderLayer = vec4(uBorderColor.rgb, borderAlpha);
+  vec4 finalColor = blendSrcOver(borderLayer, baseColor);
+  // final color control (Tint, Noise)
+  #INJECT_COLOR_MODIFIER
+
+  float finalOpacity = finalColor.a * bgMask * uOpacity;
+  if (finalOpacity < 0.001) discard;
+
+  gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+
+
+  // #include <colorspace_fragment>
 }
-function H(i, e, t, r = null, s) {
-  var v;
-  const n = r !== null, a = n ? (
-    /* glsl */
-    `
-    uniform sampler2D uTexture;
-    varying vec4 vScreenPos;
-  `
-  ) : "", o = n ? (
-    /* glsl */
-    `
-    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-    vec2 resultUv = screenUv;
-    ${(s == null ? void 0 : s.uvModifier) || ""}
-  `
-  ) : "", l = n ? (
-    /* glsl */
-    `
-    baseColor = texture2D(uTexture, resultUv);
-  `
-  ) : "", c = (s == null ? void 0 : s.colorModifier) || "", g = W.replace("#INJECT_DECLARATIONS", a).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", c), u = S(i.backgroundColor), p = S(i.borderColor), m = {
-    uSize: { value: new d.Vector2(e, t) },
-    uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: w(i.borderWidth) },
-    uBgColor: { value: u.color },
-    uBorderColor: { value: p.color },
-    uOpacity: { value: (v = i.opacity) != null ? v : 1 },
-    uBgOpacity: { value: u.alpha },
-    uBorderOpacity: { value: p.alpha },
-    uTexture: { value: null }
+`, ye = `uniform sampler2D uTexture;
+varying vec4 vScreenPos;
+uniform vec2 uTextureRepeat;
+uniform vec2 uTextureOffset;`, we = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+vec2 resultUv = screenUv;
+
+`, Ce = `vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`, oe = {
+  vertexShader: xe,
+  fragmentShader: ve
+}, H = {
+  declChunk: ye,
+  uvChunk: we,
+  baseColorChunk: Ce
+};
+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) },
+    uBgColor: {
+      value: new m.Vector4(
+        h.color.r,
+        h.color.g,
+        h.color.b,
+        h.alpha
+      )
+    },
+    uBorderColor: {
+      value: new m.Vector4(
+        p.color.r,
+        p.color.g,
+        p.color.b,
+        p.alpha
+      )
+    },
+    uBorderRadius: { value: new m.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: F(i.borderWidth) },
+    uOpacity: { value: (x = i.opacity) != null ? x : 1 },
+    uTexture: { value: null },
+    uTextureRepeat: { value: new m.Vector2(1, 1) },
+    uTextureOffset: { value: new m.Vector2(0, 0) },
+    uGradientCount: { value: 0 },
+    uGradientAngle: { value: 0 },
+    uGradientColors: {
+      value: Array.from({ length: 8 }, () => new m.Vector4(0, 0, 0, 0))
+    },
+    uGradientStops: { value: new Float32Array(8) }
   };
-  return N(m.uBorderRadius.value, i.borderRadius), n && (m.uTexture.value = r), new d.ShaderMaterial({
-    uniforms: m,
-    vertexShader: U,
-    fragmentShader: g,
+  ae(g.uBorderRadius.value, i.borderRadius), a && (g.uTexture.value = s);
+  const y = new m.ShaderMaterial({
+    uniforms: g,
+    vertexShader: oe.vertexShader,
+    fragmentShader: f,
     transparent: !0,
-    side: d.FrontSide
+    side: m.FrontSide
     // for better performance
   });
+  return i.backgroundImage && J(y, { backgroundImage: i.backgroundImage }), y;
 }
-function $(i, e, t, r, s) {
-  var o;
-  const n = S(e.backgroundColor), a = S(e.borderColor);
-  i.uniforms.uSize.value.set(t, r), N(i.uniforms.uBorderRadius.value, e.borderRadius), i.uniforms.uBorderWidth.value = w(e.borderWidth), i.uniforms.uBgColor.value.copy(n.color), i.uniforms.uBorderColor.value.copy(a.color), i.uniforms.uOpacity.value = (o = e.opacity) != null ? o : 1, i.uniforms.uBgOpacity.value = n.alpha, i.uniforms.uBorderOpacity.value = a.alpha, i.uniforms.uTexture && s !== void 0 && (i.uniforms.uTexture.value = s);
+function Se(i, e, t, s, r) {
+  const a = F(e.borderWidth);
+  J(i, {
+    width: t,
+    height: s,
+    borderRadius: e.borderRadius,
+    borderWidth: a,
+    backgroundColor: e.backgroundColor,
+    borderColor: e.borderColor,
+    opacity: e.opacity,
+    texture: r,
+    backgroundImage: e.backgroundImage
+  });
 }
-const F = {
-  create(i, e, t, r, s, n = 2, a = null) {
-    if (i === "BOX")
-      return H(e, r, s, a);
-    if (i === "TEXT") {
-      const o = I(
-        t || "",
-        e,
-        r,
-        s,
-        n
+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)
+    if (Array.isArray(e.backgroundColor)) {
+      const o = i.uniforms.uBgColor.value.w;
+      i.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(
+        o.color.r,
+        o.color.g,
+        o.color.b,
+        o.alpha
+      );
+    } else {
+      const o = i.uniforms.uBgColor.value.w;
+      i.uniforms.uBgColor.value.set(
+        e.backgroundColor.r,
+        e.backgroundColor.g,
+        e.backgroundColor.b,
+        o
       );
-      return new d.MeshBasicMaterial({
-        map: o,
-        transparent: !0,
-        side: d.FrontSide,
-        color: 16777215
-      });
     }
-    return new d.MeshBasicMaterial({ visible: !1 });
-  },
-  update(i, e, t, r, s, n, a = 2, o) {
-    if (e === "BOX")
-      $(
-        i,
-        t,
-        s,
-        n,
+  if (e.borderColor !== void 0)
+    if (Array.isArray(e.borderColor)) {
+      const o = i.uniforms.uBorderColor.value.w;
+      i.uniforms.uBorderColor.value.set(
+        e.borderColor[0],
+        e.borderColor[1],
+        e.borderColor[2],
         o
       );
-    else if (e === "TEXT") {
-      const l = i;
-      l.map && l.map.dispose();
-      const c = I(
-        r || "",
-        t,
-        s,
-        n,
-        a
+    } else if (typeof e.borderColor == "string") {
+      const o = I(e.borderColor);
+      i.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(
+        e.borderColor.r,
+        e.borderColor.g,
+        e.borderColor.b,
+        o
       );
-      l.map = c, l.needsUpdate = !0;
     }
+  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;
+  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);
+      } else {
+        const h = d / f;
+        i.uniforms.uTextureRepeat.value.set(1, h), i.uniforms.uTextureOffset.value.set(0, (1 - h) / 2);
+      }
+    }
+  } else
+    i.uniforms.uTextureRepeat && (i.uniforms.uTextureRepeat.value.set(1, 1), i.uniforms.uTextureOffset.value.set(0, 0));
+  if (e.backgroundImage !== void 0) {
+    const o = be(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;
+        } else
+          i.uniforms.uGradientColors.value[n].set(0, 0, 0, 0), i.uniforms.uGradientStops.value[n] = 1;
+    } else
+      i.uniforms.uGradientCount.value = 0;
+  }
+}
+function ae(i, e) {
+  var n, c, l, d;
+  if (e == null) {
+    i.set(0, 0, 0, 0);
+    return;
+  }
+  if (typeof e == "number") {
+    i.set(e, e, e, e);
+    return;
+  }
+  if (Array.isArray(e)) {
+    i.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 z = {
+  create(i, e, t, s, r, a = 2, o = null, n) {
+    return i === "BOX" ? Te(
+      e,
+      s,
+      r,
+      o,
+      n
+    ) : i === "TEXT" ? new pe(
+      t || "",
+      e,
+      s,
+      r,
+      a
+    ) : new m.MeshBasicMaterial({ visible: !1 });
+  },
+  update(i, e, t, s, r, a, o = 2, n) {
+    e === "BOX" ? Se(
+      i,
+      t,
+      r,
+      a,
+      n
+    ) : e === "TEXT" && i.updateText(
+      s || "",
+      t,
+      r,
+      a,
+      o
+    );
+  },
+  forceUpdateUniforms(i, e) {
+    J(i, e);
   }
 };
-class G {
-  constructor(e, t, r) {
-    h(this, "canvas");
-    h(this, "scene");
-    h(this, "camera");
-    h(this, "renderer");
-    h(this, "renderTarget", null);
-    h(this, "renderOrder", 0);
-    h(this, "qualityFactor", 2);
-    h(this, "mode", "overlay");
-    h(this, "target");
-    h(this, "mountContainer");
-    h(this, "targetRect");
-    h(this, "meshMap", /* @__PURE__ */ new Map());
-    var a, o;
-    this.target = e, this.mountContainer = r, this.mode = (a = t.mode) != null ? a : "overlay", this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const s = this.targetRect.width, n = this.targetRect.height;
-    this.camera = new d.OrthographicCamera(
-      s / -2,
-      s / 2,
-      n / 2,
-      n / -2,
+class Re {
+  constructor(e) {
+    u(this, "observer");
+    u(this, "textures", /* @__PURE__ */ new WeakMap());
+    u(this, "loadStatus", /* @__PURE__ */ new WeakMap());
+    u(this, "elementUrls", /* @__PURE__ */ new WeakMap());
+    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);
+        }
+      },
+      { rootMargin: "300px" }
+    );
+  }
+  register(e, t) {
+    if (e.nodeType !== Node.ELEMENT_NODE)
+      return;
+    this.elementUrls.get(e) !== t && (this.elementUrls.set(e, t), this.observer.unobserve(e), this.observer.observe(e));
+  }
+  unregister(e) {
+    e.nodeType === Node.ELEMENT_NODE && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
+  }
+  loadTexture(e) {
+    return se(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" });
+          if (this.elementUrls.get(e) !== t) {
+            a.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);
+        } finally {
+          this.elementUrls.has(e) && this.loadStatus.set(e, !1);
+        }
+      }
+    });
+  }
+  disposeTexture(e) {
+    const t = this.textures.get(e);
+    t && (t.dispose(), this.textures.delete(e), this.onUpdate(e, null)), this.loadStatus.set(e, !1);
+  }
+  get(e) {
+    return this.textures.get(e);
+  }
+  disposeAll() {
+    this.observer.disconnect();
+  }
+}
+class Me {
+  constructor(e, t, s, r) {
+    u(this, "canvas");
+    u(this, "scene");
+    u(this, "camera");
+    u(this, "renderer");
+    u(this, "renderTarget", null);
+    u(this, "renderOrder", 0);
+    u(this, "qualityFactor", 2);
+    u(this, "mode", "overlay");
+    u(this, "clipArea", 1);
+    u(this, "target");
+    u(this, "mountContainer");
+    u(this, "registry");
+    u(this, "targetRect");
+    u(this, "travelers", /* @__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,
+      o / 2,
+      o / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.camera.layers.set(0), this.renderer = new d.WebGLRenderer({
+    ), this.camera.position.z = 100, this.camera.layers.set(0), this.renderer = new m.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0,
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, n), this.applyTextQuality((o = t.quality) != null ? o : "medium");
+    }), 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");
   }
   createRenderTarget() {
-    this.renderTarget = new d.WebGLRenderTarget(
+    this.renderTarget = new m.WebGLRenderTarget(
       this.targetRect.width * this.qualityFactor,
       this.targetRect.height * this.qualityFactor,
       {
-        minFilter: d.LinearFilter,
-        magFilter: d.LinearFilter,
-        format: d.RGBAFormat,
+        minFilter: m.LinearFilter,
+        magFilter: m.LinearFilter,
+        format: m.RGBAFormat,
         stencilBuffer: !1,
-        depthBuffer: !0,
-        samples: 4
+        depthBuffer: !0
+        // samples: 0.7,
       }
     );
   }
@@ -302,7 +662,7 @@ class G {
     this.canvas.style.width = `${this.targetRect.width}px`, this.canvas.style.height = `${this.targetRect.height}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = "absolute", this.canvas.style.top = `${this.target.offsetTop}px`, this.canvas.style.left = `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
   }
   dispose() {
-    this.renderer.dispose(), this.canvas.remove();
+    this.renderer.dispose(), this.canvas.remove(), this.textureManager.disposeAll();
   }
   setSize(e, t) {
     this.renderer.setSize(e, t), this.renderTarget && this.renderTarget.setSize(
@@ -310,72 +670,95 @@ class G {
       t * this.qualityFactor
     ), this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
   }
-  syncScene(e) {
-    const t = this.target.getBoundingClientRect(), r = Math.abs(t.width - this.targetRect.width) > 0.1 || Math.abs(t.height - this.targetRect.height) > 0.1, s = this.mode === "overlay" && (Math.abs(t.top - this.targetRect.top) > 0.1 || Math.abs(t.left - this.targetRect.left) > 0.1);
-    r ? (this.targetRect = t, this.setSize(this.targetRect.width, this.targetRect.height), this.updateCanvasLayout()) : s ? (this.targetRect = t, this.updateCanvasLayout()) : this.targetRect = t, this.renderOrder = 0;
-    const n = /* @__PURE__ */ new Set();
-    this.reconcileNode(e, n);
-    for (const [a, o] of this.meshMap.entries())
-      n.has(a) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.Material && o.material.dispose(), this.meshMap.delete(a));
+  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));
+    });
   }
-  reconcileNode(e, t) {
+  // 탐색 후 완성된 Scene node를 이용하여 mesh를 만들거나 조정
+  // => 이 과정에서 scene node에 있는 ele를 넣은 hash => activeElements
+  // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
+  // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
+  reconcileNode(e) {
     var s;
-    t.add(e.element);
-    let r = this.meshMap.get(e.element);
-    if (!r) {
-      const n = new d.PlaneGeometry(1, 1);
+    let t = this.registry.get(e.element);
+    if (!t) {
+      const r = new m.PlaneGeometry(1, 1);
       let a;
-      a = F.create(
+      const o = e.isTraveler ? (s = this.renderTarget) == null ? void 0 : s.texture : this.textureManager.get(e.element);
+      a = z.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        e.isTraveler ? (s = this.renderTarget) == null ? void 0 : s.texture : void 0
-      ), r = new d.Mesh(n, a), e.type === "TEXT" && (r.name = "BG_MESH"), this.scene.add(r), this.meshMap.set(e.element, r);
+        o,
+        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);
     }
-    if (r.userData.domRect = e.rect, this.updateMeshProperties(r, e), this.updateMeshLayers(r, e), e.isTraveler && r.layers.enable(28), e.type === "BOX")
-      for (const n of e.children)
-        this.reconcileNode(n, t);
+    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")
+      for (const r of e.children)
+        this.reconcileNode(r);
     else
-      e.type === "TEXT" && this.reconcileTextChild(r, e);
+      e.type === "TEXT" && this.reconcileTextChild(t, e);
   }
   reconcileTextChild(e, t) {
-    var o, l;
-    let r = e.children.find(
-      (c) => c.name === "TEXT_CHILD"
-    );
-    const s = JSON.stringify(t.textStyles), n = (o = r == null ? void 0 : r.userData) == null ? void 0 : o.styleHash;
-    if (!r || t.dirtyMask & _ || s !== n) {
-      r && ((l = r.material.map) == null || l.dispose(), r.geometry.dispose(), e.remove(r));
-      const c = F.create(
-        "TEXT",
-        t.textStyles,
-        t.textContent || "",
-        t.rect.width,
-        t.rect.height,
-        this.qualityFactor
-      ), g = new d.PlaneGeometry(1, 1);
-      r = new d.Mesh(g, c), r.name = "TEXT_CHILD", r.userData = { styleHash: s }, this.updateMeshLayers(r, t), r.position.z = 5e-3, e.add(r);
-    }
-    if (r) {
-      const c = e.userData.domRect, g = c.x + c.width / 2, u = c.y + c.height / 2, p = t.rect.x + t.rect.width / 2, m = t.rect.y + t.rect.height / 2, T = p - g, v = -(m - u);
-      r.position.set(T, v, 5e-3);
+    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);
+      });
+      const l = t.rect, d = l.x + l.width / 2, f = l.y + l.height / 2;
+      s.forEach((h, p) => {
+        const g = z.create(
+          "TEXT",
+          t.textStyles,
+          h.text,
+          h.rect.width,
+          h.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, w = -(E - f);
+        x.position.set(
+          t.rect.width === 0 ? 0 : b / t.rect.width,
+          t.rect.height === 0 ? 0 : w / t.rect.height,
+          5e-3
+        ), e.add(x);
+      }), e.userData.textChildStyleHash = r;
     }
   }
   updateMeshProperties(e, t) {
-    var m;
-    const { rect: r, styles: s } = t, n = this.renderer.getPixelRatio(), a = this.renderer.domElement.width / n, o = this.renderer.domElement.height / n;
-    e.scale.set(r.width, r.height, 1);
-    const l = 1e-3;
+    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;
     this.renderOrder++;
-    const c = this.targetRect.left + window.scrollX, g = this.targetRect.top + window.scrollY, u = r.x - c, p = r.y - g;
+    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;
     e.position.set(
-      u - a / 2 + r.width / 2,
-      -p + o / 2 - r.height / 2,
-      s.zIndex + this.renderOrder * l
-    ), F.update(
+      p,
+      g,
+      r.zIndex + this.renderOrder * c
+    );
+    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 w = new DOMMatrix(S.transform);
+      M = w.m41, E = w.m42;
+    }
+    e.userData.baseTransform = { x: M, y: E }, delete e.userData.originRatioX, delete e.userData.originRatioY, z.update(
       e.material,
       "BOX",
       t.styles,
@@ -383,28 +766,28 @@ class G {
       t.rect.width,
       t.rect.height,
       this.qualityFactor,
-      t.isTraveler ? (m = this.renderTarget) == null ? void 0 : m.texture : void 0
+      t.isTraveler ? (b = this.renderTarget) == null ? void 0 : b.texture : this.textureManager.get(t.element)
     );
   }
   updateMeshLayers(e, t) {
-    const r = (1 - (t.visibility & x)) * 30;
-    e.layers.set(r), t.visibility === (x | R) && e.layers.enable(29);
+    const s = (1 - (t.visibility & D)) * 30;
+    e.layers.set(s), t.visibility === (D | X) && e.layers.enable(29);
   }
   captureRenderTarget() {
-    const e = [];
-    for (const l of this.meshMap.values())
-      l.layers.mask & 1 << 28 && e.push(l);
-    if (e.length === 0)
+    if (this.travelers.size === 0)
       return;
-    const t = new d.Color(), r = this.renderer.getClearAlpha();
-    this.renderer.getClearColor(t), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(this.renderTarget), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(29);
-    const s = new d.Vector3(), n = this.targetRect.width, a = this.targetRect.height, o = this.renderer.getPixelRatio();
-    for (const l of e) {
-      s.setFromMatrixPosition(l.matrixWorld), s.project(this.camera);
-      const c = (s.x + 1) / 2 * n, g = (s.y + 1) / 2 * a, u = l.scale.x, p = l.scale.y, m = c - u / 2, T = g - p / 2, v = m * this.qualityFactor / o, B = T * this.qualityFactor / o, b = u * this.qualityFactor / o, f = p * this.qualityFactor / o;
-      this.renderer.setScissor(v, B, b, f), this.renderer.render(this.scene, this.camera);
+    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);
     }
-    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(28), this.renderer.setClearColor(t, r);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(0), this.renderer.setClearColor(e, t);
   }
   render() {
     this.renderTarget && this.captureRenderTarget(), this.renderer.render(this.scene, this.camera);
@@ -413,166 +796,302 @@ class G {
   showScissoredRenderTarget() {
     if (!this.renderTarget)
       return;
-    const e = this.targetRect.width, t = this.targetRect.height, r = new d.PlaneGeometry(e, t), s = new d.MeshBasicMaterial({
+    const e = this.targetRect.width, t = this.targetRect.height, s = new m.PlaneGeometry(e, t), r = new m.MeshBasicMaterial({
       map: this.renderTarget.texture,
-      side: d.DoubleSide,
+      side: m.DoubleSide,
       transparent: !0,
       opacity: 0.8
-    }), n = new d.Mesh(r, s);
-    n.position.set(0, 0, 90), n.layers.set(28), this.scene.add(n);
+    }), a = new m.Mesh(s, r);
+    a.position.set(0, 0, 90), a.layers.set(28), this.scene.add(a);
   }
 }
-function J(i) {
-  const e = document.createRange();
-  e.selectNodeContents(i);
-  const t = e.getBoundingClientRect();
-  return {
-    left: t.left,
-    top: t.top,
-    width: t.width,
-    height: t.height
-  };
+function 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;
+        continue;
+      }
+      a === -1 || Math.abs(g.top - a) > g.height / 2 ? (s && r && t.push({
+        text: s,
+        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)));
+    }
+  }, 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();
+    if (f.length > 1)
+      o(l, c);
+    else {
+      const h = f.length === 1 ? f[0] : d.getBoundingClientRect();
+      if (h.width === 0 && h.height === 0) {
+        s += l, c += l.length;
+        continue;
+      }
+      a === -1 || Math.abs(h.top - a) > h.height / 2 ? (s && r && t.push({
+        text: s,
+        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)));
+    }
+    c += l.length;
+  }
+  return s && r && t.push({
+    text: s,
+    rect: {
+      left: r.left,
+      top: r.top,
+      width: r.right - r.left,
+      height: r.bottom - r.top
+    }
+  }), t.filter((l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0);
 }
-function V(i) {
+function De(i) {
   const e = parseFloat(i.fontSize);
   let t = parseFloat(i.lineHeight);
   isNaN(t) && (t = e * 1.2);
-  let r = parseFloat(i.letterSpacing);
-  return isNaN(r) && (r = 0), {
+  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",
     textBaseline: "alphabetic",
     direction: i.direction || "inherit",
     lineHeight: t,
-    letterSpacing: r
+    letterSpacing: s
   };
 }
-function A(i, e = O | z | q | _ | D, t, r) {
+function ce(i, e = B | N | fe | $ | V, t, s) {
   if (i.nodeType === Node.TEXT_NODE) {
-    const f = i;
-    if (!f.textContent || !f.textContent.trim())
+    const b = i;
+    if (!b.textContent || !b.textContent.trim())
+      return null;
+    const w = b.textContent.replace(/\s+/g, " ");
+    if (w.length === 0)
       return null;
-    const C = f.textContent.replace(/\s+/g, " ").trim();
-    if (C.length === 0)
+    const R = Ee(b);
+    if (R.length === 0)
       return null;
-    const y = J(f);
-    if (y.width === 0 || y.height === 0)
+    const k = b.parentElement, O = k ? window.getComputedStyle(k) : null;
+    if (!O)
       return null;
-    const L = f.parentElement, M = L ? window.getComputedStyle(L) : null;
-    return M ? {
+    const A = Math.min(...R.map((v) => v.rect.left)), L = 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));
+    return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: f,
+      element: b,
       rect: {
-        x: y.left + window.scrollX,
-        y: y.top + window.scrollY,
-        width: y.width,
-        height: y.height
+        x: A + window.scrollX,
+        y: L + window.scrollY,
+        width: P - A,
+        height: Y - L
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(M.opacity),
+        backgroundImage: "",
+        opacity: k && k.dataset.mirageDom === "hide" ? 1 : parseFloat(O.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
-        borderWidth: "0px"
+        borderWidth: "0px",
+        isTraveler: !1
       },
-      textContent: C,
-      textStyles: V(M),
+      textContent: w,
+      textLines: R.map((v) => ({
+        text: v.text.trim(),
+        rect: {
+          x: v.rect.left + window.scrollX,
+          y: v.rect.top + window.scrollY,
+          width: v.rect.width,
+          height: v.rect.height
+        }
+      })),
+      textStyles: De(O),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
+      isFixed: O.position === "fixed",
       children: []
-    } : null;
-  }
-  const s = i, n = s.dataset.mirageFilter;
-  let a = t, o = t;
-  if (n) {
-    const f = new Set(n.split(/\s+/));
-    for (const C of f)
-      if (!k.includes(C))
+    };
+  }
+  if (i.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 w of b)
+      if (!ge.includes(w))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${w}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
-    if (f.has("end"))
+    if (b.has("end"))
       return null;
-    if (f.has("include-tree") && f.has("exclude-tree"))
+    if (b.has("include-tree") && b.has("exclude-tree"))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (f.has("include-self") && f.has("exclude-self"))
+    if (b.has("include-self") && b.has("exclude-self"))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    f.has("include-tree") ? a = a | x : f.has("exclude-tree") && (a = a & ~x), o = a, f.has("include-self") ? o = o | x : f.has("exclude-self") && (o = o & ~x);
-  }
-  o = o | t & R;
-  const l = s.dataset.mirageTravel;
-  let c = !1;
-  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~R, a = a & ~R, c = !0);
-  const g = s.getBoundingClientRect(), u = window.getComputedStyle(s);
-  if (g.width === 0 || g.height === 0 || u.display === "none")
+    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")
     return null;
-  let p = s.getAttribute("data-mid");
-  p || (p = Math.random().toString(36).substring(2, 11), s.setAttribute("data-mid", p));
-  const m = parseInt(u.zIndex), T = {
-    backgroundColor: u.backgroundColor,
-    opacity: parseFloat(u.opacity),
-    zIndex: isNaN(m) ? 0 : m,
-    borderRadius: u.borderRadius,
-    borderColor: u.borderColor,
-    borderWidth: u.borderWidth
+  let 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 v, B;
-  const b = [];
-  return Array.from(s.childNodes).forEach((f) => {
-    const C = f.nodeType === Node.TEXT_NODE ? o : a, y = A(
-      f,
+  let S, M;
+  const E = [];
+  return Array.from(r.childNodes).forEach((b) => {
+    const w = b.nodeType === Node.TEXT_NODE ? n : o, R = ce(
+      b,
       e,
-      C
+      w
     );
-    y && b.push(y);
+    R && E.push(R);
   }), {
-    id: p,
+    id: g,
     type: "BOX",
-    element: s,
+    element: r,
     rect: {
-      x: g.left + window.scrollX,
-      y: g.top + window.scrollY,
-      width: g.width,
-      height: g.height
+      x: h.left + window.scrollX,
+      y: h.top + window.scrollY,
+      width: h.width,
+      height: h.height
     },
     styles: T,
-    textContent: v,
-    textStyles: B,
+    textContent: S,
+    textStyles: M,
     dirtyMask: e,
-    visibility: o,
-    isTraveler: c,
-    children: b
+    visibility: n,
+    isTraveler: l,
+    isFixed: p.position === "fixed",
+    children: E,
+    shaderHooks: f
   };
 }
-class j {
-  constructor(e, t, r) {
-    h(this, "target");
-    h(this, "renderer");
-    h(this, "filter");
-    h(this, "observer");
-    h(this, "isDomDirty", !1);
-    h(this, "isRunning", !1);
-    h(this, "isTravelEnabled", !1);
-    h(this, "pendingMask", E);
-    h(this, "mutationTimer", null);
-    h(this, "cssTimer", null);
-    h(this, "resizeConfig");
-    h(this, "resizeTimer", null);
-    h(this, "isResizing", !1);
-    h(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= O | z, this.cssTimer = window.setTimeout(() => {
+function ke(i, e) {
+  e.size !== 0 && e.forEach((t, s) => {
+    var b, w, R, k, O, A, L, P, Y, v, j, Q, Z, K, ee, te, re, ie;
+    const r = i.get(s);
+    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 = (w = t.height) != null ? w : c, f = l - n, h = d - c;
+    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 C = -(U.left + q - W + G - r.userData.baseDOM.x) / f;
+      Math.abs(C) < 0.05 ? C = 0 : Math.abs(C - 1) < 0.05 ? C = 1 : Math.abs(C - 0.5) < 0.05 && (C = 0.5), r.userData.originRatioX = C;
+    }
+    if (t.height !== void 0 && r.userData.originRatioY === void 0 && Math.abs(h) > 0.1) {
+      const U = s.getBoundingClientRect(), W = (A = t.y) != null ? A : 0, G = (P = (L = r.userData.baseTransform) == null ? void 0 : L.y) != null ? P : 0, q = r.userData.isFixed ? 0 : window.scrollY;
+      let C = -(U.top + q - W + G - r.userData.baseDOM.y) / h;
+      Math.abs(C) < 0.05 ? C = 0 : Math.abs(C - 1) < 0.05 ? C = 1 : Math.abs(C - 0.5) < 0.05 && (C = 0.5), r.userData.originRatioY = C;
+    }
+    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, {
+      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
+    });
+  });
+}
+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 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) {
+    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", _);
+    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 | N, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
-      }, 50));
+      }, 50)));
     });
-    h(this, "onWindowResize", () => {
+    u(this, "onWindowResize", () => {
       if (!this.resizeConfig.enabled) {
         this.isDomDirty = !0;
         return;
@@ -581,24 +1100,42 @@ class j {
         this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
       }, this.resizeConfig.delay);
     });
-    h(this, "renderLoop", () => {
-      this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
+    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 n, a;
-    this.target = e, this.renderer = t, this.filter = r.filter;
-    const s = (n = r.resizeDebounce) != null ? n : !0;
-    s === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : s === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
+    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: (a = s.delay) != null ? a : 150,
-      onStart: s.onStart,
-      onEnd: s.onEnd
-    }, this.observer = new MutationObserver((o) => {
-      let l = E;
-      for (const c of o)
-        c.type === "childList" ? l |= D : c.type === "attributes" && (c.attributeName === "style" || c.attributeName === "class") && (l |= O | z);
-      if (l !== E) {
-        if (this.pendingMask |= l, l & D) {
-          this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
+      delay: (n = a.delay) != null ? n : 150,
+      onStart: a.onStart,
+      onEnd: a.onEnd
+    }, this.observer = new MutationObserver((c) => {
+      let l = _;
+      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 | N;
+            const f = d.target, h = Be(f.style);
+            this.pendingStyles.set(f, h);
+          } else
+            d.attributeName === "class" && (l |= B | N);
+        else
+          d.type === "characterData" && (l |= $ | B);
+      if (l !== _) {
+        if (this.pendingMask |= l, l & V) {
+          this.clearTimers(), this.isDomDirty = !0;
           return;
         }
         this.mutationTimer && clearTimeout(this.mutationTimer), this.mutationTimer = window.setTimeout(() => {
@@ -619,32 +1156,71 @@ class j {
     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.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.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 = A(
+    const t = ce(
       this.target,
       this.pendingMask,
-      e ? x | R : x,
+      e ? D | X : D,
       this.filter
     );
-    t && this.renderer.syncScene(t), this.pendingMask = E;
+    t && (this.renderer.syncScene(t, this.pendingDeletions), this.pendingDeletions.clear()), this.pendingMask = _;
+  }
+  // [ThinkPoint] change call back pattern when after
+}
+class Ie {
+  constructor() {
+    u(this, "store");
+    this.store = /* @__PURE__ */ new WeakMap();
+  }
+  register(e, t) {
+    this.store.set(e, t);
+  }
+  get(e) {
+    return this.store.get(e);
+  }
+  // public register(element: HTMLElement, meshGroup: THREE.Group): void {
+  //   this.store.set(element, meshGroup);
+  // }
+  // public get(element: HTMLElement): THREE.Group | undefined {
+  //   return this.store.get(element);
+  // }
+  has(e) {
+    return this.store.has(e);
+  }
+  // Optional
+  remove(e) {
+    this.store.delete(e);
   }
 }
-class Q {
+class Ae {
   constructor(e, t) {
-    h(this, "renderer");
-    h(this, "syncer");
-    h(this, "target");
-    var s, n, a;
-    this.target = e;
-    let r;
-    if (t.mode === "duplicate" ? r = (n = (s = t.container) != null ? s : this.target.parentElement) != null ? n : void 0 : r = (a = this.target.parentElement) != null ? a : void 0, !r)
+    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"] {
+          opacity: 0 !important;
+        }
+      `, document.head.appendChild(n);
+    }
+    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)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new G(this.target, t, r), this.renderer.mount(), this.syncer = new j(this.target, this.renderer, t);
+    this.renderer = new Me(
+      this.target,
+      t,
+      s,
+      this.registry
+    ), this.renderer.mount(), this.syncer = new Fe(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();
@@ -655,13 +1231,35 @@ class Q {
   dispose() {
     this.syncer.stop(), this.renderer.dispose();
   }
+  test() {
+    const e = this.registry.get(
+      document.querySelector("#box2")
+    );
+    if (!e)
+      return;
+    const t = {
+      ArrowRight: !1,
+      ArrowLeft: !1,
+      ArrowUp: !1,
+      ArrowDown: !1
+    };
+    window.addEventListener("keydown", (a) => {
+      t[a.key] !== void 0 && (t[a.key] = !0);
+    }), window.addEventListener("keyup", (a) => {
+      t[a.key] !== void 0 && (t[a.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);
+    };
+    r();
+  }
 }
-class K {
+class ze {
   constructor(e, t) {
-    h(this, "_engine");
+    u(this, "_engine");
     if (!e)
       throw new Error("[Mirage] Target element is required.");
-    this._engine = new Q(e, t);
+    this._engine = new Ae(e, t);
   }
   start() {
     this._engine.start();
@@ -672,7 +1270,10 @@ class K {
   destroy() {
     this._engine.dispose();
   }
+  test() {
+    this._engine.test();
+  }
 }
 export {
-  K as Mirage
+  ze as Mirage
 };