@mirage-engine/painter 0.3.0 → 1.0.0

package/dist/mirage-painter.js

@@ -1,226 +1,512 @@
-import * as l from "three";
-function h(e, r, o) {
-  const i = r.split(`
-`), a = [];
-  return i.forEach((n) => {
-    const t = n.split(" ");
-    let c = t[0];
-    for (let u = 1; u < t.length; u++) {
-      const s = t[u];
-      e.measureText(c + " " + s).width < o ? c += " " + s : (a.push(c), c = s);
-    }
-    a.push(c);
-  }), a;
-}
-function m(e, r, o, i, a = 2) {
-  const n = document.createElement("canvas"), t = n.getContext("2d");
-  if (!t)
-    throw new Error("[Mirage] Failed to create canvas context");
-  const u = (window.devicePixelRatio || 1) * a;
-  n.width = o * u, n.height = i * u, t.scale(u, u), t.font = r.font, t.fillStyle = r.color, t.textBaseline = "top", t.globalAlpha = 1;
-  const s = h(t, e, o), v = r.lineHeight;
-  s.forEach((B, p) => {
-    const g = p * v + 2;
-    let C = 0;
-    r.textAlign === "center" ? C = o / 2 : r.textAlign === "right" && (C = o), t.textAlign = r.textAlign, t.fillText(B, C, g);
-  });
-  const d = new l.CanvasTexture(n);
-  return d.colorSpace = l.SRGBColorSpace, d.minFilter = l.LinearFilter, d.magFilter = l.LinearFilter, d.needsUpdate = !0, d;
+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);
+import * as d from "three";
+class T {
+  /**
+   * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
+   * @param font CSS font shorthand string (e.g., "400 16px Inter")
+   * @returns Baseline Y offset in pixels
+   */
+  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"), 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;
+  }
 }
-function f(e) {
-  return typeof e == "number" ? e : parseFloat(e) || 0;
+b(T, "cache", /* @__PURE__ */ new Map());
+class A extends d.MeshBasicMaterial {
+  constructor(t, a, r, n, i = 2) {
+    super({
+      transparent: !0,
+      side: d.FrontSide,
+      color: 16777215
+    });
+    b(this, "canvas");
+    b(this, "ctx");
+    b(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);
+  }
+  wrapText(t, a) {
+    const r = t.split(`
+`), n = [];
+    return r.forEach((i) => {
+      const c = i.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (c.length === 0) {
+        n.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());
+      }
+      l && n.push(l);
+    }), n;
+  }
+  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);
+    }), this.map && (this.map.needsUpdate = !0);
+  }
+  dispose() {
+    this.map && this.map.dispose(), super.dispose();
+  }
 }
-function b(e, r) {
-  if (!r) {
-    e.set(0, 0, 0, 0);
-    return;
+function v(o) {
+  return typeof o == "number" ? o : parseFloat(o) || 0;
+}
+function C(o) {
+  if (!o || o === "transparent")
+    return { color: new d.Color(16777215), alpha: 0 };
+  const e = o.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 o = r.split("/")[0].trim().split(/\s+/), i = f(o[0]), a = f(o[1] ?? o[0]), n = f(o[2] ?? o[0]), t = f(o[3] ?? o[1] ?? o[0]);
-  e.set(i, a, n, t);
-}
-const O = (
-  /* glsl */
-  `
-  varying vec2 vUv;
-  varying vec4 vScreenPos;
-  void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    vScreenPos = gl_Position;
-  }
-`
-), T = (
-  /* glsl */
-  `
-
-  varying vec2 vUv;
-  
-  uniform vec2 uSize;
-  uniform vec4 uBorderRadius;
-  uniform float uBorderWidth;
-  uniform vec3 uBgColor;
-  uniform vec3 uBorderColor;
-  uniform float uOpacity;
-  uniform float uBgOpacity;
-  uniform float uBorderOpacity;
+  return { color: new d.Color(o), alpha: 1 };
+}
+function k(o) {
+  const e = [];
+  let t = "", a = 0;
+  for (let r = 0; r < o.length; r++) {
+    const n = o[r];
+    if (n === "(")
+      a++;
+    else if (n === ")")
+      a--;
+    else if (n === "," && a === 0) {
+      e.push(t.trim()), t = "";
+      continue;
+    }
+    t += n;
+  }
+  return t && e.push(t.trim()), e;
+}
+function M(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], 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 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);
+    }
+    const p = C(h);
+    c.push({
+      color: p.color,
+      alpha: p.alpha,
+      rawStop: g,
+      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 h = c[l].stop, p = (c[s].stop - h) / u;
+          for (let f = 1; f < u; f++)
+            c[l + f].stop = h + p * f;
+        }
+        l = s;
+      }
+  }
+  return { angle: r, stops: c };
+}
+const P = `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;
+uniform vec2 uSize;
+uniform vec4 uBorderRadius;
+uniform float uBorderWidth;
+uniform vec4 uBgColor;
+uniform vec4 uBorderColor;
+uniform float uOpacity;
 
-  #INJECT_DECLARATIONS
+uniform int uGradientCount;
+uniform float uGradientAngle;
+uniform vec4 uGradientColors[8];
+uniform float uGradientStops[8];
 
-  float sdRoundedBox(vec2 p, vec2 b, float r) {
-    vec2 q = abs(p) - b + r;
+#INJECT_DECLARATIONS
 
-    return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
-  }
+vec3 linearToSrgb(vec3 linearColor) {
+    vec3 linearPart = 12.92 * linearColor;
+    vec3 curvePart = 1.055 * pow(linearColor, vec3(1.0 / 2.4)) - 0.055;
+    vec3 switchCondition = step(vec3(0.0031308), linearColor);
+    return mix(linearPart, curvePart, switchCondition);
+}
+
+vec3 srgbToLinear(vec3 srgbColor) {
+    vec3 linearPart = srgbColor / 12.92;
+    vec3 curvePart = pow((srgbColor + vec3(0.055)) / 1.055, vec3(2.4));
+    vec3 switchCondition = step(vec3(0.04045), srgbColor);
+    return mix(linearPart, curvePart, switchCondition);
+}
+
+vec4 blendSrcOverInLinear(vec4 front, vec4 back) {
+  front.rgb = srgbToLinear(front.rgb);
+  back.rgb  = srgbToLinear(back.rgb);
+  float aOut = front.a + back.a * (1.0 - front.a);
+  float safeAlpha = max(aOut, 0.0001);
+  vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
+  return vec4(linearToSrgb(cOut), aOut);
+}
+
+vec4 blendSrcOver(vec4 front, vec4 back) {
+  float aOut = front.a + back.a * (1.0 - front.a);
+  float safeAlpha = max(aOut, 0.0001);
+  vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
+  return vec4(cOut, aOut);
+}
+
+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;
+}
+
+float sdVisualBox(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  float n = 2.01; 
+  float d = pow(pow(max(q.x, 0.0), n) + pow(max(q.y, 0.0), n), 1.0/n) - r;
+  return min(max(q.x, q.y), 0.0) + d;
+}
 
-  void main() {
-    vec2 p = (vUv - 0.5) * uSize;
-    vec2 halfSize = uSize * 0.5;
+vec4 calculateGradientLayer(vec2 uv) {
+  if (uGradientCount < 2) return uGradientColors[0];
 
-    #INJECT_UV_MODIFIER
+  vec2 dir = vec2(sin(uGradientAngle), cos(uGradientAngle));
+  vec2 p = (uv - 0.5) * uSize;
+  float proj = dot(p, dir);
+  float L = abs(uSize.x * dir.x) + abs(uSize.y * dir.y);
+  float t = clamp((proj / L) + 0.5, 0.0, 1.0);
+  
+  vec4 color = uGradientColors[0];
+  for (int i = 1; i < 8; i++) {
+    if (i >= uGradientCount) break;
+    float prevStop = uGradientStops[i-1];
+    float currStop = uGradientStops[i];
     
-    // color decision pipeline
-    vec4 baseColor = vec4(uBgColor, uBgOpacity);
+    float factor = clamp((t - prevStop) / (currStop - prevStop + 0.00001), 0.0, 1.0);
+    color = mix(color, uGradientColors[i], factor);
+  }
+  // return vec4(linearToSrgb(color.rgb), color.a);
+  return vec4(color);
+}
 
-    #INJECT_BASE_COLOR
+void main() {
+  vec2 p = (vUv - 0.5) * uSize;
+  vec2 halfSize = uSize * 0.5;
 
-    // sdf shape pipeline
-    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
-    float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
-    float d = sdRoundedBox(p, halfSize, r);
+  #INJECT_UV_MODIFIER
 
-    float aa = 1.0; 
-    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+  // color decision pipeline
+  vec4 baseColor = vec4(uBgColor.rgb, uBgColor.a);
 
-    float halfBorder = uBorderWidth * 0.5;
-    float borderD = abs(d + halfBorder) - halfBorder;
-    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
-    if (uBorderWidth <= 0.01) {
-      borderAlpha = 0.0;
-    }
+  if (uGradientCount > 0) {
+    vec4 gradColor = calculateGradientLayer(vUv);
+    baseColor = blendSrcOver(gradColor, baseColor);
+  }
 
-    // final blending (border + background)
-    float aFront = borderAlpha;
-    float aBack = baseColor.a;
-    float aOut = aFront + aBack * (1.0 - aFront);
+  #INJECT_BASE_COLOR
 
-    float safeAlpha = max(aOut, 0.0001);
-    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
-    vec4 finalColor = vec4(cOut, aOut);
+  // Hybrid SDF
+  vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+  float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
+  r = min(r, min(halfSize.x, halfSize.y));
 
-    // final color control (Tint, Noise)
-    #INJECT_COLOR_MODIFIER
+  float d = sdRoundedBox(p, halfSize, r);
 
-    float finalOpacity = finalColor.a * bgMask * uOpacity;
-    if (finalOpacity < 0.001) discard;
+  float d_smooth = sdVisualBox(p, halfSize, r);
+  float d_visual = d_smooth / fwidth(d_smooth);
 
-    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+  // rendering pipeline
+  float bgMask = 1.0 - smoothstep(-0.5, 0.5, d_visual);
 
-    #include <colorspace_fragment>
+  float halfBorder = uBorderWidth * 0.5;
+  float borderD = abs(d + halfBorder) - halfBorder;
+  float borderAlpha = (1.0 - smoothstep(0.0, 1.0, borderD)) * uBorderColor.a; 
+  if (uBorderWidth <= 0.01) {
+    borderAlpha = 0.0;
   }
-`
-);
-function x(e) {
-  if (!e || e === "transparent")
-    return { color: new l.Color(16777215), alpha: 0 };
-  const r = e.match(
-    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
-  );
-  if (r) {
-    const o = parseInt(r[1], 10), i = parseInt(r[2], 10), a = parseInt(r[3], 10), n = r[4] !== void 0 ? parseFloat(r[4]) : 1;
-    return { color: new l.Color(`rgb(${o}, ${i}, ${a})`), alpha: n };
-  }
-  return { color: new l.Color(e), alpha: 1 };
-}
-function R(e, r, o, i = null, a) {
-  const n = i !== null, t = n ? (
-    /* glsl */
-    `
-    uniform sampler2D uTexture;
-    varying vec4 vScreenPos;
-  `
-  ) : "", c = n ? (
-    /* glsl */
-    `
-    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-    vec2 resultUv = screenUv;
-    ${(a == null ? void 0 : a.uvModifier) || ""}
-  `
-  ) : "", u = n ? (
-    /* glsl */
-    `
-    baseColor = texture2D(uTexture, resultUv);
-  `
-  ) : "", s = (a == null ? void 0 : a.colorModifier) || "", v = T.replace("#INJECT_DECLARATIONS", t).replace("#INJECT_UV_MODIFIER", c).replace("#INJECT_BASE_COLOR", u).replace("#INJECT_COLOR_MODIFIER", s), d = x(e.backgroundColor), B = x(e.borderColor), p = {
-    uSize: { value: new l.Vector2(r, o) },
-    uBorderRadius: { value: new l.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: f(e.borderWidth) },
-    uBgColor: { value: d.color },
-    uBorderColor: { value: B.color },
-    uOpacity: { value: e.opacity ?? 1 },
-    uBgOpacity: { value: d.alpha },
-    uBorderOpacity: { value: B.alpha },
-    uTexture: { value: null }
+
+  // final blending (border + background) using blendSrcOver
+  vec4 borderLayer = vec4(uBorderColor.rgb, borderAlpha);
+  vec4 finalColor = blendSrcOver(borderLayer, baseColor);
+  // final color control (Tint, Noise)
+  #INJECT_COLOR_MODIFIER
+
+  float finalOpacity = finalColor.a * bgMask * uOpacity;
+  if (finalOpacity < 0.001) discard;
+
+  gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+
+
+  // #include <colorspace_fragment>
+}
+`, E = `uniform sampler2D uTexture;
+varying vec4 vScreenPos;
+uniform vec2 uTextureRepeat;
+uniform vec2 uTextureOffset;`, L = `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
+};
+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) },
+    uBgColor: {
+      value: new d.Vector4(
+        g.color.r,
+        g.color.g,
+        g.color.b,
+        g.alpha
+      )
+    },
+    uBorderColor: {
+      value: new d.Vector4(
+        p.color.r,
+        p.color.g,
+        p.color.b,
+        p.alpha
+      )
+    },
+    uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: v(o.borderWidth) },
+    uOpacity: { value: o.opacity ?? 1 },
+    uTexture: { value: null },
+    uTextureRepeat: { value: new d.Vector2(1, 1) },
+    uTextureOffset: { value: new d.Vector2(0, 0) },
+    uGradientCount: { value: 0 },
+    uGradientAngle: { value: 0 },
+    uGradientColors: {
+      value: Array.from({ length: 8 }, () => new d.Vector4(0, 0, 0, 0))
+    },
+    uGradientStops: { value: new Float32Array(8) }
   };
-  return b(p.uBorderRadius.value, e.borderRadius), n && (p.uTexture.value = i), new l.ShaderMaterial({
-    uniforms: p,
-    vertexShader: O,
-    fragmentShader: v,
+  O(f.uBorderRadius.value, o.borderRadius), n && (f.uTexture.value = a);
+  const m = new d.ShaderMaterial({
+    uniforms: f,
+    vertexShader: B.vertexShader,
+    fragmentShader: h,
     transparent: !0,
-    side: l.FrontSide
+    side: d.FrontSide
     // for better performance
   });
+  return o.backgroundImage && w(m, { backgroundImage: o.backgroundImage }), m;
+}
+function W(o, e, t, a, r) {
+  const n = v(e.borderWidth);
+  w(o, {
+    width: t,
+    height: a,
+    borderRadius: e.borderRadius,
+    borderWidth: n,
+    backgroundColor: e.backgroundColor,
+    borderColor: e.borderColor,
+    opacity: e.opacity,
+    texture: r,
+    backgroundImage: e.backgroundImage
+  });
 }
-function E(e, r, o, i, a) {
-  const n = x(r.backgroundColor), t = x(r.borderColor);
-  e.uniforms.uSize.value.set(o, i), b(e.uniforms.uBorderRadius.value, r.borderRadius), e.uniforms.uBorderWidth.value = f(r.borderWidth), e.uniforms.uBgColor.value.copy(n.color), e.uniforms.uBorderColor.value.copy(t.color), e.uniforms.uOpacity.value = r.opacity ?? 1, e.uniforms.uBgOpacity.value = n.alpha, e.uniforms.uBorderOpacity.value = t.alpha, e.uniforms.uTexture && a !== void 0 && (e.uniforms.uTexture.value = a);
-}
-const S = {
-  create(e, r, o, i, a, n = 2, t = null) {
-    if (e === "BOX")
-      return R(r, i, a, t);
-    if (e === "TEXT") {
-      const c = m(
-        o || "",
-        r,
-        i,
-        a,
-        n
+function w(o, 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 (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 = C(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
       );
-      return new l.MeshBasicMaterial({
-        map: c,
-        transparent: !0,
-        side: l.FrontSide,
-        color: 16777215
-      });
     }
-    return new l.MeshBasicMaterial({ visible: !1 });
-  },
-  update(e, r, o, i, a, n, t = 2, c) {
-    if (r === "BOX")
-      E(
-        e,
-        o,
-        a,
-        n,
-        c
+  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 = C(e.borderColor);
+      o.uniforms.uBorderColor.value.set(
+        r.color.r,
+        r.color.g,
+        r.color.b,
+        r.alpha
       );
-    else if (r === "TEXT") {
-      const u = e;
-      u.map && u.map.dispose();
-      const s = m(
-        i || "",
-        o,
-        a,
-        n,
-        t
+    } else {
+      const r = o.uniforms.uBorderColor.value.w;
+      o.uniforms.uBorderColor.value.set(
+        e.borderColor.r,
+        e.borderColor.g,
+        e.borderColor.b,
+        r
       );
-      u.map = s, u.needsUpdate = !0;
     }
+  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 {
+        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 = 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;
+        } else
+          o.uniforms.uGradientColors.value[n].set(0, 0, 0, 0), o.uniforms.uGradientStops.value[n] = 1;
+    } else
+      o.uniforms.uGradientCount.value = 0;
+  }
+}
+function O(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+/), 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 z = {
+  create(o, e, t, a, r, n = 2, i = null, c) {
+    return o === "BOX" ? _(
+      e,
+      a,
+      r,
+      i,
+      c
+    ) : o === "TEXT" ? new A(
+      t || "",
+      e,
+      a,
+      r,
+      n
+    ) : new d.MeshBasicMaterial({ visible: !1 });
+  },
+  update(o, e, t, a, r, n, i = 2, c) {
+    e === "BOX" ? W(
+      o,
+      t,
+      r,
+      n,
+      c
+    ) : e === "TEXT" && o.updateText(
+      a || "",
+      t,
+      r,
+      n,
+      i
+    );
+  },
+  forceUpdateUniforms(o, e) {
+    w(o, e);
   }
 };
 export {
-  S as Painter,
-  R as createBoxMaterial,
-  m as createTextTexture,
-  E as updateBoxMaterial
+  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
 };