@mirage-engine/core 0.2.1 → 0.3.0

package/dist/mirage-engine.js

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