mirage-engine 0.2.17 → 0.3.0

package/dist/mirage-engine.js

@@ -1,282 +1,840 @@
-var k = Object.defineProperty;
-var q = (i, e, t) => e in i ? k(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var c = (i, e, t) => (q(i, typeof e != "symbol" ? e + "" : e, t), t);
-import * as d from "three";
-const S = 0, z = 1, L = 2, Y = 4, I = 8, N = 16, x = 1, R = 2, W = [
-  "include-tree",
-  "exclude-tree",
-  "include-self",
-  "exclude-self",
-  "end"
-];
-function U(i, e, t) {
-  const r = e.split(`
-`), s = [];
-  return r.forEach((a) => {
-    const n = a.split(" ");
-    let o = n[0];
-    for (let l = 1; l < n.length; l++) {
-      const h = n[l];
-      i.measureText(o + " " + h).width < t ? o += " " + h : (s.push(o), o = h);
+var Fe = Object.defineProperty, _e = Object.defineProperties;
+var Xe = Object.getOwnPropertyDescriptors;
+var Ce = Object.getOwnPropertySymbols;
+var ze = Object.prototype.hasOwnProperty, Ne = Object.prototype.propertyIsEnumerable;
+var ge = (s, e, t) => e in s ? Fe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, G = (s, e) => {
+  for (var t in e || (e = {}))
+    ze.call(e, t) && ge(s, t, e[t]);
+  if (Ce)
+    for (var t of Ce(e))
+      Ne.call(e, t) && ge(s, t, e[t]);
+  return s;
+}, pe = (s, e) => _e(s, Xe(e));
+var h = (s, e, t) => (ge(s, typeof e != "symbol" ? e + "" : e, t), t);
+var we = (s, e, t) => new Promise((i, r) => {
+  var c = (o) => {
+    try {
+      a(t.next(o));
+    } catch (l) {
+      r(l);
     }
-    s.push(o);
-  }), s;
-}
-function A(i, e, t, r, s = 2) {
-  const a = document.createElement("canvas"), n = a.getContext("2d");
-  if (!n)
-    throw new Error("[Mirage] Failed to create canvas context");
-  const l = (window.devicePixelRatio || 1) * s;
-  a.width = t * l, a.height = r * l, n.scale(l, l), n.font = e.font, n.fillStyle = e.color, n.textBaseline = "top", n.globalAlpha = 1;
-  const h = U(n, i, t), m = e.lineHeight;
-  h.forEach((g, p) => {
-    const y = p * m + 2;
-    let v = 0;
-    e.textAlign === "center" ? v = t / 2 : e.textAlign === "right" && (v = t), n.textAlign = e.textAlign, n.fillText(g, v, y);
-  });
-  const f = new d.CanvasTexture(a);
-  return f.colorSpace = d.SRGBColorSpace, f.minFilter = d.LinearFilter, f.magFilter = d.LinearFilter, f.needsUpdate = !0, f;
+  }, n = (o) => {
+    try {
+      a(t.throw(o));
+    } catch (l) {
+      r(l);
+    }
+  }, a = (o) => o.done ? i(o.value) : Promise.resolve(o.value).then(c, n);
+  a((t = t.apply(s, e)).next());
+});
+import * as b from "three";
+const De = {
+  INCLUDE_TREE: "include-tree",
+  EXCLUDE_TREE: "exclude-tree",
+  INCLUDE_SELF: "include-self",
+  EXCLUDE_SELF: "exclude-self",
+  END: "end"
+}, $ = {
+  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"
+}, U = {
+  NAME: "data-mirage-travel",
+  KEY: "mirageTravel",
+  VALUES: Te,
+  MAX_LAYERS: Object.keys(Te).length - 1
+}, N = {
+  NAME: "data-mirage-filter",
+  KEY: "mirageFilter",
+  VALUES: De
+}, Y = {
+  NAME: "data-mirage-select",
+  KEY: "mirageSelect",
+  VALUES: De
+}, Ye = {
+  NAME: "data-mirage-shader",
+  KEY: "mirageShader"
+}, Se = {
+  NAME: "data-mirage-sandwich",
+  KEY: "mirageSandwich",
+  VALUES: {
+    FRONT: "front"
+  }
+}, he = 0, j = 1, ae = 2, Ve = 4, ye = 8, be = 16;
+function Pe(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 w(i) {
-  return typeof i == "number" ? i : parseFloat(i) || 0;
+function We(s) {
+  const e = {};
+  if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
+    const t = Pe(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;
 }
-function X(i, e) {
-  var o, l, h, m;
-  if (!e) {
-    i.set(0, 0, 0, 0);
-    return;
+class Ae {
+  constructor(e, t) {
+    h(this, "target");
+    h(this, "observer");
+    h(this, "pendingDeletions", /* @__PURE__ */ new Set());
+    h(this, "pendingStyles", /* @__PURE__ */ new Map());
+    h(this, "isDomDirty", !1);
+    h(this, "isRunning", !1);
+    h(this, "pendingMask", he);
+    h(this, "mutationTimer", null);
+    h(this, "cssTimer", null);
+    h(this, "resizeConfig");
+    h(this, "resizeTimer", null);
+    h(this, "isResizing", !1);
+    h(this, "lastScrollX", 0);
+    h(this, "lastScrollY", 0);
+    h(this, "scrollTimer", null);
+    h(this, "onBeforeRender", /* @__PURE__ */ new Set());
+    h(this, "onLayoutChange", /* @__PURE__ */ new Set());
+    h(this, "onStyleChange", /* @__PURE__ */ new Set());
+    h(this, "onScrollChange", /* @__PURE__ */ new Set());
+    h(this, "onRender", /* @__PURE__ */ new Set());
+    h(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)));
+    });
+    h(this, "onWindowResize", () => {
+      if (!this.resizeConfig.enabled) {
+        this.isDomDirty = !0;
+        return;
+      }
+      this.isResizing || (this.isResizing = !0, this.resizeConfig.onStart && this.resizeConfig.onStart()), this.resizeTimer && clearTimeout(this.resizeTimer), this.resizeTimer = window.setTimeout(() => {
+        this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
+      }, this.resizeConfig.delay);
+    });
+    h(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, c;
+    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: (c = i.delay) != null ? c : 150,
+      onStart: i.onStart,
+      onEnd: i.onEnd
+    }, this.observer = new MutationObserver((n) => {
+      let a = he;
+      for (const o of n)
+        if (o.type === "childList")
+          a |= ye, o.removedNodes.length > 0 && o.removedNodes.forEach((l) => {
+            l instanceof HTMLElement && this.pendingDeletions.add(l);
+          });
+        else if (o.type === "attributes")
+          if (o.attributeName === "style") {
+            a |= j | ae;
+            const l = o.target, d = We(l.style);
+            this.pendingStyles.set(l, d);
+          } else
+            (o.attributeName === "class" || o.attributeName && o.attributeName.startsWith("data-")) && (a |= j | ae);
+        else
+          o.type === "characterData" && (a |= be | j);
+      if (a !== he) {
+        if (this.pendingMask |= a, a & ye) {
+          this.clearTimers(), this.isDomDirty = !0;
+          return;
+        }
+        this.mutationTimer && clearTimeout(this.mutationTimer), this.mutationTimer = window.setTimeout(() => {
+          this.mutationTimer = null, this.isDomDirty = !0;
+        }, 200);
+      }
+    });
   }
-  const t = e.split("/")[0].trim().split(/\s+/), r = w(t[0]), s = w((o = t[1]) != null ? o : t[0]), a = w((l = t[2]) != null ? l : t[0]), n = w((m = (h = t[3]) != null ? h : t[1]) != null ? m : t[0]);
-  i.set(r, s, a, n);
-}
-const H = (
-  /* glsl */
-  `
-  varying vec2 vUv;
-  varying vec4 vScreenPos;
-  void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    vScreenPos = gl_Position;
-  }
-`
-), $ = (
-  /* glsl */
-  `
+  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 V = 1, Z = 2, A = {
+  BASE: 0,
+  SELECTED: 1,
+  getCaptureLayer: (s) => 31 - s,
+  HIDDEN: 31
+}, Le = Object.values(N.VALUES);
+class ke {
+  /**
+   * 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"), 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 c = r.offsetTop - i.offsetTop;
+    return document.body.removeChild(t), c;
+  }
+}
+h(ke, "cache", /* @__PURE__ */ new Map());
+class He extends b.MeshBasicMaterial {
+  constructor(t, i, r, c, n = 2) {
+    super({
+      transparent: !0,
+      side: b.FrontSide,
+      color: 16777215
+    });
+    h(this, "canvas");
+    h(this, "ctx");
+    h(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 = n, this.map = new b.CanvasTexture(this.canvas), this.map.colorSpace = b.LinearSRGBColorSpace, this.map.minFilter = b.LinearFilter, this.map.magFilter = b.LinearFilter, this.updateText(t, i, r, c);
+  }
+  wrapText(t, i) {
+    const r = t.split(`
+`), c = [];
+    return r.forEach((n) => {
+      const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (a.length === 0) {
+        c.push("");
+        return;
+      }
+      let o = a[0];
+      for (let l = 1; l < a.length; l++) {
+        const d = a[l];
+        this.ctx.measureText(o + d).width <= i + 2 ? o += d : (o && c.push(o), o = d.trimStart());
+      }
+      o && c.push(o);
+    }), c;
+  }
+  updateText(t, i, r, c, n) {
+    n !== void 0 && (this.qualityFactor = n);
+    const o = (window.devicePixelRatio || 1) * this.qualityFactor, l = r * o, d = c * o;
+    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(o, 0, 0, o, 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), y = i.lineHeight, p = ke.getBaseline(i.font);
+    f.forEach((u, g) => {
+      const w = g * y + p;
+      let R = 0;
+      i.textAlign === "center" ? R = r / 2 : i.textAlign === "right" && (R = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(u, R, w);
+    }), this.map && (this.map.needsUpdate = !0);
+  }
+  dispose() {
+    this.map && this.map.dispose(), super.dispose();
+  }
+}
+function ee(s) {
+  return typeof s == "number" ? s : parseFloat(s) || 0;
+}
+function ce(s) {
+  if (!s || s === "transparent")
+    return { color: new b.Color(16777215), alpha: 0 };
+  const e = s.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+  );
+  if (e) {
+    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new b.Color(`rgb(${t}, ${i}, ${r})`), alpha: c };
+  }
+  return { color: new b.Color(s), alpha: 1 };
+}
+function Ge(s) {
+  const e = [];
+  let t = "", i = 0;
+  for (let r = 0; r < s.length; r++) {
+    const c = s[r];
+    if (c === "(")
+      i++;
+    else if (c === ")")
+      i--;
+    else if (c === "," && i === 0) {
+      e.push(t.trim()), t = "";
+      continue;
+    }
+    t += c;
+  }
+  return t && e.push(t.trim()), e;
+}
+function $e(s) {
+  if (!s || typeof s != "string" || !s.includes("linear-gradient"))
+    return null;
+  const e = s.match(/linear-gradient\((.*)\)/);
+  if (!e)
+    return null;
+  const t = e[1], i = Ge(t);
+  let r = Math.PI, c = 0;
+  const n = i[0].trim();
+  if (n.startsWith("to "))
+    n === "to top" ? r = 0 : n === "to right" ? r = Math.PI / 2 : n === "to bottom" ? r = Math.PI : n === "to left" ? r = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? r = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? r = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? r = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (r = Math.PI * 1.75), c = 1;
+  else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
+    const o = parseFloat(n);
+    n.endsWith("deg") ? r = o * (Math.PI / 180) : n.endsWith("rad") ? r = o : n.endsWith("turn") && (r = o * Math.PI * 2), c = 1;
+  }
+  const a = [];
+  for (let o = c; o < i.length && !(a.length >= 8); o++) {
+    const l = i[o].trim(), d = l.lastIndexOf(" ");
+    let f = l, y = null;
+    if (d !== -1 && !l.endsWith(")")) {
+      const u = l.substring(d + 1);
+      (u.endsWith("%") || u.endsWith("px") || !isNaN(parseFloat(u))) && (f = l.substring(0, d).trim(), y = u);
+    }
+    const p = ce(f);
+    a.push({
+      color: p.color,
+      alpha: p.alpha,
+      rawStop: y,
+      stop: 0
+    });
+  }
+  if (a.length > 0) {
+    for (let l = 0; l < a.length; l++)
+      a[l].rawStop !== null && (a[l].stop = parseFloat(a[l].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 o = 0;
+    for (let l = 1; l < a.length; l++)
+      if (a[l].rawStop !== null || l === a.length - 1) {
+        const d = l - o;
+        if (d > 1) {
+          const f = a[o].stop, p = (a[l].stop - f) / d;
+          for (let u = 1; u < d; u++)
+            a[o + u].stop = f + p * u;
+        }
+        o = l;
+      }
+  }
+  return { angle: r, stops: a };
+}
+const qe = `varying vec2 vUv;
+varying vec4 vScreenPos;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  vScreenPos = gl_Position;
+}`, je = `varying vec2 vUv;
+uniform vec2 uSize;
+uniform vec4 uBorderRadius;
+uniform float uBorderWidth;
+uniform vec4 uBgColor;
+uniform vec4 uBorderColor;
+uniform float uOpacity;
+
+uniform int uGradientCount;
+uniform float uGradientAngle;
+uniform vec4 uGradientColors[8];
+uniform float uGradientStops[8];
+
+#INJECT_DECLARATIONS
+
+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);
+}
+
+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);
+}
+
+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);
+}
+
+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;
+}
 
-  varying vec2 vUv;
+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);
   
-  uniform vec2 uSize;
-  uniform vec4 uBorderRadius;
-  uniform float uBorderWidth;
-  uniform vec3 uBgColor;
-  uniform vec3 uBorderColor;
-  uniform float uOpacity;
-  uniform float uBgOpacity;
-  uniform float uBorderOpacity;
+  vec4 color = uGradientColors[0];
+  for (int i = 1; i < 8; i++) {
+    if (i >= uGradientCount) break;
+    float prevStop = uGradientStops[i-1];
+    float currStop = uGradientStops[i];
+    
+    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);
+}
+
+void main() {
+  vec2 p = (vUv - 0.5) * uSize;
+  vec2 halfSize = uSize * 0.5;
 
-  #INJECT_DECLARATIONS
+  #INJECT_UV_MODIFIER
 
-  float sdRoundedBox(vec2 p, vec2 b, float r) {
-    vec2 q = abs(p) - b + r;
+  // color decision pipeline
+  vec4 baseColor = vec4(uBgColor.rgb, uBgColor.a);
 
-    return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
+  if (uGradientCount > 0) {
+    vec4 gradColor = calculateGradientLayer(vUv);
+    baseColor = blendSrcOver(gradColor, baseColor);
   }
 
-  void main() {
-    vec2 p = (vUv - 0.5) * uSize;
-    vec2 halfSize = uSize * 0.5;
+  #INJECT_BASE_COLOR
 
-    #INJECT_UV_MODIFIER
-    
-    // color decision pipeline
-    vec4 baseColor = vec4(uBgColor, uBgOpacity);
+  // 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));
 
-    #INJECT_BASE_COLOR
+  float d = sdRoundedBox(p, halfSize, r);
 
-    // sdf shape pipeline
-    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
-    float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
-    float d = sdRoundedBox(p, halfSize, r);
+  float d_smooth = sdVisualBox(p, halfSize, r);
+  float d_visual = d_smooth / fwidth(d_smooth);
 
-    float aa = 1.0; 
-    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+  // rendering pipeline
+  float bgMask = 1.0 - smoothstep(-0.5, 0.5, d_visual);
 
-    float halfBorder = uBorderWidth * 0.5;
-    float borderD = abs(d + halfBorder) - halfBorder;
-    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
-    if (uBorderWidth <= 0.01) {
-      borderAlpha = 0.0;
-    }
+  float 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;
+  }
 
-    // final blending (border + background)
-    float aFront = borderAlpha;
-    float aBack = baseColor.a;
-    float aOut = aFront + aBack * (1.0 - aFront);
+  // 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 safeAlpha = max(aOut, 0.0001);
-    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
-    vec4 finalColor = vec4(cOut, aOut);
+  float finalOpacity = finalColor.a * bgMask * uOpacity;
+  if (finalOpacity < 0.001) discard;
 
-    // final color control (Tint, Noise)
-    #INJECT_COLOR_MODIFIER
+  gl_FragColor = vec4(finalColor.rgb, finalOpacity);
 
-    float finalOpacity = finalColor.a * bgMask * uOpacity;
-    if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+  // #include <colorspace_fragment>
+}
+`, Ke = `uniform sampler2D uTexture;
+varying vec4 vScreenPos;
+uniform vec2 uTextureRepeat;
+uniform vec2 uTextureOffset;`, Je = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+vec2 resultUv = screenUv;
 
-    #include <colorspace_fragment>
-  }
-`
-);
-function E(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), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new d.Color(`rgb(${t}, ${r}, ${s})`), alpha: a };
-  }
-  return { color: new d.Color(i), alpha: 1 };
-}
-function G(i, e, t, r = null, s) {
-  var v;
-  const a = r !== null, n = a ? (
-    /* glsl */
-    `
-    uniform sampler2D uTexture;
-    varying vec4 vScreenPos;
-  `
-  ) : "", o = a ? (
-    /* glsl */
-    `
-    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-    vec2 resultUv = screenUv;
-    ${(s == null ? void 0 : s.uvModifier) || ""}
-  `
-  ) : "", l = a ? (
-    /* glsl */
-    `
-    baseColor = texture2D(uTexture, resultUv);
-  `
-  ) : "", h = (s == null ? void 0 : s.colorModifier) || "", m = $.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", h), f = E(i.backgroundColor), g = E(i.borderColor), p = {
-    uSize: { value: new d.Vector2(e, t) },
-    uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: w(i.borderWidth) },
-    uBgColor: { value: f.color },
-    uBorderColor: { value: g.color },
-    uOpacity: { value: (v = i.opacity) != null ? v : 1 },
-    uBgOpacity: { value: f.alpha },
-    uBorderOpacity: { value: g.alpha },
-    uTexture: { value: null }
+`, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`, Re = {
+  vertexShader: qe,
+  fragmentShader: je
+}, me = {
+  declChunk: Ke,
+  uvChunk: Je,
+  baseColorChunk: Qe
+};
+function Ze(s, e, t, i = null, r) {
+  var L;
+  const c = i !== null || !!s.imageSrc;
+  let n = "";
+  const a = {};
+  if (r != null && r.uniforms)
+    for (const [E, x] of Object.entries(r.uniforms))
+      typeof x == "number" ? (n += `uniform float ${E};
+`, a[E] = { value: x }) : Array.isArray(x) ? x.length === 2 ? (n += `uniform vec2 ${E};
+`, a[E] = { value: new b.Vector2(...x) }) : x.length === 3 ? (n += `uniform vec3 ${E};
+`, a[E] = { value: new b.Vector3(...x) }) : x.length === 4 && (n += `uniform vec4 ${E};
+`, a[E] = { value: new b.Vector4(...x) }) : (n += `uniform float ${E};
+`, a[E] = { value: x });
+  const o = (c ? me.declChunk : "") + `
+` + n, l = s.isTraveler ? me.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
+`, d = c ? l + ((r == null ? void 0 : r.uvModifier) || "") : "", f = c ? me.baseColorChunk : "", y = (r == null ? void 0 : r.colorModifier) || "", p = Re.fragmentShader.replace("#INJECT_DECLARATIONS", o).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", y), u = ce(s.backgroundColor), g = ce(s.borderColor), w = {
+    uSize: { value: new b.Vector2(e, t) },
+    uBgColor: {
+      value: new b.Vector4(
+        u.color.r,
+        u.color.g,
+        u.color.b,
+        u.alpha
+      )
+    },
+    uBorderColor: {
+      value: new b.Vector4(
+        g.color.r,
+        g.color.g,
+        g.color.b,
+        g.alpha
+      )
+    },
+    uBorderRadius: { value: new b.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: ee(s.borderWidth) },
+    uOpacity: { value: (L = s.opacity) != null ? L : 1 },
+    uTexture: { value: null },
+    uTextureRepeat: { value: new b.Vector2(1, 1) },
+    uTextureOffset: { value: new b.Vector2(0, 0) },
+    uGradientCount: { value: 0 },
+    uGradientAngle: { value: 0 },
+    uGradientColors: {
+      value: Array.from({ length: 8 }, () => new b.Vector4(0, 0, 0, 0))
+    },
+    uGradientStops: { value: new Float32Array(8) }
   };
-  return X(p.uBorderRadius.value, i.borderRadius), a && (p.uTexture.value = r), new d.ShaderMaterial({
-    uniforms: p,
-    vertexShader: H,
-    fragmentShader: m,
+  Ie(w.uBorderRadius.value, s.borderRadius), c && (w.uTexture.value = i);
+  const R = new b.ShaderMaterial({
+    uniforms: G(G({}, w), a),
+    vertexShader: Re.vertexShader,
+    fragmentShader: p,
     transparent: !0,
-    side: d.FrontSide
+    side: b.FrontSide
     // for better performance
   });
+  return s.backgroundImage && ve(R, { backgroundImage: s.backgroundImage }), R;
 }
-function J(i, e, t, r, s) {
-  var o;
-  const a = E(e.backgroundColor), n = E(e.borderColor);
-  i.uniforms.uSize.value.set(t, r), X(i.uniforms.uBorderRadius.value, e.borderRadius), i.uniforms.uBorderWidth.value = w(e.borderWidth), i.uniforms.uBgColor.value.copy(a.color), i.uniforms.uBorderColor.value.copy(n.color), i.uniforms.uOpacity.value = (o = e.opacity) != null ? o : 1, i.uniforms.uBgOpacity.value = a.alpha, i.uniforms.uBorderOpacity.value = n.alpha, i.uniforms.uTexture && s !== void 0 && (i.uniforms.uTexture.value = s);
-}
-const D = {
-  create(i, e, t, r, s, a = 2, n = null, o) {
-    if (i === "BOX")
-      return G(e, r, s, n, o);
-    if (i === "TEXT") {
-      const l = A(
-        t || "",
-        e,
-        r,
-        s,
-        a
+function et(s, e, t, i, r) {
+  const c = ee(e.borderWidth);
+  ve(s, {
+    width: t,
+    height: i,
+    borderRadius: e.borderRadius,
+    borderWidth: c,
+    backgroundColor: e.backgroundColor,
+    borderColor: e.borderColor,
+    opacity: e.opacity,
+    texture: r,
+    backgroundImage: e.backgroundImage
+  });
+}
+function ve(s, e) {
+  var i, r, c;
+  if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && Ie(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 n = s.uniforms.uBgColor.value.w;
+      s.uniforms.uBgColor.value.set(
+        e.backgroundColor[0],
+        e.backgroundColor[1],
+        e.backgroundColor[2],
+        n
+      );
+    } else if (typeof e.backgroundColor == "string") {
+      const n = ce(e.backgroundColor);
+      s.uniforms.uBgColor.value.set(
+        n.color.r,
+        n.color.g,
+        n.color.b,
+        n.alpha
+      );
+    } else {
+      const n = s.uniforms.uBgColor.value.w;
+      s.uniforms.uBgColor.value.set(
+        e.backgroundColor.r,
+        e.backgroundColor.g,
+        e.backgroundColor.b,
+        n
       );
-      return new d.MeshBasicMaterial({
-        map: l,
-        transparent: !0,
-        side: d.FrontSide,
-        color: 16777215
-      });
     }
-    return new d.MeshBasicMaterial({ visible: !1 });
-  },
-  update(i, e, t, r, s, a, n = 2, o) {
-    if (e === "BOX")
-      J(
-        i,
-        t,
-        s,
-        a,
-        o
+  if (e.borderColor !== void 0)
+    if (Array.isArray(e.borderColor)) {
+      const n = s.uniforms.uBorderColor.value.w;
+      s.uniforms.uBorderColor.value.set(
+        e.borderColor[0],
+        e.borderColor[1],
+        e.borderColor[2],
+        n
       );
-    else if (e === "TEXT") {
-      const l = i;
-      l.map && l.map.dispose();
-      const h = A(
-        r || "",
-        t,
-        s,
-        a,
+    } else if (typeof e.borderColor == "string") {
+      const n = ce(e.borderColor);
+      s.uniforms.uBorderColor.value.set(
+        n.color.r,
+        n.color.g,
+        n.color.b,
+        n.alpha
+      );
+    } else {
+      const n = s.uniforms.uBorderColor.value.w;
+      s.uniforms.uBorderColor.value.set(
+        e.borderColor.r,
+        e.borderColor.g,
+        e.borderColor.b,
         n
       );
-      l.map = h, l.needsUpdate = !0;
     }
+  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 n = t.image.width, a = t.image.height, o = (r = e.width) != null ? r : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
+    if (n && a && o && l) {
+      const d = n / a, f = o / l;
+      if (d > f) {
+        const y = f / d;
+        s.uniforms.uTextureRepeat.value.set(y, 1), s.uniforms.uTextureOffset.value.set((1 - y) / 2, 0);
+      } else {
+        const y = d / f;
+        s.uniforms.uTextureRepeat.value.set(1, y), s.uniforms.uTextureOffset.value.set(0, (1 - y) / 2);
+      }
+    }
+  } else
+    s.uniforms.uTextureRepeat && (s.uniforms.uTextureRepeat.value.set(1, 1), s.uniforms.uTextureOffset.value.set(0, 0));
+  if (e.backgroundImage !== void 0) {
+    const n = $e(e.backgroundImage);
+    if (n) {
+      s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
+      for (let a = 0; a < 8; a++)
+        if (a < n.stops.length) {
+          const o = n.stops[a];
+          s.uniforms.uGradientColors.value[a].set(
+            o.color.r,
+            o.color.g,
+            o.color.b,
+            o.alpha
+          ), s.uniforms.uGradientStops.value[a] = o.stop;
+        } else
+          s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
+    } else
+      s.uniforms.uGradientCount.value = 0;
+  }
+  for (const n of Object.keys(e))
+    n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
+}
+function Ie(s, e) {
+  var a, o, l, d;
+  if (e == null) {
+    s.set(0, 0, 0, 0);
+    return;
+  }
+  if (typeof e == "number") {
+    s.set(e, e, e, e);
+    return;
+  }
+  if (Array.isArray(e)) {
+    s.set(e[0], e[1], e[2], e[3]);
+    return;
+  }
+  const t = e.split("/")[0].trim().split(/\s+/), i = ee(t[0]), r = ee((a = t[1]) != null ? a : t[0]), c = ee((o = t[2]) != null ? o : t[0]), n = ee((d = (l = t[3]) != null ? l : t[1]) != null ? d : t[0]);
+  s.set(i, r, c, n);
+}
+const H = {
+  create(s, e, t, i, r, c = 2, n = null, a) {
+    return s === "BOX" ? Ze(
+      e,
+      i,
+      r,
+      n,
+      a
+    ) : s === "TEXT" ? new He(
+      t || "",
+      e,
+      i,
+      r,
+      c
+    ) : new b.MeshBasicMaterial({ visible: !1 });
+  },
+  update(s, e, t, i, r, c, n = 2, a) {
+    e === "BOX" ? et(
+      s,
+      t,
+      r,
+      c,
+      a
+    ) : e === "TEXT" && s.updateText(
+      i || "",
+      t,
+      r,
+      c,
+      n
+    );
+  },
+  forceUpdateUniforms(s, e) {
+    ve(s, e);
   }
 };
-class V {
-  constructor(e, t, r) {
-    c(this, "canvas");
-    c(this, "scene");
-    c(this, "camera");
-    c(this, "renderer");
-    c(this, "renderTarget", null);
-    c(this, "renderOrder", 0);
-    c(this, "qualityFactor", 2);
-    c(this, "mode", "overlay");
-    c(this, "clipArea", 1);
-    c(this, "target");
-    c(this, "mountContainer");
-    c(this, "targetRect");
-    c(this, "meshMap", /* @__PURE__ */ new Map());
-    var n, o, l;
-    this.target = e, this.mountContainer = r, this.mode = (n = t.mode) != null ? n : "overlay", this.clipArea = (o = t.travelerClipArea) != null ? o : 1, this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const s = this.targetRect.width, a = this.targetRect.height;
-    this.camera = new d.OrthographicCamera(
-      s / -2,
-      s / 2,
-      a / 2,
-      a / -2,
+class tt {
+  constructor(e) {
+    h(this, "observer");
+    h(this, "textures", /* @__PURE__ */ new WeakMap());
+    h(this, "loadStatus", /* @__PURE__ */ new WeakMap());
+    h(this, "elementUrls", /* @__PURE__ */ new WeakMap());
+    h(this, "onUpdate");
+    this.onUpdate = e, this.observer = new IntersectionObserver(
+      (t) => {
+        for (const i of t) {
+          const r = i.target;
+          i.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 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 {
+          let i;
+          if (t.startsWith("data:image/svg+xml"))
+            i = yield new Promise((c, n) => {
+              const a = new Image();
+              a.onload = () => c(a), a.onerror = n, a.src = t;
+            });
+          else {
+            const n = yield (yield fetch(t)).blob();
+            i = yield createImageBitmap(n, { imageOrientation: "flipY" });
+          }
+          if (this.elementUrls.get(e) !== t) {
+            "close" in i && i.close();
+            return;
+          }
+          const r = new b.Texture(i);
+          i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = b.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);
+        }
+      }
+    });
+  }
+  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 rt {
+  constructor(e, t, i, r) {
+    h(this, "canvas");
+    h(this, "scene");
+    h(this, "camera");
+    h(this, "renderer");
+    h(this, "renderTargets", []);
+    h(this, "renderOrder", 0);
+    h(this, "qualityFactor", 2);
+    h(this, "mode", "overlay");
+    h(this, "clipArea", 1);
+    h(this, "targetLayer", "base");
+    h(this, "target");
+    h(this, "mountContainer");
+    h(this, "registry");
+    h(this, "targetRect");
+    h(this, "travelersByLayer", Array.from(
+      { length: U.MAX_LAYERS },
+      () => /* @__PURE__ */ new Set()
+    ));
+    h(this, "textureManager");
+    // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
+    h(this, "fixedMeshes", /* @__PURE__ */ new Set());
+    var a, o, l, d;
+    this.target = e, this.mountContainer = i, this.registry = r, this.textureManager = new tt((f, y) => {
+      const p = this.registry.get(f);
+      p && p.material instanceof b.ShaderMaterial && H.forceUpdateUniforms(p.material, { texture: y });
+    }), this.mode = (a = t.mode) != null ? a : "overlay", this.clipArea = (o = t.travelerClipArea) != null ? o : 1, this.targetLayer = (l = t.layer) != null ? l : "base", this.canvas = document.createElement("canvas"), this.scene = new b.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const c = this.targetRect.width, n = this.targetRect.height;
+    this.camera = new b.OrthographicCamera(
+      c / -2,
+      c / 2,
+      n / 2,
+      n / -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(this.getSceneLayer()), this.renderer = new b.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0,
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, a), this.applyTextQuality((l = t.quality) != null ? l : "medium");
+    }), b.ColorManagement.enabled = !1, this.renderer.outputColorSpace = b.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((d = t.quality) != null ? d : "medium");
+  }
+  getSceneLayer() {
+    return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? A.SELECTED : A.BASE;
   }
   createRenderTarget() {
-    this.renderTarget = new d.WebGLRenderTarget(
-      this.targetRect.width * this.qualityFactor,
-      this.targetRect.height * this.qualityFactor,
-      {
-        minFilter: d.LinearFilter,
-        magFilter: d.LinearFilter,
-        format: d.RGBAFormat,
-        stencilBuffer: !1,
-        depthBuffer: !0,
-        samples: 4
-      }
-    );
+    for (let e = 0; e < U.MAX_LAYERS; e++)
+      this.renderTargets.push(
+        new b.WebGLRenderTarget(
+          this.targetRect.width * this.qualityFactor,
+          this.targetRect.height * this.qualityFactor,
+          {
+            minFilter: b.LinearFilter,
+            magFilter: b.LinearFilter,
+            format: b.RGBAFormat,
+            stencilBuffer: !1,
+            depthBuffer: !0
+          }
+        )
+      );
   }
   applyTextQuality(e) {
     if (typeof e == "number") {
@@ -291,6 +849,8 @@ class V {
         this.qualityFactor = 4;
         break;
       case "medium":
+        this.qualityFactor = 2;
+        break;
       default:
         this.qualityFactor = 2;
         break;
@@ -302,358 +862,697 @@ class V {
   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.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();
-  }
-  syncScene(e) {
-    const t = this.target.getBoundingClientRect(), r = Math.abs(t.width - this.targetRect.width) > 0.1 || Math.abs(t.height - this.targetRect.height) > 0.1, s = this.mode === "overlay" && (Math.abs(t.top - this.targetRect.top) > 0.1 || Math.abs(t.left - this.targetRect.left) > 0.1);
-    r ? (this.targetRect = t, this.setSize(this.targetRect.width, this.targetRect.height), this.updateCanvasLayout()) : s ? (this.targetRect = t, this.updateCanvasLayout()) : this.targetRect = t, this.renderOrder = 0;
-    const a = /* @__PURE__ */ new Set();
-    this.reconcileNode(e, a);
-    for (const [n, o] of this.meshMap.entries())
-      a.has(n) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.Material && o.material.dispose(), this.meshMap.delete(n));
-  }
-  reconcileNode(e, t) {
-    var s;
-    t.add(e.element);
-    let r = this.meshMap.get(e.element);
-    if (!r) {
-      const a = new d.PlaneGeometry(1, 1);
-      let n;
-      n = D.create(
+    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 i = this.target.getBoundingClientRect(), r = Math.abs(i.width - this.targetRect.width) > 0.1 || Math.abs(i.height - this.targetRect.height) > 0.1, c = 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()) : c ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((n) => {
+      const a = this.registry.get(n);
+      if (a) {
+        this.scene.remove(a);
+        for (const o of this.travelersByLayer)
+          o.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((o) => o.dispose()) : a.userData.nativeMesh.material.dispose(), a.userData.nativeMesh.geometry.dispose()), a.traverse((o) => {
+          o instanceof b.Mesh && (o.geometry && o.geometry.dispose(), o.material && (Array.isArray(o.material) ? o.material.forEach((l) => l.dispose()) : o.material.dispose()));
+        }), this.registry.remove(n), this.textureManager.unregister(n);
+      }
+    });
+  }
+  // 탐색 후 완성된 Scene node를 이용하여 mesh를 만들거나 조정
+  // => 이 과정에서 scene node에 있는 ele를 넣은 hash => activeElements
+  // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
+  // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
+  reconcileNode(e) {
+    var i;
+    let t = this.registry.get(e.element);
+    if (!t) {
+      const r = new b.PlaneGeometry(1, 1), c = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), n = H.create(
         "BOX",
         e.styles,
         "",
         e.rect.width,
         e.rect.height,
         this.qualityFactor,
-        e.isTraveler ? (s = this.renderTarget) == null ? void 0 : s.texture : void 0,
+        c,
         e.shaderHooks
-      ), r = new d.Mesh(a, n), e.type === "TEXT" && (r.name = "BG_MESH"), this.scene.add(r), this.meshMap.set(e.element, r);
+      );
+      t = new b.Mesh(r, n), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = n;
     }
-    if (r.userData.domRect = e.rect, this.updateMeshProperties(r, e), this.updateMeshLayers(r, e), e.isTraveler && r.layers.enable(28), e.type === "BOX")
-      for (const a of e.children)
-        this.reconcileNode(a, t);
+    if (this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
+      for (let r = 0; r < U.MAX_LAYERS; r++)
+        r === e.captureLayer - 2 ? this.travelersByLayer[r].add(t) : this.travelersByLayer[r].delete(t);
     else
-      e.type === "TEXT" && this.reconcileTextChild(r, e);
+      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, !1), t.userData.nativeMesh && e.nativeStyles && this.reconcileTextChild(t.userData.nativeMesh, e, !0));
   }
-  reconcileTextChild(e, t) {
-    var o, l;
-    let r = e.children.find(
-      (h) => h.name === "TEXT_CHILD"
-    );
-    const s = JSON.stringify(t.textStyles), a = (o = r == null ? void 0 : r.userData) == null ? void 0 : o.styleHash;
-    if (!r || t.dirtyMask & N || s !== a) {
-      r && ((l = r.material.map) == null || l.dispose(), r.geometry.dispose(), e.remove(r));
-      const h = D.create(
-        "TEXT",
-        t.textStyles,
-        t.textContent || "",
-        t.rect.width,
-        t.rect.height,
-        this.qualityFactor
-      ), m = new d.PlaneGeometry(1, 1);
-      r = new d.Mesh(m, h), r.name = "TEXT_CHILD", r.userData = { styleHash: s }, this.updateMeshLayers(r, t), r.position.z = 5e-3, e.add(r);
-    }
-    if (r) {
-      const h = e.userData.domRect, m = h.x + h.width / 2, f = h.y + h.height / 2, g = t.rect.x + t.rect.width / 2, p = t.rect.y + t.rect.height / 2, y = g - m, v = -(p - f);
-      r.position.set(y, v, 5e-3);
+  reconcileTextChild(e, t, i) {
+    var l;
+    const r = t.textLines || [
+      { text: t.textContent || "", rect: t.rect }
+    ], c = i ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + r.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
+    if (t.dirtyMask & be || n !== a) {
+      e.children.filter(
+        (u) => u.name.startsWith("TEXT_CHILD")
+      ).forEach((u) => {
+        var w;
+        const g = u;
+        (w = g.material.map) == null || w.dispose(), g.geometry.dispose(), e.remove(g);
+      });
+      const f = t.rect, y = f.x + f.width / 2, p = f.y + f.height / 2;
+      r.forEach((u, g) => {
+        const w = H.create(
+          "TEXT",
+          c,
+          u.text,
+          u.rect.width,
+          u.rect.height,
+          this.qualityFactor
+        ), R = new b.PlaneGeometry(1, 1), L = new b.Mesh(R, w);
+        L.name = `TEXT_CHILD_${g}`;
+        const E = t.rect.width === 0 ? 1 : u.rect.width / t.rect.width, x = t.rect.height === 0 ? 1 : u.rect.height / t.rect.height;
+        L.scale.set(E, x, 1);
+        const B = u.rect.x + u.rect.width / 2, F = u.rect.y + u.rect.height / 2, X = B - y, D = -(F - p);
+        L.position.set(
+          t.rect.width === 0 ? 0 : X / t.rect.width,
+          t.rect.height === 0 ? 0 : D / t.rect.height,
+          5e-3
+        ), e.add(L);
+      }), e.userData.textChildStyleHash = n;
     }
+    e.children.forEach((d) => {
+      if (!d.name.startsWith("TEXT_CHILD"))
+        return;
+      const f = d, y = t.visibility & V ? A.BASE : A.HIDDEN;
+      if (f.layers.set(y), t.visibility & Z && f.layers.enable(A.SELECTED), t.visibility & V)
+        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 <= U.MAX_LAYERS + 1; p++)
+            f.layers.enable(A.getCaptureLayer(p));
+        else
+          for (let p = t.captureLayer; p <= U.MAX_LAYERS + 1; p++)
+            f.layers.enable(A.getCaptureLayer(p));
+    });
   }
   updateMeshProperties(e, t) {
-    var p;
-    const { rect: r, styles: s } = t, a = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / a, o = this.renderer.domElement.height / a;
-    e.scale.set(r.width, r.height, 1);
-    const l = 1e-3;
+    var B, F, X;
+    const { rect: i, styles: r } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
+    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 o = 1e-3;
     this.renderOrder++;
-    const h = this.targetRect.left + window.scrollX, m = this.targetRect.top + window.scrollY, f = r.x - h, g = r.y - m;
+    const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY, f = i.x - l, y = i.y - d, p = f - n / 2 + i.width / 2, u = -y + a / 2 - i.height / 2;
     e.position.set(
-      f - n / 2 + r.width / 2,
-      -g + o / 2 - r.height / 2,
-      s.zIndex + this.renderOrder * l
-    ), D.update(
-      e.material,
+      p,
+      u,
+      r.zIndex + this.renderOrder * o
+    );
+    const g = i.x, w = i.y;
+    e.userData.basePosition = { x: p, y: u }, e.userData.originalBasePosition = { x: p, y: u }, 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 R = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, L = window.getComputedStyle(R);
+    let E = 0, x = 0;
+    if (L.transform && L.transform !== "none") {
+      const D = new DOMMatrix(L.transform);
+      E = D.m41, x = D.m42;
+    }
+    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 ? (p = this.renderTarget) == null ? void 0 : p.texture : void 0
-    );
+      t.isTraveler ? (B = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : B.texture : this.textureManager.get(t.element)
+    ), t.nativeStyles && t.nativeRect) {
+      if (!e.userData.nativeMesh) {
+        const q = 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
+        ), P = new b.Mesh(e.geometry, q);
+        t.type === "TEXT" && (P.name = "BG_MESH"), this.scene.add(P), e.userData.nativeMesh = P;
+      }
+      const D = e.userData.nativeMesh, k = t.nativeRect.x - l, K = t.nativeRect.y - d, J = k - n / 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 * o
+      ), H.update(
+        D.material,
+        "BOX",
+        t.nativeStyles,
+        "",
+        t.nativeRect.width,
+        t.nativeRect.height,
+        this.qualityFactor,
+        t.isTraveler ? (X = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : X.texture : this.textureManager.get(t.element)
+      );
+    } else
+      e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof b.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
   }
   updateMeshLayers(e, t) {
-    const r = (1 - (t.visibility & x)) * 30;
-    e.layers.set(r), t.visibility === (x | R) && e.layers.enable(29);
-  }
-  captureRenderTarget() {
-    const e = [];
-    for (const l of this.meshMap.values())
-      l.layers.mask & 1 << 28 && e.push(l);
-    if (e.length === 0)
+    const i = t.visibility & V ? 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 & V) {
+        for (let c = t.captureLayer; c < t.nativeLayer; c++)
+          e.layers.enable(A.getCaptureLayer(c));
+        for (let c = Math.max(t.captureLayer, t.nativeLayer); c <= U.MAX_LAYERS + 1; c++)
+          r.layers.enable(A.getCaptureLayer(c));
+      }
+    } else if (t.visibility & V)
+      for (let r = t.captureLayer; r <= U.MAX_LAYERS + 1; r++)
+        e.layers.enable(A.getCaptureLayer(r));
+  }
+  captureRenderTarget(e, t, i) {
+    if (e.size === 0 || !i)
       return;
-    const t = new d.Color(), r = this.renderer.getClearAlpha();
-    this.renderer.getClearColor(t), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(this.renderTarget), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(29);
-    const s = new d.Vector3(), a = this.targetRect.width, n = this.targetRect.height, o = this.renderer.getPixelRatio();
-    for (const l of e) {
-      s.setFromMatrixPosition(l.matrixWorld), s.project(this.camera);
-      const h = (s.x + 1) / 2 * a, m = (s.y + 1) / 2 * n;
-      let f = 0, g = 1;
-      typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (f = parseFloat(this.clipArea));
-      const p = l.scale.x * g + 0.5, y = l.scale.y * g + 0.5, v = h - p / 2, B = m - y / 2, M = (v * this.qualityFactor - f) / o, F = (B * this.qualityFactor - f) / o, b = (p * this.qualityFactor + f * 2) / o, u = (y * this.qualityFactor + f * 2) / o;
-      this.renderer.setScissor(M, F, b, u), this.renderer.render(this.scene, this.camera);
+    const r = new b.Color(), c = 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 n = new b.Vector3(), a = this.targetRect.width, o = this.targetRect.height, l = this.renderer.getPixelRatio();
+    for (const d of e) {
+      n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
+      const f = (n.x + 1) / 2 * a, y = (n.y + 1) / 2 * o;
+      let p = 0, u = 1;
+      typeof this.clipArea == "number" ? u = this.clipArea : this.clipArea.endsWith("%") ? u = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
+      const g = d.scale.x * u + 0.5, w = d.scale.y * u + 0.5, R = f - g / 2, L = y - w / 2, E = (R * this.qualityFactor - p) / l, x = (L * this.qualityFactor - p) / l, B = (g * this.qualityFactor + p * 2) / l, F = (w * this.qualityFactor + p * 2) / l;
+      this.renderer.setScissor(E, x, B, F), this.renderer.render(this.scene, this.camera);
     }
-    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(28), this.renderer.setClearColor(t, r);
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, c);
   }
   render() {
-    this.renderTarget && this.captureRenderTarget(), this.renderer.render(this.scene, this.camera);
+    for (let e = 0; e < U.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);
   }
-  // for debugging
-  showScissoredRenderTarget() {
-    if (!this.renderTarget)
-      return;
-    const e = this.targetRect.width, t = this.targetRect.height, r = new d.PlaneGeometry(e, t), s = new d.MeshBasicMaterial({
-      map: this.renderTarget.texture,
-      side: d.DoubleSide,
-      transparent: !0,
-      opacity: 0.8
-    }), a = new d.Mesh(r, s);
-    a.position.set(0, 0, 90), a.layers.set(28), this.scene.add(a);
-  }
-}
-function 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 Q(i) {
-  const e = parseFloat(i.fontSize);
-  let t = parseFloat(i.lineHeight);
+function it(s) {
+  const e = s.textContent || "", t = [];
+  let i = "", r = null, c = -1;
+  const n = (l, d) => {
+    for (let f = 0; f < l.length; f++) {
+      const y = l[f], p = document.createRange();
+      p.setStart(s, d + f), p.setEnd(s, d + f + 1);
+      const u = p.getBoundingClientRect();
+      if (u.width === 0 && u.height === 0) {
+        i += y;
+        continue;
+      }
+      c === -1 || Math.abs(u.top - c) > u.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
+        }
+      }), i = y, r = {
+        left: u.left,
+        top: u.top,
+        right: u.right,
+        bottom: u.bottom
+      }, c = u.top) : (i += y, r && (r.left = Math.min(r.left, u.left), r.top = Math.min(r.top, u.top), r.right = Math.max(r.right, u.right), r.bottom = Math.max(
+        r.bottom,
+        u.bottom
+      )));
+    }
+  }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+  let o = 0;
+  for (const l of a) {
+    const d = document.createRange();
+    d.setStart(s, o), d.setEnd(s, o + l.length);
+    const f = d.getClientRects();
+    if (f.length > 1)
+      n(l, o);
+    else {
+      const y = f.length === 1 ? f[0] : d.getBoundingClientRect();
+      if (y.width === 0 && y.height === 0) {
+        i += l, o += l.length;
+        continue;
+      }
+      c === -1 || Math.abs(y.top - c) > y.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
+        }
+      }), i = l, r = {
+        left: y.left,
+        top: y.top,
+        right: y.right,
+        bottom: y.bottom
+      }, c = y.top) : (i += l, r && (r.left = Math.min(r.left, y.left), r.top = Math.min(r.top, y.top), r.right = Math.max(r.right, y.right), r.bottom = Math.max(
+        r.bottom,
+        y.bottom
+      )));
+    }
+    o += l.length;
+  }
+  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
+  );
+}
+function Me(s) {
+  const e = parseFloat(s.fontSize);
+  let t = parseFloat(s.lineHeight);
   isNaN(t) && (t = e * 1.2);
-  let r = parseFloat(i.letterSpacing);
-  return isNaN(r) && (r = 0), {
-    font: `${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,
-    color: i.color,
-    textAlign: i.textAlign || "start",
+  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: r
+    letterSpacing: i
   };
 }
-function P(i, e = z | L | Y | N | I, t, r) {
-  if (i.nodeType === Node.TEXT_NODE) {
-    const u = i;
-    if (!u.textContent || !u.textContent.trim())
+function Be(s, e = j | ae | Ve | be | ye, t, i = 1, r = 0, c = 2, n, a) {
+  var P, te, re, ie, se, ne;
+  if (s.nodeType === Node.TEXT_NODE) {
+    const m = s;
+    if (!m.textContent || !m.textContent.trim())
       return null;
-    const C = u.textContent.replace(/\s+/g, " ").trim();
-    if (C.length === 0)
+    const T = m.textContent.replace(/\s+/g, " ");
+    if (T.length === 0)
       return null;
-    const T = j(u);
-    if (T.width === 0 || T.height === 0)
+    const M = it(m);
+    if (M.length === 0)
       return null;
-    const _ = u.parentElement, O = _ ? window.getComputedStyle(_) : null;
-    return O ? {
+    const I = m.parentElement, S = I ? window.getComputedStyle(I) : null;
+    if (!S)
+      return null;
+    const O = Math.min(...M.map((v) => v.rect.left)), C = Math.min(...M.map((v) => v.rect.top)), _ = Math.max(...M.map((v) => v.rect.left + v.rect.width)), W = Math.max(...M.map((v) => v.rect.top + v.rect.height));
+    return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: u,
+      element: m,
       rect: {
-        x: T.left + window.scrollX,
-        y: T.top + window.scrollY,
-        width: T.width,
-        height: T.height
+        x: O + window.scrollX,
+        y: C + window.scrollY,
+        width: _ - O,
+        height: W - C
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(O.opacity),
-        zIndex: 0,
+        backgroundImage: "",
+        opacity: I && I.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(S.opacity),
+        zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + r,
         borderRadius: "0px",
         borderColor: "transparent",
-        borderWidth: "0px"
+        borderWidth: "0px",
+        isTraveler: !1
       },
-      textContent: C,
-      textStyles: Q(O),
+      textContent: T,
+      textLines: M.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: Me(S),
       dirtyMask: e,
       visibility: t,
       isTraveler: !1,
+      captureLayer: i,
+      isFixed: S.position === "fixed",
+      nativeLayer: n,
+      nativeStyles: a ? G(G({
+        backgroundColor: "transparent",
+        backgroundImage: "",
+        opacity: I && I.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(S.opacity),
+        zIndex: (isNaN(parseInt(S.zIndex)) ? 0 : parseInt(S.zIndex)) + r,
+        borderRadius: "0px",
+        borderColor: "transparent",
+        borderWidth: "0px",
+        isTraveler: !1
+      }, Me(S)), a) : void 0,
+      nativeRect: a ? {
+        x: O + window.scrollX,
+        y: C + window.scrollY,
+        width: _ - O,
+        height: W - C
+      } : void 0,
       children: []
-    } : null;
-  }
-  const s = i, a = s.dataset.mirageFilter;
-  let n = t, o = t;
-  if (a) {
-    const u = new Set(a.split(/\s+/));
-    for (const C of u)
-      if (!W.includes(C))
+    };
+  }
+  if (s.nodeType !== Node.ELEMENT_NODE)
+    return null;
+  const o = s, l = o.dataset[N.KEY];
+  let d = t, f = t;
+  if (l) {
+    const m = new Set(l.split(/\s+/));
+    for (const T of m)
+      if (!Le.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 (u.has("end"))
+    if (m.has(N.VALUES.END))
       return null;
-    if (u.has("include-tree") && u.has("exclude-tree"))
+    if (m.has(N.VALUES.INCLUDE_TREE) && m.has(N.VALUES.EXCLUDE_TREE))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (u.has("include-self") && u.has("exclude-self"))
+    if (m.has(N.VALUES.INCLUDE_SELF) && m.has(N.VALUES.EXCLUDE_SELF))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    u.has("include-tree") ? n = n | x : u.has("exclude-tree") && (n = n & ~x), o = n, u.has("include-self") ? o = o | x : u.has("exclude-self") && (o = o & ~x);
-  }
-  o = o | t & R;
-  const l = s.dataset.mirageTravel;
-  let h = !1;
-  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~R, n = n & ~R, h = !0);
-  const m = s.dataset.mirageShader;
-  let f;
-  m && (f = JSON.parse(m));
-  const g = s.getBoundingClientRect(), p = window.getComputedStyle(s);
-  if (g.width === 0 || g.height === 0 || p.display === "none")
+    m.has(N.VALUES.INCLUDE_TREE) ? d = d | V : m.has(N.VALUES.EXCLUDE_TREE) && (d = d & ~V), f = d, m.has(N.VALUES.INCLUDE_SELF) ? f = f | V : m.has(N.VALUES.EXCLUDE_SELF) && (f = f & ~V);
+  }
+  const y = o.dataset[Y.KEY];
+  if (y) {
+    const m = new Set(y.split(/\s+/));
+    for (const T of m)
+      if (!Le.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(Y.VALUES.END))
+      return null;
+    if (m.has(Y.VALUES.INCLUDE_TREE) && m.has(Y.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(Y.VALUES.INCLUDE_SELF) && m.has(Y.VALUES.EXCLUDE_SELF))
+      throw new Error(
+        "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
+      );
+    m.has(Y.VALUES.INCLUDE_TREE) ? d = d | Z : m.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~Z), f = d, m.has(Y.VALUES.INCLUDE_SELF) ? f = f | Z : m.has(Y.VALUES.EXCLUDE_SELF) && (f = f & ~Z);
+  }
+  const p = o.dataset[U.KEY];
+  let u = !1, g = a ? G({}, a) : {}, w = n;
+  if (p) {
+    let m = 1;
+    const T = p.indexOf("{"), M = p.lastIndexOf("}");
+    let I = p;
+    if (T !== -1 && M !== -1 && M > T) {
+      I = p.substring(0, T).trim();
+      const C = p.substring(T, M + 1);
+      try {
+        g = new Function("return " + C)();
+      } catch (_) {
+        console.warn(
+          `[MirageEngine] Failed to parse travel styles JSON: ${C}`
+        );
+      }
+    }
+    const S = I.split(/\s+/);
+    let O = !1;
+    if (S.includes(U.VALUES.TRAVELER)) {
+      u = !0, O = !0;
+      const C = S.find((_) => !isNaN(parseInt(_, 10)));
+      C && (m = parseInt(C, 10));
+    } else if (S.includes(U.VALUES.NATIVE)) {
+      u = !1;
+      const C = S.find((_) => !isNaN(parseInt(_, 10)));
+      C && (w = parseInt(C, 10));
+    }
+    if (O) {
+      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, U.MAX_LAYERS + 1);
+    }
+  }
+  const R = o.dataset[Ye.KEY];
+  let L;
+  R && (L = JSON.parse(R));
+  const E = o.getBoundingClientRect(), x = window.getComputedStyle(o);
+  if (E.width === 0 || E.height === 0 || x.display === "none")
     return null;
-  let y = s.getAttribute("data-mid");
-  y || (y = Math.random().toString(36).substring(2, 11), s.setAttribute("data-mid", y));
-  const v = parseInt(p.zIndex), B = {
-    backgroundColor: p.backgroundColor,
-    opacity: parseFloat(p.opacity),
-    zIndex: isNaN(v) ? 0 : v,
-    borderRadius: p.borderRadius,
-    borderColor: p.borderColor,
-    borderWidth: p.borderWidth
-  };
-  let M, F;
-  const b = [];
-  return Array.from(s.childNodes).forEach((u) => {
-    const C = u.nodeType === Node.TEXT_NODE ? o : n, T = P(
-      u,
+  let B = o.getAttribute("data-mid");
+  B || (B = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", B));
+  const F = parseInt(x.zIndex), X = (isNaN(F) ? 0 : F) + r;
+  let D;
+  if (o.tagName === "IMG")
+    D = o.src;
+  else if (o.tagName.toLowerCase() === "svg") {
+    const m = o.cloneNode(!0), T = g == null ? void 0 : g.color, M = g == null ? void 0 : g.fill, I = g == null ? void 0 : g.stroke, S = g == null ? void 0 : g.opacity, O = (v, xe) => {
+      const z = window.getComputedStyle(v), oe = xe, Oe = z.fill === z.color, Ue = z.stroke === z.color, de = M || (Oe ? T : void 0) || z.fill;
+      de && de !== "none" && (oe.style.fill = de);
+      const ue = I || (Ue ? T : void 0) || z.stroke;
+      ue && ue !== "none" && (oe.style.stroke = ue), z.strokeWidth && z.strokeWidth !== "0px" && (oe.style.strokeWidth = z.strokeWidth);
+      const Ee = T || z.color;
+      Ee && (oe.style.color = Ee);
+      const fe = S || z.opacity;
+      fe && fe !== "1" && (oe.style.opacity = fe);
+      for (let le = 0; le < v.children.length; le++)
+        O(v.children[le], xe.children[le]);
+    };
+    O(o, m);
+    const C = o.getBoundingClientRect(), _ = window.devicePixelRatio * c;
+    m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${C.width} ${C.height}`), m.setAttribute("width", (C.width * _).toString()), m.setAttribute("height", (C.height * _).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 k = {
+    backgroundColor: x.backgroundColor,
+    backgroundImage: x.backgroundImage,
+    opacity: o.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(x.opacity),
+    zIndex: X,
+    borderRadius: x.borderRadius,
+    borderColor: x.borderColor,
+    borderWidth: x.borderWidth,
+    imageSrc: D,
+    isTraveler: u
+  }, K = k;
+  let J, Q;
+  const q = [];
+  return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((m) => {
+    const T = m.nodeType === Node.TEXT_NODE ? f : d, M = Be(
+      m,
       e,
-      C
+      T,
+      i,
+      X,
+      c,
+      w,
+      m.nodeType === Node.TEXT_NODE && Object.keys(g).length > 0 ? g : void 0
     );
-    T && b.push(T);
+    M && q.push(M);
   }), {
-    id: y,
+    id: B,
     type: "BOX",
-    element: s,
+    element: o,
     rect: {
-      x: g.left + window.scrollX,
-      y: g.top + window.scrollY,
-      width: g.width,
-      height: g.height
+      x: E.left + window.scrollX,
+      y: E.top + window.scrollY,
+      width: E.width,
+      height: E.height
     },
-    styles: B,
-    textContent: M,
-    textStyles: F,
+    styles: K,
+    textContent: J,
+    textStyles: Q,
     dirtyMask: e,
-    visibility: o,
-    isTraveler: h,
-    children: b,
-    shaderHooks: f
+    visibility: f,
+    isTraveler: u,
+    captureLayer: i,
+    nativeLayer: w,
+    nativeStyles: w !== void 0 ? pe(G({}, k), {
+      backgroundColor: (P = g.backgroundColor) != null ? P : k.backgroundColor,
+      backgroundImage: (te = g.backgroundImage) != null ? te : k.backgroundImage,
+      opacity: (re = g.opacity) != null ? re : k.opacity,
+      zIndex: g.zIndex !== void 0 ? g.zIndex + X : k.zIndex,
+      borderRadius: (ie = g.borderRadius) != null ? ie : k.borderRadius,
+      borderColor: (se = g.borderColor) != null ? se : k.borderColor,
+      borderWidth: (ne = g.borderWidth) != null ? ne : k.borderWidth,
+      isTraveler: k.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: q,
+    shaderHooks: L
   };
 }
-class Z {
-  constructor(e, t, r) {
-    c(this, "target");
-    c(this, "renderer");
-    c(this, "filter");
-    c(this, "observer");
-    c(this, "isDomDirty", !1);
-    c(this, "isRunning", !1);
-    c(this, "isTravelEnabled", !1);
-    c(this, "pendingMask", S);
-    c(this, "mutationTimer", null);
-    c(this, "cssTimer", null);
-    c(this, "resizeConfig");
-    c(this, "resizeTimer", null);
-    c(this, "isResizing", !1);
-    c(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= z | L, this.cssTimer = window.setTimeout(() => {
-        this.isDomDirty = !0, this.cssTimer = null;
-      }, 50));
-    });
-    c(this, "onWindowResize", () => {
-      if (!this.resizeConfig.enabled) {
-        this.isDomDirty = !0;
-        return;
-      }
-      this.isResizing || (this.isResizing = !0, this.resizeConfig.onStart && this.resizeConfig.onStart()), this.resizeTimer && clearTimeout(this.resizeTimer), this.resizeTimer = window.setTimeout(() => {
-        this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
-      }, this.resizeConfig.delay);
-    });
-    c(this, "renderLoop", () => {
-      this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
+function st(s, e) {
+  e.size !== 0 && e.forEach((t, i) => {
+    var B, F, X, D, k, K, J, Q, q, P, te, re, ie, se, ne, m, T, M;
+    const r = s.get(i);
+    if (!r || !r.userData.basePosition)
+      return;
+    let { x: c, y: n } = r.userData.basePosition;
+    const { width: a, height: o } = r.userData.baseSize, l = (B = t.width) != null ? B : a, d = (F = t.height) != null ? F : o, f = l - a, y = d - o;
+    if (t.width !== void 0 && r.userData.originRatioX === void 0 && Math.abs(f) > 0.1) {
+      const I = i.getBoundingClientRect(), S = (X = t.x) != null ? X : 0, O = (k = (D = r.userData.baseTransform) == null ? void 0 : D.x) != null ? k : 0, C = r.userData.isFixed ? 0 : window.scrollX;
+      let v = -(I.left + C - S + O - r.userData.baseDOM.x) / f;
+      Math.abs(v) < 0.05 ? v = 0 : Math.abs(v - 1) < 0.05 ? v = 1 : Math.abs(v - 0.5) < 0.05 && (v = 0.5), r.userData.originRatioX = v;
+    }
+    if (t.height !== void 0 && r.userData.originRatioY === void 0 && Math.abs(y) > 0.1) {
+      const I = i.getBoundingClientRect(), S = (K = t.y) != null ? K : 0, O = (Q = (J = r.userData.baseTransform) == null ? void 0 : J.y) != null ? Q : 0, C = r.userData.isFixed ? 0 : window.scrollY;
+      let v = -(I.top + C - S + O - r.userData.baseDOM.y) / y;
+      Math.abs(v) < 0.05 ? v = 0 : Math.abs(v - 1) < 0.05 ? v = 1 : Math.abs(v - 0.5) < 0.05 && (v = 0.5), r.userData.originRatioY = v;
+    }
+    const p = (q = r.userData.originRatioX) != null ? q : 0.5, u = (P = r.userData.originRatioY) != null ? P : 0.5, g = f * (0.5 - p), w = y * (0.5 - u), R = (re = (te = r.userData.baseTransform) == null ? void 0 : te.x) != null ? re : 0, L = (se = (ie = r.userData.baseTransform) == null ? void 0 : ie.y) != null ? se : 0, E = ((ne = t.x) != null ? ne : R) - R, x = ((m = t.y) != null ? m : L) - L;
+    r.position.setX(c + g + E), r.position.setY(n - (w + x)), r.scale.set(l, d, 1), H.forceUpdateUniforms(r.material, {
+      backgroundColor: t.backgroundColor,
+      backgroundImage: t.backgroundImage,
+      opacity: t.opacity,
+      borderRadius: (M = t.borderRadius) != null ? M : (T = r.userData.baseStyles) == null ? void 0 : T.borderRadius,
+      width: l,
+      height: d
     });
-    var a, n;
-    this.target = e, this.renderer = t, this.filter = r.filter;
-    const s = (a = r.resizeDebounce) != null ? a : !0;
-    s === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : s === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
-      enabled: !0,
-      delay: (n = s.delay) != null ? n : 150,
-      onStart: s.onStart,
-      onEnd: s.onEnd
-    }, this.observer = new MutationObserver((o) => {
-      let l = S;
-      for (const h of o)
-        h.type === "childList" ? l |= I : h.type === "attributes" && (h.attributeName === "style" || h.attributeName === "class") && (l |= z | L);
-      if (l !== S) {
-        if (this.pendingMask |= l, l & I) {
-          this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
-          return;
-        }
-        this.mutationTimer && clearTimeout(this.mutationTimer), this.mutationTimer = window.setTimeout(() => {
-          this.mutationTimer = null, this.isDomDirty = !0;
-        }, 200);
-      }
+  });
+}
+function nt(s, e, t) {
+  s.forEach((i) => {
+    if (i.userData.isFixed && i.userData.initialScroll && i.userData.originalBasePosition) {
+      const r = e - i.userData.initialScroll.x, c = t - i.userData.initialScroll.y;
+      i.userData.basePosition.x = i.userData.originalBasePosition.x + r, i.userData.basePosition.y = i.userData.originalBasePosition.y - c, i.position.x = i.userData.basePosition.x, i.position.y = i.userData.basePosition.y;
+    }
+  });
+}
+class ot {
+  constructor(e, t, i, r) {
+    h(this, "target");
+    h(this, "renderer");
+    h(this, "registry");
+    h(this, "isTravelEnabled", !1);
+    h(this, "tracker");
+    this.target = e, this.renderer = t, this.registry = i, this.tracker = new Ae(e, {
+      resizeDebounce: r.resizeDebounce
+    }), this.tracker.onLayoutChange.add((c, n) => {
+      document.querySelector(`[${U.NAME}~='${U.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+      const o = Be(
+        this.target,
+        c,
+        V,
+        1,
+        0,
+        this.renderer.qualityFactor
+      );
+      o && this.renderer.syncScene(o, n);
+    }), this.tracker.onScrollChange.add((c, n) => {
+      nt(this.renderer.fixedMeshes, c, n);
+    }), this.tracker.onStyleChange.add((c) => {
+      st(this.registry, c);
+    }), 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);
+    this.tracker.stop();
   }
-  clearTimers() {
-    this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null);
+}
+class at {
+  constructor() {
+    h(this, "store");
+    this.store = /* @__PURE__ */ new WeakMap();
   }
-  forceUpdateScene() {
-    this.isDomDirty = !1;
-    const e = document.querySelector("[data-mirage-travel='traveler']") !== null;
-    e && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
-    const t = P(
-      this.target,
-      this.pendingMask,
-      e ? x | R : x,
-      this.filter
-    );
-    t && this.renderer.syncScene(t), this.pendingMask = S;
+  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 K {
+class ct {
   constructor(e, t) {
-    c(this, "renderer");
-    c(this, "syncer");
-    c(this, "target");
-    var s, a, n;
-    this.target = e;
-    let r;
-    if (t.mode === "duplicate" ? r = (a = (s = t.container) != null ? s : this.target.parentElement) != null ? a : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
+    h(this, "renderer");
+    h(this, "syncer");
+    h(this, "target");
+    h(this, "registry");
+    var r, c, n;
+    if (this.target = e, this.registry = new at(), !document.getElementById("mirage-engine-styles")) {
+      const a = document.createElement("style");
+      a.id = "mirage-engine-styles", a.textContent = `
+        [${$.NAME}="${$.VALUES.HIDE}"] {
+          opacity: 0 !important;
+        }
+      `, document.head.appendChild(a);
+    }
+    let i;
+    if (t.mode === "duplicate" ? i = (c = (r = t.container) != null ? r : this.target.parentElement) != null ? c : void 0 : i = (n = this.target.parentElement) != null ? n : void 0, !i)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new V(this.target, t, r), this.renderer.mount(), this.syncer = new Z(this.target, this.renderer, t);
+    this.renderer = new rt(
+      this.target,
+      t,
+      i,
+      this.registry
+    ), this.renderer.mount(), this.syncer = new ot(this.target, this.renderer, this.registry, t);
   }
   start() {
     this.syncer.start();
@@ -664,16 +1563,124 @@ class K {
   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")
+    );
+    if (!e)
+      return;
+    const t = {
+      ArrowRight: !1,
+      ArrowLeft: !1,
+      ArrowUp: !1,
+      ArrowDown: !1
+    };
+    window.addEventListener("keydown", (c) => {
+      t[c.key] !== void 0 && (t[c.key] = !0);
+    }), window.addEventListener("keyup", (c) => {
+      t[c.key] !== void 0 && (t[c.key] = !1);
+    });
+    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();
+  }
+}
+class lt {
+  constructor(e = {}) {
+    h(this, "frontSelector");
+    h(this, "midLayerElement");
+    h(this, "items", []);
+    h(this, "isInitialized", !1);
+    h(this, "midLayer", null);
+    h(this, "frontLayer", null);
+    h(this, "tracker", null);
+    this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new Ae(document.body, e.trackerConfig || { resizeDebounce: !0 });
+  }
+  init() {
+    var e;
+    this.isInitialized || (this.createLayers(), this.setupMidLayer(), this.hijackFrontElements(), this.setupHooks(), (e = this.tracker) == null || e.start(), this.isInitialized = !0, console.log("🥪 sand-telepochi initialized!"));
+  }
+  // Allow passing an existing tracker (e.g. from mirage-engine/core)
+  useTracker(e) {
+    this.tracker = e, this.setupHooks();
+  }
+  createLayers() {
+    this.midLayer = document.createElement("div"), this.midLayer.id = "sand-layer-mid", Object.assign(this.midLayer.style, {
+      position: "fixed",
+      inset: "0",
+      zIndex: "9998",
+      pointerEvents: "none"
+    }), this.frontLayer = document.createElement("div"), this.frontLayer.id = "sand-layer-front", Object.assign(this.frontLayer.style, {
+      position: "fixed",
+      inset: "0",
+      zIndex: "9999",
+      pointerEvents: "none"
+    }), document.body.appendChild(this.midLayer), document.body.appendChild(this.frontLayer);
+  }
+  setupMidLayer() {
+    this.midLayerElement && this.midLayer && (this.midLayer.appendChild(this.midLayerElement), this.midLayerElement.style.pointerEvents = "auto");
+  }
+  hijackFrontElements() {
+    const e = document.querySelectorAll(this.frontSelector);
+    this.frontLayer && e.forEach((t) => {
+      var n;
+      const i = t.getBoundingClientRect(), r = window.getComputedStyle(t), c = document.createElement("div");
+      c.className = "sand-placeholder", Object.assign(c.style, {
+        display: r.display === "inline" ? "inline-block" : r.display,
+        width: `${i.width}px`,
+        height: `${i.height}px`,
+        boxSizing: "border-box",
+        marginTop: r.marginTop,
+        marginBottom: r.marginBottom,
+        marginLeft: r.marginLeft,
+        marginRight: r.marginRight,
+        visibility: "hidden",
+        pointerEvents: "none"
+      }), (n = t.parentNode) == null || n.insertBefore(c, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
+        position: "fixed",
+        margin: "0",
+        boxSizing: "border-box",
+        width: `${i.width}px`,
+        height: `${i.height}px`,
+        pointerEvents: "auto"
+      }), this.items.push({ placeholder: c, original: t });
+    });
+  }
+  setupHooks() {
+    this.tracker && this.tracker.onBeforeRender.add(() => {
+      const e = this.items.map(({ placeholder: t }) => t.getBoundingClientRect());
+      this.items.forEach(({ original: t }, i) => {
+        const r = e[i];
+        t.style.top = `${r.top}px`, t.style.left = `${r.left}px`, t.style.width = `${r.width}px`, t.style.height = `${r.height}px`;
+      });
+    });
+  }
 }
-class te {
+class dt {
   constructor(e, t) {
-    c(this, "_engine");
+    h(this, "_engine");
+    h(this, "_sandwich");
     if (!e)
       throw new Error("[Mirage] Target element is required.");
-    this._engine = new K(e, t);
+    if (this._engine = new ct(e, t), t.sandwich !== !1) {
+      const i = typeof t.sandwich == "object" ? t.sandwich : {};
+      this._sandwich = new lt({
+        frontSelector: i.frontSelector || `[${Se.NAME}='${Se.VALUES.FRONT}']`
+      }), this._sandwich.useTracker(this._engine.getTracker());
+    }
   }
   start() {
-    this._engine.start();
+    this._engine.start(), this._sandwich && this._sandwich.init();
   }
   stop() {
     this._engine.stop();
@@ -681,7 +1688,19 @@ class te {
   destroy() {
     this._engine.dispose();
   }
+  getTracker() {
+    return this._engine.getTracker();
+  }
+  getCanvas() {
+    return this._engine.getCanvas();
+  }
+  updateUniforms(e, t) {
+    this._engine.updateUniforms(e, t);
+  }
+  test() {
+    this._engine.test();
+  }
 }
 export {
-  te as Mirage
+  dt as Mirage
 };