mirage-engine 0.2.4 → 0.2.6

package/README.md

@@ -3,9 +3,11 @@
 > **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)
+[![NPM Downloads](https://img.shields.io/npm/dm/mirage-engine.svg)](https://www.npmjs.org/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
@@ -19,8 +21,11 @@ npm install mirage-engine
 ```ts
 import { Mirage } from 'mirage-engine';
 
-const engine = new Mirage("#target");
-engine.start();
+const target = document.querySelector("#target") as HTMLElement;
+
+const mirage = new Mirage(target);
+
+mirage.start();
 ```
 
 **License | MIT © dltldn333**

package/dist/mirage-engine.js

@@ -1,221 +1,297 @@
-var b = Object.defineProperty;
-var D = (i, e, t) => e in i ? b(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var o = (i, e, t) => (D(i, typeof e != "symbol" ? e + "" : e, t), t);
-import * as c from "three";
-const g = 0, T = 1, y = 2, C = 4, w = 8, x = 16;
-function N(i, e, t, s) {
-  const n = document.createElement("canvas"), r = n.getContext("2d");
-  if (!r)
+var L = Object.defineProperty;
+var z = (r, t, e) => t in r ? L(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var a = (r, t, e) => (z(r, typeof t != "symbol" ? t + "" : t, e), e);
+import * as g from "three";
+const x = 0, R = 1, v = 2, I = 4, C = 8, S = 16;
+function N(r, t, e) {
+  const i = t.split(`
+`), s = [];
+  return i.forEach((n) => {
+    const o = n.split(" ");
+    let c = o[0];
+    for (let d = 1; d < o.length; d++) {
+      const l = o[d];
+      r.measureText(c + " " + l).width < e ? c += " " + l : (s.push(c), c = l);
+    }
+    s.push(c);
+  }), s;
+}
+function X(r, t, e, i, s = 2) {
+  const n = document.createElement("canvas"), o = n.getContext("2d");
+  if (!o)
     throw new Error("[Mirage] Failed to create canvas context");
-  const a = window.devicePixelRatio || 2;
-  n.width = t * a, n.height = s * a, r.scale(a, a), r.font = e.font, r.fillStyle = e.color, r.textAlign = e.textAlign, r.direction = e.direction, r.textBaseline = "middle";
-  let l = 0;
-  e.textAlign === "center" && (l = t / 2), e.textAlign === "right" && (l = t);
-  const m = s / 2;
-  r.fillText(i, l, m);
-  const h = new c.CanvasTexture(n);
-  return h.colorSpace = c.SRGBColorSpace, h.minFilter = c.LinearFilter, h.needsUpdate = !0, h;
+  const d = (window.devicePixelRatio || 1) * s;
+  n.width = e * d, n.height = i * d, o.scale(d, d), o.font = t.font, o.fillStyle = t.color, o.textBaseline = "top", o.globalAlpha = 1;
+  const l = N(o, r, e), f = t.lineHeight;
+  l.forEach((y, u) => {
+    const p = u * f + 2;
+    let m = 0;
+    t.textAlign === "center" ? m = e / 2 : t.textAlign === "right" && (m = e), o.textAlign = t.textAlign, o.fillText(y, m, p);
+  });
+  const h = new g.CanvasTexture(n);
+  return h.colorSpace = g.SRGBColorSpace, h.minFilter = g.LinearFilter, h.magFilter = g.LinearFilter, h.needsUpdate = !0, h;
 }
-class R {
-  constructor() {
-    o(this, "canvas");
-    o(this, "scene");
-    o(this, "camera");
-    o(this, "renderer");
-    o(this, "renderOrder", 0);
-    o(this, "meshMap", /* @__PURE__ */ new Map());
-    this.canvas = document.createElement("canvas"), this.scene = new c.Scene();
-    const e = window.innerWidth, t = window.innerHeight;
-    this.camera = new c.OrthographicCamera(
-      e / -2,
-      e / 2,
-      t / 2,
-      t / -2,
+class _ {
+  constructor(t, e, i) {
+    a(this, "canvas");
+    a(this, "scene");
+    a(this, "camera");
+    a(this, "renderer");
+    a(this, "renderOrder", 0);
+    a(this, "textQualityFactor", 2);
+    a(this, "mode", "overlay");
+    a(this, "customZIndex", "9999");
+    a(this, "target");
+    a(this, "mountContainer");
+    a(this, "targetRect");
+    a(this, "meshMap", /* @__PURE__ */ new Map());
+    var o;
+    this.target = t, this.mountContainer = i, this.mode = e.mode ?? "overlay", (o = e.style) != null && o.zIndex && (this.customZIndex = e.style.zIndex), this.canvas = document.createElement("canvas"), this.scene = new g.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const s = this.targetRect.width, n = this.targetRect.height;
+    this.camera = new g.OrthographicCamera(
+      s / -2,
+      s / 2,
+      n / 2,
+      n / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.renderer = new c.WebGLRenderer({
+    ), this.camera.position.z = 100, this.renderer = new g.WebGLRenderer({
       canvas: this.canvas,
-      alpha: !0
-    }), 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 [s, n] of this.meshMap.entries())
-      t.has(s) || (this.scene.remove(n), n.geometry.dispose(), n.material instanceof c.Material && n.material.dispose(), this.meshMap.delete(s));
+  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 [o, c] of this.meshMap.entries())
+      n.has(o) || (this.scene.remove(c), c.geometry.dispose(), c.material instanceof g.Material && c.material.dispose(), this.meshMap.delete(o));
   }
-  reconcileNode(e, t) {
-    var s, n;
-    if (e.type === "BOX") {
-      t.add(e.element);
-      let r = this.meshMap.get(e.element);
-      if (!r) {
-        const a = new c.PlaneGeometry(1, 1), l = new c.MeshBasicMaterial({ transparent: !0 });
-        r = new c.Mesh(a, l), this.scene.add(r), this.meshMap.set(e.element, r);
-      }
-      this.updateMeshProperties(r, e);
-      for (const a of e.children)
-        this.reconcileNode(a, t);
+  reconcileNode(t, e) {
+    e.add(t.element);
+    let i = this.meshMap.get(t.element);
+    if (!i) {
+      const s = new g.PlaneGeometry(1, 1), n = new g.MeshBasicMaterial({ transparent: !0 });
+      i = new g.Mesh(s, n), t.type === "TEXT" && (i.name = "BG_MESH"), this.scene.add(i), this.meshMap.set(t.element, i);
     }
-    if (e.type === "TEXT") {
-      t.add(e.element);
-      let r = this.meshMap.get(e.element);
-      if (!r) {
-        const d = new c.PlaneGeometry(1, 1), u = new c.MeshBasicMaterial({ transparent: !0 });
-        r = new c.Mesh(d, u), r.name = "BG_MESH", this.scene.add(r), this.meshMap.set(e.element, r);
-      }
-      this.updateMeshProperties(r, e);
-      let a = r.children.find(
-        (d) => d.name === "TEXT_CHILD"
-      );
-      const l = JSON.stringify(e.textStyles), m = (s = a == null ? void 0 : a.userData) == null ? void 0 : s.styleHash, h = e.dirtyMask & x;
-      if (!a || h || l !== m) {
-        a && ((n = a.material.map) == null || n.dispose(), a.geometry.dispose(), r.remove(a));
-        const d = N(
-          e.textContent || "",
-          e.textStyles,
-          e.rect.width,
-          e.rect.height
-        ), u = new c.PlaneGeometry(1, 1), f = new c.MeshBasicMaterial({
-          map: d,
-          transparent: !0,
-          side: c.FrontSide,
-          color: 16777215,
-          opacity: 1
-        });
-        a = new c.Mesh(u, f), a.name = "TEXT_CHILD", a.userData = { styleHash: l }, a.position.z = 5e-3, r.add(a);
-      }
+    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, d;
+    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 & S || s !== n) {
+      i && ((d = i.material.map) == null || d.dispose(), i.geometry.dispose(), t.remove(i));
+      const l = X(
+        e.textContent || "",
+        e.textStyles,
+        e.rect.width,
+        e.rect.height,
+        this.textQualityFactor
+      ), f = new g.PlaneGeometry(1, 1), h = new g.MeshBasicMaterial({
+        map: l,
+        transparent: !0,
+        side: g.FrontSide,
+        color: 16777215
+      });
+      i = new g.Mesh(f, h), i.name = "TEXT_CHILD", i.userData = { styleHash: s }, t.add(i);
+    }
+    if (i) {
+      const l = t.userData.domRect, f = l.x + l.width / 2, h = l.y + l.height / 2, y = e.rect.x + e.rect.width / 2, u = e.rect.y + e.rect.height / 2, p = y - f, m = -(u - h);
+      i.position.set(p, m, 5e-3);
     }
   }
-  updateMeshProperties(e, t) {
-    const { rect: s, styles: n } = t, r = this.renderer.domElement.width, a = this.renderer.domElement.height;
-    e.scale.set(s.width, s.height, 1);
-    const l = 1e-3;
-    this.renderOrder++, e.position.set(
-      s.x - r / 2 + s.width / 2,
-      -s.y + a / 2 - s.height / 2,
-      n.zIndex + this.renderOrder * l
+  updateMeshProperties(t, e) {
+    const { rect: i, styles: s } = e, n = this.renderer.getPixelRatio(), o = this.renderer.domElement.width / n, c = this.renderer.domElement.height / n;
+    t.scale.set(i.width, i.height, 1);
+    const d = 1e-3;
+    this.renderOrder++;
+    const l = this.targetRect.left + window.scrollX, f = this.targetRect.top + window.scrollY, h = i.x - l, y = i.y - f;
+    t.position.set(
+      h - o / 2 + i.width / 2,
+      -y + c / 2 - i.height / 2,
+      s.zIndex + this.renderOrder * d
     );
-    const m = e.material, h = n.backgroundColor;
-    let p = h, d = 1;
-    if (h === "transparent" || h === "rgba(0, 0, 0, 0)")
-      p = "#ffffff", d = 0;
-    else if (h.startsWith("rgba")) {
-      const f = h.match(/[\d.]+/g);
-      if (f && f.length >= 4) {
-        const E = f[0], M = f[1], v = f[2];
-        d = parseFloat(f[3]), p = `rgb(${E}, ${M}, ${v})`;
+    const u = t.material, p = s.backgroundColor;
+    let m = p, T = 1;
+    if (p === "transparent" || p === "rgba(0, 0, 0, 0)")
+      m = "#ffffff", T = 0;
+    else if (p.startsWith("rgba")) {
+      const w = p.match(/[\d.]+/g);
+      if (w && w.length >= 4) {
+        const M = w[0], D = w[1], F = w[2];
+        T = parseFloat(w[3]), m = `rgb(${M}, ${D}, ${F})`;
       }
     }
-    const u = n.opacity * d;
-    m.color.set(p), m.opacity = u, m.transparent = u < 1;
+    const b = s.opacity * T;
+    u.color.set(m), u.opacity = b, u.transparent = b < 1;
   }
   render() {
     this.renderer.render(this.scene, this.camera);
   }
 }
-function F(i) {
-  var e;
-  return i.nodeType === Node.TEXT_NODE && (((e = i.textContent) == null ? void 0 : e.trim().length) || 0) > 0;
-}
-function z(i) {
-  const e = Array.from(i.childNodes);
-  return e.length === 0 || e.some(
-    (n) => n.nodeType === Node.ELEMENT_NODE
-  ) ? !1 : e.some(F);
+function k(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 L(i) {
-  const e = parseFloat(i.fontSize);
-  let t = parseFloat(i.lineHeight);
-  isNaN(t) && (t = e * 1.2);
-  let s = parseFloat(i.letterSpacing);
-  return isNaN(s) && (s = 0), {
-    font: `${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,
-    color: i.color,
-    textAlign: i.textAlign || "start",
+function O(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: i.direction || "inherit",
-    lineHeight: t,
-    letterSpacing: s
+    direction: r.direction || "inherit",
+    lineHeight: e,
+    letterSpacing: i
   };
 }
-function S(i, e = T | y | C | x | w) {
-  const t = i.getBoundingClientRect(), s = window.getComputedStyle(i);
-  if (t.width === 0 || t.height === 0 || s.display === "none")
+function E(r, t = R | v | I | S | C) {
+  if (r.nodeType === Node.TEXT_NODE) {
+    const h = r;
+    if (!h.textContent || !h.textContent.trim())
+      return null;
+    const y = h.textContent.replace(/\s+/g, " ").trim();
+    if (y.length === 0)
+      return null;
+    const u = k(h);
+    if (u.width === 0 || u.height === 0)
+      return null;
+    const p = h.parentElement, m = p ? window.getComputedStyle(p) : null;
+    return m ? {
+      id: Math.random().toString(36).substring(2, 9),
+      type: "TEXT",
+      element: h,
+      rect: {
+        x: u.left + window.scrollX,
+        y: u.top + window.scrollY,
+        width: u.width,
+        height: u.height
+      },
+      styles: {
+        backgroundColor: "transparent",
+        opacity: parseFloat(m.opacity),
+        zIndex: 0,
+        borderRadius: "0px",
+        borderColor: "transparent",
+        borderWidth: "0px"
+      },
+      textContent: y,
+      textStyles: O(m),
+      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 = i.getAttribute("data-mid");
-  n || (n = Math.random().toString(36).substring(2, 11), i.setAttribute("data-mid", n));
-  const r = parseInt(s.zIndex), a = {
+  let n = e.getAttribute("data-mid");
+  n || (n = Math.random().toString(36).substring(2, 11), e.setAttribute("data-mid", n));
+  const o = parseInt(s.zIndex), c = {
     backgroundColor: s.backgroundColor,
     opacity: parseFloat(s.opacity),
-    zIndex: isNaN(r) ? 0 : r,
+    zIndex: isNaN(o) ? 0 : o,
     borderRadius: s.borderRadius,
     borderColor: s.borderColor,
     borderWidth: s.borderWidth
   };
-  let l = "BOX", m, h;
-  const p = [];
-  return z(i) ? (l = "TEXT", m = i.textContent || "", h = L(s)) : Array.from(i.children).forEach((d) => {
-    const u = S(d, e);
-    u && p.push(u);
+  let d, l;
+  const f = [];
+  return Array.from(e.childNodes).forEach((h) => {
+    const y = E(h, t);
+    y && f.push(y);
   }), {
     id: n,
-    type: l,
-    element: i,
+    type: "BOX",
+    element: e,
     rect: {
-      x: t.left + window.scrollX,
-      y: t.top + window.scrollY,
-      width: t.width,
-      height: t.height
+      x: i.left + window.scrollX,
+      y: i.top + window.scrollY,
+      width: i.width,
+      height: i.height
     },
-    styles: a,
-    textContent: m,
-    textStyles: h,
-    dirtyMask: e,
-    children: p
+    styles: c,
+    textContent: d,
+    textStyles: l,
+    dirtyMask: t,
+    children: f
   };
 }
-class O {
-  constructor(e, t) {
-    o(this, "target");
-    o(this, "renderer");
-    o(this, "observer");
-    o(this, "isDomDirty", !1);
-    o(this, "isRunning", !1);
-    o(this, "pendingMask", g);
-    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 |= T | y, this.cssTimer = window.setTimeout(() => {
+class Y {
+  constructor(t, e) {
+    a(this, "target");
+    a(this, "renderer");
+    a(this, "observer");
+    a(this, "isDomDirty", !1);
+    a(this, "isRunning", !1);
+    a(this, "pendingMask", x);
+    a(this, "mutationTimer", null);
+    a(this, "cssTimer", null);
+    a(this, "onTransitionFinished", (t) => {
+      this.target.contains(t.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= R | v, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
-    o(this, "onWindowResize", () => {
+    a(this, "onWindowResize", () => {
       this.renderer.setSize(window.innerWidth, window.innerHeight), this.isDomDirty = !0;
     });
-    o(this, "renderLoop", () => {
+    a(this, "renderLoop", () => {
       this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
     });
-    this.target = e, this.renderer = t, this.observer = new MutationObserver((s) => {
-      let n = g;
-      for (const r of s)
-        r.type === "childList" ? n |= w : r.type === "attributes" && (r.attributeName === "style" || r.attributeName === "class") && (n |= T | y);
-      if (n !== g) {
-        if (this.pendingMask |= n, n & w) {
+    this.target = t, this.renderer = e, this.observer = new MutationObserver((i) => {
+      let s = x;
+      for (const n of i)
+        n.type === "childList" ? s |= C : n.type === "attributes" && (n.attributeName === "style" || n.attributeName === "class") && (s |= R | v);
+      if (s !== x) {
+        if (this.pendingMask |= s, s & C) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -241,27 +317,51 @@ class O {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const e = S(this.target, this.pendingMask);
-    e && this.renderer.syncScene(e), this.pendingMask = g;
+    const t = E(this.target, this.pendingMask);
+    t && this.renderer.syncScene(t), this.pendingMask = x;
   }
 }
-class _ {
-  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 R(), this.renderer.mount(document.body), this.syncer = new O(this.target, this.renderer);
+class H {
+  constructor(t, e) {
+    a(this, "renderer");
+    a(this, "syncer");
+    a(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 _(this.target, e, i), this.renderer.mount(), this.syncer = new Y(this.target, this.renderer);
   }
   start() {
     this.syncer.start();
   }
   stop() {
+    this.syncer.stop();
+  }
+  dispose() {
     this.syncer.stop(), this.renderer.dispose();
   }
 }
+class P {
+  constructor(t, e = {}) {
+    a(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();
+  }
+}
 export {
-  _ as Mirage
+  P as Mirage
 };

package/dist/mirage-engine.umd.js

@@ -1 +1,2 @@
-(function(l,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],d):(l=typeof globalThis<"u"?globalThis:l||self,d(l.MirageEngine={},l.THREE))})(this,function(l,d){"use strict";var H=Object.defineProperty;var k=(l,d,T)=>d in l?H(l,d,{enumerable:!0,configurable:!0,writable:!0,value:T}):l[d]=T;var o=(l,d,T)=>(k(l,typeof d!="symbol"?d+"":d,T),T);function T(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const c=T(d),w=0,S=1,x=2,v=4,E=8,M=16;function D(i,e,t,r){const s=document.createElement("canvas"),n=s.getContext("2d");if(!n)throw new Error("[Mirage] Failed to create canvas context");const a=window.devicePixelRatio||2;s.width=t*a,s.height=r*a,n.scale(a,a),n.font=e.font,n.fillStyle=e.color,n.textAlign=e.textAlign,n.direction=e.direction,n.textBaseline="middle";let m=0;e.textAlign==="center"&&(m=t/2),e.textAlign==="right"&&(m=t);const f=r/2;n.fillText(i,m,f);const h=new c.CanvasTexture(s);return h.colorSpace=c.SRGBColorSpace,h.minFilter=c.LinearFilter,h.needsUpdate=!0,h}class C{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 c.Scene;const e=window.innerWidth,t=window.innerHeight;this.camera=new c.OrthographicCamera(e/-2,e/2,t/2,t/-2,1,1e3),this.camera.position.z=100,this.renderer=new c.WebGLRenderer({canvas:this.canvas,alpha:!0}),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[r,s]of this.meshMap.entries())t.has(r)||(this.scene.remove(s),s.geometry.dispose(),s.material instanceof c.Material&&s.material.dispose(),this.meshMap.delete(r))}reconcileNode(e,t){var r,s;if(e.type==="BOX"){t.add(e.element);let n=this.meshMap.get(e.element);if(!n){const a=new c.PlaneGeometry(1,1),m=new c.MeshBasicMaterial({transparent:!0});n=new c.Mesh(a,m),this.scene.add(n),this.meshMap.set(e.element,n)}this.updateMeshProperties(n,e);for(const a of e.children)this.reconcileNode(a,t)}if(e.type==="TEXT"){t.add(e.element);let n=this.meshMap.get(e.element);if(!n){const u=new c.PlaneGeometry(1,1),p=new c.MeshBasicMaterial({transparent:!0});n=new c.Mesh(u,p),n.name="BG_MESH",this.scene.add(n),this.meshMap.set(e.element,n)}this.updateMeshProperties(n,e);let a=n.children.find(u=>u.name==="TEXT_CHILD");const m=JSON.stringify(e.textStyles),f=(r=a==null?void 0:a.userData)==null?void 0:r.styleHash,h=e.dirtyMask&M;if(!a||h||m!==f){a&&((s=a.material.map)==null||s.dispose(),a.geometry.dispose(),n.remove(a));const u=D(e.textContent||"",e.textStyles,e.rect.width,e.rect.height),p=new c.PlaneGeometry(1,1),g=new c.MeshBasicMaterial({map:u,transparent:!0,side:c.FrontSide,color:16777215,opacity:1});a=new c.Mesh(p,g),a.name="TEXT_CHILD",a.userData={styleHash:m},a.position.z=.005,n.add(a)}}}updateMeshProperties(e,t){const{rect:r,styles:s}=t,n=this.renderer.domElement.width,a=this.renderer.domElement.height;e.scale.set(r.width,r.height,1);const m=.001;this.renderOrder++,e.position.set(r.x-n/2+r.width/2,-r.y+a/2-r.height/2,s.zIndex+this.renderOrder*m);const f=e.material,h=s.backgroundColor;let y=h,u=1;if(h==="transparent"||h==="rgba(0, 0, 0, 0)")y="#ffffff",u=0;else if(h.startsWith("rgba")){const g=h.match(/[\d.]+/g);if(g&&g.length>=4){const L=g[0],_=g[1],I=g[2];u=parseFloat(g[3]),y=`rgb(${L}, ${_}, ${I})`}}const p=s.opacity*u;f.color.set(y),f.opacity=p,f.transparent=p<1}render(){this.renderer.render(this.scene,this.camera)}}function N(i){var e;return i.nodeType===Node.TEXT_NODE&&(((e=i.textContent)==null?void 0:e.trim().length)||0)>0}function R(i){const e=Array.from(i.childNodes);return e.length===0||e.some(s=>s.nodeType===Node.ELEMENT_NODE)?!1:e.some(N)}function O(i){const e=parseFloat(i.fontSize);let t=parseFloat(i.lineHeight);isNaN(t)&&(t=e*1.2);let r=parseFloat(i.letterSpacing);return isNaN(r)&&(r=0),{font:`${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,color:i.color,textAlign:i.textAlign||"start",textBaseline:"alphabetic",direction:i.direction||"inherit",lineHeight:t,letterSpacing:r}}function b(i,e=S|x|v|M|E){const t=i.getBoundingClientRect(),r=window.getComputedStyle(i);if(t.width===0||t.height===0||r.display==="none")return null;let s=i.getAttribute("data-mid");s||(s=Math.random().toString(36).substring(2,11),i.setAttribute("data-mid",s));const n=parseInt(r.zIndex),a={backgroundColor:r.backgroundColor,opacity:parseFloat(r.opacity),zIndex:isNaN(n)?0:n,borderRadius:r.borderRadius,borderColor:r.borderColor,borderWidth:r.borderWidth};let m="BOX",f,h;const y=[];return R(i)?(m="TEXT",f=i.textContent||"",h=O(r)):Array.from(i.children).forEach(u=>{const p=b(u,e);p&&y.push(p)}),{id:s,type:m,element:i,rect:{x:t.left+window.scrollX,y:t.top+window.scrollY,width:t.width,height:t.height},styles:a,textContent:f,textStyles:h,dirtyMask:e,children:y}}class z{constructor(e,t){o(this,"target");o(this,"renderer");o(this,"observer");o(this,"isDomDirty",!1);o(this,"isRunning",!1);o(this,"pendingMask",w);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|=S|x,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(r=>{let s=w;for(const n of r)n.type==="childList"?s|=E:n.type==="attributes"&&(n.attributeName==="style"||n.attributeName==="class")&&(s|=S|x);if(s!==w){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 e=b(this.target,this.pendingMask);e&&this.renderer.syncScene(e),this.pendingMask=w}}class F{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 C,this.renderer.mount(document.body),this.syncer=new z(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop(),this.renderer.dispose()}}l.Mirage=F,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(m,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],p):(m=typeof globalThis<"u"?globalThis:m||self,p(m.MirageEngine={},m.THREE))})(this,function(m,p){"use strict";var A=Object.defineProperty;var $=(m,p,T)=>p in m?A(m,p,{enumerable:!0,configurable:!0,writable:!0,value:T}):m[p]=T;var a=(m,p,T)=>($(m,typeof p!="symbol"?p+"":p,T),T);function T(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=T(p),v=0,b=1,C=2,z=4,S=8,M=16;function L(r,e,t){const i=e.split(`
+`),s=[];return i.forEach(n=>{const o=n.split(" ");let h=o[0];for(let u=1;u<o.length;u++){const l=o[u];r.measureText(h+" "+l).width<t?h+=" "+l:(s.push(h),h=l)}s.push(h)}),s}function N(r,e,t,i,s=2){const n=document.createElement("canvas"),o=n.getContext("2d");if(!o)throw new Error("[Mirage] Failed to create canvas context");const u=(window.devicePixelRatio||1)*s;n.width=t*u,n.height=i*u,o.scale(u,u),o.font=e.font,o.fillStyle=e.color,o.textBaseline="top",o.globalAlpha=1;const l=L(o,r,t),w=e.lineHeight;l.forEach((x,g)=>{const y=g*w+2;let f=0;e.textAlign==="center"?f=t/2:e.textAlign==="right"&&(f=t),o.textAlign=e.textAlign,o.fillText(x,f,y)});const c=new d.CanvasTexture(n);return c.colorSpace=d.SRGBColorSpace,c.minFilter=d.LinearFilter,c.magFilter=d.LinearFilter,c.needsUpdate=!0,c}class I{constructor(e,t,i){a(this,"canvas");a(this,"scene");a(this,"camera");a(this,"renderer");a(this,"renderOrder",0);a(this,"textQualityFactor",2);a(this,"mode","overlay");a(this,"customZIndex","9999");a(this,"target");a(this,"mountContainer");a(this,"targetRect");a(this,"meshMap",new Map);var o;this.target=e,this.mountContainer=i,this.mode=t.mode??"overlay",(o=t.style)!=null&&o.zIndex&&(this.customZIndex=t.style.zIndex),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(t.textQuality??"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.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(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.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[o,h]of this.meshMap.entries())n.has(o)||(this.scene.remove(h),h.geometry.dispose(),h.material instanceof d.Material&&h.material.dispose(),this.meshMap.delete(o))}reconcileNode(e,t){t.add(e.element);let i=this.meshMap.get(e.element);if(!i){const s=new d.PlaneGeometry(1,1),n=new d.MeshBasicMaterial({transparent:!0});i=new d.Mesh(s,n),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 h,u;let i=e.children.find(l=>l.name==="TEXT_CHILD");const s=JSON.stringify(t.textStyles),n=(h=i==null?void 0:i.userData)==null?void 0:h.styleHash;if(!i||t.dirtyMask&M||s!==n){i&&((u=i.material.map)==null||u.dispose(),i.geometry.dispose(),e.remove(i));const l=N(t.textContent||"",t.textStyles,t.rect.width,t.rect.height,this.textQualityFactor),w=new d.PlaneGeometry(1,1),c=new d.MeshBasicMaterial({map:l,transparent:!0,side:d.FrontSide,color:16777215});i=new d.Mesh(w,c),i.name="TEXT_CHILD",i.userData={styleHash:s},e.add(i)}if(i){const l=e.userData.domRect,w=l.x+l.width/2,c=l.y+l.height/2,x=t.rect.x+t.rect.width/2,g=t.rect.y+t.rect.height/2,y=x-w,f=-(g-c);i.position.set(y,f,.005)}}updateMeshProperties(e,t){const{rect:i,styles:s}=t,n=this.renderer.getPixelRatio(),o=this.renderer.domElement.width/n,h=this.renderer.domElement.height/n;e.scale.set(i.width,i.height,1);const u=.001;this.renderOrder++;const l=this.targetRect.left+window.scrollX,w=this.targetRect.top+window.scrollY,c=i.x-l,x=i.y-w;e.position.set(c-o/2+i.width/2,-x+h/2-i.height/2,s.zIndex+this.renderOrder*u);const g=e.material,y=s.backgroundColor;let f=y,E=1;if(y==="transparent"||y==="rgba(0, 0, 0, 0)")f="#ffffff",E=0;else if(y.startsWith("rgba")){const R=y.match(/[\d.]+/g);if(R&&R.length>=4){const P=R[0],Y=R[1],B=R[2];E=parseFloat(R[3]),f=`rgb(${P}, ${Y}, ${B})`}}const F=s.opacity*E;g.color.set(f),g.opacity=F,g.transparent=F<1}render(){this.renderer.render(this.scene,this.camera)}}function O(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 _(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 D(r,e=b|C|z|M|S){if(r.nodeType===Node.TEXT_NODE){const c=r;if(!c.textContent||!c.textContent.trim())return null;const x=c.textContent.replace(/\s+/g," ").trim();if(x.length===0)return null;const g=O(c);if(g.width===0||g.height===0)return null;const y=c.parentElement,f=y?window.getComputedStyle(y):null;return f?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:c,rect:{x:g.left+window.scrollX,y:g.top+window.scrollY,width:g.width,height:g.height},styles:{backgroundColor:"transparent",opacity:parseFloat(f.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:x,textStyles:_(f),dirtyMask:e,children:[]}:null}const t=r,i=t.getBoundingClientRect(),s=window.getComputedStyle(t);if(i.width===0||i.height===0||s.display==="none")return null;let n=t.getAttribute("data-mid");n||(n=Math.random().toString(36).substring(2,11),t.setAttribute("data-mid",n));const o=parseInt(s.zIndex),h={backgroundColor:s.backgroundColor,opacity:parseFloat(s.opacity),zIndex:isNaN(o)?0:o,borderRadius:s.borderRadius,borderColor:s.borderColor,borderWidth:s.borderWidth};let u,l;const w=[];return Array.from(t.childNodes).forEach(c=>{const x=D(c,e);x&&w.push(x)}),{id:n,type:"BOX",element:t,rect:{x:i.left+window.scrollX,y:i.top+window.scrollY,width:i.width,height:i.height},styles:h,textContent:u,textStyles:l,dirtyMask:e,children:w}}class k{constructor(e,t){a(this,"target");a(this,"renderer");a(this,"observer");a(this,"isDomDirty",!1);a(this,"isRunning",!1);a(this,"pendingMask",v);a(this,"mutationTimer",null);a(this,"cssTimer",null);a(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))});a(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});a(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 s=v;for(const n of i)n.type==="childList"?s|=S:n.type==="attributes"&&(n.attributeName==="style"||n.attributeName==="class")&&(s|=b|C);if(s!==v){if(this.pendingMask|=s,s&S){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=D(this.target,this.pendingMask);e&&this.renderer.syncScene(e),this.pendingMask=v}}class X{constructor(e,t){a(this,"renderer");a(this,"syncer");a(this,"target");this.target=e;let i;if(t.mode==="duplicate"?i=t.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 I(this.target,t,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 H{constructor(e,t={}){a(this,"_engine");if(!e)throw new Error("[Mirage] Target element is required.");this._engine=new X(e,t)}start(){this._engine.start()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}}m.Mirage=H,Object.defineProperty(m,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/dom/Extractor.d.ts

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

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

@@ -1,17 +1,26 @@
-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;
     private reconcileNode;
+    private reconcileTextChild;
     private updateMeshProperties;
     render(): void;
 }

package/dist/src/renderer/utils/TextGenerator.d.ts

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

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

@@ -0,0 +1,35 @@
+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[];
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirage-engine",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "An engine that mirrors HTML DOM elements to a WebGL scene in real-time.",
   "type": "module",
   "types": "./dist/index.d.ts",

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;