mirage-engine 0.2.13 → 0.2.15

package/dist/mirage-engine.js

@@ -1,175 +1,224 @@
-var B = Object.defineProperty;
-var z = (r, t, e) => t in r ? B(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var c = (r, t, e) => (z(r, typeof t != "symbol" ? t + "" : t, e), e);
-import * as h from "three";
-const v = 0, R = 1, b = 2, D = 4, C = 8, E = 16;
-function F(r, t, e) {
-  const i = t.split(`
+var k = Object.defineProperty;
+var I = (r, e, t) => e in r ? k(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var c = (r, e, t) => (I(r, typeof e != "symbol" ? e + "" : e, t), t);
+import * as d from "three";
+const T = 0, S = 1, B = 2, _ = 4, M = 8, z = 16, D = 0, F = 30, A = [
+  "include-tree",
+  "exclude-tree",
+  "include-self",
+  "exclude-self",
+  "end"
+];
+function P(r, e, t) {
+  const i = e.split(`
 `), s = [];
   return i.forEach((n) => {
     const a = n.split(" ");
     let o = a[0];
-    for (let l = 1; l < a.length; l++) {
-      const d = a[l];
-      r.measureText(o + " " + d).width < e ? o += " " + d : (s.push(o), o = d);
+    for (let h = 1; h < a.length; h++) {
+      const l = a[h];
+      r.measureText(o + " " + l).width < t ? o += " " + l : (s.push(o), o = l);
     }
     s.push(o);
   }), s;
 }
-function S(r, t, e, i, s = 2) {
+function L(r, e, t, i, s = 2) {
   const n = document.createElement("canvas"), a = n.getContext("2d");
   if (!a)
     throw new Error("[Mirage] Failed to create canvas context");
-  const l = (window.devicePixelRatio || 1) * s;
-  n.width = e * l, n.height = i * l, a.scale(l, l), a.font = t.font, a.fillStyle = t.color, a.textBaseline = "top", a.globalAlpha = 1;
-  const d = F(a, r, e), p = t.lineHeight;
-  d.forEach((m, g) => {
-    const y = g * p + 2;
-    let f = 0;
-    t.textAlign === "center" ? f = e / 2 : t.textAlign === "right" && (f = e), a.textAlign = t.textAlign, a.fillText(m, f, y);
+  const h = (window.devicePixelRatio || 1) * s;
+  n.width = t * h, n.height = i * h, a.scale(h, h), a.font = e.font, a.fillStyle = e.color, a.textBaseline = "top", a.globalAlpha = 1;
+  const l = P(a, r, t), p = e.lineHeight;
+  l.forEach((x, w) => {
+    const b = w * p + 2;
+    let y = 0;
+    e.textAlign === "center" ? y = t / 2 : e.textAlign === "right" && (y = t), a.textAlign = e.textAlign, a.fillText(x, y, b);
   });
-  const u = new h.CanvasTexture(n);
-  return u.colorSpace = h.SRGBColorSpace, u.minFilter = h.LinearFilter, u.magFilter = h.LinearFilter, u.needsUpdate = !0, u;
+  const f = new d.CanvasTexture(n);
+  return f.colorSpace = d.SRGBColorSpace, f.minFilter = d.LinearFilter, f.magFilter = d.LinearFilter, f.needsUpdate = !0, f;
 }
-function w(r) {
+function v(r) {
   return typeof r == "number" ? r : parseFloat(r) || 0;
 }
-const O = `
+function X(r, e) {
+  var o, h, l, p;
+  if (!e) {
+    r.set(0, 0, 0, 0);
+    return;
+  }
+  const t = e.split("/")[0].trim().split(/\s+/), i = v(t[0]), s = v((o = t[1]) != null ? o : t[0]), n = v((h = t[2]) != null ? h : t[0]), a = v((p = (l = t[3]) != null ? l : t[1]) != null ? p : t[0]);
+  r.set(i, s, n, a);
+}
+const W = (
+  /* glsl */
+  `
   varying vec2 vUv;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
-`, A = `
+`
+), Y = (
+  /* glsl */
+  `
+
   varying vec2 vUv;
   
   uniform vec2 uSize;
-  uniform float uRadius;
+  uniform vec4 uRadius;
   uniform float uBorderWidth;
-  uniform vec3 uColor;
+  uniform vec3 uBgColor;
   uniform vec3 uBorderColor;
   uniform float uOpacity;
   uniform float uBgOpacity;
+  uniform float uBorderOpacity;
 
-  // SDF 박스 함수
+  // SDF box
   float sdRoundedBox(vec2 p, vec2 b, float r) {
     vec2 q = abs(p) - b + r;
+    // return length(max(q, 0.0)) - r;
     return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
   }
 
   void main() {
+    // uVu: (0.0, 0.0) ~ (1.0, 1.0) / center: (0.5, 0.5)
+    // p: (-1.0, -1.0) ~ (1.0, 1.0) / center: (0.0, 0.0)
     vec2 p = (vUv - 0.5) * uSize;
     vec2 halfSize = uSize * 0.5;
     
-    float d = sdRoundedBox(p, halfSize, uRadius);
-    
-    float smoothEdge = 1.0; 
+    // # border-radius
+    vec2 xRadii = mix(uRadius.xw, uRadius.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 fillAlpha = 1.0 - smoothstep(-uBorderWidth - smoothEdge, -uBorderWidth, d);
-    
-    float borderAlpha = 0.0;
-    
-    if (uBorderWidth > 0.01) {
-      borderAlpha = (1.0 - smoothstep(0.0, smoothEdge, d)) - fillAlpha;
-    }
+    // 1px blur for anti-aliasing
+    float aa = 1.0; 
 
-    vec3 color = uColor;
-    float totalAlpha = borderAlpha + fillAlpha;
-    
-    if (totalAlpha > 0.001) {
-       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    // x == 0~aa -> 1
+    // x < 0 -> 0 
+    // x > aa -> 1
+    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+
+    // v valley
+    // 10px -> 5
+    float halfBorder = uBorderWidth * 0.5;
+    // 10px :
+    // 0 -> 0
+    // -10 -> 0
+    // -5 -> -5
+    float borderD = abs(d + halfBorder) - halfBorder;
+    // ^ border 내부는 음수/외부는 양수
+
+    // [!] 내부가 음수인 곳에서 시작점이 0이면 내부는 안티 얼리어싱 되지 않음.
+    // 1에서 빼든 그대로든 상관없이 경계선 밖 1px
+
+    // 최종 alpha를 위해 border 부분에 해당하는 픽셀 만 1로 반환.
+    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
+
+    if (uBorderWidth <= 0.01) {
+      borderAlpha = 0.0;
     }
-    
-    float shapeAlpha = borderAlpha + (fillAlpha * uBgOpacity);
-    float finalOpacity = shapeAlpha * uOpacity;
-    
+
+    float aFront = borderAlpha;
+    float aBack = uBgOpacity;
+    float aOut = aFront + aBack * (1.0 - aFront);
+
+    float safeAlpha = max(aOut, 0.0001);
+    vec3 cOut = (uBorderColor * aFront + uBgColor * aBack * (1.0 - aFront)) / safeAlpha;
+
+    float finalOpacity = aOut * bgMask * uOpacity;
+
     if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(color, finalOpacity);
+    gl_FragColor = vec4(cOut, finalOpacity);
+
+    #include <colorspace_fragment>
   }
-`;
-function x(r) {
+`
+);
+function R(r) {
   if (!r || r === "transparent")
-    return { color: new h.Color(16777215), alpha: 0 };
-  const t = r.match(
+    return { color: new d.Color(16777215), alpha: 0 };
+  const e = r.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
-  if (t) {
-    const e = parseInt(t[1], 10), i = parseInt(t[2], 10), s = parseInt(t[3], 10), n = t[4] !== void 0 ? parseFloat(t[4]) : 1;
-    return { color: new h.Color(`rgb(${e}, ${i}, ${s})`), alpha: n };
+  if (e) {
+    const t = parseInt(e[1], 10), i = parseInt(e[2], 10), s = parseInt(e[3], 10), n = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new d.Color(`rgb(${t}, ${i}, ${s})`), alpha: n };
   }
-  return { color: new h.Color(r), alpha: 1 };
+  return { color: new d.Color(r), alpha: 1 };
 }
-function I(r, t, e) {
+function H(r, e, t) {
   var o;
-  const i = x(r.backgroundColor), s = x(r.borderColor), n = {
-    uSize: { value: new h.Vector2(t, e) },
-    uRadius: { value: w(r.borderRadius) },
-    uBorderWidth: { value: w(r.borderWidth) },
-    uColor: { value: i.color },
+  const i = R(r.backgroundColor), s = R(r.borderColor), n = {
+    uSize: { value: new d.Vector2(e, t) },
+    uRadius: { value: new d.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: v(r.borderWidth) },
+    uBgColor: { value: i.color },
     uBorderColor: { value: s.color },
     uOpacity: { value: (o = r.opacity) != null ? o : 1 },
-    uBgOpacity: { value: i.alpha }
+    uBgOpacity: { value: i.alpha },
+    uBorderOpacity: { value: s.alpha }
   };
-  return new h.ShaderMaterial({
+  return X(n.uRadius.value, r.borderRadius), new d.ShaderMaterial({
     uniforms: n,
-    vertexShader: O,
-    fragmentShader: A,
+    vertexShader: W,
+    fragmentShader: Y,
     transparent: !0,
-    side: h.FrontSide
+    side: d.FrontSide
     // for better performance
   });
 }
-function L(r, t, e, i) {
+function U(r, e, t, i) {
   var a;
-  const s = x(t.backgroundColor), n = x(t.borderColor);
-  r.uniforms.uSize.value.set(e, i), r.uniforms.uRadius.value = w(t.borderRadius), r.uniforms.uBorderWidth.value = w(t.borderWidth), r.uniforms.uColor.value.copy(s.color), r.uniforms.uBorderColor.value.copy(n.color), r.uniforms.uOpacity.value = (a = t.opacity) != null ? a : 1, r.uniforms.uBgOpacity.value = s.alpha;
+  const s = R(e.backgroundColor), n = R(e.borderColor);
+  r.uniforms.uSize.value.set(t, i), X(r.uniforms.uRadius.value, e.borderRadius), r.uniforms.uBorderWidth.value = v(e.borderWidth), r.uniforms.uBgColor.value.copy(s.color), r.uniforms.uBorderColor.value.copy(n.color), r.uniforms.uOpacity.value = (a = e.opacity) != null ? a : 1, r.uniforms.uBgOpacity.value = s.alpha, r.uniforms.uBorderOpacity.value = n.alpha;
 }
-const T = {
-  create(r, t, e, i, s, n = 2) {
+const E = {
+  create(r, e, t, i, s, n = 2) {
     if (r === "BOX")
-      return I(t, i, s);
+      return H(e, i, s);
     if (r === "TEXT") {
-      const a = S(
-        e || "",
-        t,
+      const a = L(
+        t || "",
+        e,
         i,
         s,
         n
       );
-      return new h.MeshBasicMaterial({
+      return new d.MeshBasicMaterial({
         map: a,
         transparent: !0,
-        side: h.FrontSide,
+        side: d.FrontSide,
         color: 16777215
       });
     }
-    return new h.MeshBasicMaterial({ visible: !1 });
+    return new d.MeshBasicMaterial({ visible: !1 });
   },
-  update(r, t, e, i, s, n, a = 2) {
-    if (t === "BOX")
-      L(
+  update(r, e, t, i, s, n, a = 2) {
+    if (e === "BOX")
+      U(
         r,
-        e,
+        t,
         s,
         n
       );
-    else if (t === "TEXT") {
+    else if (e === "TEXT") {
       const o = r;
       o.map && o.map.dispose();
-      const l = S(
+      const h = L(
         i || "",
-        e,
+        t,
         s,
         n,
         a
       );
-      o.map = l, o.needsUpdate = !0;
+      o.map = h, o.needsUpdate = !0;
     }
   }
 };
-class X {
-  constructor(t, e, i) {
+class $ {
+  constructor(e, t, i) {
     c(this, "canvas");
     c(this, "scene");
     c(this, "camera");
@@ -177,33 +226,34 @@ class X {
     c(this, "renderOrder", 0);
     c(this, "textQualityFactor", 2);
     c(this, "mode", "overlay");
-    c(this, "customZIndex", "9999");
     c(this, "target");
     c(this, "mountContainer");
     c(this, "targetRect");
     c(this, "meshMap", /* @__PURE__ */ new Map());
-    var a, o, l;
-    this.target = t, this.mountContainer = i, this.mode = (a = e.mode) != null ? a : "overlay", (o = e.style) != null && o.zIndex && (this.customZIndex = e.style.zIndex), this.canvas = document.createElement("canvas"), this.scene = new h.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    var a, o;
+    this.target = e, this.mountContainer = i, this.mode = (a = t.mode) != null ? a : "overlay", this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
     const s = this.targetRect.width, n = this.targetRect.height;
-    this.camera = new h.OrthographicCamera(
+    this.camera = new d.OrthographicCamera(
       s / -2,
       s / 2,
       n / 2,
       n / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.renderer = new h.WebGLRenderer({
+    ), this.camera.position.z = 100, this.renderer = new d.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0,
       antialias: !0
-    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, n), this.applyTextQuality((l = e.textQuality) != null ? l : "medium");
+      // [new]
+      // premultipliedAlpha: true
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, n), this.applyTextQuality((o = t.textQuality) != null ? o : "medium");
   }
-  applyTextQuality(t) {
-    if (typeof t == "number") {
-      this.textQualityFactor = Math.max(0.1, t);
+  applyTextQuality(e) {
+    if (typeof e == "number") {
+      this.textQualityFactor = Math.max(0.1, e);
       return;
     }
-    switch (t) {
+    switch (e) {
       case "low":
         this.textQualityFactor = 1;
         break;
@@ -217,7 +267,7 @@ class X {
     }
   }
   mount() {
-    this.mountContainer.appendChild(this.canvas), this.canvas.style.zIndex = this.customZIndex, this.canvas.style.pointerEvents = this.mode === "overlay" ? "none" : "auto", this.updateCanvasLayout();
+    this.mountContainer.prepend(this.canvas), this.canvas.style.pointerEvents = this.mode === "overlay" ? "none" : "auto", this.updateCanvasLayout();
   }
   updateCanvasLayout() {
     this.canvas.style.width = `${this.targetRect.width}px`, this.canvas.style.height = `${this.targetRect.height}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = "absolute", this.canvas.style.top = `${this.target.offsetTop}px`, this.canvas.style.left = `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
@@ -225,97 +275,97 @@ class X {
   dispose() {
     this.renderer.dispose(), this.canvas.remove();
   }
-  setSize(t, e) {
-    this.renderer.setSize(t, e), this.camera.left = t / -2, this.camera.right = t / 2, this.camera.top = e / 2, this.camera.bottom = e / -2, this.camera.updateProjectionMatrix();
+  setSize(e, t) {
+    this.renderer.setSize(e, t), this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
   }
-  syncScene(t) {
-    const e = this.target.getBoundingClientRect(), i = Math.abs(e.width - this.targetRect.width) > 0.1 || Math.abs(e.height - this.targetRect.height) > 0.1, s = this.mode === "overlay" && (Math.abs(e.top - this.targetRect.top) > 0.1 || Math.abs(e.left - this.targetRect.left) > 0.1);
-    i ? (this.targetRect = e, this.renderer.setSize(this.targetRect.width, this.targetRect.height), this.camera.left = this.targetRect.width / -2, this.camera.right = this.targetRect.width / 2, this.camera.top = this.targetRect.height / 2, this.camera.bottom = this.targetRect.height / -2, this.camera.updateProjectionMatrix(), this.updateCanvasLayout()) : s ? (this.targetRect = e, this.updateCanvasLayout()) : this.targetRect = e, this.renderOrder = 0;
+  syncScene(e) {
+    const t = this.target.getBoundingClientRect(), i = 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);
+    i ? (this.targetRect = t, this.renderer.setSize(this.targetRect.width, this.targetRect.height), this.camera.left = this.targetRect.width / -2, this.camera.right = this.targetRect.width / 2, this.camera.top = this.targetRect.height / 2, this.camera.bottom = this.targetRect.height / -2, this.camera.layers.set(0), this.camera.updateProjectionMatrix(), this.updateCanvasLayout()) : s ? (this.targetRect = t, this.updateCanvasLayout()) : this.targetRect = t, this.renderOrder = 0;
     const n = /* @__PURE__ */ new Set();
-    this.reconcileNode(t, n);
+    this.reconcileNode(e, n);
     for (const [a, o] of this.meshMap.entries())
-      n.has(a) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof h.Material && o.material.dispose(), this.meshMap.delete(a));
+      n.has(a) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.Material && o.material.dispose(), this.meshMap.delete(a));
   }
-  reconcileNode(t, e) {
-    e.add(t.element);
-    let i = this.meshMap.get(t.element);
+  reconcileNode(e, t) {
+    t.add(e.element);
+    let i = this.meshMap.get(e.element);
     if (!i) {
-      const s = new h.PlaneGeometry(1, 1), n = T.create(
+      const s = new d.PlaneGeometry(1, 1), n = E.create(
         "BOX",
-        t.styles,
+        e.styles,
         "",
-        t.rect.width,
-        t.rect.height
+        e.rect.width,
+        e.rect.height
       );
-      i = new h.Mesh(s, n), t.type === "TEXT" && (i.name = "BG_MESH"), this.scene.add(i), this.meshMap.set(t.element, i);
+      i = new d.Mesh(s, n), i.layers.set(e.visibility), e.type === "TEXT" && (i.name = "BG_MESH"), this.scene.add(i), this.meshMap.set(e.element, i);
     }
-    if (i.userData.domRect = t.rect, this.updateMeshProperties(i, t), t.type === "BOX")
-      for (const s of t.children)
-        this.reconcileNode(s, e);
+    if (i.userData.domRect = e.rect, this.updateMeshProperties(i, e), e.type === "BOX")
+      for (const s of e.children)
+        this.reconcileNode(s, t);
     else
-      t.type === "TEXT" && this.reconcileTextChild(i, t);
+      e.type === "TEXT" && this.reconcileTextChild(i, e);
   }
-  reconcileTextChild(t, e) {
-    var o, l;
-    let i = t.children.find(
-      (d) => d.name === "TEXT_CHILD"
+  reconcileTextChild(e, t) {
+    var o, h;
+    let i = e.children.find(
+      (l) => l.name === "TEXT_CHILD"
     );
-    const s = JSON.stringify(e.textStyles), n = (o = i == null ? void 0 : i.userData) == null ? void 0 : o.styleHash;
-    if (!i || e.dirtyMask & E || s !== n) {
-      i && ((l = i.material.map) == null || l.dispose(), i.geometry.dispose(), t.remove(i));
-      const d = T.create(
+    const s = JSON.stringify(t.textStyles), n = (o = i == null ? void 0 : i.userData) == null ? void 0 : o.styleHash;
+    if (!i || t.dirtyMask & z || s !== n) {
+      i && ((h = i.material.map) == null || h.dispose(), i.geometry.dispose(), e.remove(i));
+      const l = E.create(
         "TEXT",
-        e.textStyles,
-        e.textContent || "",
-        e.rect.width,
-        e.rect.height,
+        t.textStyles,
+        t.textContent || "",
+        t.rect.width,
+        t.rect.height,
         this.textQualityFactor
-      ), p = new h.PlaneGeometry(1, 1);
-      i = new h.Mesh(p, d), i.name = "TEXT_CHILD", i.userData = { styleHash: s }, i.position.z = 5e-3, t.add(i);
+      ), p = new d.PlaneGeometry(1, 1);
+      i = new d.Mesh(p, l), i.name = "TEXT_CHILD", i.userData = { styleHash: s }, i.layers.set(t.visibility), i.position.z = 5e-3, e.add(i);
     }
     if (i) {
-      const d = t.userData.domRect, p = d.x + d.width / 2, u = d.y + d.height / 2, m = e.rect.x + e.rect.width / 2, g = e.rect.y + e.rect.height / 2, y = m - p, f = -(g - u);
-      i.position.set(y, f, 5e-3);
+      const l = e.userData.domRect, p = l.x + l.width / 2, f = l.y + l.height / 2, x = t.rect.x + t.rect.width / 2, w = t.rect.y + t.rect.height / 2, b = x - p, y = -(w - f);
+      i.position.set(b, y, 5e-3);
     }
   }
-  updateMeshProperties(t, e) {
-    const { rect: i, styles: s } = e, n = this.renderer.getPixelRatio(), a = this.renderer.domElement.width / n, o = this.renderer.domElement.height / n;
-    t.scale.set(i.width, i.height, 1);
-    const l = 1e-3;
+  updateMeshProperties(e, t) {
+    const { rect: i, styles: s } = t, n = this.renderer.getPixelRatio(), a = this.renderer.domElement.width / n, o = this.renderer.domElement.height / n;
+    e.scale.set(i.width, i.height, 1);
+    const h = 1e-3;
     this.renderOrder++;
-    const d = this.targetRect.left + window.scrollX, p = this.targetRect.top + window.scrollY, u = i.x - d, m = i.y - p;
-    t.position.set(
-      u - a / 2 + i.width / 2,
-      -m + o / 2 - i.height / 2,
-      s.zIndex + this.renderOrder * l
-    ), T.update(
-      t.material,
+    const l = this.targetRect.left + window.scrollX, p = this.targetRect.top + window.scrollY, f = i.x - l, x = i.y - p;
+    e.position.set(
+      f - a / 2 + i.width / 2,
+      -x + o / 2 - i.height / 2,
+      s.zIndex + this.renderOrder * h
+    ), E.update(
+      e.material,
       "BOX",
-      e.styles,
+      t.styles,
       "",
-      e.rect.width,
-      e.rect.height
+      t.rect.width,
+      t.rect.height
     );
   }
   render() {
     this.renderer.render(this.scene, this.camera);
   }
 }
-function N(r) {
-  const t = document.createRange();
-  t.selectNodeContents(r);
-  const e = t.getBoundingClientRect();
+function Q(r) {
+  const e = document.createRange();
+  e.selectNodeContents(r);
+  const t = e.getBoundingClientRect();
   return {
-    left: e.left,
-    top: e.top,
-    width: e.width,
-    height: e.height
+    left: t.left,
+    top: t.top,
+    width: t.width,
+    height: t.height
   };
 }
-function _(r) {
-  const t = parseFloat(r.fontSize);
-  let e = parseFloat(r.lineHeight);
-  isNaN(e) && (e = t * 1.2);
+function G(r) {
+  const e = parseFloat(r.fontSize);
+  let t = parseFloat(r.lineHeight);
+  isNaN(t) && (t = e * 1.2);
   let i = parseFloat(r.letterSpacing);
   return isNaN(i) && (i = 0), {
     font: `${r.fontStyle} ${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,
@@ -323,11 +373,11 @@ function _(r) {
     textAlign: r.textAlign || "start",
     textBaseline: "alphabetic",
     direction: r.direction || "inherit",
-    lineHeight: e,
+    lineHeight: t,
     letterSpacing: i
   };
 }
-function M(r, t = R | b | D | E | C) {
+function N(r, e = S | B | _ | z | M, t, i) {
   if (r.nodeType === Node.TEXT_NODE) {
     const u = r;
     if (!u.textContent || !u.textContent.trim())
@@ -335,11 +385,11 @@ function M(r, t = R | b | D | E | C) {
     const m = u.textContent.replace(/\s+/g, " ").trim();
     if (m.length === 0)
       return null;
-    const g = N(u);
+    const g = Q(u);
     if (g.width === 0 || g.height === 0)
       return null;
-    const y = u.parentElement, f = y ? window.getComputedStyle(y) : null;
-    return f ? {
+    const O = u.parentElement, C = O ? window.getComputedStyle(O) : null;
+    return C ? {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: u,
@@ -351,65 +401,98 @@ function M(r, t = R | b | D | E | C) {
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(f.opacity),
+        opacity: parseFloat(C.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px"
       },
       textContent: m,
-      textStyles: _(f),
-      dirtyMask: t,
+      textStyles: G(C),
+      dirtyMask: e,
+      visibility: t,
       children: []
     } : null;
   }
-  const e = r, i = e.getBoundingClientRect(), s = window.getComputedStyle(e);
-  if (i.width === 0 || i.height === 0 || s.display === "none")
+  const s = r, n = s.dataset.mirageFilter;
+  let a = t, o = t;
+  if (n) {
+    const u = new Set(n.split(/\s+/));
+    for (const m of u)
+      if (!A.includes(m))
+        throw new Error(
+          `[MirageEngine] Invalid filter token: '${m}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+        );
+    if (u.has("end"))
+      return null;
+    if (u.has("include-tree") && u.has("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"))
+      throw new Error(
+        "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
+      );
+    u.has("include-tree") ? a = D : u.has("exclude-tree") && (a = F), o = a, u.has("include-self") ? o = D : u.has("exclude-self") && (o = F);
+  }
+  if (i && i.end && i.end.length > 0 && i.end.some(
+    (m) => s.classList.contains(m)
+  ))
     return null;
-  let n = e.getAttribute("data-mid");
-  n || (n = Math.random().toString(36).substring(2, 11), e.setAttribute("data-mid", n));
-  const a = parseInt(s.zIndex), o = {
-    backgroundColor: s.backgroundColor,
-    opacity: parseFloat(s.opacity),
-    zIndex: isNaN(a) ? 0 : a,
-    borderRadius: s.borderRadius,
-    borderColor: s.borderColor,
-    borderWidth: s.borderWidth
+  const h = s.getBoundingClientRect(), l = window.getComputedStyle(s);
+  if (h.width === 0 || h.height === 0 || l.display === "none")
+    return null;
+  let p = s.getAttribute("data-mid");
+  p || (p = Math.random().toString(36).substring(2, 11), s.setAttribute("data-mid", p));
+  const f = parseInt(l.zIndex), x = {
+    backgroundColor: l.backgroundColor,
+    opacity: parseFloat(l.opacity),
+    zIndex: isNaN(f) ? 0 : f,
+    borderRadius: l.borderRadius,
+    borderColor: l.borderColor,
+    borderWidth: l.borderWidth
   };
-  let l, d;
-  const p = [];
-  return Array.from(e.childNodes).forEach((u) => {
-    const m = M(u, t);
-    m && p.push(m);
+  let w, b;
+  const y = [];
+  return Array.from(s.childNodes).forEach((u) => {
+    const m = u.nodeType === Node.TEXT_NODE ? o : a, g = N(
+      u,
+      e,
+      m,
+      i
+    );
+    g && y.push(g);
   }), {
-    id: n,
+    id: p,
     type: "BOX",
-    element: e,
+    element: s,
     rect: {
-      x: i.left + window.scrollX,
-      y: i.top + window.scrollY,
-      width: i.width,
-      height: i.height
+      x: h.left + window.scrollX,
+      y: h.top + window.scrollY,
+      width: h.width,
+      height: h.height
     },
-    styles: o,
-    textContent: l,
-    textStyles: d,
-    dirtyMask: t,
-    children: p
+    styles: x,
+    textContent: w,
+    textStyles: b,
+    dirtyMask: e,
+    visibility: o,
+    children: y
   };
 }
-class k {
-  constructor(t, e) {
+class q {
+  constructor(e, t, i) {
     c(this, "target");
     c(this, "renderer");
+    c(this, "filter");
     c(this, "observer");
     c(this, "isDomDirty", !1);
     c(this, "isRunning", !1);
-    c(this, "pendingMask", v);
+    c(this, "pendingMask", T);
     c(this, "mutationTimer", null);
     c(this, "cssTimer", null);
-    c(this, "onTransitionFinished", (t) => {
-      this.target.contains(t.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= R | b, this.cssTimer = window.setTimeout(() => {
+    c(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= S | B, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
@@ -419,12 +502,12 @@ class k {
     c(this, "renderLoop", () => {
       this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
     });
-    this.target = t, this.renderer = e, this.observer = new MutationObserver((i) => {
-      let s = v;
-      for (const n of i)
-        n.type === "childList" ? s |= C : n.type === "attributes" && (n.attributeName === "style" || n.attributeName === "class") && (s |= R | b);
-      if (s !== v) {
-        if (this.pendingMask |= s, s & C) {
+    this.target = e, this.renderer = t, this.filter = i, this.observer = new MutationObserver((s) => {
+      let n = T;
+      for (const a of s)
+        a.type === "childList" ? n |= M : a.type === "attributes" && (a.attributeName === "style" || a.attributeName === "class") && (n |= S | B);
+      if (n !== T) {
+        if (this.pendingMask |= n, n & M) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -450,21 +533,21 @@ class k {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const t = M(this.target, this.pendingMask);
-    t && this.renderer.syncScene(t), this.pendingMask = v;
+    const e = N(this.target, this.pendingMask, D, this.filter);
+    e && this.renderer.syncScene(e), this.pendingMask = T;
   }
 }
-class P {
-  constructor(t, e) {
+class V {
+  constructor(e, t) {
     c(this, "renderer");
     c(this, "syncer");
     c(this, "target");
     var s, n, a;
-    this.target = t;
+    this.target = e;
     let i;
-    if (e.mode === "duplicate" ? i = (n = (s = e.container) != null ? s : this.target.parentElement) != null ? n : void 0 : i = (a = this.target.parentElement) != null ? a : void 0, !i)
+    if (t.mode === "duplicate" ? i = (n = (s = t.container) != null ? s : this.target.parentElement) != null ? n : void 0 : i = (a = this.target.parentElement) != null ? a : void 0, !i)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new X(this.target, e, i), this.renderer.mount(), this.syncer = new k(this.target, this.renderer);
+    this.renderer = new $(this.target, t, i), this.renderer.mount(), this.syncer = new q(this.target, this.renderer, t.filter);
   }
   start() {
     this.syncer.start();
@@ -476,12 +559,12 @@ class P {
     this.syncer.stop(), this.renderer.dispose();
   }
 }
-class Y {
-  constructor(t, e = {}) {
+class Z {
+  constructor(e, t) {
     c(this, "_engine");
-    if (!t)
+    if (!e)
       throw new Error("[Mirage] Target element is required.");
-    this._engine = new P(t, e);
+    this._engine = new V(e, t);
   }
   start() {
     this._engine.start();
@@ -489,13 +572,10 @@ class Y {
   stop() {
     this._engine.stop();
   }
-  /**
-   * 엔진 종료 및 메모리 해제
-   */
   destroy() {
     this._engine.dispose();
   }
 }
 export {
-  Y as Mirage
+  Z as Mirage
 };

package/dist/mirage-engine.umd.js

@@ -1,55 +1,82 @@
-(function(p,f){typeof exports=="object"&&typeof module!="undefined"?f(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],f):(p=typeof globalThis!="undefined"?globalThis:p||self,f(p.MirageEngine={},p.THREE))})(this,function(p,f){"use strict";var Y=Object.defineProperty;var U=(p,f,w)=>f in p?Y(p,f,{enumerable:!0,configurable:!0,writable:!0,value:w}):p[f]=w;var c=(p,f,w)=>(U(p,typeof f!="symbol"?f+"":f,w),w);function w(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const h=w(f),T=0,C=1,S=2,z=4,E=8,B=16;function F(r,t,e){const i=t.split(`
-`),s=[];return i.forEach(n=>{const a=n.split(" ");let o=a[0];for(let l=1;l<a.length;l++){const d=a[l];r.measureText(o+" "+d).width<e?o+=" "+d:(s.push(o),o=d)}s.push(o)}),s}function O(r,t,e,i,s=2){const n=document.createElement("canvas"),a=n.getContext("2d");if(!a)throw new Error("[Mirage] Failed to create canvas context");const l=(window.devicePixelRatio||1)*s;n.width=e*l,n.height=i*l,a.scale(l,l),a.font=t.font,a.fillStyle=t.color,a.textBaseline="top",a.globalAlpha=1;const d=F(a,r,e),m=t.lineHeight;d.forEach((g,y)=>{const x=y*m+2;let v=0;t.textAlign==="center"?v=e/2:t.textAlign==="right"&&(v=e),a.textAlign=t.textAlign,a.fillText(g,v,x)});const u=new h.CanvasTexture(n);return u.colorSpace=h.SRGBColorSpace,u.minFilter=h.LinearFilter,u.magFilter=h.LinearFilter,u.needsUpdate=!0,u}function b(r){return typeof r=="number"?r:parseFloat(r)||0}const A=`
+(function(p,g){typeof exports=="object"&&typeof module!="undefined"?g(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],g):(p=typeof globalThis!="undefined"?globalThis:p||self,g(p.MirageEngine={},p.THREE))})(this,function(p,g){"use strict";var J=Object.defineProperty;var K=(p,g,w)=>g in p?J(p,g,{enumerable:!0,configurable:!0,writable:!0,value:w}):p[g]=w;var c=(p,g,w)=>(K(p,typeof g!="symbol"?g+"":g,w),w);function w(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const d=w(g),E=0,B=1,M=2,P=4,O=8,L=16,D=0,N=30,A=["include-tree","exclude-tree","include-self","exclude-self","end"];function H(r,e,t){const i=e.split(`
+`),s=[];return i.forEach(n=>{const a=n.split(" ");let o=a[0];for(let h=1;h<a.length;h++){const l=a[h];r.measureText(o+" "+l).width<t?o+=" "+l:(s.push(o),o=l)}s.push(o)}),s}function X(r,e,t,i,s=2){const n=document.createElement("canvas"),a=n.getContext("2d");if(!a)throw new Error("[Mirage] Failed to create canvas context");const h=(window.devicePixelRatio||1)*s;n.width=t*h,n.height=i*h,a.scale(h,h),a.font=e.font,a.fillStyle=e.color,a.textBaseline="top",a.globalAlpha=1;const l=H(a,r,t),f=e.lineHeight;l.forEach((b,R)=>{const C=R*f+2;let v=0;e.textAlign==="center"?v=t/2:e.textAlign==="right"&&(v=t),a.textAlign=e.textAlign,a.fillText(b,v,C)});const m=new d.CanvasTexture(n);return m.colorSpace=d.SRGBColorSpace,m.minFilter=d.LinearFilter,m.magFilter=d.LinearFilter,m.needsUpdate=!0,m}function T(r){return typeof r=="number"?r:parseFloat(r)||0}function k(r,e){var o,h,l,f;if(!e){r.set(0,0,0,0);return}const t=e.split("/")[0].trim().split(/\s+/),i=T(t[0]),s=T((o=t[1])!=null?o:t[0]),n=T((h=t[2])!=null?h:t[0]),a=T((f=(l=t[3])!=null?l:t[1])!=null?f:t[0]);r.set(i,s,n,a)}const W=`
   varying vec2 vUv;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
-`,I=`
+`,Y=`
+
   varying vec2 vUv;
   
   uniform vec2 uSize;
-  uniform float uRadius;
+  uniform vec4 uRadius;
   uniform float uBorderWidth;
-  uniform vec3 uColor;
+  uniform vec3 uBgColor;
   uniform vec3 uBorderColor;
   uniform float uOpacity;
   uniform float uBgOpacity;
+  uniform float uBorderOpacity;
 
-  // SDF 박스 함수
+  // SDF box
   float sdRoundedBox(vec2 p, vec2 b, float r) {
     vec2 q = abs(p) - b + r;
+    // return length(max(q, 0.0)) - r;
     return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
   }
 
   void main() {
+    // uVu: (0.0, 0.0) ~ (1.0, 1.0) / center: (0.5, 0.5)
+    // p: (-1.0, -1.0) ~ (1.0, 1.0) / center: (0.0, 0.0)
     vec2 p = (vUv - 0.5) * uSize;
     vec2 halfSize = uSize * 0.5;
     
-    float d = sdRoundedBox(p, halfSize, uRadius);
-    
-    float smoothEdge = 1.0; 
+    // # border-radius
+    vec2 xRadii = mix(uRadius.xw, uRadius.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 fillAlpha = 1.0 - smoothstep(-uBorderWidth - smoothEdge, -uBorderWidth, d);
-    
-    float borderAlpha = 0.0;
-    
-    if (uBorderWidth > 0.01) {
-      borderAlpha = (1.0 - smoothstep(0.0, smoothEdge, d)) - fillAlpha;
-    }
+    // 1px blur for anti-aliasing
+    float aa = 1.0; 
 
-    vec3 color = uColor;
-    float totalAlpha = borderAlpha + fillAlpha;
-    
-    if (totalAlpha > 0.001) {
-       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    // x == 0~aa -> 1
+    // x < 0 -> 0 
+    // x > aa -> 1
+    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+
+    // v valley
+    // 10px -> 5
+    float halfBorder = uBorderWidth * 0.5;
+    // 10px :
+    // 0 -> 0
+    // -10 -> 0
+    // -5 -> -5
+    float borderD = abs(d + halfBorder) - halfBorder;
+    // ^ border 내부는 음수/외부는 양수
+
+    // [!] 내부가 음수인 곳에서 시작점이 0이면 내부는 안티 얼리어싱 되지 않음.
+    // 1에서 빼든 그대로든 상관없이 경계선 밖 1px
+
+    // 최종 alpha를 위해 border 부분에 해당하는 픽셀 만 1로 반환.
+    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
+
+    if (uBorderWidth <= 0.01) {
+      borderAlpha = 0.0;
     }
-    
-    float shapeAlpha = borderAlpha + (fillAlpha * uBgOpacity);
-    float finalOpacity = shapeAlpha * uOpacity;
-    
+
+    float aFront = borderAlpha;
+    float aBack = uBgOpacity;
+    float aOut = aFront + aBack * (1.0 - aFront);
+
+    float safeAlpha = max(aOut, 0.0001);
+    vec3 cOut = (uBorderColor * aFront + uBgColor * aBack * (1.0 - aFront)) / safeAlpha;
+
+    float finalOpacity = aOut * bgMask * uOpacity;
+
     if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(color, finalOpacity);
+    gl_FragColor = vec4(cOut, finalOpacity);
+
+    #include <colorspace_fragment>
   }
-`;function R(r){if(!r||r==="transparent")return{color:new h.Color(16777215),alpha:0};const t=r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(t){const e=parseInt(t[1],10),i=parseInt(t[2],10),s=parseInt(t[3],10),n=t[4]!==void 0?parseFloat(t[4]):1;return{color:new h.Color(`rgb(${e}, ${i}, ${s})`),alpha:n}}return{color:new h.Color(r),alpha:1}}function L(r,t,e){var o;const i=R(r.backgroundColor),s=R(r.borderColor),n={uSize:{value:new h.Vector2(t,e)},uRadius:{value:b(r.borderRadius)},uBorderWidth:{value:b(r.borderWidth)},uColor:{value:i.color},uBorderColor:{value:s.color},uOpacity:{value:(o=r.opacity)!=null?o:1},uBgOpacity:{value:i.alpha}};return new h.ShaderMaterial({uniforms:n,vertexShader:A,fragmentShader:I,transparent:!0,side:h.FrontSide})}function X(r,t,e,i){var a;const s=R(t.backgroundColor),n=R(t.borderColor);r.uniforms.uSize.value.set(e,i),r.uniforms.uRadius.value=b(t.borderRadius),r.uniforms.uBorderWidth.value=b(t.borderWidth),r.uniforms.uColor.value.copy(s.color),r.uniforms.uBorderColor.value.copy(n.color),r.uniforms.uOpacity.value=(a=t.opacity)!=null?a:1,r.uniforms.uBgOpacity.value=s.alpha}const M={create(r,t,e,i,s,n=2){if(r==="BOX")return L(t,i,s);if(r==="TEXT"){const a=O(e||"",t,i,s,n);return new h.MeshBasicMaterial({map:a,transparent:!0,side:h.FrontSide,color:16777215})}return new h.MeshBasicMaterial({visible:!1})},update(r,t,e,i,s,n,a=2){if(t==="BOX")X(r,e,s,n);else if(t==="TEXT"){const o=r;o.map&&o.map.dispose();const l=O(i||"",e,s,n,a);o.map=l,o.needsUpdate=!0}}};class N{constructor(t,e,i){c(this,"canvas");c(this,"scene");c(this,"camera");c(this,"renderer");c(this,"renderOrder",0);c(this,"textQualityFactor",2);c(this,"mode","overlay");c(this,"customZIndex","9999");c(this,"target");c(this,"mountContainer");c(this,"targetRect");c(this,"meshMap",new Map);var a,o,l;this.target=t,this.mountContainer=i,this.mode=(a=e.mode)!=null?a:"overlay",(o=e.style)!=null&&o.zIndex&&(this.customZIndex=e.style.zIndex),this.canvas=document.createElement("canvas"),this.scene=new h.Scene,this.targetRect=this.target.getBoundingClientRect();const s=this.targetRect.width,n=this.targetRect.height;this.camera=new h.OrthographicCamera(s/-2,s/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.renderer=new h.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(s,n),this.applyTextQuality((l=e.textQuality)!=null?l:"medium")}applyTextQuality(t){if(typeof t=="number"){this.textQualityFactor=Math.max(.1,t);return}switch(t){case"low":this.textQualityFactor=1;break;case"high":this.textQualityFactor=4;break;case"medium":default:this.textQualityFactor=2;break}}mount(){this.mountContainer.appendChild(this.canvas),this.canvas.style.zIndex=this.customZIndex,this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}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")}dispose(){this.renderer.dispose(),this.canvas.remove()}setSize(t,e){this.renderer.setSize(t,e),this.camera.left=t/-2,this.camera.right=t/2,this.camera.top=e/2,this.camera.bottom=e/-2,this.camera.updateProjectionMatrix()}syncScene(t){const e=this.target.getBoundingClientRect(),i=Math.abs(e.width-this.targetRect.width)>.1||Math.abs(e.height-this.targetRect.height)>.1,s=this.mode==="overlay"&&(Math.abs(e.top-this.targetRect.top)>.1||Math.abs(e.left-this.targetRect.left)>.1);i?(this.targetRect=e,this.renderer.setSize(this.targetRect.width,this.targetRect.height),this.camera.left=this.targetRect.width/-2,this.camera.right=this.targetRect.width/2,this.camera.top=this.targetRect.height/2,this.camera.bottom=this.targetRect.height/-2,this.camera.updateProjectionMatrix(),this.updateCanvasLayout()):s?(this.targetRect=e,this.updateCanvasLayout()):this.targetRect=e,this.renderOrder=0;const n=new Set;this.reconcileNode(t,n);for(const[a,o]of this.meshMap.entries())n.has(a)||(this.scene.remove(o),o.geometry.dispose(),o.material instanceof h.Material&&o.material.dispose(),this.meshMap.delete(a))}reconcileNode(t,e){e.add(t.element);let i=this.meshMap.get(t.element);if(!i){const s=new h.PlaneGeometry(1,1),n=M.create("BOX",t.styles,"",t.rect.width,t.rect.height);i=new h.Mesh(s,n),t.type==="TEXT"&&(i.name="BG_MESH"),this.scene.add(i),this.meshMap.set(t.element,i)}if(i.userData.domRect=t.rect,this.updateMeshProperties(i,t),t.type==="BOX")for(const s of t.children)this.reconcileNode(s,e);else t.type==="TEXT"&&this.reconcileTextChild(i,t)}reconcileTextChild(t,e){var o,l;let i=t.children.find(d=>d.name==="TEXT_CHILD");const s=JSON.stringify(e.textStyles),n=(o=i==null?void 0:i.userData)==null?void 0:o.styleHash;if(!i||e.dirtyMask&B||s!==n){i&&((l=i.material.map)==null||l.dispose(),i.geometry.dispose(),t.remove(i));const d=M.create("TEXT",e.textStyles,e.textContent||"",e.rect.width,e.rect.height,this.textQualityFactor),m=new h.PlaneGeometry(1,1);i=new h.Mesh(m,d),i.name="TEXT_CHILD",i.userData={styleHash:s},i.position.z=.005,t.add(i)}if(i){const d=t.userData.domRect,m=d.x+d.width/2,u=d.y+d.height/2,g=e.rect.x+e.rect.width/2,y=e.rect.y+e.rect.height/2,x=g-m,v=-(y-u);i.position.set(x,v,.005)}}updateMeshProperties(t,e){const{rect:i,styles:s}=e,n=this.renderer.getPixelRatio(),a=this.renderer.domElement.width/n,o=this.renderer.domElement.height/n;t.scale.set(i.width,i.height,1);const l=.001;this.renderOrder++;const d=this.targetRect.left+window.scrollX,m=this.targetRect.top+window.scrollY,u=i.x-d,g=i.y-m;t.position.set(u-a/2+i.width/2,-g+o/2-i.height/2,s.zIndex+this.renderOrder*l),M.update(t.material,"BOX",e.styles,"",e.rect.width,e.rect.height)}render(){this.renderer.render(this.scene,this.camera)}}function _(r){const t=document.createRange();t.selectNodeContents(r);const e=t.getBoundingClientRect();return{left:e.left,top:e.top,width:e.width,height:e.height}}function k(r){const t=parseFloat(r.fontSize);let e=parseFloat(r.lineHeight);isNaN(e)&&(e=t*1.2);let i=parseFloat(r.letterSpacing);return isNaN(i)&&(i=0),{font:`${r.fontStyle} ${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,color:r.color,textAlign:r.textAlign||"start",textBaseline:"alphabetic",direction:r.direction||"inherit",lineHeight:e,letterSpacing:i}}function D(r,t=C|S|z|B|E){if(r.nodeType===Node.TEXT_NODE){const u=r;if(!u.textContent||!u.textContent.trim())return null;const g=u.textContent.replace(/\s+/g," ").trim();if(g.length===0)return null;const y=_(u);if(y.width===0||y.height===0)return null;const x=u.parentElement,v=x?window.getComputedStyle(x):null;return v?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:u,rect:{x:y.left+window.scrollX,y:y.top+window.scrollY,width:y.width,height:y.height},styles:{backgroundColor:"transparent",opacity:parseFloat(v.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:g,textStyles:k(v),dirtyMask:t,children:[]}:null}const e=r,i=e.getBoundingClientRect(),s=window.getComputedStyle(e);if(i.width===0||i.height===0||s.display==="none")return null;let n=e.getAttribute("data-mid");n||(n=Math.random().toString(36).substring(2,11),e.setAttribute("data-mid",n));const a=parseInt(s.zIndex),o={backgroundColor:s.backgroundColor,opacity:parseFloat(s.opacity),zIndex:isNaN(a)?0:a,borderRadius:s.borderRadius,borderColor:s.borderColor,borderWidth:s.borderWidth};let l,d;const m=[];return Array.from(e.childNodes).forEach(u=>{const g=D(u,t);g&&m.push(g)}),{id:n,type:"BOX",element:e,rect:{x:i.left+window.scrollX,y:i.top+window.scrollY,width:i.width,height:i.height},styles:o,textContent:l,textStyles:d,dirtyMask:t,children:m}}class P{constructor(t,e){c(this,"target");c(this,"renderer");c(this,"observer");c(this,"isDomDirty",!1);c(this,"isRunning",!1);c(this,"pendingMask",T);c(this,"mutationTimer",null);c(this,"cssTimer",null);c(this,"onTransitionFinished",t=>{this.target.contains(t.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=C|S,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});c(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});c(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=t,this.renderer=e,this.observer=new MutationObserver(i=>{let s=T;for(const n of i)n.type==="childList"?s|=E:n.type==="attributes"&&(n.attributeName==="style"||n.attributeName==="class")&&(s|=C|S);if(s!==T){if(this.pendingMask|=s,s&E){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)}})}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())}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)}forceUpdateScene(){this.isDomDirty=!1;const t=D(this.target,this.pendingMask);t&&this.renderer.syncScene(t),this.pendingMask=T}}class H{constructor(t,e){c(this,"renderer");c(this,"syncer");c(this,"target");var s,n,a;this.target=t;let i;if(e.mode==="duplicate"?i=(n=(s=e.container)!=null?s:this.target.parentElement)!=null?n:void 0:i=(a=this.target.parentElement)!=null?a:void 0,!i)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new N(this.target,e,i),this.renderer.mount(),this.syncer=new P(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}class W{constructor(t,e={}){c(this,"_engine");if(!t)throw new Error("[Mirage] Target element is required.");this._engine=new H(t,e)}start(){this._engine.start()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}}p.Mirage=W,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+`;function S(r){if(!r||r==="transparent")return{color:new d.Color(16777215),alpha:0};const e=r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),s=parseInt(e[3],10),n=e[4]!==void 0?parseFloat(e[4]):1;return{color:new d.Color(`rgb(${t}, ${i}, ${s})`),alpha:n}}return{color:new d.Color(r),alpha:1}}function U(r,e,t){var o;const i=S(r.backgroundColor),s=S(r.borderColor),n={uSize:{value:new d.Vector2(e,t)},uRadius:{value:new d.Vector4(0,0,0,0)},uBorderWidth:{value:T(r.borderWidth)},uBgColor:{value:i.color},uBorderColor:{value:s.color},uOpacity:{value:(o=r.opacity)!=null?o:1},uBgOpacity:{value:i.alpha},uBorderOpacity:{value:s.alpha}};return k(n.uRadius.value,r.borderRadius),new d.ShaderMaterial({uniforms:n,vertexShader:W,fragmentShader:Y,transparent:!0,side:d.FrontSide})}function $(r,e,t,i){var a;const s=S(e.backgroundColor),n=S(e.borderColor);r.uniforms.uSize.value.set(t,i),k(r.uniforms.uRadius.value,e.borderRadius),r.uniforms.uBorderWidth.value=T(e.borderWidth),r.uniforms.uBgColor.value.copy(s.color),r.uniforms.uBorderColor.value.copy(n.color),r.uniforms.uOpacity.value=(a=e.opacity)!=null?a:1,r.uniforms.uBgOpacity.value=s.alpha,r.uniforms.uBorderOpacity.value=n.alpha}const F={create(r,e,t,i,s,n=2){if(r==="BOX")return U(e,i,s);if(r==="TEXT"){const a=X(t||"",e,i,s,n);return new d.MeshBasicMaterial({map:a,transparent:!0,side:d.FrontSide,color:16777215})}return new d.MeshBasicMaterial({visible:!1})},update(r,e,t,i,s,n,a=2){if(e==="BOX")$(r,t,s,n);else if(e==="TEXT"){const o=r;o.map&&o.map.dispose();const h=X(i||"",t,s,n,a);o.map=h,o.needsUpdate=!0}}};class j{constructor(e,t,i){c(this,"canvas");c(this,"scene");c(this,"camera");c(this,"renderer");c(this,"renderOrder",0);c(this,"textQualityFactor",2);c(this,"mode","overlay");c(this,"target");c(this,"mountContainer");c(this,"targetRect");c(this,"meshMap",new Map);var a,o;this.target=e,this.mountContainer=i,this.mode=(a=t.mode)!=null?a:"overlay",this.canvas=document.createElement("canvas"),this.scene=new d.Scene,this.targetRect=this.target.getBoundingClientRect();const s=this.targetRect.width,n=this.targetRect.height;this.camera=new d.OrthographicCamera(s/-2,s/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.renderer=new d.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(s,n),this.applyTextQuality((o=t.textQuality)!=null?o:"medium")}applyTextQuality(e){if(typeof e=="number"){this.textQualityFactor=Math.max(.1,e);return}switch(e){case"low":this.textQualityFactor=1;break;case"high":this.textQualityFactor=4;break;case"medium":default:this.textQualityFactor=2;break}}mount(){this.mountContainer.prepend(this.canvas),this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){this.canvas.style.width=`${this.targetRect.width}px`,this.canvas.style.height=`${this.targetRect.height}px`,this.mode==="duplicate"?(this.canvas.style.position="",this.canvas.style.top="",this.canvas.style.left="",this.canvas.style.display="block"):(this.canvas.style.position="absolute",this.canvas.style.top=`${this.target.offsetTop}px`,this.canvas.style.left=`${this.target.offsetLeft}px`,this.canvas.style.display="block")}dispose(){this.renderer.dispose(),this.canvas.remove()}setSize(e,t){this.renderer.setSize(e,t),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(),i=Math.abs(t.width-this.targetRect.width)>.1||Math.abs(t.height-this.targetRect.height)>.1,s=this.mode==="overlay"&&(Math.abs(t.top-this.targetRect.top)>.1||Math.abs(t.left-this.targetRect.left)>.1);i?(this.targetRect=t,this.renderer.setSize(this.targetRect.width,this.targetRect.height),this.camera.left=this.targetRect.width/-2,this.camera.right=this.targetRect.width/2,this.camera.top=this.targetRect.height/2,this.camera.bottom=this.targetRect.height/-2,this.camera.layers.set(0),this.camera.updateProjectionMatrix(),this.updateCanvasLayout()):s?(this.targetRect=t,this.updateCanvasLayout()):this.targetRect=t,this.renderOrder=0;const n=new Set;this.reconcileNode(e,n);for(const[a,o]of this.meshMap.entries())n.has(a)||(this.scene.remove(o),o.geometry.dispose(),o.material instanceof d.Material&&o.material.dispose(),this.meshMap.delete(a))}reconcileNode(e,t){t.add(e.element);let i=this.meshMap.get(e.element);if(!i){const s=new d.PlaneGeometry(1,1),n=F.create("BOX",e.styles,"",e.rect.width,e.rect.height);i=new d.Mesh(s,n),i.layers.set(e.visibility),e.type==="TEXT"&&(i.name="BG_MESH"),this.scene.add(i),this.meshMap.set(e.element,i)}if(i.userData.domRect=e.rect,this.updateMeshProperties(i,e),e.type==="BOX")for(const s of e.children)this.reconcileNode(s,t);else e.type==="TEXT"&&this.reconcileTextChild(i,e)}reconcileTextChild(e,t){var o,h;let i=e.children.find(l=>l.name==="TEXT_CHILD");const s=JSON.stringify(t.textStyles),n=(o=i==null?void 0:i.userData)==null?void 0:o.styleHash;if(!i||t.dirtyMask&L||s!==n){i&&((h=i.material.map)==null||h.dispose(),i.geometry.dispose(),e.remove(i));const l=F.create("TEXT",t.textStyles,t.textContent||"",t.rect.width,t.rect.height,this.textQualityFactor),f=new d.PlaneGeometry(1,1);i=new d.Mesh(f,l),i.name="TEXT_CHILD",i.userData={styleHash:s},i.layers.set(t.visibility),i.position.z=.005,e.add(i)}if(i){const l=e.userData.domRect,f=l.x+l.width/2,m=l.y+l.height/2,b=t.rect.x+t.rect.width/2,R=t.rect.y+t.rect.height/2,C=b-f,v=-(R-m);i.position.set(C,v,.005)}}updateMeshProperties(e,t){const{rect:i,styles:s}=t,n=this.renderer.getPixelRatio(),a=this.renderer.domElement.width/n,o=this.renderer.domElement.height/n;e.scale.set(i.width,i.height,1);const h=.001;this.renderOrder++;const l=this.targetRect.left+window.scrollX,f=this.targetRect.top+window.scrollY,m=i.x-l,b=i.y-f;e.position.set(m-a/2+i.width/2,-b+o/2-i.height/2,s.zIndex+this.renderOrder*h),F.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height)}render(){this.renderer.render(this.scene,this.camera)}}function Q(r){const e=document.createRange();e.selectNodeContents(r);const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}function G(r){const e=parseFloat(r.fontSize);let t=parseFloat(r.lineHeight);isNaN(t)&&(t=e*1.2);let i=parseFloat(r.letterSpacing);return isNaN(i)&&(i=0),{font:`${r.fontStyle} ${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,color:r.color,textAlign:r.textAlign||"start",textBaseline:"alphabetic",direction:r.direction||"inherit",lineHeight:t,letterSpacing:i}}function _(r,e=B|M|P|L|O,t,i){if(r.nodeType===Node.TEXT_NODE){const u=r;if(!u.textContent||!u.textContent.trim())return null;const y=u.textContent.replace(/\s+/g," ").trim();if(y.length===0)return null;const x=Q(u);if(x.width===0||x.height===0)return null;const I=u.parentElement,z=I?window.getComputedStyle(I):null;return z?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:u,rect:{x:x.left+window.scrollX,y:x.top+window.scrollY,width:x.width,height:x.height},styles:{backgroundColor:"transparent",opacity:parseFloat(z.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:y,textStyles:G(z),dirtyMask:e,visibility:t,children:[]}:null}const s=r,n=s.dataset.mirageFilter;let a=t,o=t;if(n){const u=new Set(n.split(/\s+/));for(const y of u)if(!A.includes(y))throw new Error(`[MirageEngine] Invalid filter token: '${y}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(u.has("end"))return null;if(u.has("include-tree")&&u.has("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"))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");u.has("include-tree")?a=D:u.has("exclude-tree")&&(a=N),o=a,u.has("include-self")?o=D:u.has("exclude-self")&&(o=N)}if(i&&i.end&&i.end.length>0&&i.end.some(y=>s.classList.contains(y)))return null;const h=s.getBoundingClientRect(),l=window.getComputedStyle(s);if(h.width===0||h.height===0||l.display==="none")return null;let f=s.getAttribute("data-mid");f||(f=Math.random().toString(36).substring(2,11),s.setAttribute("data-mid",f));const m=parseInt(l.zIndex),b={backgroundColor:l.backgroundColor,opacity:parseFloat(l.opacity),zIndex:isNaN(m)?0:m,borderRadius:l.borderRadius,borderColor:l.borderColor,borderWidth:l.borderWidth};let R,C;const v=[];return Array.from(s.childNodes).forEach(u=>{const y=u.nodeType===Node.TEXT_NODE?o:a,x=_(u,e,y,i);x&&v.push(x)}),{id:f,type:"BOX",element:s,rect:{x:h.left+window.scrollX,y:h.top+window.scrollY,width:h.width,height:h.height},styles:b,textContent:R,textStyles:C,dirtyMask:e,visibility:o,children:v}}class q{constructor(e,t,i){c(this,"target");c(this,"renderer");c(this,"filter");c(this,"observer");c(this,"isDomDirty",!1);c(this,"isRunning",!1);c(this,"pendingMask",E);c(this,"mutationTimer",null);c(this,"cssTimer",null);c(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=B|M,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});c(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});c(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=e,this.renderer=t,this.filter=i,this.observer=new MutationObserver(s=>{let n=E;for(const a of s)a.type==="childList"?n|=O:a.type==="attributes"&&(a.attributeName==="style"||a.attributeName==="class")&&(n|=B|M);if(n!==E){if(this.pendingMask|=n,n&O){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)}})}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())}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)}forceUpdateScene(){this.isDomDirty=!1;const e=_(this.target,this.pendingMask,D,this.filter);e&&this.renderer.syncScene(e),this.pendingMask=E}}class V{constructor(e,t){c(this,"renderer");c(this,"syncer");c(this,"target");var s,n,a;this.target=e;let i;if(t.mode==="duplicate"?i=(n=(s=t.container)!=null?s:this.target.parentElement)!=null?n:void 0:i=(a=this.target.parentElement)!=null?a:void 0,!i)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new j(this.target,t,i),this.renderer.mount(),this.syncer=new q(this.target,this.renderer,t.filter)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}class Z{constructor(e,t){c(this,"_engine");if(!e)throw new Error("[Mirage] Target element is required.");this._engine=new V(e,t)}start(){this._engine.start()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}}p.Mirage=Z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/dist/src/core/Mirage.d.ts

@@ -1,11 +1,8 @@
 import { MirageConfig } from '../types';
 export declare class Mirage {
     private _engine;
-    constructor(element: HTMLElement, config?: MirageConfig);
+    constructor(target: HTMLElement, config: MirageConfig);
     start(): void;
     stop(): void;
-    /**
-     * 엔진 종료 및 메모리 해제
-     */
     destroy(): void;
 }

package/dist/src/types/config.d.ts

@@ -1,18 +1,2 @@
-export type TextQuality = "low" | "medium" | "high" | number;
-export type MirageMode = "overlay" | "duplicate";
-interface BaseConfig {
-    debug?: boolean;
-    textQuality?: TextQuality;
-    style?: {
-        zIndex?: string;
-    };
-}
-export interface OverlayConfig extends BaseConfig {
-    mode?: "overlay";
-}
-export interface DuplicateConfig extends BaseConfig {
-    mode: "duplicate";
-    container?: HTMLElement;
-}
-export type MirageConfig = OverlayConfig | DuplicateConfig;
-export {};
+import { CoreConfig } from '../../packages/core/src/index.ts';
+export type MirageConfig = CoreConfig;

package/dist/src/types/index.d.ts

@@ -1,3 +1 @@
 export * from './config';
-export * from './common';
-export * from './flags';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirage-engine",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "An engine that mirrors HTML DOM elements to a WebGL scene in real-time.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -21,7 +21,8 @@
     "dist"
   ],
   "dependencies": {
-    "@mirage-engine/painter": "0.2.2"
+    "@mirage-engine/painter": "0.2.3",
+    "@mirage-engine/core": "0.1.0"
   },
   "peerDependencies": {
     "three": "^0.150.0"

package/dist/src/core/Engine.d.ts

@@ -1,10 +0,0 @@
-import { MirageConfig } from '../types';
-export declare class Engine {
-    private renderer;
-    private syncer;
-    private target;
-    constructor(target: HTMLElement, config: MirageConfig);
-    start(): void;
-    stop(): void;
-    dispose(): void;
-}

package/dist/src/core/Syncer.d.ts

@@ -1,19 +0,0 @@
-import { Renderer } from '../renderer/Renderer';
-export declare class Syncer {
-    private target;
-    private renderer;
-    private observer;
-    private isDomDirty;
-    private isRunning;
-    private pendingMask;
-    private mutationTimer;
-    private cssTimer;
-    constructor(target: HTMLElement, renderer: Renderer);
-    start(): void;
-    stop(): void;
-    private clearTimers;
-    private onTransitionFinished;
-    private onWindowResize;
-    private forceUpdateScene;
-    private renderLoop;
-}

package/dist/src/dom/Extractor.d.ts

@@ -1,2 +0,0 @@
-import { SceneNode } from '../types';
-export declare function extractSceneGraph(sourceNode: HTMLElement | Node, initialMask?: number): SceneNode | null;

package/dist/src/renderer/Renderer.d.ts

@@ -1,26 +0,0 @@
-import { SceneNode, MirageConfig } from '../types';
-export declare class Renderer {
-    readonly canvas: HTMLCanvasElement;
-    private readonly scene;
-    private readonly camera;
-    private readonly renderer;
-    private renderOrder;
-    private textQualityFactor;
-    private mode;
-    private customZIndex;
-    private target;
-    private mountContainer;
-    private targetRect;
-    private meshMap;
-    constructor(target: HTMLElement, config: MirageConfig, mountContainer: HTMLElement);
-    private applyTextQuality;
-    mount(): void;
-    private updateCanvasLayout;
-    dispose(): void;
-    setSize(width: number, height: number): void;
-    syncScene(graphNode: SceneNode): void;
-    private reconcileNode;
-    private reconcileTextChild;
-    private updateMeshProperties;
-    render(): void;
-}

package/dist/src/types/common.d.ts

@@ -1,19 +0,0 @@
-import { TextStyles, BoxStyles } from '../../packages/painter/src/index.ts';
-export type NodeType = "BOX" | "TEXT";
-export interface NodeRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export interface SceneNode {
-    id: string;
-    type: NodeType;
-    element: HTMLElement;
-    rect: NodeRect;
-    styles: BoxStyles;
-    textContent?: string;
-    textStyles?: TextStyles;
-    dirtyMask: number;
-    children: SceneNode[];
-}

package/dist/src/types/flags.d.ts

@@ -1,6 +0,0 @@
-export declare const DIRTY_NONE = 0;
-export declare const DIRTY_RECT: number;
-export declare const DIRTY_STYLE: number;
-export declare const DIRTY_ZINDEX: number;
-export declare const DIRTY_STRUCTURE: number;
-export declare const DIRTY_CONTENT: number;