@mirage-engine/painter 0.4.0 → 1.0.1

package/dist/mirage-painter.js

@@ -1,226 +1,526 @@
-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 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 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")
+   * @returns Baseline Y offset in pixels
+   */
+  static getBaseline(e) {
+    if (this.cache.has(e))
+      return this.cache.get(e);
+    const n = this.calculateBaselineFromDOM(e);
+    return this.cache.set(e, n), n;
+  }
+  static calculateBaselineFromDOM(e) {
+    if (typeof document > "u")
+      return 0;
+    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;
+  }
 }
-function f(e) {
-  return typeof e == "number" ? e : parseFloat(e) || 0;
+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
+    });
+    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 = 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(n, a) {
+    const o = n.split(`
+`), i = [];
+    return o.forEach((t) => {
+      const c = t.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+      if (c.length === 0) {
+        i.push("");
+        return;
+      }
+      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());
+      }
+      s && i.push(s);
+    }), i;
+  }
+  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 b(e, r) {
-  if (!r) {
-    e.set(0, 0, 0, 0);
-    return;
+function x(r) {
+  return typeof r == "number" ? r : parseFloat(r) || 0;
+}
+function y(r) {
+  if (!r || r === "transparent")
+    return { color: new d.Color(16777215), alpha: 0 };
+  const e = r.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+  );
+  if (e) {
+    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 };
   }
-  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(r), alpha: 1 };
+}
+function P(r) {
+  const e = [];
+  let n = "", a = 0;
+  for (let o = 0; o < r.length; o++) {
+    const i = r[o];
+    if (i === "(")
+      a++;
+    else if (i === ")")
+      a--;
+    else if (i === "," && a === 0) {
+      e.push(n.trim()), n = "";
+      continue;
+    }
+    n += i;
+  }
+  return n && e.push(n.trim()), e;
+}
+function G(r) {
+  if (!r || typeof r != "string" || !r.includes("linear-gradient"))
+    return null;
+  const e = r.match(/linear-gradient\((.*)\)/);
+  if (!e)
+    return null;
+  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 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 v = y(p);
+    c.push({
+      color: v.color,
+      alpha: v.alpha,
+      rawStop: b,
+      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 u = l - s;
+        if (u > 1) {
+          const p = c[s].stop, v = (c[l].stop - p) / u;
+          for (let f = 1; f < u; f++)
+            c[s + f].stop = p + v * f;
+        }
+        s = l;
+      }
+  }
+  return { angle: o, stops: c };
+}
+const E = `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;
+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>
+}
+`, F = `uniform sampler2D uTexture;
+varying vec4 vScreenPos;
+uniform vec2 uTextureRepeat;
+uniform vec2 uTextureOffset;`, _ = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+vec2 resultUv = screenUv;
+
+`, W = `vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`, O = {
+  vertexShader: E,
+  fragmentShader: L
+}, B = {
+  declChunk: F,
+  uvChunk: _,
+  baseColorChunk: W
+};
+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(
+        f.color.r,
+        f.color.g,
+        f.color.b,
+        f.alpha
+      )
+    },
+    uBorderColor: {
+      value: new d.Vector4(
+        m.color.r,
+        m.color.g,
+        m.color.b,
+        m.alpha
+      )
+    },
+    uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
+    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) },
+    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,
+  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: l.FrontSide
+    side: d.FrontSide
     // for better performance
   });
+  return r.backgroundImage && T(C, { backgroundImage: r.backgroundImage }), C;
+}
+function V(r, e, n, a, o) {
+  const i = x(e.borderWidth);
+  T(r, {
+    width: n,
+    height: a,
+    borderRadius: e.borderRadius,
+    borderWidth: i,
+    backgroundColor: e.backgroundColor,
+    borderColor: e.borderColor,
+    opacity: e.opacity,
+    texture: o,
+    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, c) {
-    if (e === "BOX")
-      return R(r, i, a, t, c);
-    if (e === "TEXT") {
-      const u = m(
-        o || "",
-        r,
-        i,
-        a,
-        n
+function T(r, e) {
+  var a;
+  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 o = r.uniforms.uBgColor.value.w;
+      r.uniforms.uBgColor.value.set(
+        e.backgroundColor[0],
+        e.backgroundColor[1],
+        e.backgroundColor[2],
+        o
+      );
+    } else if (typeof e.backgroundColor == "string") {
+      const o = y(e.backgroundColor);
+      r.uniforms.uBgColor.value.set(
+        o.color.r,
+        o.color.g,
+        o.color.b,
+        o.alpha
+      );
+    } else {
+      const o = r.uniforms.uBgColor.value.w;
+      r.uniforms.uBgColor.value.set(
+        e.backgroundColor.r,
+        e.backgroundColor.g,
+        e.backgroundColor.b,
+        o
       );
-      return new l.MeshBasicMaterial({
-        map: u,
-        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 o = r.uniforms.uBorderColor.value.w;
+      r.uniforms.uBorderColor.value.set(
+        e.borderColor[0],
+        e.borderColor[1],
+        e.borderColor[2],
+        o
+      );
+    } else if (typeof e.borderColor == "string") {
+      const o = y(e.borderColor);
+      r.uniforms.uBorderColor.value.set(
+        o.color.r,
+        o.color.g,
+        o.color.b,
+        o.alpha
       );
-    else if (r === "TEXT") {
-      const u = e;
-      u.map && u.map.dispose();
-      const s = m(
-        i || "",
-        o,
-        a,
-        n,
-        t
+    } else {
+      const o = r.uniforms.uBorderColor.value.w;
+      r.uniforms.uBorderColor.value.set(
+        e.borderColor.r,
+        e.borderColor.g,
+        e.borderColor.b,
+        o
       );
-      u.map = s, u.needsUpdate = !0;
     }
+  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;
+        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
+    r.uniforms.uTextureRepeat && (r.uniforms.uTextureRepeat.value.set(1, 1), r.uniforms.uTextureOffset.value.set(0, 0));
+  if (e.backgroundImage !== void 0) {
+    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
+          r.uniforms.uGradientColors.value[i].set(0, 0, 0, 0), r.uniforms.uGradientStops.value[i] = 1;
+    } else
+      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 A(r, e) {
+  if (e == null) {
+    r.set(0, 0, 0, 0);
+    return;
+  }
+  if (typeof e == "number") {
+    r.set(e, e, e, e);
+    return;
+  }
+  if (Array.isArray(e)) {
+    r.set(e[0], e[1], e[2], e[3]);
+    return;
+  }
+  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 N = {
+  create(r, e, n, a, o, i = 2, t = null, c) {
+    return r === "BOX" ? U(
+      e,
+      a,
+      o,
+      t,
+      c
+    ) : r === "TEXT" ? new k(
+      n || "",
+      e,
+      a,
+      o,
+      i
+    ) : new d.MeshBasicMaterial({ visible: !1 });
+  },
+  update(r, e, n, a, o, i, t = 2, c) {
+    e === "BOX" ? V(
+      r,
+      n,
+      o,
+      i,
+      c
+    ) : e === "TEXT" && r.updateText(
+      a || "",
+      n,
+      o,
+      i,
+      t
+    );
+  },
+  forceUpdateUniforms(r, e) {
+    T(r, e);
   }
 };
 export {
-  S as Painter,
-  R as createBoxMaterial,
-  m as createTextTexture,
-  E 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
 };