@mirage-engine/painter 0.0.1 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @mirage-engine/painter
+
+## 0.2.0
+
+### Minor Changes
+
+- ba0576d: provides Painter API
+
+## 0.1.0
+
+### Minor Changes
+
+- 14a8264: provides Painter API

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,29 @@
+# @mirage-engine/painter
+
+[![npm](https://img.shields.io/npm/v/@mirage-engine/painter.svg?color=black)](https://www.npmjs.com/package/@mirage-engine/painter)
+
+A standalone text & style texture generator for Three.js.
+
+## Usage
+
+```typescript
+import { Painter } from "@mirage-engine/painter";
+const geometry = new THREE.PlaneGeometry(1, 1);
+
+const styles = {
+    backgroundColor: "#ff0000",
+    borderColor: "#000000",
+    borderWidth: 2,
+    borderRadius: 5,
+}
+
+const material = Painter.create(
+  "BOX",
+  styles,
+  "",
+  50, //width
+  50, //height
+);
+
+mesh = new THREE.Mesh(geometry, material);
+```

package/dist/mirage-painter.js

@@ -0,0 +1,170 @@
+import * as l from "three";
+function b(o, e, t) {
+  const n = e.split(`
+`), r = [];
+  return n.forEach((i) => {
+    const a = i.split(" ");
+    let u = a[0];
+    for (let c = 1; c < a.length; c++) {
+      const d = a[c];
+      o.measureText(u + " " + d).width < t ? u += " " + d : (r.push(u), u = d);
+    }
+    r.push(u);
+  }), r;
+}
+function m(o, e, t, n, r = 2) {
+  const i = document.createElement("canvas"), a = i.getContext("2d");
+  if (!a)
+    throw new Error("[Mirage] Failed to create canvas context");
+  const c = (window.devicePixelRatio || 1) * r;
+  i.width = t * c, i.height = n * c, a.scale(c, c), a.font = e.font, a.fillStyle = e.color, a.textBaseline = "top", a.globalAlpha = 1;
+  const d = b(a, o, t), v = e.lineHeight;
+  d.forEach((x, g) => {
+    const B = g * v + 2;
+    let h = 0;
+    e.textAlign === "center" ? h = t / 2 : e.textAlign === "right" && (h = t), a.textAlign = e.textAlign, a.fillText(x, h, B);
+  });
+  const s = new l.CanvasTexture(i);
+  return s.colorSpace = l.SRGBColorSpace, s.minFilter = l.LinearFilter, s.magFilter = l.LinearFilter, s.needsUpdate = !0, s;
+}
+function p(o) {
+  return typeof o == "number" ? o : parseFloat(o) || 0;
+}
+const C = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`, w = `
+  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 f(o) {
+  if (!o || o === "transparent")
+    return { color: new l.Color(16777215), alpha: 0 };
+  const e = o.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+  );
+  if (e) {
+    const t = parseInt(e[1], 10), n = parseInt(e[2], 10), r = parseInt(e[3], 10), i = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new l.Color(`rgb(${t}, ${n}, ${r})`), alpha: i };
+  }
+  return { color: new l.Color(o), alpha: 1 };
+}
+function A(o, e, t) {
+  const n = f(o.backgroundColor), r = f(o.borderColor), i = {
+    uSize: { value: new l.Vector2(e, t) },
+    uRadius: { value: p(o.borderRadius) },
+    uBorderWidth: { value: p(o.borderWidth) },
+    uColor: { value: n.color },
+    uBorderColor: { value: r.color },
+    uOpacity: { value: o.opacity ?? 1 },
+    uBgOpacity: { value: n.alpha }
+  };
+  return new l.ShaderMaterial({
+    uniforms: i,
+    vertexShader: C,
+    fragmentShader: w,
+    transparent: !0,
+    side: l.FrontSide
+    // for better performance
+  });
+}
+function S(o, e, t, n) {
+  const r = f(e.backgroundColor), i = f(e.borderColor);
+  o.uniforms.uSize.value.set(t, n), o.uniforms.uRadius.value = p(e.borderRadius), o.uniforms.uBorderWidth.value = p(e.borderWidth), o.uniforms.uColor.value.copy(r.color), o.uniforms.uBorderColor.value.copy(i.color), o.uniforms.uOpacity.value = e.opacity ?? 1, o.uniforms.uBgOpacity.value = r.alpha;
+}
+const O = {
+  create(o, e, t, n, r, i = 2) {
+    if (o === "BOX")
+      return A(e, n, r);
+    if (o === "TEXT") {
+      const a = m(
+        t || "",
+        e,
+        n,
+        r,
+        i
+      );
+      return new l.MeshBasicMaterial({
+        map: a,
+        transparent: !0,
+        side: l.FrontSide,
+        color: 16777215
+      });
+    }
+    return new l.MeshBasicMaterial({ visible: !1 });
+  },
+  update(o, e, t, n, r, i, a = 2) {
+    if (e === "BOX")
+      S(
+        o,
+        t,
+        r,
+        i
+      );
+    else if (e === "TEXT") {
+      const u = o;
+      u.map && u.map.dispose();
+      const c = m(
+        n || "",
+        t,
+        r,
+        i,
+        a
+      );
+      u.map = c, u.needsUpdate = !0;
+    }
+  }
+};
+export {
+  O as Painter,
+  A as createBoxMaterial,
+  m as createTextTexture,
+  S as updateBoxMaterial
+};

package/dist/mirage-painter.umd.js

@@ -0,0 +1,55 @@
+(function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c.MiragePainter={},c.THREE))})(this,function(c,s){"use strict";function C(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const l=C(s);function w(e,o,r){const t=o.split(`
+`),a=[];return t.forEach(i=>{const n=i.split(" ");let u=n[0];for(let d=1;d<n.length;d++){const f=n[d];e.measureText(u+" "+f).width<r?u+=" "+f:(a.push(u),u=f)}a.push(u)}),a}function m(e,o,r,t,a=2){const i=document.createElement("canvas"),n=i.getContext("2d");if(!n)throw new Error("[Mirage] Failed to create canvas context");const d=(window.devicePixelRatio||1)*a;i.width=r*d,i.height=t*d,n.scale(d,d),n.font=o.font,n.fillStyle=o.color,n.textBaseline="top",n.globalAlpha=1;const f=w(n,e,r),B=o.lineHeight;f.forEach((S,M)=>{const R=M*B+2;let g=0;o.textAlign==="center"?g=r/2:o.textAlign==="right"&&(g=r),n.textAlign=o.textAlign,n.fillText(S,g,R)});const p=new l.CanvasTexture(i);return p.colorSpace=l.SRGBColorSpace,p.minFilter=l.LinearFilter,p.magFilter=l.LinearFilter,p.needsUpdate=!0,p}function h(e){return typeof e=="number"?e:parseFloat(e)||0}const A=`
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`,O=`
+  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 v(e){if(!e||e==="transparent")return{color:new l.Color(16777215),alpha:0};const o=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(o){const r=parseInt(o[1],10),t=parseInt(o[2],10),a=parseInt(o[3],10),i=o[4]!==void 0?parseFloat(o[4]):1;return{color:new l.Color(`rgb(${r}, ${t}, ${a})`),alpha:i}}return{color:new l.Color(e),alpha:1}}function x(e,o,r){const t=v(e.backgroundColor),a=v(e.borderColor),i={uSize:{value:new l.Vector2(o,r)},uRadius:{value:h(e.borderRadius)},uBorderWidth:{value:h(e.borderWidth)},uColor:{value:t.color},uBorderColor:{value:a.color},uOpacity:{value:e.opacity??1},uBgOpacity:{value:t.alpha}};return new l.ShaderMaterial({uniforms:i,vertexShader:A,fragmentShader:O,transparent:!0,side:l.FrontSide})}function b(e,o,r,t){const a=v(o.backgroundColor),i=v(o.borderColor);e.uniforms.uSize.value.set(r,t),e.uniforms.uRadius.value=h(o.borderRadius),e.uniforms.uBorderWidth.value=h(o.borderWidth),e.uniforms.uColor.value.copy(a.color),e.uniforms.uBorderColor.value.copy(i.color),e.uniforms.uOpacity.value=o.opacity??1,e.uniforms.uBgOpacity.value=a.alpha}const T={create(e,o,r,t,a,i=2){if(e==="BOX")return x(o,t,a);if(e==="TEXT"){const n=m(r||"",o,t,a,i);return new l.MeshBasicMaterial({map:n,transparent:!0,side:l.FrontSide,color:16777215})}return new l.MeshBasicMaterial({visible:!1})},update(e,o,r,t,a,i,n=2){if(o==="BOX")b(e,r,a,i);else if(o==="TEXT"){const u=e;u.map&&u.map.dispose();const d=m(t||"",r,a,i,n);u.map=d,u.needsUpdate=!0}}};c.Painter=T,c.createBoxMaterial=x,c.createTextTexture=m,c.updateBoxMaterial=b,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/dist/src/BoxGenerator.d.ts

@@ -0,0 +1,4 @@
+import { BoxStyles } from './types';
+import * as THREE from "three";
+export declare function createBoxMaterial(styles: BoxStyles, width: number, height: number): THREE.ShaderMaterial;
+export declare function updateBoxMaterial(material: THREE.ShaderMaterial, styles: BoxStyles, width: number, height: number): void;

package/dist/src/Painter.d.ts

@@ -0,0 +1,5 @@
+import * as THREE from "three";
+export declare const Painter: {
+    create(type: "BOX" | "TEXT", styles: any, content: string, width: number, height: number, quality?: number): THREE.Material;
+    update(material: THREE.Material, type: "BOX" | "TEXT", styles: any, content: string, width: number, height: number, quality?: number): void;
+};

package/dist/src/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/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TextGenerator';
+export * from './types';
+export * from './BoxGenerator';
+export * from './Painter';

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

@@ -0,0 +1,17 @@
+export interface TextStyles {
+    font: string;
+    color: string;
+    textAlign: CanvasTextAlign;
+    textBaseline: CanvasTextBaseline;
+    direction: CanvasDirection;
+    lineHeight: number;
+    letterSpacing: number;
+}
+export interface BoxStyles {
+    backgroundColor: string;
+    opacity: number;
+    zIndex: number;
+    borderRadius: string;
+    borderColor: string;
+    borderWidth: string;
+}

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

@@ -0,0 +1 @@
+export * from './common';

package/dist/vite.config.d.ts

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

package/package.json

@@ -1,11 +1,24 @@
 {
   "name": "@mirage-engine/painter",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {
     "three": "^0.160.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dltldn333/MirageEngine",
+    "directory": "packages/painter"
+  },
+  "dependencies": {
+    "@types/three": "^0.181.0"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "scripts": {
     "build": "vite build"
   }

package/src/BoxGenerator.ts

@@ -0,0 +1,135 @@
+import * as THREE from "three";
+import { BoxStyles } from "./types";
+
+function parsePixelValue(value: string | number): number {
+  if (typeof value === "number") return value;
+  return parseFloat(value) || 0;
+}
+
+const vertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+const fragmentShader = `
+  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 parseColor(colorStr: string) {
+  if (!colorStr || colorStr === "transparent") {
+    return { color: new THREE.Color(0xffffff), alpha: 0.0 };
+  }
+
+  const rgbaMatch = colorStr.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/,
+  );
+
+  if (rgbaMatch) {
+    const r = parseInt(rgbaMatch[1], 10);
+    const g = parseInt(rgbaMatch[2], 10);
+    const b = parseInt(rgbaMatch[3], 10);
+    const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1.0;
+
+    return { color: new THREE.Color(`rgb(${r}, ${g}, ${b})`), alpha: a };
+  }
+
+  return { color: new THREE.Color(colorStr), alpha: 1.0 };
+}
+
+export function createBoxMaterial(
+  styles: BoxStyles,
+  width: number,
+  height: number,
+): THREE.ShaderMaterial {
+  const parsedBg = parseColor(styles.backgroundColor);
+  const parsedBorder = parseColor(styles.borderColor);
+
+  const uniforms = {
+    uSize: { value: new THREE.Vector2(width, height) },
+    uRadius: { value: parsePixelValue(styles.borderRadius) },
+    uBorderWidth: { value: parsePixelValue(styles.borderWidth) },
+    uColor: { value: parsedBg.color },
+    uBorderColor: { value: parsedBorder.color },
+    uOpacity: { value: styles.opacity ?? 1.0 },
+    uBgOpacity: { value: parsedBg.alpha },
+  };
+
+  const material = new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    vertexShader: vertexShader,
+    fragmentShader: fragmentShader,
+    transparent: true,
+    side: THREE.FrontSide, // for better performance
+  });
+
+  return material;
+}
+
+export function updateBoxMaterial(
+  material: THREE.ShaderMaterial,
+  styles: BoxStyles,
+  width: number,
+  height: number,
+) {
+  const parsedBg = parseColor(styles.backgroundColor);
+  const parsedBorder = parseColor(styles.borderColor);
+
+  material.uniforms.uSize.value.set(width, height);
+
+  material.uniforms.uRadius.value = parsePixelValue(styles.borderRadius);
+  material.uniforms.uBorderWidth.value = parsePixelValue(styles.borderWidth);
+
+  material.uniforms.uColor.value.copy(parsedBg.color);
+  material.uniforms.uBorderColor.value.copy(parsedBorder.color);
+
+  material.uniforms.uOpacity.value = styles.opacity ?? 1.0;
+  material.uniforms.uBgOpacity.value = parsedBg.alpha;
+}

package/src/Painter.ts

@@ -0,0 +1,72 @@
+import * as THREE from "three";
+import { BoxStyles, TextStyles } from "./types";
+import { createBoxMaterial, updateBoxMaterial } from "./BoxGenerator";
+import { createTextTexture } from "./TextGenerator";
+
+export const Painter = {
+  create(
+    type: "BOX" | "TEXT",
+    styles: any,
+    content: string,
+    width: number,
+    height: number,
+    quality: number = 2,
+  ): THREE.Material {
+    if (type === "BOX") {
+      return createBoxMaterial(styles as BoxStyles, width, height);
+    } else if (type === "TEXT") {
+      const texture = createTextTexture(
+        content || "",
+        styles as TextStyles,
+        width,
+        height,
+        quality,
+      );
+
+      return new THREE.MeshBasicMaterial({
+        map: texture,
+        transparent: true,
+        side: THREE.FrontSide,
+        color: 0xffffff,
+      });
+    }
+
+    return new THREE.MeshBasicMaterial({ visible: false });
+  },
+
+  update(
+    material: THREE.Material,
+    type: "BOX" | "TEXT",
+    styles: any,
+    content: string,
+    width: number,
+    height: number,
+    quality: number = 2,
+  ) {
+    if (type === "BOX") {
+      updateBoxMaterial(
+        material as THREE.ShaderMaterial,
+        styles as BoxStyles,
+        width,
+        height,
+      );
+    } else if (type === "TEXT") {
+      const basicMat = material as THREE.MeshBasicMaterial;
+
+      if (basicMat.map) {
+        basicMat.map.dispose();
+      }
+
+      const newTexture = createTextTexture(
+        content || "",
+        styles as TextStyles,
+        width,
+        height,
+        quality,
+      );
+
+      basicMat.map = newTexture;
+      basicMat.needsUpdate = true;
+    }
+  },
+};

package/src/TextGenerator.ts

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { TextStyles } from "../../mirage-engine/src/types";
+import { TextStyles } from "./types";
 
 function wrapText(
   ctx: CanvasRenderingContext2D,

package/src/index.ts

@@ -1 +1,4 @@
-export * from './TextGenerator';
+export * from "./TextGenerator";
+export * from "./types";
+export * from "./BoxGenerator";
+export * from "./Painter";

package/src/types/common.ts

@@ -0,0 +1,20 @@
+// For CanvasRenderingContext2D
+export interface TextStyles {
+  font: string;
+  color: string;
+  textAlign: CanvasTextAlign;
+  textBaseline: CanvasTextBaseline;
+  direction: CanvasDirection;
+  lineHeight: number; // px
+  letterSpacing: number; // px
+}
+
+export interface BoxStyles {
+  backgroundColor: string;
+  opacity: number;
+  zIndex: number;
+
+  borderRadius: string;
+  borderColor: string;
+  borderWidth: string;
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './common';

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"] 
+    },
+    "outDir": "./dist"
+  },
+  "include": [
+    "src", 
+    "vite.config.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import path from "path";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "MiragePainter",
+      fileName: (format) =>
+        `mirage-painter.${format === "es" ? "js" : "umd.js"}`,
+    },
+    rollupOptions: {
+      external: ["three"],
+      output: {
+        globals: {
+          three: "THREE",
+        },
+      },
+    },
+  },
+  plugins: [
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});