mirage-engine 0.2.5 → 0.2.7

package/README.md

@@ -1,26 +1,57 @@
+
+
+<p align="center">
+ <img  src="../../.github/assets/mirage-engine.png" width="300px">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/mirage-engine"><img src="https://img.shields.io/npm/v/mirage-engine.svg?color=black"></a>
+  <a href="https://www.npmjs.org/package/mirage-engine"><img src="https://img.shields.io/npm/dm/mirage-engine.svg?color=black"></a>
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg?color=black"></a>
+  <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-blue.svg?color=black"></a>
+</p>
+
 # MirageEngine
 
 > **An engine that mirrors HTML DOM elements to a WebGL scene in real-time.**
 
-[![npm version](https://img.shields.io/npm/v/mirage-engine.svg?style=flat-square)](https://www.npmjs.com/package/mirage-engine)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=flat-square)](https://www.typescriptlang.org/)
-
 MirageEngine directly mirrors HTML DOM elements to WebGL objects. It observes DOM mutations and synchronizes position, style, and content in real-time, allowing standard HTML elements to exist within a WebGL context.
 
 ## Installation
 
 ```bash
-npm install mirage-engine
+npm install mirage-engine three
 ```
 
 ## Usage
 
+### Use simple
+
 ```ts
-import { Mirage } from 'mirage-engine';
+import { Mirage } from "mirage-engine";
+
+const target = document.querySelector("#target") as HTMLElement;
+
+const mirage = new Mirage(target);
+
+mirage.start();
+```
+
+### Use option
+
+```ts
+import { Mirage } from "mirage-engine";
+
+const target = document.querySelector("#target") as HTMLElement;
+const container = document.querySelector("#container") as HTMLElement;
+
+const mirage = new Mirage(target, {
+  textQuality: "low", //default is "medium" (== 2) ("low" | "medium" | "high" | number;)
+  mode: "duplicate", //default is "overaly" ("overlay" | "duplicate")
+  container: container, //The container option is only available in "duplicate" mode.
+});
 
-const engine = new Mirage("#target");
-engine.start();
+mirage.start();
 ```
 
-**License | MIT © dltldn333**
+**License | MIT © dltldn333**

package/dist/mirage-engine.js

@@ -1,253 +1,413 @@
-var v = Object.defineProperty;
-var D = (n, e, t) => e in n ? v(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var o = (n, e, t) => (D(n, typeof e != "symbol" ? e + "" : e, t), t);
-import * as m from "three";
-const T = 0, y = 1, x = 2, M = 4, S = 8, C = 16;
-function F(n, e, t) {
-  const i = e.split(`
-`), r = [];
-  return i.forEach((s) => {
-    const g = s.split(" ");
-    let l = g[0];
-    for (let p = 1; p < g.length; p++) {
-      const a = g[p];
-      n.measureText(l + " " + a).width < t ? l += " " + a : (r.push(l), l = a);
+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 o = (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(`
+`), s = [];
+  return i.forEach((n) => {
+    const a = n.split(" ");
+    let c = a[0];
+    for (let u = 1; u < a.length; u++) {
+      const l = a[u];
+      r.measureText(c + " " + l).width < e ? c += " " + l : (s.push(c), c = l);
     }
-    r.push(l);
-  }), r;
+    s.push(c);
+  }), s;
 }
-function N(n, e, t, i) {
-  const r = document.createElement("canvas"), s = r.getContext("2d");
-  if (!s)
+function S(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 g = 2, l = (window.devicePixelRatio || 2) * g;
-  r.width = t * l, r.height = i * l, s.scale(l, l), s.font = e.font, s.fillStyle = e.color, s.textBaseline = "top", s.globalAlpha = 1;
-  const p = F(s, n, t), a = e.lineHeight;
-  p.forEach((h, u) => {
-    const f = u * a + 2;
-    let d = 0;
-    e.textAlign === "center" ? d = t / 2 : e.textAlign === "right" && (d = t), s.textAlign = e.textAlign, s.fillText(h, d, f);
+  const u = (window.devicePixelRatio || 1) * s;
+  n.width = e * u, n.height = i * u, a.scale(u, u), a.font = t.font, a.fillStyle = t.color, a.textBaseline = "top", a.globalAlpha = 1;
+  const l = F(a, r, e), p = t.lineHeight;
+  l.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 c = new m.CanvasTexture(r);
-  return c.colorSpace = m.SRGBColorSpace, c.minFilter = m.LinearFilter, c.magFilter = m.LinearFilter, c.needsUpdate = !0, c;
+  const d = new h.CanvasTexture(n);
+  return d.colorSpace = h.SRGBColorSpace, d.minFilter = h.LinearFilter, d.magFilter = h.LinearFilter, d.needsUpdate = !0, d;
 }
-class L {
-  constructor() {
+function w(r) {
+  return typeof r == "number" ? r : parseFloat(r) || 0;
+}
+const O = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`, A = `
+  varying vec2 vUv;
+  
+  uniform vec2 uSize;
+  uniform float uRadius;
+  uniform float uBorderWidth;
+  uniform vec3 uColor;
+  uniform vec3 uBorderColor;
+  uniform float uOpacity;
+  uniform float uBgOpacity;
+
+  // SDF 박스 함수
+  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;
+  }
+
+  void main() {
+    vec2 p = (vUv - 0.5) * uSize;
+    vec2 halfSize = uSize * 0.5;
+    
+    float d = sdRoundedBox(p, halfSize, uRadius);
+    
+    float smoothEdge = 1.0; 
+
+    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;
+    }
+
+    vec3 color = uColor;
+    float totalAlpha = borderAlpha + fillAlpha;
+    
+    if (totalAlpha > 0.001) {
+       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    }
+    
+    float shapeAlpha = borderAlpha + (fillAlpha * uBgOpacity);
+    float finalOpacity = shapeAlpha * uOpacity;
+    
+    if (finalOpacity < 0.001) discard;
+
+    gl_FragColor = vec4(color, finalOpacity);
+  }
+`;
+function x(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 I(r, t, e) {
+  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 },
+    uBorderColor: { value: s.color },
+    uOpacity: { value: r.opacity ?? 1 },
+    uBgOpacity: { value: i.alpha }
+  };
+  return new h.ShaderMaterial({
+    uniforms: n,
+    vertexShader: O,
+    fragmentShader: A,
+    transparent: !0,
+    side: h.FrontSide
+    // for better performance
+  });
+}
+function L(r, t, e, i) {
+  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 = t.opacity ?? 1, r.uniforms.uBgOpacity.value = s.alpha;
+}
+const T = {
+  create(r, t, e, i, s, n = 2) {
+    if (r === "BOX")
+      return I(t, i, s);
+    if (r === "TEXT") {
+      const a = S(
+        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")
+      L(
+        r,
+        e,
+        s,
+        n
+      );
+    else if (t === "TEXT") {
+      const c = r;
+      c.map && c.map.dispose();
+      const u = S(
+        i || "",
+        e,
+        s,
+        n,
+        a
+      );
+      c.map = u, c.needsUpdate = !0;
+    }
+  }
+};
+class X {
+  constructor(t, e, i) {
     o(this, "canvas");
     o(this, "scene");
     o(this, "camera");
     o(this, "renderer");
     o(this, "renderOrder", 0);
+    o(this, "textQualityFactor", 2);
+    o(this, "mode", "overlay");
+    o(this, "customZIndex", "9999");
+    o(this, "target");
+    o(this, "mountContainer");
+    o(this, "targetRect");
     o(this, "meshMap", /* @__PURE__ */ new Map());
-    this.canvas = document.createElement("canvas"), this.scene = new m.Scene();
-    const e = window.innerWidth, t = window.innerHeight;
-    this.camera = new m.OrthographicCamera(
-      e / -2,
-      e / 2,
-      t / 2,
-      t / -2,
+    var a;
+    this.target = t, this.mountContainer = i, this.mode = e.mode ?? "overlay", (a = e.style) != null && a.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 m.WebGLRenderer({
+    ), this.camera.position.z = 100, this.renderer = new h.WebGLRenderer({
       canvas: this.canvas,
-      alpha: !0
-    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(e, t);
+      alpha: !0,
+      antialias: !0
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, n), this.applyTextQuality(e.textQuality ?? "medium");
+  }
+  applyTextQuality(t) {
+    if (typeof t == "number") {
+      this.textQualityFactor = Math.max(0.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(e) {
-    e.appendChild(this.canvas);
+  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() {
-    try {
-      this.renderer.dispose();
-    } catch {
-    }
-    this.canvas.parentElement && this.canvas.parentElement.removeChild(this.canvas);
+    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();
+  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(e) {
-    this.renderOrder = 0;
-    const t = /* @__PURE__ */ new Set();
-    this.reconcileNode(e, t);
-    for (const [i, r] of this.meshMap.entries())
-      t.has(i) || (this.scene.remove(r), r.geometry.dispose(), r.material instanceof m.Material && r.material.dispose(), this.meshMap.delete(i));
+  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;
+    const n = /* @__PURE__ */ new Set();
+    this.reconcileNode(t, n);
+    for (const [a, c] of this.meshMap.entries())
+      n.has(a) || (this.scene.remove(c), c.geometry.dispose(), c.material instanceof h.Material && c.material.dispose(), this.meshMap.delete(a));
   }
-  reconcileNode(e, t) {
-    t.add(e.element);
-    let i = this.meshMap.get(e.element);
+  reconcileNode(t, e) {
+    e.add(t.element);
+    let i = this.meshMap.get(t.element);
     if (!i) {
-      const r = new m.PlaneGeometry(1, 1), s = new m.MeshBasicMaterial({ transparent: !0 });
-      i = new m.Mesh(r, s), e.type === "TEXT" && (i.name = "BG_MESH"), this.scene.add(i), this.meshMap.set(e.element, i);
+      const s = new h.PlaneGeometry(1, 1), n = T.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 = e.rect, this.updateMeshProperties(i, e), e.type === "BOX")
-      for (const r of e.children)
-        this.reconcileNode(r, t);
+    if (i.userData.domRect = t.rect, this.updateMeshProperties(i, t), t.type === "BOX")
+      for (const s of t.children)
+        this.reconcileNode(s, e);
     else
-      e.type === "TEXT" && this.reconcileTextChild(i, e);
+      t.type === "TEXT" && this.reconcileTextChild(i, t);
   }
-  reconcileTextChild(e, t) {
-    var l, p;
-    let i = e.children.find(
-      (a) => a.name === "TEXT_CHILD"
+  reconcileTextChild(t, e) {
+    var c, u;
+    let i = t.children.find(
+      (l) => l.name === "TEXT_CHILD"
     );
-    const r = JSON.stringify(t.textStyles), s = (l = i == null ? void 0 : i.userData) == null ? void 0 : l.styleHash;
-    if (!i || t.dirtyMask & C || r !== s) {
-      i && ((p = i.material.map) == null || p.dispose(), i.geometry.dispose(), e.remove(i));
-      const a = N(
-        t.textContent || "",
-        t.textStyles,
-        t.rect.width,
-        t.rect.height
-      ), c = new m.PlaneGeometry(1, 1), h = new m.MeshBasicMaterial({
-        map: a,
-        transparent: !0,
-        side: m.FrontSide,
-        color: 16777215
-      });
-      i = new m.Mesh(c, h), i.name = "TEXT_CHILD", i.userData = { styleHash: r }, e.add(i);
+    const s = JSON.stringify(e.textStyles), n = (c = i == null ? void 0 : i.userData) == null ? void 0 : c.styleHash;
+    if (!i || e.dirtyMask & E || s !== n) {
+      i && ((u = i.material.map) == null || u.dispose(), i.geometry.dispose(), t.remove(i));
+      const l = T.create(
+        "TEXT",
+        e.textStyles,
+        e.textContent || "",
+        e.rect.width,
+        e.rect.height,
+        this.textQualityFactor
+      ), p = new h.PlaneGeometry(1, 1);
+      i = new h.Mesh(p, l), i.name = "TEXT_CHILD", i.userData = { styleHash: s }, i.position.z = 5e-3, t.add(i);
     }
     if (i) {
-      const a = e.userData.domRect, c = a.x + a.width / 2, h = a.y + a.height / 2, u = t.rect.x + t.rect.width / 2, f = t.rect.y + t.rect.height / 2, d = u - c, w = -(f - h);
-      i.position.set(d, w, 5e-3);
+      const l = t.userData.domRect, p = l.x + l.width / 2, d = l.y + l.height / 2, m = e.rect.x + e.rect.width / 2, g = e.rect.y + e.rect.height / 2, y = m - p, f = -(g - d);
+      i.position.set(y, f, 5e-3);
     }
   }
-  updateMeshProperties(e, t) {
-    const { rect: i, styles: r } = t, s = this.renderer.getPixelRatio(), g = this.renderer.domElement.width / s, l = this.renderer.domElement.height / s;
-    e.scale.set(i.width, i.height, 1);
-    const p = 1e-3;
-    this.renderOrder++, e.position.set(
-      i.x - g / 2 + i.width / 2,
-      -i.y + l / 2 - i.height / 2,
-      r.zIndex + this.renderOrder * p
+  updateMeshProperties(t, e) {
+    const { rect: i, styles: s } = e, n = this.renderer.getPixelRatio(), a = this.renderer.domElement.width / n, c = this.renderer.domElement.height / n;
+    t.scale.set(i.width, i.height, 1);
+    const u = 1e-3;
+    this.renderOrder++;
+    const l = this.targetRect.left + window.scrollX, p = this.targetRect.top + window.scrollY, d = i.x - l, m = i.y - p;
+    t.position.set(
+      d - a / 2 + i.width / 2,
+      -m + c / 2 - i.height / 2,
+      s.zIndex + this.renderOrder * u
+    ), T.update(
+      t.material,
+      "BOX",
+      e.styles,
+      "",
+      e.rect.width,
+      e.rect.height
     );
-    const a = e.material, c = r.backgroundColor;
-    let h = c, u = 1;
-    if (c === "transparent" || c === "rgba(0, 0, 0, 0)")
-      h = "#ffffff", u = 0;
-    else if (c.startsWith("rgba")) {
-      const d = c.match(/[\d.]+/g);
-      if (d && d.length >= 4) {
-        const w = d[0], R = d[1], E = d[2];
-        u = parseFloat(d[3]), h = `rgb(${w}, ${R}, ${E})`;
-      }
-    }
-    const f = r.opacity * u;
-    a.color.set(h), a.opacity = f, a.transparent = f < 1;
   }
   render() {
     this.renderer.render(this.scene, this.camera);
   }
 }
-function z(n) {
-  const e = document.createRange();
-  e.selectNodeContents(n);
-  const t = e.getBoundingClientRect();
+function N(r) {
+  const t = document.createRange();
+  t.selectNodeContents(r);
+  const e = t.getBoundingClientRect();
   return {
-    left: t.left,
-    top: t.top,
-    width: t.width,
-    height: t.height
+    left: e.left,
+    top: e.top,
+    width: e.width,
+    height: e.height
   };
 }
-function I(n) {
-  const e = parseFloat(n.fontSize);
-  let t = parseFloat(n.lineHeight);
-  isNaN(t) && (t = e * 1.2);
-  let i = parseFloat(n.letterSpacing);
+function _(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: `${n.fontStyle} ${n.fontWeight} ${n.fontSize} ${n.fontFamily}`,
-    color: n.color,
-    textAlign: n.textAlign || "start",
+    font: `${r.fontStyle} ${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,
+    color: r.color,
+    textAlign: r.textAlign || "start",
     textBaseline: "alphabetic",
-    direction: n.direction || "inherit",
-    lineHeight: t,
+    direction: r.direction || "inherit",
+    lineHeight: e,
     letterSpacing: i
   };
 }
-function b(n, e = y | x | M | C | S) {
-  if (n.nodeType === Node.TEXT_NODE) {
-    const h = n;
-    if (!h.textContent || !h.textContent.trim())
+function M(r, t = R | b | D | E | C) {
+  if (r.nodeType === Node.TEXT_NODE) {
+    const d = r;
+    if (!d.textContent || !d.textContent.trim())
       return null;
-    const u = h.textContent.replace(/\s+/g, " ").trim();
-    if (u.length === 0)
+    const m = d.textContent.replace(/\s+/g, " ").trim();
+    if (m.length === 0)
       return null;
-    const f = z(h);
-    if (f.width === 0 || f.height === 0)
+    const g = N(d);
+    if (g.width === 0 || g.height === 0)
       return null;
-    const d = h.parentElement, w = d ? window.getComputedStyle(d) : null;
-    return w ? {
+    const y = d.parentElement, f = y ? window.getComputedStyle(y) : null;
+    return f ? {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: h,
+      element: d,
       rect: {
-        x: f.left + window.scrollX,
-        y: f.top + window.scrollY,
-        width: f.width,
-        height: f.height
+        x: g.left + window.scrollX,
+        y: g.top + window.scrollY,
+        width: g.width,
+        height: g.height
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(w.opacity),
+        opacity: parseFloat(f.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px"
       },
-      textContent: u,
-      textStyles: I(w),
-      dirtyMask: e,
+      textContent: m,
+      textStyles: _(f),
+      dirtyMask: t,
       children: []
     } : null;
   }
-  const t = n, i = t.getBoundingClientRect(), r = window.getComputedStyle(t);
-  if (i.width === 0 || i.height === 0 || r.display === "none")
+  const e = r, i = e.getBoundingClientRect(), s = window.getComputedStyle(e);
+  if (i.width === 0 || i.height === 0 || s.display === "none")
     return null;
-  let s = t.getAttribute("data-mid");
-  s || (s = Math.random().toString(36).substring(2, 11), t.setAttribute("data-mid", s));
-  const g = parseInt(r.zIndex), l = {
-    backgroundColor: r.backgroundColor,
-    opacity: parseFloat(r.opacity),
-    zIndex: isNaN(g) ? 0 : g,
-    borderRadius: r.borderRadius,
-    borderColor: r.borderColor,
-    borderWidth: r.borderWidth
+  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), c = {
+    backgroundColor: s.backgroundColor,
+    opacity: parseFloat(s.opacity),
+    zIndex: isNaN(a) ? 0 : a,
+    borderRadius: s.borderRadius,
+    borderColor: s.borderColor,
+    borderWidth: s.borderWidth
   };
-  let p, a;
-  const c = [];
-  return Array.from(t.childNodes).forEach((h) => {
-    const u = b(h, e);
-    u && c.push(u);
+  let u, l;
+  const p = [];
+  return Array.from(e.childNodes).forEach((d) => {
+    const m = M(d, t);
+    m && p.push(m);
   }), {
-    id: s,
+    id: n,
     type: "BOX",
-    element: t,
+    element: e,
     rect: {
       x: i.left + window.scrollX,
       y: i.top + window.scrollY,
       width: i.width,
       height: i.height
     },
-    styles: l,
-    textContent: p,
-    textStyles: a,
-    dirtyMask: e,
-    children: c
+    styles: c,
+    textContent: u,
+    textStyles: l,
+    dirtyMask: t,
+    children: p
   };
 }
-class H {
-  constructor(e, t) {
+class k {
+  constructor(t, e) {
     o(this, "target");
     o(this, "renderer");
     o(this, "observer");
     o(this, "isDomDirty", !1);
     o(this, "isRunning", !1);
-    o(this, "pendingMask", T);
+    o(this, "pendingMask", v);
     o(this, "mutationTimer", null);
     o(this, "cssTimer", null);
-    o(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= y | x, this.cssTimer = window.setTimeout(() => {
+    o(this, "onTransitionFinished", (t) => {
+      this.target.contains(t.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= R | b, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
@@ -257,12 +417,12 @@ class H {
     o(this, "renderLoop", () => {
       this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
     });
-    this.target = e, this.renderer = t, this.observer = new MutationObserver((i) => {
-      let r = T;
-      for (const s of i)
-        s.type === "childList" ? r |= S : s.type === "attributes" && (s.attributeName === "style" || s.attributeName === "class") && (r |= y | x);
-      if (r !== T) {
-        if (this.pendingMask |= r, r & S) {
+    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.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -288,27 +448,51 @@ class H {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const e = b(this.target, this.pendingMask);
-    e && this.renderer.syncScene(e), this.pendingMask = T;
+    const t = M(this.target, this.pendingMask);
+    t && this.renderer.syncScene(t), this.pendingMask = v;
   }
 }
-class X {
-  constructor(e) {
+class P {
+  constructor(t, e) {
     o(this, "renderer");
     o(this, "syncer");
     o(this, "target");
-    const t = document.querySelector(e);
-    if (!t)
-      throw new Error(`[Mirage] Element not found: ${e}`);
-    this.target = t, this.renderer = new L(), this.renderer.mount(document.body), this.syncer = new H(this.target, this.renderer);
+    this.target = t;
+    let i;
+    if (e.mode === "duplicate" ? i = e.container ?? this.target.parentElement ?? void 0 : i = this.target.parentElement ?? 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);
   }
   start() {
     this.syncer.start();
   }
   stop() {
+    this.syncer.stop();
+  }
+  dispose() {
     this.syncer.stop(), this.renderer.dispose();
   }
 }
+class Y {
+  constructor(t, e = {}) {
+    o(this, "_engine");
+    if (!t)
+      throw new Error("[Mirage] Target element is required.");
+    this._engine = new P(t, e);
+  }
+  start() {
+    this._engine.start();
+  }
+  stop() {
+    this._engine.stop();
+  }
+  /**
+   * 엔진 종료 및 메모리 해제
+   */
+  destroy() {
+    this._engine.dispose();
+  }
+}
 export {
-  X as Mirage
+  Y as Mirage
 };

package/dist/mirage-engine.umd.js

@@ -1,2 +1,55 @@
-(function(m,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],f):(m=typeof globalThis<"u"?globalThis:m||self,f(m.MirageEngine={},m.THREE))})(this,function(m,f){"use strict";var X=Object.defineProperty;var k=(m,f,y)=>f in m?X(m,f,{enumerable:!0,configurable:!0,writable:!0,value:y}):m[f]=y;var o=(m,f,y)=>(k(m,typeof f!="symbol"?f+"":f,y),y);function y(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const d=y(f),S=0,b=1,C=2,D=4,E=8,R=16;function M(n,e,t){const i=e.split(`
-`),r=[];return i.forEach(s=>{const T=s.split(" ");let l=T[0];for(let w=1;w<T.length;w++){const a=T[w];n.measureText(l+" "+a).width<t?l+=" "+a:(r.push(l),l=a)}r.push(l)}),r}function F(n,e,t,i){const r=document.createElement("canvas"),s=r.getContext("2d");if(!s)throw new Error("[Mirage] Failed to create canvas context");const T=2,l=(window.devicePixelRatio||2)*T;r.width=t*l,r.height=i*l,s.scale(l,l),s.font=e.font,s.fillStyle=e.color,s.textBaseline="top",s.globalAlpha=1;const w=M(s,n,t),a=e.lineHeight;w.forEach((h,p)=>{const g=p*a+2;let u=0;e.textAlign==="center"?u=t/2:e.textAlign==="right"&&(u=t),s.textAlign=e.textAlign,s.fillText(h,u,g)});const c=new d.CanvasTexture(r);return c.colorSpace=d.SRGBColorSpace,c.minFilter=d.LinearFilter,c.magFilter=d.LinearFilter,c.needsUpdate=!0,c}class N{constructor(){o(this,"canvas");o(this,"scene");o(this,"camera");o(this,"renderer");o(this,"renderOrder",0);o(this,"meshMap",new Map);this.canvas=document.createElement("canvas"),this.scene=new d.Scene;const e=window.innerWidth,t=window.innerHeight;this.camera=new d.OrthographicCamera(e/-2,e/2,t/2,t/-2,1,1e3),this.camera.position.z=100,this.renderer=new d.WebGLRenderer({canvas:this.canvas,alpha:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(e,t)}mount(e){e.appendChild(this.canvas)}dispose(){try{this.renderer.dispose()}catch{}this.canvas.parentElement&&this.canvas.parentElement.removeChild(this.canvas)}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){this.renderOrder=0;const t=new Set;this.reconcileNode(e,t);for(const[i,r]of this.meshMap.entries())t.has(i)||(this.scene.remove(r),r.geometry.dispose(),r.material instanceof d.Material&&r.material.dispose(),this.meshMap.delete(i))}reconcileNode(e,t){t.add(e.element);let i=this.meshMap.get(e.element);if(!i){const r=new d.PlaneGeometry(1,1),s=new d.MeshBasicMaterial({transparent:!0});i=new d.Mesh(r,s),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 r of e.children)this.reconcileNode(r,t);else e.type==="TEXT"&&this.reconcileTextChild(i,e)}reconcileTextChild(e,t){var l,w;let i=e.children.find(a=>a.name==="TEXT_CHILD");const r=JSON.stringify(t.textStyles),s=(l=i==null?void 0:i.userData)==null?void 0:l.styleHash;if(!i||t.dirtyMask&R||r!==s){i&&((w=i.material.map)==null||w.dispose(),i.geometry.dispose(),e.remove(i));const a=F(t.textContent||"",t.textStyles,t.rect.width,t.rect.height),c=new d.PlaneGeometry(1,1),h=new d.MeshBasicMaterial({map:a,transparent:!0,side:d.FrontSide,color:16777215});i=new d.Mesh(c,h),i.name="TEXT_CHILD",i.userData={styleHash:r},e.add(i)}if(i){const a=e.userData.domRect,c=a.x+a.width/2,h=a.y+a.height/2,p=t.rect.x+t.rect.width/2,g=t.rect.y+t.rect.height/2,u=p-c,x=-(g-h);i.position.set(u,x,.005)}}updateMeshProperties(e,t){const{rect:i,styles:r}=t,s=this.renderer.getPixelRatio(),T=this.renderer.domElement.width/s,l=this.renderer.domElement.height/s;e.scale.set(i.width,i.height,1);const w=.001;this.renderOrder++,e.position.set(i.x-T/2+i.width/2,-i.y+l/2-i.height/2,r.zIndex+this.renderOrder*w);const a=e.material,c=r.backgroundColor;let h=c,p=1;if(c==="transparent"||c==="rgba(0, 0, 0, 0)")h="#ffffff",p=0;else if(c.startsWith("rgba")){const u=c.match(/[\d.]+/g);if(u&&u.length>=4){const x=u[0],I=u[1],_=u[2];p=parseFloat(u[3]),h=`rgb(${x}, ${I}, ${_})`}}const g=r.opacity*p;a.color.set(h),a.opacity=g,a.transparent=g<1}render(){this.renderer.render(this.scene,this.camera)}}function O(n){const e=document.createRange();e.selectNodeContents(n);const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}function z(n){const e=parseFloat(n.fontSize);let t=parseFloat(n.lineHeight);isNaN(t)&&(t=e*1.2);let i=parseFloat(n.letterSpacing);return isNaN(i)&&(i=0),{font:`${n.fontStyle} ${n.fontWeight} ${n.fontSize} ${n.fontFamily}`,color:n.color,textAlign:n.textAlign||"start",textBaseline:"alphabetic",direction:n.direction||"inherit",lineHeight:t,letterSpacing:i}}function v(n,e=b|C|D|R|E){if(n.nodeType===Node.TEXT_NODE){const h=n;if(!h.textContent||!h.textContent.trim())return null;const p=h.textContent.replace(/\s+/g," ").trim();if(p.length===0)return null;const g=O(h);if(g.width===0||g.height===0)return null;const u=h.parentElement,x=u?window.getComputedStyle(u):null;return x?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:h,rect:{x:g.left+window.scrollX,y:g.top+window.scrollY,width:g.width,height:g.height},styles:{backgroundColor:"transparent",opacity:parseFloat(x.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:p,textStyles:z(x),dirtyMask:e,children:[]}:null}const t=n,i=t.getBoundingClientRect(),r=window.getComputedStyle(t);if(i.width===0||i.height===0||r.display==="none")return null;let s=t.getAttribute("data-mid");s||(s=Math.random().toString(36).substring(2,11),t.setAttribute("data-mid",s));const T=parseInt(r.zIndex),l={backgroundColor:r.backgroundColor,opacity:parseFloat(r.opacity),zIndex:isNaN(T)?0:T,borderRadius:r.borderRadius,borderColor:r.borderColor,borderWidth:r.borderWidth};let w,a;const c=[];return Array.from(t.childNodes).forEach(h=>{const p=v(h,e);p&&c.push(p)}),{id:s,type:"BOX",element:t,rect:{x:i.left+window.scrollX,y:i.top+window.scrollY,width:i.width,height:i.height},styles:l,textContent:w,textStyles:a,dirtyMask:e,children:c}}class L{constructor(e,t){o(this,"target");o(this,"renderer");o(this,"observer");o(this,"isDomDirty",!1);o(this,"isRunning",!1);o(this,"pendingMask",S);o(this,"mutationTimer",null);o(this,"cssTimer",null);o(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=b|C,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});o(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});o(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=e,this.renderer=t,this.observer=new MutationObserver(i=>{let r=S;for(const s of i)s.type==="childList"?r|=E:s.type==="attributes"&&(s.attributeName==="style"||s.attributeName==="class")&&(r|=b|C);if(r!==S){if(this.pendingMask|=r,r&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 e=v(this.target,this.pendingMask);e&&this.renderer.syncScene(e),this.pendingMask=S}}class H{constructor(e){o(this,"renderer");o(this,"syncer");o(this,"target");const t=document.querySelector(e);if(!t)throw new Error(`[Mirage] Element not found: ${e}`);this.target=t,this.renderer=new N,this.renderer.mount(document.body),this.syncer=new L(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop(),this.renderer.dispose()}}m.Mirage=H,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
+(function(p,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],f):(p=typeof globalThis<"u"?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 o=(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 c=a[0];for(let u=1;u<a.length;u++){const l=a[u];r.measureText(c+" "+l).width<e?c+=" "+l:(s.push(c),c=l)}s.push(c)}),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 u=(window.devicePixelRatio||1)*s;n.width=e*u,n.height=i*u,a.scale(u,u),a.font=t.font,a.fillStyle=t.color,a.textBaseline="top",a.globalAlpha=1;const l=F(a,r,e),m=t.lineHeight;l.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 d=new h.CanvasTexture(n);return d.colorSpace=h.SRGBColorSpace,d.minFilter=h.LinearFilter,d.magFilter=h.LinearFilter,d.needsUpdate=!0,d}function b(r){return typeof r=="number"?r:parseFloat(r)||0}const A=`
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`,I=`
+  varying vec2 vUv;
+  
+  uniform vec2 uSize;
+  uniform float uRadius;
+  uniform float uBorderWidth;
+  uniform vec3 uColor;
+  uniform vec3 uBorderColor;
+  uniform float uOpacity;
+  uniform float uBgOpacity;
+
+  // SDF 박스 함수
+  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;
+  }
+
+  void main() {
+    vec2 p = (vUv - 0.5) * uSize;
+    vec2 halfSize = uSize * 0.5;
+    
+    float d = sdRoundedBox(p, halfSize, uRadius);
+    
+    float smoothEdge = 1.0; 
+
+    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;
+    }
+
+    vec3 color = uColor;
+    float totalAlpha = borderAlpha + fillAlpha;
+    
+    if (totalAlpha > 0.001) {
+       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    }
+    
+    float shapeAlpha = borderAlpha + (fillAlpha * uBgOpacity);
+    float finalOpacity = shapeAlpha * uOpacity;
+    
+    if (finalOpacity < 0.001) discard;
+
+    gl_FragColor = vec4(color, finalOpacity);
+  }
+`;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){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:r.opacity??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){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=t.opacity??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 c=r;c.map&&c.map.dispose();const u=O(i||"",e,s,n,a);c.map=u,c.needsUpdate=!0}}};class N{constructor(t,e,i){o(this,"canvas");o(this,"scene");o(this,"camera");o(this,"renderer");o(this,"renderOrder",0);o(this,"textQualityFactor",2);o(this,"mode","overlay");o(this,"customZIndex","9999");o(this,"target");o(this,"mountContainer");o(this,"targetRect");o(this,"meshMap",new Map);var a;this.target=t,this.mountContainer=i,this.mode=e.mode??"overlay",(a=e.style)!=null&&a.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(e.textQuality??"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,c]of this.meshMap.entries())n.has(a)||(this.scene.remove(c),c.geometry.dispose(),c.material instanceof h.Material&&c.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 c,u;let i=t.children.find(l=>l.name==="TEXT_CHILD");const s=JSON.stringify(e.textStyles),n=(c=i==null?void 0:i.userData)==null?void 0:c.styleHash;if(!i||e.dirtyMask&B||s!==n){i&&((u=i.material.map)==null||u.dispose(),i.geometry.dispose(),t.remove(i));const l=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,l),i.name="TEXT_CHILD",i.userData={styleHash:s},i.position.z=.005,t.add(i)}if(i){const l=t.userData.domRect,m=l.x+l.width/2,d=l.y+l.height/2,g=e.rect.x+e.rect.width/2,y=e.rect.y+e.rect.height/2,x=g-m,v=-(y-d);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,c=this.renderer.domElement.height/n;t.scale.set(i.width,i.height,1);const u=.001;this.renderOrder++;const l=this.targetRect.left+window.scrollX,m=this.targetRect.top+window.scrollY,d=i.x-l,g=i.y-m;t.position.set(d-a/2+i.width/2,-g+c/2-i.height/2,s.zIndex+this.renderOrder*u),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 d=r;if(!d.textContent||!d.textContent.trim())return null;const g=d.textContent.replace(/\s+/g," ").trim();if(g.length===0)return null;const y=_(d);if(y.width===0||y.height===0)return null;const x=d.parentElement,v=x?window.getComputedStyle(x):null;return v?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:d,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),c={backgroundColor:s.backgroundColor,opacity:parseFloat(s.opacity),zIndex:isNaN(a)?0:a,borderRadius:s.borderRadius,borderColor:s.borderColor,borderWidth:s.borderWidth};let u,l;const m=[];return Array.from(e.childNodes).forEach(d=>{const g=D(d,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:c,textContent:u,textStyles:l,dirtyMask:t,children:m}}class P{constructor(t,e){o(this,"target");o(this,"renderer");o(this,"observer");o(this,"isDomDirty",!1);o(this,"isRunning",!1);o(this,"pendingMask",T);o(this,"mutationTimer",null);o(this,"cssTimer",null);o(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))});o(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});o(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){o(this,"renderer");o(this,"syncer");o(this,"target");this.target=t;let i;if(e.mode==="duplicate"?i=e.container??this.target.parentElement??void 0:i=this.target.parentElement??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={}){o(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"})});

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

@@ -0,0 +1,10 @@
+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/Mirage.d.ts

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

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

@@ -1,13 +1,21 @@
-import { SceneNode } from '../types';
+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();
-    mount(parent: HTMLElement): void;
+    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;

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

@@ -0,0 +1,19 @@
+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/config.d.ts

@@ -0,0 +1,18 @@
+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 {};

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

@@ -0,0 +1,6 @@
+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;

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

@@ -1,41 +1,3 @@
-export type NodeType = "BOX" | "TEXT";
-export interface NodeRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export interface BoxStyles {
-    backgroundColor: string;
-    opacity: number;
-    zIndex: number;
-    borderRadius: string;
-    borderColor: string;
-    borderWidth: string;
-}
-export interface TextStyles {
-    font: string;
-    color: string;
-    textAlign: CanvasTextAlign;
-    textBaseline: CanvasTextBaseline;
-    direction: CanvasDirection;
-    lineHeight: number;
-    letterSpacing: number;
-}
-export interface SceneNode {
-    id: string;
-    type: NodeType;
-    element: HTMLElement;
-    rect: NodeRect;
-    styles: BoxStyles;
-    textContent?: string;
-    textStyles?: TextStyles;
-    dirtyMask: number;
-    children: SceneNode[];
-}
-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;
+export * from './config';
+export * from './common';
+export * from './flags';

package/dist/src/utils/math.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Converts DOM coordinates (Top-Left 0,0) to WebGL coordinates (Center 0,0).
+ * @param x - The x coordinate of the DOM element (Left)
+ * @param y - The y coordinate of the DOM element (Top)
+ * @param width - The width of the DOM element
+ * @param height - The height of the DOM element
+ * @param canvasWidth - The total width of the canvas
+ * @param canvasHeight - The total height of the canvas
+ */
+export declare function domToWebGL(x: number, y: number, width: number, height: number, canvasWidth: number, canvasHeight: number): {
+    x: number;
+    y: number;
+};

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirage-engine",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "An engine that mirrors HTML DOM elements to a WebGL scene in real-time.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -20,10 +20,8 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "prepublishOnly": "npm run build"
+  "dependencies": {
+    "@mirage-engine/painter": "0.1.0"
   },
   "peerDependencies": {
     "three": "^0.150.0"
@@ -42,6 +40,15 @@
     "threejs",
     "typescript"
   ],
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "author": "dltldn333@gmail.com",
-  "license": "MIT"
-}
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build"
+  }
+}

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

@@ -1,4 +0,0 @@
-export declare function domToWebGL(x: number, y: number, canvasWidth: number, canvasHeight: number): {
-    x: number;
-    y: number;
-};

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

@@ -1,3 +0,0 @@
-import { TextStyles } from '../types';
-import * as THREE from "three";
-export declare function createTextTexture(text: string, styles: TextStyles, rectWidth: number, rectHeight: number): THREE.CanvasTexture;