@mirage-engine/painter 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mirage-engine/painter
 
+## 1.0.1
+
+### Patch Changes
+
+- 11f77b6: update seven craft
+
 ## 1.0.0
 
 ### Major Changes

package/dist/mirage-painter.js

@@ -1,8 +1,8 @@
-var I = Object.defineProperty;
-var R = (o, e, t) => e in o ? I(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var b = (o, e, t) => (R(o, typeof e != "symbol" ? e + "" : e, t), t);
+var R = Object.defineProperty;
+var M = (r, e, n) => e in r ? R(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
+var w = (r, e, n) => (M(r, typeof e != "symbol" ? e + "" : e, n), n);
 import * as d from "three";
-class T {
+class I {
   /**
    * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
    * @param font CSS font shorthand string (e.g., "400 16px Inter")
@@ -11,153 +11,153 @@ class T {
   static getBaseline(e) {
     if (this.cache.has(e))
       return this.cache.get(e);
-    const t = this.calculateBaselineFromDOM(e);
-    return this.cache.set(e, t), t;
+    const n = this.calculateBaselineFromDOM(e);
+    return this.cache.set(e, n), n;
   }
   static calculateBaselineFromDOM(e) {
     if (typeof document > "u")
       return 0;
-    const t = document.createElement("div"), a = document.createElement("span"), r = document.createElement("img");
-    t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", a.style.margin = "0", a.style.padding = "0", a.style.border = "none", a.style.lineHeight = "normal", r.width = 1, r.height = 1, r.style.verticalAlign = "baseline", a.appendChild(document.createTextNode("Hidden Text")), t.appendChild(a), t.appendChild(r), document.body.appendChild(t);
-    const n = r.offsetTop - a.offsetTop;
-    return document.body.removeChild(t), n;
+    const n = document.createElement("div"), a = document.createElement("span"), o = document.createElement("img");
+    n.style.visibility = "hidden", n.style.position = "absolute", n.style.top = "0px", n.style.left = "0px", n.style.font = e, n.style.margin = "0", n.style.padding = "0", n.style.border = "none", a.style.margin = "0", a.style.padding = "0", a.style.border = "none", a.style.lineHeight = "normal", o.width = 1, o.height = 1, o.style.verticalAlign = "baseline", a.appendChild(document.createTextNode("Hidden Text")), n.appendChild(a), n.appendChild(o), document.body.appendChild(n);
+    const i = o.offsetTop - a.offsetTop;
+    return document.body.removeChild(n), i;
   }
 }
-b(T, "cache", /* @__PURE__ */ new Map());
-class A extends d.MeshBasicMaterial {
-  constructor(t, a, r, n, i = 2) {
+w(I, "cache", /* @__PURE__ */ new Map());
+class k extends d.MeshBasicMaterial {
+  constructor(n, a, o, i, t = 2) {
     super({
       transparent: !0,
       side: d.FrontSide,
       color: 16777215
     });
-    b(this, "canvas");
-    b(this, "ctx");
-    b(this, "qualityFactor");
+    w(this, "canvas");
+    w(this, "ctx");
+    w(this, "qualityFactor");
     if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
       throw new Error("[Mirage] Failed to create canvas context");
-    this.qualityFactor = i, this.map = new d.CanvasTexture(this.canvas), this.map.colorSpace = d.LinearSRGBColorSpace, this.map.minFilter = d.LinearFilter, this.map.magFilter = d.LinearFilter, this.updateText(t, a, r, n);
+    this.qualityFactor = t, this.map = new d.CanvasTexture(this.canvas), this.map.colorSpace = d.LinearSRGBColorSpace, this.map.minFilter = d.LinearFilter, this.map.magFilter = d.LinearFilter, this.updateText(n, a, o, i);
   }
-  wrapText(t, a) {
-    const r = t.split(`
-`), n = [];
-    return r.forEach((i) => {
-      const c = i.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+  wrapText(n, a) {
+    const o = n.split(`
+`), i = [];
+    return o.forEach((t) => {
+      const c = t.match(/[^\s\-]+\-?|\-|\s+/g) || [];
       if (c.length === 0) {
-        n.push("");
+        i.push("");
         return;
       }
-      let l = c[0];
-      for (let s = 1; s < c.length; s++) {
-        const u = c[s];
-        this.ctx.measureText(l + u).width <= a + 2 ? l += u : (l && n.push(l), l = u.trimStart());
+      let s = c[0];
+      for (let l = 1; l < c.length; l++) {
+        const u = c[l];
+        this.ctx.measureText(s + u).width <= a + 2 ? s += u : (s && i.push(s), s = u.trimStart());
       }
-      l && n.push(l);
-    }), n;
+      s && i.push(s);
+    }), i;
   }
-  updateText(t, a, r, n, i) {
-    i !== void 0 && (this.qualityFactor = i);
-    const l = (window.devicePixelRatio || 1) * this.qualityFactor, s = r * l, u = n * l;
-    this.canvas.width !== s || this.canvas.height !== u ? (this.canvas.width = s, this.canvas.height = u) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(l, 0, 0, l, 0, 0), this.ctx.font = a.font, this.ctx.fillStyle = a.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const h = this.wrapText(t, r), g = a.lineHeight, p = T.getBaseline(a.font);
-    h.forEach((f, m) => {
-      const y = m * g + p;
-      let x = 0;
-      a.textAlign === "center" ? x = r / 2 : a.textAlign === "right" && (x = r), this.ctx.textAlign = a.textAlign, this.ctx.fillText(f, x, y);
+  updateText(n, a, o, i, t) {
+    t !== void 0 && (this.qualityFactor = t);
+    const s = (window.devicePixelRatio || 1) * this.qualityFactor, l = o * s, u = i * s;
+    this.canvas.width !== l || this.canvas.height !== u ? (this.canvas.width = l, this.canvas.height = u) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(s, 0, 0, s, 0, 0), this.ctx.font = a.font, this.ctx.fillStyle = a.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
+    const p = this.wrapText(n, o), b = a.lineHeight, v = I.getBaseline(a.font);
+    p.forEach((f, m) => {
+      const S = m * b + v;
+      let C = 0;
+      a.textAlign === "center" ? C = o / 2 : a.textAlign === "right" && (C = o), this.ctx.textAlign = a.textAlign, this.ctx.fillText(f, C, S);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
     this.map && this.map.dispose(), super.dispose();
   }
 }
-function v(o) {
-  return typeof o == "number" ? o : parseFloat(o) || 0;
+function x(r) {
+  return typeof r == "number" ? r : parseFloat(r) || 0;
 }
-function C(o) {
-  if (!o || o === "transparent")
+function y(r) {
+  if (!r || r === "transparent")
     return { color: new d.Color(16777215), alpha: 0 };
-  const e = o.match(
+  const e = r.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
   if (e) {
-    const t = parseInt(e[1], 10), a = parseInt(e[2], 10), r = parseInt(e[3], 10), n = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new d.Color(`rgb(${t}, ${a}, ${r})`), alpha: n };
+    const n = parseInt(e[1], 10), a = parseInt(e[2], 10), o = parseInt(e[3], 10), i = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new d.Color(`rgb(${n}, ${a}, ${o})`), alpha: i };
   }
-  return { color: new d.Color(o), alpha: 1 };
+  return { color: new d.Color(r), alpha: 1 };
 }
-function k(o) {
+function P(r) {
   const e = [];
-  let t = "", a = 0;
-  for (let r = 0; r < o.length; r++) {
-    const n = o[r];
-    if (n === "(")
+  let n = "", a = 0;
+  for (let o = 0; o < r.length; o++) {
+    const i = r[o];
+    if (i === "(")
       a++;
-    else if (n === ")")
+    else if (i === ")")
       a--;
-    else if (n === "," && a === 0) {
-      e.push(t.trim()), t = "";
+    else if (i === "," && a === 0) {
+      e.push(n.trim()), n = "";
       continue;
     }
-    t += n;
+    n += i;
   }
-  return t && e.push(t.trim()), e;
+  return n && e.push(n.trim()), e;
 }
-function M(o) {
-  if (!o || typeof o != "string" || !o.includes("linear-gradient"))
+function G(r) {
+  if (!r || typeof r != "string" || !r.includes("linear-gradient"))
     return null;
-  const e = o.match(/linear-gradient\((.*)\)/);
+  const e = r.match(/linear-gradient\((.*)\)/);
   if (!e)
     return null;
-  const t = e[1], a = k(t);
-  let r = Math.PI, n = 0;
-  const i = a[0].trim();
-  if (i.startsWith("to "))
-    i === "to top" ? r = 0 : i === "to right" ? r = Math.PI / 2 : i === "to bottom" ? r = Math.PI : i === "to left" ? r = Math.PI * 1.5 : i === "to top right" || i === "to right top" ? r = Math.PI / 4 : i === "to bottom right" || i === "to right bottom" ? r = Math.PI * 0.75 : i === "to bottom left" || i === "to left bottom" ? r = Math.PI * 1.25 : (i === "to top left" || i === "to left top") && (r = Math.PI * 1.75), n = 1;
-  else if (i.endsWith("deg") || i.endsWith("rad") || i.endsWith("turn")) {
-    const l = parseFloat(i);
-    i.endsWith("deg") ? r = l * (Math.PI / 180) : i.endsWith("rad") ? r = l : i.endsWith("turn") && (r = l * Math.PI * 2), n = 1;
+  const n = e[1], a = P(n);
+  let o = Math.PI, i = 0;
+  const t = a[0].trim();
+  if (t.startsWith("to "))
+    t === "to top" ? o = 0 : t === "to right" ? o = Math.PI / 2 : t === "to bottom" ? o = Math.PI : t === "to left" ? o = Math.PI * 1.5 : t === "to top right" || t === "to right top" ? o = Math.PI / 4 : t === "to bottom right" || t === "to right bottom" ? o = Math.PI * 0.75 : t === "to bottom left" || t === "to left bottom" ? o = Math.PI * 1.25 : (t === "to top left" || t === "to left top") && (o = Math.PI * 1.75), i = 1;
+  else if (t.endsWith("deg") || t.endsWith("rad") || t.endsWith("turn")) {
+    const s = parseFloat(t);
+    t.endsWith("deg") ? o = s * (Math.PI / 180) : t.endsWith("rad") ? o = s : t.endsWith("turn") && (o = s * Math.PI * 2), i = 1;
   }
   const c = [];
-  for (let l = n; l < a.length && !(c.length >= 8); l++) {
-    const s = a[l].trim(), u = s.lastIndexOf(" ");
-    let h = s, g = null;
-    if (u !== -1 && !s.endsWith(")")) {
-      const f = s.substring(u + 1);
-      (f.endsWith("%") || f.endsWith("px") || !isNaN(parseFloat(f))) && (h = s.substring(0, u).trim(), g = f);
+  for (let s = i; s < a.length && !(c.length >= 8); s++) {
+    const l = a[s].trim(), u = l.lastIndexOf(" ");
+    let p = l, b = null;
+    if (u !== -1 && !l.endsWith(")")) {
+      const f = l.substring(u + 1);
+      (f.endsWith("%") || f.endsWith("px") || !isNaN(parseFloat(f))) && (p = l.substring(0, u).trim(), b = f);
     }
-    const p = C(h);
+    const v = y(p);
     c.push({
-      color: p.color,
-      alpha: p.alpha,
-      rawStop: g,
+      color: v.color,
+      alpha: v.alpha,
+      rawStop: b,
       stop: 0
     });
   }
   if (c.length > 0) {
-    for (let s = 0; s < c.length; s++)
-      c[s].rawStop !== null && (c[s].stop = parseFloat(c[s].rawStop) / 100);
+    for (let l = 0; l < c.length; l++)
+      c[l].rawStop !== null && (c[l].stop = parseFloat(c[l].rawStop) / 100);
     c[0].rawStop === null && (c[0].stop = 0), c.length > 1 && c[c.length - 1].rawStop === null && (c[c.length - 1].stop = 1);
-    let l = 0;
-    for (let s = 1; s < c.length; s++)
-      if (c[s].rawStop !== null || s === c.length - 1) {
-        const u = s - l;
+    let s = 0;
+    for (let l = 1; l < c.length; l++)
+      if (c[l].rawStop !== null || l === c.length - 1) {
+        const u = l - s;
         if (u > 1) {
-          const h = c[l].stop, p = (c[s].stop - h) / u;
+          const p = c[s].stop, v = (c[l].stop - p) / u;
           for (let f = 1; f < u; f++)
-            c[l + f].stop = h + p * f;
+            c[s + f].stop = p + v * f;
         }
-        l = s;
+        s = l;
       }
   }
-  return { angle: r, stops: c };
+  return { angle: o, stops: c };
 }
-const P = `varying vec2 vUv;
+const E = `varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   vScreenPos = gl_Position;
-}`, G = `varying vec2 vUv;
+}`, L = `varying vec2 vUv;
 uniform vec2 uSize;
 uniform vec4 uBorderRadius;
 uniform float uBorderWidth;
@@ -286,44 +286,56 @@ void main() {
 
   // #include <colorspace_fragment>
 }
-`, E = `uniform sampler2D uTexture;
+`, F = `uniform sampler2D uTexture;
 varying vec4 vScreenPos;
 uniform vec2 uTextureRepeat;
-uniform vec2 uTextureOffset;`, L = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+uniform vec2 uTextureOffset;`, _ = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 vec2 resultUv = screenUv;
 
-`, F = `vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`, B = {
-  vertexShader: P,
-  fragmentShader: G
-}, S = {
-  declChunk: E,
-  uvChunk: L,
-  baseColorChunk: F
+`, W = `vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`, O = {
+  vertexShader: E,
+  fragmentShader: L
+}, B = {
+  declChunk: F,
+  uvChunk: _,
+  baseColorChunk: W
 };
-function _(o, e, t, a = null, r) {
-  const n = a !== null || !!o.imageSrc, i = n ? S.declChunk : "", c = o.isTraveler ? S.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`, l = n ? c + ((r == null ? void 0 : r.uvModifier) || "") : "", s = n ? S.baseColorChunk : "", u = (r == null ? void 0 : r.colorModifier) || "", h = B.fragmentShader.replace("#INJECT_DECLARATIONS", i).replace("#INJECT_UV_MODIFIER", l).replace("#INJECT_BASE_COLOR", s).replace("#INJECT_COLOR_MODIFIER", u), g = C(o.backgroundColor), p = C(o.borderColor), f = {
-    uSize: { value: new d.Vector2(e, t) },
+function U(r, e, n, a = null, o) {
+  const i = a !== null || !!r.imageSrc;
+  let t = "";
+  const c = {};
+  if (o != null && o.uniforms)
+    for (const [h, g] of Object.entries(o.uniforms))
+      typeof g == "number" ? (t += `uniform float ${h};
+`, c[h] = { value: g }) : Array.isArray(g) ? g.length === 2 ? (t += `uniform vec2 ${h};
+`, c[h] = { value: new d.Vector2(...g) }) : g.length === 3 ? (t += `uniform vec3 ${h};
+`, c[h] = { value: new d.Vector3(...g) }) : g.length === 4 && (t += `uniform vec4 ${h};
+`, c[h] = { value: new d.Vector4(...g) }) : (t += `uniform float ${h};
+`, c[h] = { value: g });
+  const s = (i ? B.declChunk : "") + `
+` + t, l = r.isTraveler ? B.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
+`, u = i ? l + ((o == null ? void 0 : o.uvModifier) || "") : "", p = i ? B.baseColorChunk : "", b = (o == null ? void 0 : o.colorModifier) || "", v = O.fragmentShader.replace("#INJECT_DECLARATIONS", s).replace("#INJECT_UV_MODIFIER", u).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", b), f = y(r.backgroundColor), m = y(r.borderColor), S = {
+    uSize: { value: new d.Vector2(e, n) },
     uBgColor: {
       value: new d.Vector4(
-        g.color.r,
-        g.color.g,
-        g.color.b,
-        g.alpha
+        f.color.r,
+        f.color.g,
+        f.color.b,
+        f.alpha
       )
     },
     uBorderColor: {
       value: new d.Vector4(
-        p.color.r,
-        p.color.g,
-        p.color.b,
-        p.alpha
+        m.color.r,
+        m.color.g,
+        m.color.b,
+        m.alpha
       )
     },
     uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: v(o.borderWidth) },
-    uOpacity: { value: o.opacity ?? 1 },
+    uBorderWidth: { value: x(r.borderWidth) },
+    uOpacity: { value: r.opacity ?? 1 },
     uTexture: { value: null },
     uTextureRepeat: { value: new d.Vector2(1, 1) },
     uTextureOffset: { value: new d.Vector2(0, 0) },
@@ -334,179 +346,181 @@ function _(o, e, t, a = null, r) {
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  O(f.uBorderRadius.value, o.borderRadius), n && (f.uTexture.value = a);
-  const m = new d.ShaderMaterial({
-    uniforms: f,
-    vertexShader: B.vertexShader,
-    fragmentShader: h,
+  A(S.uBorderRadius.value, r.borderRadius), i && (S.uTexture.value = a);
+  const C = new d.ShaderMaterial({
+    uniforms: { ...S, ...c },
+    vertexShader: O.vertexShader,
+    fragmentShader: v,
     transparent: !0,
     side: d.FrontSide
     // for better performance
   });
-  return o.backgroundImage && w(m, { backgroundImage: o.backgroundImage }), m;
+  return r.backgroundImage && T(C, { backgroundImage: r.backgroundImage }), C;
 }
-function W(o, e, t, a, r) {
-  const n = v(e.borderWidth);
-  w(o, {
-    width: t,
+function V(r, e, n, a, o) {
+  const i = x(e.borderWidth);
+  T(r, {
+    width: n,
     height: a,
     borderRadius: e.borderRadius,
-    borderWidth: n,
+    borderWidth: i,
     backgroundColor: e.backgroundColor,
     borderColor: e.borderColor,
     opacity: e.opacity,
-    texture: r,
+    texture: o,
     backgroundImage: e.backgroundImage
   });
 }
-function w(o, e) {
+function T(r, e) {
   var a;
-  if (e.width !== void 0 && e.height !== void 0 && o.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && O(o.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (o.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
+  if (e.width !== void 0 && e.height !== void 0 && r.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && A(r.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (r.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
-      const r = o.uniforms.uBgColor.value.w;
-      o.uniforms.uBgColor.value.set(
+      const o = r.uniforms.uBgColor.value.w;
+      r.uniforms.uBgColor.value.set(
         e.backgroundColor[0],
         e.backgroundColor[1],
         e.backgroundColor[2],
-        r
+        o
       );
     } else if (typeof e.backgroundColor == "string") {
-      const r = C(e.backgroundColor);
-      o.uniforms.uBgColor.value.set(
-        r.color.r,
-        r.color.g,
-        r.color.b,
-        r.alpha
+      const o = y(e.backgroundColor);
+      r.uniforms.uBgColor.value.set(
+        o.color.r,
+        o.color.g,
+        o.color.b,
+        o.alpha
       );
     } else {
-      const r = o.uniforms.uBgColor.value.w;
-      o.uniforms.uBgColor.value.set(
+      const o = r.uniforms.uBgColor.value.w;
+      r.uniforms.uBgColor.value.set(
         e.backgroundColor.r,
         e.backgroundColor.g,
         e.backgroundColor.b,
-        r
+        o
       );
     }
   if (e.borderColor !== void 0)
     if (Array.isArray(e.borderColor)) {
-      const r = o.uniforms.uBorderColor.value.w;
-      o.uniforms.uBorderColor.value.set(
+      const o = r.uniforms.uBorderColor.value.w;
+      r.uniforms.uBorderColor.value.set(
         e.borderColor[0],
         e.borderColor[1],
         e.borderColor[2],
-        r
+        o
       );
     } else if (typeof e.borderColor == "string") {
-      const r = C(e.borderColor);
-      o.uniforms.uBorderColor.value.set(
-        r.color.r,
-        r.color.g,
-        r.color.b,
-        r.alpha
+      const o = y(e.borderColor);
+      r.uniforms.uBorderColor.value.set(
+        o.color.r,
+        o.color.g,
+        o.color.b,
+        o.alpha
       );
     } else {
-      const r = o.uniforms.uBorderColor.value.w;
-      o.uniforms.uBorderColor.value.set(
+      const o = r.uniforms.uBorderColor.value.w;
+      r.uniforms.uBorderColor.value.set(
         e.borderColor.r,
         e.borderColor.g,
         e.borderColor.b,
-        r
+        o
       );
     }
-  e.opacity !== void 0 && (o.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (o.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (o.uniforms.uBorderColor.value.w = e.borderOpacity), o.uniforms.uTexture && e.texture !== void 0 && (o.uniforms.uTexture.value = e.texture);
-  const t = e.texture !== void 0 ? e.texture : (a = o.uniforms.uTexture) == null ? void 0 : a.value;
-  if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
-    const r = t.image.width, n = t.image.height, i = e.width ?? o.uniforms.uSize.value.x, c = e.height ?? o.uniforms.uSize.value.y;
-    if (r && n && i && c) {
-      const l = r / n, s = i / c;
-      if (l > s) {
-        const u = s / l;
-        o.uniforms.uTextureRepeat.value.set(u, 1), o.uniforms.uTextureOffset.value.set((1 - u) / 2, 0);
-      } else {
+  e.opacity !== void 0 && (r.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (r.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (r.uniforms.uBorderColor.value.w = e.borderOpacity), r.uniforms.uTexture && e.texture !== void 0 && (r.uniforms.uTexture.value = e.texture);
+  const n = e.texture !== void 0 ? e.texture : (a = r.uniforms.uTexture) == null ? void 0 : a.value;
+  if (n && (n.image instanceof ImageBitmap || n.image instanceof HTMLImageElement || n.image instanceof HTMLCanvasElement)) {
+    const o = n.image.width, i = n.image.height, t = e.width ?? r.uniforms.uSize.value.x, c = e.height ?? r.uniforms.uSize.value.y;
+    if (o && i && t && c) {
+      const s = o / i, l = t / c;
+      if (s > l) {
         const u = l / s;
-        o.uniforms.uTextureRepeat.value.set(1, u), o.uniforms.uTextureOffset.value.set(0, (1 - u) / 2);
+        r.uniforms.uTextureRepeat.value.set(u, 1), r.uniforms.uTextureOffset.value.set((1 - u) / 2, 0);
+      } else {
+        const u = s / l;
+        r.uniforms.uTextureRepeat.value.set(1, u), r.uniforms.uTextureOffset.value.set(0, (1 - u) / 2);
       }
     }
   } else
-    o.uniforms.uTextureRepeat && (o.uniforms.uTextureRepeat.value.set(1, 1), o.uniforms.uTextureOffset.value.set(0, 0));
+    r.uniforms.uTextureRepeat && (r.uniforms.uTextureRepeat.value.set(1, 1), r.uniforms.uTextureOffset.value.set(0, 0));
   if (e.backgroundImage !== void 0) {
-    const r = M(e.backgroundImage);
-    if (r) {
-      o.uniforms.uGradientCount.value = r.stops.length, o.uniforms.uGradientAngle.value = r.angle;
-      for (let n = 0; n < 8; n++)
-        if (n < r.stops.length) {
-          const i = r.stops[n];
-          o.uniforms.uGradientColors.value[n].set(
-            i.color.r,
-            i.color.g,
-            i.color.b,
-            i.alpha
-          ), console.log(i.color.r, i.color.g, i.color.b), o.uniforms.uGradientStops.value[n] = i.stop;
+    const o = G(e.backgroundImage);
+    if (o) {
+      r.uniforms.uGradientCount.value = o.stops.length, r.uniforms.uGradientAngle.value = o.angle;
+      for (let i = 0; i < 8; i++)
+        if (i < o.stops.length) {
+          const t = o.stops[i];
+          r.uniforms.uGradientColors.value[i].set(
+            t.color.r,
+            t.color.g,
+            t.color.b,
+            t.alpha
+          ), r.uniforms.uGradientStops.value[i] = t.stop;
         } else
-          o.uniforms.uGradientColors.value[n].set(0, 0, 0, 0), o.uniforms.uGradientStops.value[n] = 1;
+          r.uniforms.uGradientColors.value[i].set(0, 0, 0, 0), r.uniforms.uGradientStops.value[i] = 1;
     } else
-      o.uniforms.uGradientCount.value = 0;
+      r.uniforms.uGradientCount.value = 0;
   }
+  for (const o of Object.keys(e))
+    o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && r.uniforms[o] !== void 0 && (r.uniforms[o].value !== void 0 && r.uniforms[o].value !== null && typeof r.uniforms[o].value.set == "function" ? Array.isArray(e[o]) ? r.uniforms[o].value.set(...e[o]) : e[o] !== void 0 && (e[o].copy ? r.uniforms[o].value.copy(e[o]) : r.uniforms[o].value = e[o]) : r.uniforms[o].value = e[o]);
 }
-function O(o, e) {
+function A(r, e) {
   if (e == null) {
-    o.set(0, 0, 0, 0);
+    r.set(0, 0, 0, 0);
     return;
   }
   if (typeof e == "number") {
-    o.set(e, e, e, e);
+    r.set(e, e, e, e);
     return;
   }
   if (Array.isArray(e)) {
-    o.set(e[0], e[1], e[2], e[3]);
+    r.set(e[0], e[1], e[2], e[3]);
     return;
   }
-  const t = e.split("/")[0].trim().split(/\s+/), a = v(t[0]), r = v(t[1] ?? t[0]), n = v(t[2] ?? t[0]), i = v(t[3] ?? t[1] ?? t[0]);
-  o.set(a, r, n, i);
+  const n = e.split("/")[0].trim().split(/\s+/), a = x(n[0]), o = x(n[1] ?? n[0]), i = x(n[2] ?? n[0]), t = x(n[3] ?? n[1] ?? n[0]);
+  r.set(a, o, i, t);
 }
-const z = {
-  create(o, e, t, a, r, n = 2, i = null, c) {
-    return o === "BOX" ? _(
+const N = {
+  create(r, e, n, a, o, i = 2, t = null, c) {
+    return r === "BOX" ? U(
       e,
       a,
-      r,
-      i,
+      o,
+      t,
       c
-    ) : o === "TEXT" ? new A(
-      t || "",
+    ) : r === "TEXT" ? new k(
+      n || "",
       e,
       a,
-      r,
-      n
+      o,
+      i
     ) : new d.MeshBasicMaterial({ visible: !1 });
   },
-  update(o, e, t, a, r, n, i = 2, c) {
-    e === "BOX" ? W(
-      o,
-      t,
+  update(r, e, n, a, o, i, t = 2, c) {
+    e === "BOX" ? V(
       r,
       n,
+      o,
+      i,
       c
-    ) : e === "TEXT" && o.updateText(
+    ) : e === "TEXT" && r.updateText(
       a || "",
-      t,
-      r,
       n,
-      i
+      o,
+      i,
+      t
     );
   },
-  forceUpdateUniforms(o, e) {
-    w(o, e);
+  forceUpdateUniforms(r, e) {
+    T(r, e);
   }
 };
 export {
-  z as Painter,
-  A as TextGenerator,
-  _ as createBoxMaterial,
-  C as parseColor,
-  M as parseLinearGradient,
-  v as parsePixelValue,
-  w as setBoxUniforms,
-  k as splitByComma,
-  W as updateBoxMaterial
+  N as Painter,
+  k as TextGenerator,
+  U as createBoxMaterial,
+  y as parseColor,
+  G as parseLinearGradient,
+  x as parsePixelValue,
+  T as setBoxUniforms,
+  P as splitByComma,
+  V as updateBoxMaterial
 };

package/dist/mirage-painter.umd.js

@@ -1,11 +1,11 @@
-(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.MiragePainter={},d.THREE))})(this,function(d,h){"use strict";var V=Object.defineProperty;var D=(d,h,m)=>h in d?V(d,h,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[h]=m;var S=(d,h,m)=>(D(d,typeof h!="symbol"?h+"":h,m),m);function m(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const f=m(h);class y{static getBaseline(e){if(this.cache.has(e))return this.cache.get(e);const t=this.calculateBaselineFromDOM(e);return this.cache.set(e,t),t}static calculateBaselineFromDOM(e){if(typeof document>"u")return 0;const t=document.createElement("div"),n=document.createElement("span"),r=document.createElement("img");t.style.visibility="hidden",t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.font=e,t.style.margin="0",t.style.padding="0",t.style.border="none",n.style.margin="0",n.style.padding="0",n.style.border="none",n.style.lineHeight="normal",r.width=1,r.height=1,r.style.verticalAlign="baseline",n.appendChild(document.createTextNode("Hidden Text")),t.appendChild(n),t.appendChild(r),document.body.appendChild(t);const i=r.offsetTop-n.offsetTop;return document.body.removeChild(t),i}}S(y,"cache",new Map);class I extends f.MeshBasicMaterial{constructor(t,n,r,i,a=2){super({transparent:!0,side:f.FrontSide,color:16777215});S(this,"canvas");S(this,"ctx");S(this,"qualityFactor");if(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),!this.ctx)throw new Error("[Mirage] Failed to create canvas context");this.qualityFactor=a,this.map=new f.CanvasTexture(this.canvas),this.map.colorSpace=f.LinearSRGBColorSpace,this.map.minFilter=f.LinearFilter,this.map.magFilter=f.LinearFilter,this.updateText(t,n,r,i)}wrapText(t,n){const r=t.split(`
-`),i=[];return r.forEach(a=>{const c=a.match(/[^\s\-]+\-?|\-|\s+/g)||[];if(c.length===0){i.push("");return}let l=c[0];for(let s=1;s<c.length;s++){const u=c[s];this.ctx.measureText(l+u).width<=n+2?l+=u:(l&&i.push(l),l=u.trimStart())}l&&i.push(l)}),i}updateText(t,n,r,i,a){a!==void 0&&(this.qualityFactor=a);const l=(window.devicePixelRatio||1)*this.qualityFactor,s=r*l,u=i*l;this.canvas.width!==s||this.canvas.height!==u?(this.canvas.width=s,this.canvas.height=u):this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(l,0,0,l,0,0),this.ctx.font=n.font,this.ctx.fillStyle=n.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const b=this.wrapText(t,r),v=n.lineHeight,g=y.getBaseline(n.font);b.forEach((p,B)=>{const z=B*v+g;let O=0;n.textAlign==="center"?O=r/2:n.textAlign==="right"&&(O=r),this.ctx.textAlign=n.textAlign,this.ctx.fillText(p,O,z)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function C(o){return typeof o=="number"?o:parseFloat(o)||0}function x(o){if(!o||o==="transparent")return{color:new f.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 f.Color(`rgb(${t}, ${n}, ${r})`),alpha:i}}return{color:new f.Color(o),alpha:1}}function M(o){const e=[];let t="",n=0;for(let r=0;r<o.length;r++){const i=o[r];if(i==="(")n++;else if(i===")")n--;else if(i===","&&n===0){e.push(t.trim()),t="";continue}t+=i}return t&&e.push(t.trim()),e}function R(o){if(!o||typeof o!="string"||!o.includes("linear-gradient"))return null;const e=o.match(/linear-gradient\((.*)\)/);if(!e)return null;const t=e[1],n=M(t);let r=Math.PI,i=0;const a=n[0].trim();if(a.startsWith("to "))a==="to top"?r=0:a==="to right"?r=Math.PI/2:a==="to bottom"?r=Math.PI:a==="to left"?r=Math.PI*1.5:a==="to top right"||a==="to right top"?r=Math.PI/4:a==="to bottom right"||a==="to right bottom"?r=Math.PI*.75:a==="to bottom left"||a==="to left bottom"?r=Math.PI*1.25:(a==="to top left"||a==="to left top")&&(r=Math.PI*1.75),i=1;else if(a.endsWith("deg")||a.endsWith("rad")||a.endsWith("turn")){const l=parseFloat(a);a.endsWith("deg")?r=l*(Math.PI/180):a.endsWith("rad")?r=l:a.endsWith("turn")&&(r=l*Math.PI*2),i=1}const c=[];for(let l=i;l<n.length&&!(c.length>=8);l++){const s=n[l].trim(),u=s.lastIndexOf(" ");let b=s,v=null;if(u!==-1&&!s.endsWith(")")){const p=s.substring(u+1);(p.endsWith("%")||p.endsWith("px")||!isNaN(parseFloat(p)))&&(b=s.substring(0,u).trim(),v=p)}const g=x(b);c.push({color:g.color,alpha:g.alpha,rawStop:v,stop:0})}if(c.length>0){for(let s=0;s<c.length;s++)c[s].rawStop!==null&&(c[s].stop=parseFloat(c[s].rawStop)/100);c[0].rawStop===null&&(c[0].stop=0),c.length>1&&c[c.length-1].rawStop===null&&(c[c.length-1].stop=1);let l=0;for(let s=1;s<c.length;s++)if(c[s].rawStop!==null||s===c.length-1){const u=s-l;if(u>1){const b=c[l].stop,g=(c[s].stop-b)/u;for(let p=1;p<u;p++)c[l+p].stop=b+g*p}l=s}}return{angle:r,stops:c}}const E=`varying vec2 vUv;
+(function(f,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],h):(f=typeof globalThis<"u"?globalThis:f||self,h(f.MiragePainter={},f.THREE))})(this,function(f,h){"use strict";var N=Object.defineProperty;var q=(f,h,C)=>h in f?N(f,h,{enumerable:!0,configurable:!0,writable:!0,value:C}):f[h]=C;var O=(f,h,C)=>(q(f,typeof h!="symbol"?h+"":h,C),C);function C(r){const o=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(o,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return o.default=r,Object.freeze(o)}const u=C(h);class M{static getBaseline(o){if(this.cache.has(o))return this.cache.get(o);const t=this.calculateBaselineFromDOM(o);return this.cache.set(o,t),t}static calculateBaselineFromDOM(o){if(typeof document>"u")return 0;const t=document.createElement("div"),i=document.createElement("span"),e=document.createElement("img");t.style.visibility="hidden",t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.font=o,t.style.margin="0",t.style.padding="0",t.style.border="none",i.style.margin="0",i.style.padding="0",i.style.border="none",i.style.lineHeight="normal",e.width=1,e.height=1,e.style.verticalAlign="baseline",i.appendChild(document.createTextNode("Hidden Text")),t.appendChild(i),t.appendChild(e),document.body.appendChild(t);const a=e.offsetTop-i.offsetTop;return document.body.removeChild(t),a}}O(M,"cache",new Map);class R extends u.MeshBasicMaterial{constructor(t,i,e,a,n=2){super({transparent:!0,side:u.FrontSide,color:16777215});O(this,"canvas");O(this,"ctx");O(this,"qualityFactor");if(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),!this.ctx)throw new Error("[Mirage] Failed to create canvas context");this.qualityFactor=n,this.map=new u.CanvasTexture(this.canvas),this.map.colorSpace=u.LinearSRGBColorSpace,this.map.minFilter=u.LinearFilter,this.map.magFilter=u.LinearFilter,this.updateText(t,i,e,a)}wrapText(t,i){const e=t.split(`
+`),a=[];return e.forEach(n=>{const c=n.match(/[^\s\-]+\-?|\-|\s+/g)||[];if(c.length===0){a.push("");return}let s=c[0];for(let l=1;l<c.length;l++){const d=c[l];this.ctx.measureText(s+d).width<=i+2?s+=d:(s&&a.push(s),s=d.trimStart())}s&&a.push(s)}),a}updateText(t,i,e,a,n){n!==void 0&&(this.qualityFactor=n);const s=(window.devicePixelRatio||1)*this.qualityFactor,l=e*s,d=a*s;this.canvas.width!==l||this.canvas.height!==d?(this.canvas.width=l,this.canvas.height=d):this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(s,0,0,s,0,0),this.ctx.font=i.font,this.ctx.fillStyle=i.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const g=this.wrapText(t,e),y=i.lineHeight,m=M.getBaseline(i.font);g.forEach((p,T)=>{const B=T*y+m;let w=0;i.textAlign==="center"?w=e/2:i.textAlign==="right"&&(w=e),this.ctx.textAlign=i.textAlign,this.ctx.fillText(p,w,B)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function x(r){return typeof r=="number"?r:parseFloat(r)||0}function S(r){if(!r||r==="transparent")return{color:new u.Color(16777215),alpha:0};const o=r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(o){const t=parseInt(o[1],10),i=parseInt(o[2],10),e=parseInt(o[3],10),a=o[4]!==void 0?parseFloat(o[4]):1;return{color:new u.Color(`rgb(${t}, ${i}, ${e})`),alpha:a}}return{color:new u.Color(r),alpha:1}}function k(r){const o=[];let t="",i=0;for(let e=0;e<r.length;e++){const a=r[e];if(a==="(")i++;else if(a===")")i--;else if(a===","&&i===0){o.push(t.trim()),t="";continue}t+=a}return t&&o.push(t.trim()),o}function P(r){if(!r||typeof r!="string"||!r.includes("linear-gradient"))return null;const o=r.match(/linear-gradient\((.*)\)/);if(!o)return null;const t=o[1],i=k(t);let e=Math.PI,a=0;const n=i[0].trim();if(n.startsWith("to "))n==="to top"?e=0:n==="to right"?e=Math.PI/2:n==="to bottom"?e=Math.PI:n==="to left"?e=Math.PI*1.5:n==="to top right"||n==="to right top"?e=Math.PI/4:n==="to bottom right"||n==="to right bottom"?e=Math.PI*.75:n==="to bottom left"||n==="to left bottom"?e=Math.PI*1.25:(n==="to top left"||n==="to left top")&&(e=Math.PI*1.75),a=1;else if(n.endsWith("deg")||n.endsWith("rad")||n.endsWith("turn")){const s=parseFloat(n);n.endsWith("deg")?e=s*(Math.PI/180):n.endsWith("rad")?e=s:n.endsWith("turn")&&(e=s*Math.PI*2),a=1}const c=[];for(let s=a;s<i.length&&!(c.length>=8);s++){const l=i[s].trim(),d=l.lastIndexOf(" ");let g=l,y=null;if(d!==-1&&!l.endsWith(")")){const p=l.substring(d+1);(p.endsWith("%")||p.endsWith("px")||!isNaN(parseFloat(p)))&&(g=l.substring(0,d).trim(),y=p)}const m=S(g);c.push({color:m.color,alpha:m.alpha,rawStop:y,stop:0})}if(c.length>0){for(let l=0;l<c.length;l++)c[l].rawStop!==null&&(c[l].stop=parseFloat(c[l].rawStop)/100);c[0].rawStop===null&&(c[0].stop=0),c.length>1&&c[c.length-1].rawStop===null&&(c[c.length-1].stop=1);let s=0;for(let l=1;l<c.length;l++)if(c[l].rawStop!==null||l===c.length-1){const d=l-s;if(d>1){const g=c[s].stop,m=(c[l].stop-g)/d;for(let p=1;p<d;p++)c[s+p].stop=g+m*p}s=l}}return{angle:e,stops:c}}const F=`varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   vScreenPos = gl_Position;
-}`,L=`varying vec2 vUv;
+}`,W=`varying vec2 vUv;
 uniform vec2 uSize;
 uniform vec4 uBorderRadius;
 uniform float uBorderWidth;
@@ -134,12 +134,18 @@ void main() {
 
   // #include <colorspace_fragment>
 }
-`,_=`uniform sampler2D uTexture;
+`,U=`uniform sampler2D uTexture;
 varying vec4 vScreenPos;
 uniform vec2 uTextureRepeat;
-uniform vec2 uTextureOffset;`,F=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+uniform vec2 uTextureOffset;`,V=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
 vec2 resultUv = screenUv;
 
-`,W=`vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`,k={vertexShader:E,fragmentShader:L},w={declChunk:_,uvChunk:F,baseColorChunk:W};function A(o,e,t,n=null,r){const i=n!==null||!!o.imageSrc,a=i?w.declChunk:"",c=o.isTraveler?w.uvChunk:`vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
-`,l=i?c+((r==null?void 0:r.uvModifier)||""):"",s=i?w.baseColorChunk:"",u=(r==null?void 0:r.colorModifier)||"",b=k.fragmentShader.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",l).replace("#INJECT_BASE_COLOR",s).replace("#INJECT_COLOR_MODIFIER",u),v=x(o.backgroundColor),g=x(o.borderColor),p={uSize:{value:new f.Vector2(e,t)},uBgColor:{value:new f.Vector4(v.color.r,v.color.g,v.color.b,v.alpha)},uBorderColor:{value:new f.Vector4(g.color.r,g.color.g,g.color.b,g.alpha)},uBorderRadius:{value:new f.Vector4(0,0,0,0)},uBorderWidth:{value:C(o.borderWidth)},uOpacity:{value:o.opacity??1},uTexture:{value:null},uTextureRepeat:{value:new f.Vector2(1,1)},uTextureOffset:{value:new f.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new f.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};G(p.uBorderRadius.value,o.borderRadius),i&&(p.uTexture.value=n);const B=new f.ShaderMaterial({uniforms:p,vertexShader:k.vertexShader,fragmentShader:b,transparent:!0,side:f.FrontSide});return o.backgroundImage&&T(B,{backgroundImage:o.backgroundImage}),B}function P(o,e,t,n,r){const i=C(e.borderWidth);T(o,{width:t,height:n,borderRadius:e.borderRadius,borderWidth:i,backgroundColor:e.backgroundColor,borderColor:e.borderColor,opacity:e.opacity,texture:r,backgroundImage:e.backgroundImage})}function T(o,e){var n;if(e.width!==void 0&&e.height!==void 0&&o.uniforms.uSize.value.set(e.width,e.height),e.borderRadius!==void 0&&G(o.uniforms.uBorderRadius.value,e.borderRadius),e.borderWidth!==void 0&&(o.uniforms.uBorderWidth.value=e.borderWidth),e.backgroundColor!==void 0)if(Array.isArray(e.backgroundColor)){const r=o.uniforms.uBgColor.value.w;o.uniforms.uBgColor.value.set(e.backgroundColor[0],e.backgroundColor[1],e.backgroundColor[2],r)}else if(typeof e.backgroundColor=="string"){const r=x(e.backgroundColor);o.uniforms.uBgColor.value.set(r.color.r,r.color.g,r.color.b,r.alpha)}else{const r=o.uniforms.uBgColor.value.w;o.uniforms.uBgColor.value.set(e.backgroundColor.r,e.backgroundColor.g,e.backgroundColor.b,r)}if(e.borderColor!==void 0)if(Array.isArray(e.borderColor)){const r=o.uniforms.uBorderColor.value.w;o.uniforms.uBorderColor.value.set(e.borderColor[0],e.borderColor[1],e.borderColor[2],r)}else if(typeof e.borderColor=="string"){const r=x(e.borderColor);o.uniforms.uBorderColor.value.set(r.color.r,r.color.g,r.color.b,r.alpha)}else{const r=o.uniforms.uBorderColor.value.w;o.uniforms.uBorderColor.value.set(e.borderColor.r,e.borderColor.g,e.borderColor.b,r)}e.opacity!==void 0&&(o.uniforms.uOpacity.value=e.opacity),e.bgOpacity!==void 0&&(o.uniforms.uBgColor.value.w=e.bgOpacity),e.borderOpacity!==void 0&&(o.uniforms.uBorderColor.value.w=e.borderOpacity),o.uniforms.uTexture&&e.texture!==void 0&&(o.uniforms.uTexture.value=e.texture);const t=e.texture!==void 0?e.texture:(n=o.uniforms.uTexture)==null?void 0:n.value;if(t&&(t.image instanceof ImageBitmap||t.image instanceof HTMLImageElement||t.image instanceof HTMLCanvasElement)){const r=t.image.width,i=t.image.height,a=e.width??o.uniforms.uSize.value.x,c=e.height??o.uniforms.uSize.value.y;if(r&&i&&a&&c){const l=r/i,s=a/c;if(l>s){const u=s/l;o.uniforms.uTextureRepeat.value.set(u,1),o.uniforms.uTextureOffset.value.set((1-u)/2,0)}else{const u=l/s;o.uniforms.uTextureRepeat.value.set(1,u),o.uniforms.uTextureOffset.value.set(0,(1-u)/2)}}}else o.uniforms.uTextureRepeat&&(o.uniforms.uTextureRepeat.value.set(1,1),o.uniforms.uTextureOffset.value.set(0,0));if(e.backgroundImage!==void 0){const r=R(e.backgroundImage);if(r){o.uniforms.uGradientCount.value=r.stops.length,o.uniforms.uGradientAngle.value=r.angle;for(let i=0;i<8;i++)if(i<r.stops.length){const a=r.stops[i];o.uniforms.uGradientColors.value[i].set(a.color.r,a.color.g,a.color.b,a.alpha),console.log(a.color.r,a.color.g,a.color.b),o.uniforms.uGradientStops.value[i]=a.stop}else o.uniforms.uGradientColors.value[i].set(0,0,0,0),o.uniforms.uGradientStops.value[i]=1}else o.uniforms.uGradientCount.value=0}}function G(o,e){if(e==null){o.set(0,0,0,0);return}if(typeof e=="number"){o.set(e,e,e,e);return}if(Array.isArray(e)){o.set(e[0],e[1],e[2],e[3]);return}const t=e.split("/")[0].trim().split(/\s+/),n=C(t[0]),r=C(t[1]??t[0]),i=C(t[2]??t[0]),a=C(t[3]??t[1]??t[0]);o.set(n,r,i,a)}const U={create(o,e,t,n,r,i=2,a=null,c){return o==="BOX"?A(e,n,r,a,c):o==="TEXT"?new I(t||"",e,n,r,i):new f.MeshBasicMaterial({visible:!1})},update(o,e,t,n,r,i,a=2,c){e==="BOX"?P(o,t,r,i,c):e==="TEXT"&&o.updateText(n||"",t,r,i,a)},forceUpdateUniforms(o,e){T(o,e)}};d.Painter=U,d.TextGenerator=I,d.createBoxMaterial=A,d.parseColor=x,d.parseLinearGradient=R,d.parsePixelValue=C,d.setBoxUniforms=T,d.splitByComma=M,d.updateBoxMaterial=P,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+`,z=`vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`,G={vertexShader:F,fragmentShader:W},A={declChunk:U,uvChunk:V,baseColorChunk:z};function E(r,o,t,i=null,e){const a=i!==null||!!r.imageSrc;let n="";const c={};if(e!=null&&e.uniforms)for(const[b,v]of Object.entries(e.uniforms))typeof v=="number"?(n+=`uniform float ${b};
+`,c[b]={value:v}):Array.isArray(v)?v.length===2?(n+=`uniform vec2 ${b};
+`,c[b]={value:new u.Vector2(...v)}):v.length===3?(n+=`uniform vec3 ${b};
+`,c[b]={value:new u.Vector3(...v)}):v.length===4&&(n+=`uniform vec4 ${b};
+`,c[b]={value:new u.Vector4(...v)}):(n+=`uniform float ${b};
+`,c[b]={value:v});const s=(a?A.declChunk:"")+`
+`+n,l=r.isTraveler?A.uvChunk:`vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
+`,d=a?l+((e==null?void 0:e.uvModifier)||""):"",g=a?A.baseColorChunk:"",y=(e==null?void 0:e.colorModifier)||"",m=G.fragmentShader.replace("#INJECT_DECLARATIONS",s).replace("#INJECT_UV_MODIFIER",d).replace("#INJECT_BASE_COLOR",g).replace("#INJECT_COLOR_MODIFIER",y),p=S(r.backgroundColor),T=S(r.borderColor),B={uSize:{value:new u.Vector2(o,t)},uBgColor:{value:new u.Vector4(p.color.r,p.color.g,p.color.b,p.alpha)},uBorderColor:{value:new u.Vector4(T.color.r,T.color.g,T.color.b,T.alpha)},uBorderRadius:{value:new u.Vector4(0,0,0,0)},uBorderWidth:{value:x(r.borderWidth)},uOpacity:{value:r.opacity??1},uTexture:{value:null},uTextureRepeat:{value:new u.Vector2(1,1)},uTextureOffset:{value:new u.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new u.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};_(B.uBorderRadius.value,r.borderRadius),a&&(B.uTexture.value=i);const w=new u.ShaderMaterial({uniforms:{...B,...c},vertexShader:G.vertexShader,fragmentShader:m,transparent:!0,side:u.FrontSide});return r.backgroundImage&&I(w,{backgroundImage:r.backgroundImage}),w}function L(r,o,t,i,e){const a=x(o.borderWidth);I(r,{width:t,height:i,borderRadius:o.borderRadius,borderWidth:a,backgroundColor:o.backgroundColor,borderColor:o.borderColor,opacity:o.opacity,texture:e,backgroundImage:o.backgroundImage})}function I(r,o){var i;if(o.width!==void 0&&o.height!==void 0&&r.uniforms.uSize.value.set(o.width,o.height),o.borderRadius!==void 0&&_(r.uniforms.uBorderRadius.value,o.borderRadius),o.borderWidth!==void 0&&(r.uniforms.uBorderWidth.value=o.borderWidth),o.backgroundColor!==void 0)if(Array.isArray(o.backgroundColor)){const e=r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor[0],o.backgroundColor[1],o.backgroundColor[2],e)}else if(typeof o.backgroundColor=="string"){const e=S(o.backgroundColor);r.uniforms.uBgColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor.r,o.backgroundColor.g,o.backgroundColor.b,e)}if(o.borderColor!==void 0)if(Array.isArray(o.borderColor)){const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor[0],o.borderColor[1],o.borderColor[2],e)}else if(typeof o.borderColor=="string"){const e=S(o.borderColor);r.uniforms.uBorderColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor.r,o.borderColor.g,o.borderColor.b,e)}o.opacity!==void 0&&(r.uniforms.uOpacity.value=o.opacity),o.bgOpacity!==void 0&&(r.uniforms.uBgColor.value.w=o.bgOpacity),o.borderOpacity!==void 0&&(r.uniforms.uBorderColor.value.w=o.borderOpacity),r.uniforms.uTexture&&o.texture!==void 0&&(r.uniforms.uTexture.value=o.texture);const t=o.texture!==void 0?o.texture:(i=r.uniforms.uTexture)==null?void 0:i.value;if(t&&(t.image instanceof ImageBitmap||t.image instanceof HTMLImageElement||t.image instanceof HTMLCanvasElement)){const e=t.image.width,a=t.image.height,n=o.width??r.uniforms.uSize.value.x,c=o.height??r.uniforms.uSize.value.y;if(e&&a&&n&&c){const s=e/a,l=n/c;if(s>l){const d=l/s;r.uniforms.uTextureRepeat.value.set(d,1),r.uniforms.uTextureOffset.value.set((1-d)/2,0)}else{const d=s/l;r.uniforms.uTextureRepeat.value.set(1,d),r.uniforms.uTextureOffset.value.set(0,(1-d)/2)}}}else r.uniforms.uTextureRepeat&&(r.uniforms.uTextureRepeat.value.set(1,1),r.uniforms.uTextureOffset.value.set(0,0));if(o.backgroundImage!==void 0){const e=P(o.backgroundImage);if(e){r.uniforms.uGradientCount.value=e.stops.length,r.uniforms.uGradientAngle.value=e.angle;for(let a=0;a<8;a++)if(a<e.stops.length){const n=e.stops[a];r.uniforms.uGradientColors.value[a].set(n.color.r,n.color.g,n.color.b,n.alpha),r.uniforms.uGradientStops.value[a]=n.stop}else r.uniforms.uGradientColors.value[a].set(0,0,0,0),r.uniforms.uGradientStops.value[a]=1}else r.uniforms.uGradientCount.value=0}for(const e of Object.keys(o))e!=="width"&&e!=="height"&&e!=="borderRadius"&&e!=="borderWidth"&&e!=="backgroundColor"&&e!=="borderColor"&&e!=="opacity"&&e!=="bgOpacity"&&e!=="borderOpacity"&&e!=="texture"&&e!=="backgroundImage"&&r.uniforms[e]!==void 0&&(r.uniforms[e].value!==void 0&&r.uniforms[e].value!==null&&typeof r.uniforms[e].value.set=="function"?Array.isArray(o[e])?r.uniforms[e].value.set(...o[e]):o[e]!==void 0&&(o[e].copy?r.uniforms[e].value.copy(o[e]):r.uniforms[e].value=o[e]):r.uniforms[e].value=o[e])}function _(r,o){if(o==null){r.set(0,0,0,0);return}if(typeof o=="number"){r.set(o,o,o,o);return}if(Array.isArray(o)){r.set(o[0],o[1],o[2],o[3]);return}const t=o.split("/")[0].trim().split(/\s+/),i=x(t[0]),e=x(t[1]??t[0]),a=x(t[2]??t[0]),n=x(t[3]??t[1]??t[0]);r.set(i,e,a,n)}const D={create(r,o,t,i,e,a=2,n=null,c){return r==="BOX"?E(o,i,e,n,c):r==="TEXT"?new R(t||"",o,i,e,a):new u.MeshBasicMaterial({visible:!1})},update(r,o,t,i,e,a,n=2,c){o==="BOX"?L(r,t,e,a,c):o==="TEXT"&&r.updateText(i||"",t,e,a,n)},forceUpdateUniforms(r,o){I(r,o)}};f.Painter=D,f.TextGenerator=R,f.createBoxMaterial=E,f.parseColor=S,f.parseLinearGradient=P,f.parsePixelValue=x,f.setBoxUniforms=I,f.splitByComma=k,f.updateBoxMaterial=L,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/dist/src/Box/BoxGenerator.d.ts

@@ -14,5 +14,6 @@ export interface BoxUniformValues {
     borderOpacity?: number;
     texture?: THREE.Texture | null;
     backgroundImage?: string;
+    [key: string]: any;
 }
 export declare function setBoxUniforms(material: THREE.ShaderMaterial, values: BoxUniformValues): void;

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

@@ -22,4 +22,5 @@ export interface BoxStyles {
 export interface ShaderHooks {
     uvModifier?: string;
     colorModifier?: string;
+    uniforms?: Record<string, any>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirage-engine/painter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {

package/src/Box/BoxGenerator.ts

@@ -16,7 +16,33 @@ export function createBoxMaterial(
 ): THREE.ShaderMaterial {
   const hasTexture = texture !== null || !!styles.imageSrc;
 
-  const declChunk = hasTexture ? BoxChunk.declChunk : "";
+  let customUniformsCode = "";
+  const customUniforms: any = {};
+  
+  if (hooks?.uniforms) {
+    for (const [key, value] of Object.entries(hooks.uniforms)) {
+      if (typeof value === "number") {
+        customUniformsCode += `uniform float ${key};\n`;
+        customUniforms[key] = { value };
+      } else if (Array.isArray(value)) {
+        if (value.length === 2) {
+          customUniformsCode += `uniform vec2 ${key};\n`;
+          customUniforms[key] = { value: new THREE.Vector2(...value) };
+        } else if (value.length === 3) {
+          customUniformsCode += `uniform vec3 ${key};\n`;
+          customUniforms[key] = { value: new THREE.Vector3(...value) };
+        } else if (value.length === 4) {
+          customUniformsCode += `uniform vec4 ${key};\n`;
+          customUniforms[key] = { value: new THREE.Vector4(...value) };
+        }
+      } else {
+        customUniformsCode += `uniform float ${key};\n`;
+        customUniforms[key] = { value };
+      }
+    }
+  }
+
+  const declChunk = (hasTexture ? BoxChunk.declChunk : "") + "\n" + customUniformsCode;
   const baseUvCode = styles.isTraveler ? BoxChunk.uvChunk : "vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;\n";
   const uvChunk = hasTexture ? baseUvCode + (hooks?.uvModifier || "") : "";
   const baseColorChunk = hasTexture ? BoxChunk.baseColorChunk : "";
@@ -71,7 +97,7 @@ export function createBoxMaterial(
   }
 
   const material = new THREE.ShaderMaterial({
-    uniforms: uniforms,
+    uniforms: { ...uniforms, ...customUniforms },
     vertexShader: BoxShader.vertexShader,
     fragmentShader: fragmentShader,
     transparent: true,
@@ -119,6 +145,7 @@ export interface BoxUniformValues {
   borderOpacity?: number;
   texture?: THREE.Texture | null;
   backgroundImage?: string;
+  [key: string]: any;
 }
 
 export function setBoxUniforms(
@@ -244,7 +271,7 @@ export function setBoxUniforms(
             s.color.b,
             s.alpha,
           );
-          console.log(s.color.r, s.color.g, s.color.b);
+          // console.log(s.color.r, s.color.g, s.color.b);
           material.uniforms.uGradientStops.value[i] = s.stop;
         } else {
           material.uniforms.uGradientColors.value[i].set(0, 0, 0, 0);
@@ -255,6 +282,43 @@ export function setBoxUniforms(
       material.uniforms.uGradientCount.value = 0;
     }
   }
+
+  // Update dynamic custom uniforms
+  for (const key of Object.keys(values)) {
+    if (
+      key !== "width" &&
+      key !== "height" &&
+      key !== "borderRadius" &&
+      key !== "borderWidth" &&
+      key !== "backgroundColor" &&
+      key !== "borderColor" &&
+      key !== "opacity" &&
+      key !== "bgOpacity" &&
+      key !== "borderOpacity" &&
+      key !== "texture" &&
+      key !== "backgroundImage"
+    ) {
+      if (material.uniforms[key] !== undefined) {
+        if (
+          material.uniforms[key].value !== undefined &&
+          material.uniforms[key].value !== null &&
+          typeof material.uniforms[key].value.set === "function"
+        ) {
+          if (Array.isArray(values[key])) {
+            material.uniforms[key].value.set(...values[key]);
+          } else if (values[key] !== undefined) {
+            if (values[key].copy) {
+              material.uniforms[key].value.copy(values[key]);
+            } else {
+              material.uniforms[key].value = values[key];
+            }
+          }
+        } else {
+          material.uniforms[key].value = values[key];
+        }
+      }
+    }
+  }
 }
 
 function setBorderRadius(

package/src/types/common.ts

@@ -25,5 +25,6 @@ export interface BoxStyles {
 export interface ShaderHooks {
   uvModifier?: string; 
   colorModifier?: string; 
+  uniforms?: Record<string, any>;
 }