@mirage-engine/core 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @mirage-engine/core
+
+## 0.0.2
+
+### Patch Changes
+
+- a05073c: core package separation
+- Updated dependencies [a05073c]
+  - @mirage-engine/painter@0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 siwoo lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+<p align="center">
+<a href="https://www.npmjs.com/package/mirage-engine">
+ <img  src="https://raw.githubusercontent.com/dltldn333/MirageEngine/main/.github/assets/mirage-engine.png" width="300px">
+</a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@mirage-engine/core"><img src="https://img.shields.io/npm/v/@mirage-engine/core.svg?color=black"></a>
+  <a href="https://www.npmjs.org/package/@mirage-engine/core"><img src="https://img.shields.io/npm/dm/@mirage-engine/core.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
+
+> **A core of mirage-engine**
+
+This package does not work alone. Please install [mirage-engine](https://www.npmjs.com/package/mirage-engine) instead.
+
+**License | MIT © dltldn333**

package/dist/mirage-engine.js

@@ -0,0 +1,487 @@
+var B = Object.defineProperty;
+var z = (r, t, e) => t in r ? B(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var c = (r, t, e) => (z(r, typeof t != "symbol" ? t + "" : t, e), e);
+import * as h from "three";
+const v = 0, R = 1, b = 2, D = 4, C = 8, E = 16;
+function F(r, t, e) {
+  const i = t.split(`
+`), s = [];
+  return i.forEach((n) => {
+    const a = n.split(" ");
+    let o = a[0];
+    for (let l = 1; l < a.length; l++) {
+      const d = a[l];
+      r.measureText(o + " " + d).width < e ? o += " " + d : (s.push(o), o = d);
+    }
+    s.push(o);
+  }), s;
+}
+function 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 l = (window.devicePixelRatio || 1) * s;
+  n.width = e * l, n.height = i * l, a.scale(l, l), a.font = t.font, a.fillStyle = t.color, a.textBaseline = "top", a.globalAlpha = 1;
+  const d = F(a, r, e), p = t.lineHeight;
+  d.forEach((m, f) => {
+    const y = f * p + 2;
+    let g = 0;
+    t.textAlign === "center" ? g = e / 2 : t.textAlign === "right" && (g = e), a.textAlign = t.textAlign, a.fillText(m, g, y);
+  });
+  const u = new h.CanvasTexture(n);
+  return u.colorSpace = h.SRGBColorSpace, u.minFilter = h.LinearFilter, u.magFilter = h.LinearFilter, u.needsUpdate = !0, u;
+}
+function x(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 w(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) {
+  var o;
+  const i = w(r.backgroundColor), s = w(r.borderColor), n = {
+    uSize: { value: new h.Vector2(t, e) },
+    uRadius: { value: x(r.borderRadius) },
+    uBorderWidth: { value: x(r.borderWidth) },
+    uColor: { value: i.color },
+    uBorderColor: { value: s.color },
+    uOpacity: { value: (o = r.opacity) != null ? o : 1 },
+    uBgOpacity: { value: i.alpha }
+  };
+  return new h.ShaderMaterial({
+    uniforms: n,
+    vertexShader: O,
+    fragmentShader: A,
+    transparent: !0,
+    side: h.FrontSide
+    // for better performance
+  });
+}
+function L(r, t, e, i) {
+  var a;
+  const s = w(t.backgroundColor), n = w(t.borderColor);
+  r.uniforms.uSize.value.set(e, i), r.uniforms.uRadius.value = x(t.borderRadius), r.uniforms.uBorderWidth.value = x(t.borderWidth), r.uniforms.uColor.value.copy(s.color), r.uniforms.uBorderColor.value.copy(n.color), r.uniforms.uOpacity.value = (a = t.opacity) != null ? a : 1, r.uniforms.uBgOpacity.value = s.alpha;
+}
+const 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 o = r;
+      o.map && o.map.dispose();
+      const l = S(
+        i || "",
+        e,
+        s,
+        n,
+        a
+      );
+      o.map = l, o.needsUpdate = !0;
+    }
+  }
+};
+class X {
+  constructor(t, e, i) {
+    c(this, "canvas");
+    c(this, "scene");
+    c(this, "camera");
+    c(this, "renderer");
+    c(this, "renderOrder", 0);
+    c(this, "textQualityFactor", 2);
+    c(this, "mode", "overlay");
+    c(this, "customZIndex", "9999");
+    c(this, "target");
+    c(this, "mountContainer");
+    c(this, "targetRect");
+    c(this, "meshMap", /* @__PURE__ */ new Map());
+    var a, o, l;
+    this.target = t, this.mountContainer = i, this.mode = (a = e.mode) != null ? a : "overlay", (o = e.style) != null && o.zIndex && (this.customZIndex = e.style.zIndex), this.canvas = document.createElement("canvas"), this.scene = new h.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const s = this.targetRect.width, n = this.targetRect.height;
+    this.camera = new h.OrthographicCamera(
+      s / -2,
+      s / 2,
+      n / 2,
+      n / -2,
+      1,
+      1e3
+    ), this.camera.position.z = 100, this.renderer = new h.WebGLRenderer({
+      canvas: this.canvas,
+      alpha: !0,
+      antialias: !0
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, n), this.applyTextQuality((l = e.textQuality) != null ? l : "medium");
+  }
+  applyTextQuality(t) {
+    if (typeof t == "number") {
+      this.textQualityFactor = Math.max(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() {
+    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) > 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, o] of this.meshMap.entries())
+      n.has(a) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof h.Material && o.material.dispose(), this.meshMap.delete(a));
+  }
+  reconcileNode(t, e) {
+    e.add(t.element);
+    let i = this.meshMap.get(t.element);
+    if (!i) {
+      const s = new h.PlaneGeometry(1, 1), n = 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 = t.rect, this.updateMeshProperties(i, t), t.type === "BOX")
+      for (const s of t.children)
+        this.reconcileNode(s, e);
+    else
+      t.type === "TEXT" && this.reconcileTextChild(i, t);
+  }
+  reconcileTextChild(t, e) {
+    var o, l;
+    let i = t.children.find(
+      (d) => d.name === "TEXT_CHILD"
+    );
+    const s = JSON.stringify(e.textStyles), n = (o = i == null ? void 0 : i.userData) == null ? void 0 : o.styleHash;
+    if (!i || e.dirtyMask & E || s !== n) {
+      i && ((l = i.material.map) == null || l.dispose(), i.geometry.dispose(), t.remove(i));
+      const d = 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, d), i.name = "TEXT_CHILD", i.userData = { styleHash: s }, i.position.z = 5e-3, t.add(i);
+    }
+    if (i) {
+      const d = t.userData.domRect, p = d.x + d.width / 2, u = d.y + d.height / 2, m = e.rect.x + e.rect.width / 2, f = e.rect.y + e.rect.height / 2, y = m - p, g = -(f - u);
+      i.position.set(y, g, 5e-3);
+    }
+  }
+  updateMeshProperties(t, e) {
+    const { rect: i, styles: s } = e, n = this.renderer.getPixelRatio(), a = this.renderer.domElement.width / n, o = this.renderer.domElement.height / n;
+    t.scale.set(i.width, i.height, 1);
+    const l = 1e-3;
+    this.renderOrder++;
+    const d = this.targetRect.left + window.scrollX, p = this.targetRect.top + window.scrollY, u = i.x - d, m = i.y - p;
+    t.position.set(
+      u - a / 2 + i.width / 2,
+      -m + o / 2 - i.height / 2,
+      s.zIndex + this.renderOrder * l
+    ), T.update(
+      t.material,
+      "BOX",
+      e.styles,
+      "",
+      e.rect.width,
+      e.rect.height
+    );
+  }
+  render() {
+    this.renderer.render(this.scene, this.camera);
+  }
+}
+function N(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 M(r, t = R | b | D | E | C) {
+  if (r.nodeType === Node.TEXT_NODE) {
+    const u = r;
+    if (!u.textContent || !u.textContent.trim())
+      return null;
+    const m = u.textContent.replace(/\s+/g, " ").trim();
+    if (m.length === 0)
+      return null;
+    const f = N(u);
+    if (f.width === 0 || f.height === 0)
+      return null;
+    const y = u.parentElement, g = y ? window.getComputedStyle(y) : null;
+    return g ? {
+      id: Math.random().toString(36).substring(2, 9),
+      type: "TEXT",
+      element: u,
+      rect: {
+        x: f.left + window.scrollX,
+        y: f.top + window.scrollY,
+        width: f.width,
+        height: f.height
+      },
+      styles: {
+        backgroundColor: "transparent",
+        opacity: parseFloat(g.opacity),
+        zIndex: 0,
+        borderRadius: "0px",
+        borderColor: "transparent",
+        borderWidth: "0px"
+      },
+      textContent: m,
+      textStyles: k(g),
+      dirtyMask: t,
+      children: []
+    } : null;
+  }
+  const e = r, i = e.getBoundingClientRect(), s = window.getComputedStyle(e);
+  if (i.width === 0 || i.height === 0 || s.display === "none")
+    return null;
+  let n = e.getAttribute("data-mid");
+  n || (n = Math.random().toString(36).substring(2, 11), e.setAttribute("data-mid", n));
+  const a = parseInt(s.zIndex), o = {
+    backgroundColor: s.backgroundColor,
+    opacity: parseFloat(s.opacity),
+    zIndex: isNaN(a) ? 0 : a,
+    borderRadius: s.borderRadius,
+    borderColor: s.borderColor,
+    borderWidth: s.borderWidth
+  };
+  let l, d;
+  const p = [];
+  return Array.from(e.childNodes).forEach((u) => {
+    const m = M(u, t);
+    m && p.push(m);
+  }), {
+    id: n,
+    type: "BOX",
+    element: e,
+    rect: {
+      x: i.left + window.scrollX,
+      y: i.top + window.scrollY,
+      width: i.width,
+      height: i.height
+    },
+    styles: o,
+    textContent: l,
+    textStyles: d,
+    dirtyMask: t,
+    children: p
+  };
+}
+class P {
+  constructor(t, e) {
+    c(this, "target");
+    c(this, "renderer");
+    c(this, "observer");
+    c(this, "isDomDirty", !1);
+    c(this, "isRunning", !1);
+    c(this, "pendingMask", v);
+    c(this, "mutationTimer", null);
+    c(this, "cssTimer", null);
+    c(this, "onTransitionFinished", (t) => {
+      this.target.contains(t.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= R | b, this.cssTimer = window.setTimeout(() => {
+        this.isDomDirty = !0, this.cssTimer = null;
+      }, 50));
+    });
+    c(this, "onWindowResize", () => {
+      this.renderer.setSize(window.innerWidth, window.innerHeight), this.isDomDirty = !0;
+    });
+    c(this, "renderLoop", () => {
+      this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
+    });
+    this.target = t, this.renderer = e, this.observer = new MutationObserver((i) => {
+      let s = 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;
+        }
+        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 = M(this.target, this.pendingMask);
+    t && this.renderer.syncScene(t), this.pendingMask = v;
+  }
+}
+class Y {
+  constructor(t, e) {
+    c(this, "renderer");
+    c(this, "syncer");
+    c(this, "target");
+    var s, n, a;
+    this.target = t;
+    let i;
+    if (e.mode === "duplicate" ? i = (n = (s = e.container) != null ? s : this.target.parentElement) != null ? n : void 0 : i = (a = this.target.parentElement) != null ? a : void 0, !i)
+      throw new Error("[Mirage] Cannot find a container (parent or option).");
+    this.renderer = new X(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();
+  }
+}
+export {
+  E as DIRTY_CONTENT,
+  v as DIRTY_NONE,
+  R as DIRTY_RECT,
+  C as DIRTY_STRUCTURE,
+  b as DIRTY_STYLE,
+  D as DIRTY_ZINDEX,
+  Y as Engine
+};

package/dist/mirage-engine.umd.js

@@ -0,0 +1,55 @@
+(function(d,f){typeof exports=="object"&&typeof module!="undefined"?f(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],f):(d=typeof globalThis!="undefined"?globalThis:d||self,f(d.MirageEngine={},d.THREE))})(this,function(d,f){"use strict";var H=Object.defineProperty;var W=(d,f,T)=>f in d?H(d,f,{enumerable:!0,configurable:!0,writable:!0,value:T}):d[f]=T;var c=(d,f,T)=>(W(d,typeof f!="symbol"?f+"":f,T),T);function T(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=T(f),x=0,R=1,b=2,B=4,C=8,M=16;function I(r,t,e){const i=t.split(`
+`),n=[];return i.forEach(s=>{const a=s.split(" ");let o=a[0];for(let l=1;l<a.length;l++){const u=a[l];r.measureText(o+" "+u).width<e?o+=" "+u:(n.push(o),o=u)}n.push(o)}),n}function O(r,t,e,i,n=2){const s=document.createElement("canvas"),a=s.getContext("2d");if(!a)throw new Error("[Mirage] Failed to create canvas context");const l=(window.devicePixelRatio||1)*n;s.width=e*l,s.height=i*l,a.scale(l,l),a.font=t.font,a.fillStyle=t.color,a.textBaseline="top",a.globalAlpha=1;const u=I(a,r,e),m=t.lineHeight;u.forEach((g,y)=>{const w=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,w)});const p=new h.CanvasTexture(s);return p.colorSpace=h.SRGBColorSpace,p.minFilter=h.LinearFilter,p.magFilter=h.LinearFilter,p.needsUpdate=!0,p}function S(r){return typeof r=="number"?r:parseFloat(r)||0}const F=`
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`,N=`
+  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 E(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),n=parseInt(t[3],10),s=t[4]!==void 0?parseFloat(t[4]):1;return{color:new h.Color(`rgb(${e}, ${i}, ${n})`),alpha:s}}return{color:new h.Color(r),alpha:1}}function L(r,t,e){var o;const i=E(r.backgroundColor),n=E(r.borderColor),s={uSize:{value:new h.Vector2(t,e)},uRadius:{value:S(r.borderRadius)},uBorderWidth:{value:S(r.borderWidth)},uColor:{value:i.color},uBorderColor:{value:n.color},uOpacity:{value:(o=r.opacity)!=null?o:1},uBgOpacity:{value:i.alpha}};return new h.ShaderMaterial({uniforms:s,vertexShader:F,fragmentShader:N,transparent:!0,side:h.FrontSide})}function A(r,t,e,i){var a;const n=E(t.backgroundColor),s=E(t.borderColor);r.uniforms.uSize.value.set(e,i),r.uniforms.uRadius.value=S(t.borderRadius),r.uniforms.uBorderWidth.value=S(t.borderWidth),r.uniforms.uColor.value.copy(n.color),r.uniforms.uBorderColor.value.copy(s.color),r.uniforms.uOpacity.value=(a=t.opacity)!=null?a:1,r.uniforms.uBgOpacity.value=n.alpha}const D={create(r,t,e,i,n,s=2){if(r==="BOX")return L(t,i,n);if(r==="TEXT"){const a=O(e||"",t,i,n,s);return new h.MeshBasicMaterial({map:a,transparent:!0,side:h.FrontSide,color:16777215})}return new h.MeshBasicMaterial({visible:!1})},update(r,t,e,i,n,s,a=2){if(t==="BOX")A(r,e,n,s);else if(t==="TEXT"){const o=r;o.map&&o.map.dispose();const l=O(i||"",e,n,s,a);o.map=l,o.needsUpdate=!0}}};class X{constructor(t,e,i){c(this,"canvas");c(this,"scene");c(this,"camera");c(this,"renderer");c(this,"renderOrder",0);c(this,"textQualityFactor",2);c(this,"mode","overlay");c(this,"customZIndex","9999");c(this,"target");c(this,"mountContainer");c(this,"targetRect");c(this,"meshMap",new Map);var a,o,l;this.target=t,this.mountContainer=i,this.mode=(a=e.mode)!=null?a:"overlay",(o=e.style)!=null&&o.zIndex&&(this.customZIndex=e.style.zIndex),this.canvas=document.createElement("canvas"),this.scene=new h.Scene,this.targetRect=this.target.getBoundingClientRect();const n=this.targetRect.width,s=this.targetRect.height;this.camera=new h.OrthographicCamera(n/-2,n/2,s/2,s/-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(n,s),this.applyTextQuality((l=e.textQuality)!=null?l:"medium")}applyTextQuality(t){if(typeof t=="number"){this.textQualityFactor=Math.max(.1,t);return}switch(t){case"low":this.textQualityFactor=1;break;case"high":this.textQualityFactor=4;break;case"medium":default:this.textQualityFactor=2;break}}mount(){this.mountContainer.appendChild(this.canvas),this.canvas.style.zIndex=this.customZIndex,this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){this.canvas.style.width=`${this.targetRect.width}px`,this.canvas.style.height=`${this.targetRect.height}px`,this.mode==="duplicate"?(this.canvas.style.position="",this.canvas.style.top="",this.canvas.style.left="",this.canvas.style.display="block"):(this.canvas.style.position="absolute",this.canvas.style.top=`${this.target.offsetTop}px`,this.canvas.style.left=`${this.target.offsetLeft}px`,this.canvas.style.display="block")}dispose(){this.renderer.dispose(),this.canvas.remove()}setSize(t,e){this.renderer.setSize(t,e),this.camera.left=t/-2,this.camera.right=t/2,this.camera.top=e/2,this.camera.bottom=e/-2,this.camera.updateProjectionMatrix()}syncScene(t){const e=this.target.getBoundingClientRect(),i=Math.abs(e.width-this.targetRect.width)>.1||Math.abs(e.height-this.targetRect.height)>.1,n=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()):n?(this.targetRect=e,this.updateCanvasLayout()):this.targetRect=e,this.renderOrder=0;const s=new Set;this.reconcileNode(t,s);for(const[a,o]of this.meshMap.entries())s.has(a)||(this.scene.remove(o),o.geometry.dispose(),o.material instanceof h.Material&&o.material.dispose(),this.meshMap.delete(a))}reconcileNode(t,e){e.add(t.element);let i=this.meshMap.get(t.element);if(!i){const n=new h.PlaneGeometry(1,1),s=D.create("BOX",t.styles,"",t.rect.width,t.rect.height);i=new h.Mesh(n,s),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 n of t.children)this.reconcileNode(n,e);else t.type==="TEXT"&&this.reconcileTextChild(i,t)}reconcileTextChild(t,e){var o,l;let i=t.children.find(u=>u.name==="TEXT_CHILD");const n=JSON.stringify(e.textStyles),s=(o=i==null?void 0:i.userData)==null?void 0:o.styleHash;if(!i||e.dirtyMask&M||n!==s){i&&((l=i.material.map)==null||l.dispose(),i.geometry.dispose(),t.remove(i));const u=D.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,u),i.name="TEXT_CHILD",i.userData={styleHash:n},i.position.z=.005,t.add(i)}if(i){const u=t.userData.domRect,m=u.x+u.width/2,p=u.y+u.height/2,g=e.rect.x+e.rect.width/2,y=e.rect.y+e.rect.height/2,w=g-m,v=-(y-p);i.position.set(w,v,.005)}}updateMeshProperties(t,e){const{rect:i,styles:n}=e,s=this.renderer.getPixelRatio(),a=this.renderer.domElement.width/s,o=this.renderer.domElement.height/s;t.scale.set(i.width,i.height,1);const l=.001;this.renderOrder++;const u=this.targetRect.left+window.scrollX,m=this.targetRect.top+window.scrollY,p=i.x-u,g=i.y-m;t.position.set(p-a/2+i.width/2,-g+o/2-i.height/2,n.zIndex+this.renderOrder*l),D.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 Y(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 z(r,t=R|b|B|M|C){if(r.nodeType===Node.TEXT_NODE){const p=r;if(!p.textContent||!p.textContent.trim())return null;const g=p.textContent.replace(/\s+/g," ").trim();if(g.length===0)return null;const y=_(p);if(y.width===0||y.height===0)return null;const w=p.parentElement,v=w?window.getComputedStyle(w):null;return v?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:p,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:Y(v),dirtyMask:t,children:[]}:null}const e=r,i=e.getBoundingClientRect(),n=window.getComputedStyle(e);if(i.width===0||i.height===0||n.display==="none")return null;let s=e.getAttribute("data-mid");s||(s=Math.random().toString(36).substring(2,11),e.setAttribute("data-mid",s));const a=parseInt(n.zIndex),o={backgroundColor:n.backgroundColor,opacity:parseFloat(n.opacity),zIndex:isNaN(a)?0:a,borderRadius:n.borderRadius,borderColor:n.borderColor,borderWidth:n.borderWidth};let l,u;const m=[];return Array.from(e.childNodes).forEach(p=>{const g=z(p,t);g&&m.push(g)}),{id:s,type:"BOX",element:e,rect:{x:i.left+window.scrollX,y:i.top+window.scrollY,width:i.width,height:i.height},styles:o,textContent:l,textStyles:u,dirtyMask:t,children:m}}class k{constructor(t,e){c(this,"target");c(this,"renderer");c(this,"observer");c(this,"isDomDirty",!1);c(this,"isRunning",!1);c(this,"pendingMask",x);c(this,"mutationTimer",null);c(this,"cssTimer",null);c(this,"onTransitionFinished",t=>{this.target.contains(t.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=R|b,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});c(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});c(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=t,this.renderer=e,this.observer=new MutationObserver(i=>{let n=x;for(const s of i)s.type==="childList"?n|=C:s.type==="attributes"&&(s.attributeName==="style"||s.attributeName==="class")&&(n|=R|b);if(n!==x){if(this.pendingMask|=n,n&C){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=z(this.target,this.pendingMask);t&&this.renderer.syncScene(t),this.pendingMask=x}}class P{constructor(t,e){c(this,"renderer");c(this,"syncer");c(this,"target");var n,s,a;this.target=t;let i;if(e.mode==="duplicate"?i=(s=(n=e.container)!=null?n:this.target.parentElement)!=null?s:void 0:i=(a=this.target.parentElement)!=null?a:void 0,!i)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new X(this.target,e,i),this.renderer.mount(),this.syncer=new k(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}d.DIRTY_CONTENT=M,d.DIRTY_NONE=x,d.DIRTY_RECT=R,d.DIRTY_STRUCTURE=C,d.DIRTY_STYLE=b,d.DIRTY_ZINDEX=B,d.Engine=P,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

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

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

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

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

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

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

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { Engine } from './core/Engine';
+export * from './types';