@solidtv/renderer 1.5.4 → 1.5.5

package/dist/src/core/shaders/canvas/EdgeFade.js

@@ -0,0 +1,92 @@
+import { EdgeFadeTemplate, } from '../templates/EdgeFadeTemplate.js';
+// Shared scratch canvas, grown on demand and reused across all EdgeFade nodes.
+// Rendering is single-threaded and non-reentrant so one scratch is enough.
+let scratchCanvas = null;
+let scratchCtx = null;
+/**
+ * Canvas2D implementation of {@link EdgeFade}: the node's content is drawn
+ * into an offscreen canvas, the edge ramps are erased with destination-out
+ * gradients, and the result is composited onto the main canvas. This keeps
+ * the background behind the node intact, which a destination-out pass on the
+ * main canvas could not.
+ */
+export const EdgeFade = {
+    props: EdgeFadeTemplate.props,
+    render(ctx, node, renderContext) {
+        const props = this.props;
+        const left = props.left;
+        const top = props.top;
+        const right = props.right;
+        const bottom = props.bottom;
+        if (left <= 0 && top <= 0 && right <= 0 && bottom <= 0) {
+            renderContext();
+            return;
+        }
+        const w = node.props.w;
+        const h = node.props.h;
+        if (w <= 0 || h <= 0) {
+            return;
+        }
+        const pr = this.stage.pixelRatio;
+        const sw = w * pr;
+        const sh = h * pr;
+        if (scratchCanvas === null) {
+            scratchCanvas = document.createElement('canvas');
+            scratchCtx = scratchCanvas.getContext('2d');
+        }
+        const sctx = scratchCtx;
+        if (scratchCanvas.width < sw || scratchCanvas.height < sh) {
+            // Growing the canvas implicitly clears it
+            scratchCanvas.width = Math.ceil(sw);
+            scratchCanvas.height = Math.ceil(sh);
+        }
+        else {
+            sctx.setTransform(1, 0, 0, 1, 0, 0);
+            sctx.clearRect(0, 0, sw, sh);
+        }
+        // Draw the node's content at the scratch origin
+        const tx = node.globalTransform.tx;
+        const ty = node.globalTransform.ty;
+        sctx.setTransform(pr, 0, 0, pr, -tx * pr, -ty * pr);
+        this.stage.renderer.renderNodeContent(node, sctx);
+        sctx.setTransform(1, 0, 0, 1, 0, 0);
+        // Erase each edge with a linear ramp. Sequential destination-out passes
+        // multiply: dst *= (1 - g), matching the WebGL ramp product.
+        sctx.globalCompositeOperation = 'destination-out';
+        if (left > 0) {
+            const d = left * pr;
+            const g = sctx.createLinearGradient(0, 0, d, 0);
+            g.addColorStop(0, 'rgba(0,0,0,1)');
+            g.addColorStop(1, 'rgba(0,0,0,0)');
+            sctx.fillStyle = g;
+            sctx.fillRect(0, 0, d, sh);
+        }
+        if (top > 0) {
+            const d = top * pr;
+            const g = sctx.createLinearGradient(0, 0, 0, d);
+            g.addColorStop(0, 'rgba(0,0,0,1)');
+            g.addColorStop(1, 'rgba(0,0,0,0)');
+            sctx.fillStyle = g;
+            sctx.fillRect(0, 0, sw, d);
+        }
+        if (right > 0) {
+            const d = right * pr;
+            const g = sctx.createLinearGradient(sw - d, 0, sw, 0);
+            g.addColorStop(0, 'rgba(0,0,0,0)');
+            g.addColorStop(1, 'rgba(0,0,0,1)');
+            sctx.fillStyle = g;
+            sctx.fillRect(sw - d, 0, d, sh);
+        }
+        if (bottom > 0) {
+            const d = bottom * pr;
+            const g = sctx.createLinearGradient(0, sh - d, 0, sh);
+            g.addColorStop(0, 'rgba(0,0,0,0)');
+            g.addColorStop(1, 'rgba(0,0,0,1)');
+            sctx.fillStyle = g;
+            sctx.fillRect(0, sh - d, sw, d);
+        }
+        sctx.globalCompositeOperation = 'source-over';
+        ctx.drawImage(scratchCanvas, 0, 0, sw, sh, tx, ty, w, h);
+    },
+};
+//# sourceMappingURL=EdgeFade.js.map

package/dist/src/core/shaders/canvas/EdgeFade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeFade.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/EdgeFade.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,GAEjB,MAAM,kCAAkC,CAAC;AAE1C,+EAA+E;AAC/E,2EAA2E;AAC3E,IAAI,aAAa,GAA6B,IAAI,CAAC;AACnD,IAAI,UAAU,GAAoC,IAAI,CAAC;AAEvD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACvD,KAAK,EAAE,gBAAgB,CAAC,KAAK;IAC7B,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;QACxB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACtB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QAC1B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAE5B,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,EAAE,CAAC;YACvD,aAAa,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QAED,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACvB,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QACjC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC;QAClB,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC;QAElB,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC3B,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACjD,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,IAAI,CAA6B,CAAC;QAC1E,CAAC;QACD,MAAM,IAAI,GAAG,UAAW,CAAC;QAEzB,IAAI,aAAa,CAAC,KAAK,GAAG,EAAE,IAAI,aAAa,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC;YAC1D,0CAA0C;YAC1C,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACpC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QAC/B,CAAC;QAED,gDAAgD;QAChD,MAAM,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC,EAAE,CAAC;QACpC,MAAM,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC,EAAE,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;QACnD,IAAI,CAAC,KAAK,CAAC,QAA2B,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACtE,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAEpC,wEAAwE;QACxE,6DAA6D;QAC7D,IAAI,CAAC,wBAAwB,GAAG,iBAAiB,CAAC;QAClD,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;YACb,MAAM,CAAC,GAAG,IAAI,GAAG,EAAE,CAAC;YACpB,MAAM,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAChD,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;YACnC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;YACnC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAC7B,CAAC;QACD,IAAI,GAAG,GAAG,CAAC,EAAE,CAAC;YACZ,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;YACnB,MAAM,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAChD,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;YACnC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;YACnC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAC7B,CAAC;QACD,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,MAAM,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;YACtD,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;YACnC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;YACnC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;YACf,MAAM,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC;YACtB,MAAM,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACtD,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;YACnC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;YACnC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,wBAAwB,GAAG,aAAa,CAAC;QAE9C,GAAG,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3D,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/LinearGradient.js

@@ -13,24 +13,7 @@ export const LinearGradient = {
             y0: line * Math.sin(angle) + nHeight * 0.5,
             x1: line * Math.cos(angle + Math.PI) + nWidth * 0.5,
             y1: line * Math.sin(angle + Math.PI) + nHeight * 0.5,
-            colors: this.props.colors.map((value, i, arr) => {
-                const alpha = (value >>> 24) & 0xff;
-                if (alpha === 0) {
-                    let nearestRGB = value & 0x00ffffff;
-                    for (let step = 1; step < arr.length; step++) {
-                        if (i - step >= 0 && ((arr[i - step] >>> 24) & 0xff) > 0) {
-                            nearestRGB = arr[i - step] & 0x00ffffff;
-                            break;
-                        }
-                        if (i + step < arr.length && ((arr[i + step] >>> 24) & 0xff) > 0) {
-                            nearestRGB = arr[i + step] & 0x00ffffff;
-                            break;
-                        }
-                    }
-                    value = (value & 0xff000000) | nearestRGB;
-                }
-                return this.toColorString(value);
-            }),
+            colors: this.props.colors.map((value) => this.toColorString(value)),
         };
     },
     render(ctx, node, renderContext) {

package/dist/src/core/shaders/canvas/LinearGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/LinearGradient.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/LinearGradient.ts"],"names":[],"mappings":"AACA,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAUhD,MAAM,CAAC,MAAM,cAAc,GAGvB;IACF,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACvD,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;QACvB,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;YACtC,GAAG,CAAC;QAEN,IAAI,CAAC,QAAQ,GAAG;YACd,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,GAAG;YACzC,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,GAAG;YAC1C,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,GAAG;YACnD,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,OAAO,GAAG,GAAG;YACpD,MAAM,EAAE,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrE,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,aAAa,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAwC,CAAC;QAC/D,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC;QACzC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,MAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CACvC,EAAE,GAAG,QAAQ,CAAC,EAAE,EAChB,EAAE,GAAG,QAAQ,CAAC,EAAE,EAChB,EAAE,GAAG,QAAQ,CAAC,EAAE,EAChB,EAAE,GAAG,QAAQ,CAAC,EAAE,CACjB,CAAC;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC;QAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAE,EAAE,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;QAC/C,CAAC;QACD,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAC;QACzB,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/templates/EdgeFadeTemplate.d.ts

@@ -0,0 +1,32 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+/**
+ * Properties of the {@link EdgeFade} shader
+ */
+export interface EdgeFadeProps {
+    /**
+     * Fade distance in pixels from the left edge. Alpha ramps 0 → 1 over this
+     * distance. 0 disables the fade for this edge.
+     *
+     * @default 0
+     */
+    left: number;
+    /**
+     * Fade distance in pixels from the top edge.
+     *
+     * @default 0
+     */
+    top: number;
+    /**
+     * Fade distance in pixels from the right edge.
+     *
+     * @default 0
+     */
+    right: number;
+    /**
+     * Fade distance in pixels from the bottom edge.
+     *
+     * @default 0
+     */
+    bottom: number;
+}
+export declare const EdgeFadeTemplate: CoreShaderType<EdgeFadeProps>;

package/dist/src/core/shaders/templates/EdgeFadeTemplate.js

@@ -0,0 +1,9 @@
+export const EdgeFadeTemplate = {
+    props: {
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+    },
+};
+//# sourceMappingURL=EdgeFadeTemplate.js.map

package/dist/src/core/shaders/templates/EdgeFadeTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeFadeTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/EdgeFadeTemplate.ts"],"names":[],"mappings":"AAiCA,MAAM,CAAC,MAAM,gBAAgB,GAAkC;IAC7D,KAAK,EAAE;QACL,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC"}

package/dist/src/core/shaders/webgl/EdgeFade.d.ts

@@ -0,0 +1,9 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import { type EdgeFadeProps } from '../templates/EdgeFadeTemplate.js';
+/**
+ * Multiplies the node's alpha by a linear ramp inward from each edge with a
+ * non-zero fade distance, revealing whatever is rendered behind the node.
+ * Unlike {@link LinearGradient} this masks the texture's own alpha instead of
+ * blending a gradient color over its RGB.
+ */
+export declare const EdgeFade: WebGlShaderType<EdgeFadeProps>;

package/dist/src/core/shaders/webgl/EdgeFade.js

@@ -0,0 +1,74 @@
+import { EdgeFadeTemplate, } from '../templates/EdgeFadeTemplate.js';
+/**
+ * Multiplies the node's alpha by a linear ramp inward from each edge with a
+ * non-zero fade distance, revealing whatever is rendered behind the node.
+ * Unlike {@link LinearGradient} this masks the texture's own alpha instead of
+ * blending a gradient color over its RGB.
+ */
+export const EdgeFade = {
+    props: EdgeFadeTemplate.props,
+    update() {
+        const props = this.props;
+        // Reciprocals are uploaded so the fragment shader needs no division and
+        // no zero-guard branch: 1e6 saturates clamp(px * recip) to 1.0 within a
+        // fraction of a pixel, which is exactly "no fade on this edge".
+        this.uniform4f('u_fadeRecip', props.left > 0 ? 1 / props.left : 1e6, props.top > 0 ? 1 / props.top : 1e6, props.right > 0 ? 1 / props.right : 1e6, props.bottom > 0 ? 1 / props.bottom : 1e6);
+    },
+    vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    void main() {
+      vec2 normalized = a_position * u_pixelRatio / u_resolution;
+      vec2 zero_two = normalized * 2.0;
+      vec2 clip_space = zero_two - 1.0;
+
+      v_color = a_color;
+      v_textureCoords = a_textureCoords;
+      v_nodeCoords = a_nodeCoords;
+
+      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+    }
+  `,
+    fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+    uniform vec4 u_fadeRecip;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    void main() {
+      vec4 color = v_color * texture2D(u_texture, v_textureCoords);
+      vec2 px = v_nodeCoords * u_dimensions;
+      float fade = clamp(px.x * u_fadeRecip.x, 0.0, 1.0)
+        * clamp(px.y * u_fadeRecip.y, 0.0, 1.0)
+        * clamp((u_dimensions.x - px.x) * u_fadeRecip.z, 0.0, 1.0)
+        * clamp((u_dimensions.y - px.y) * u_fadeRecip.w, 0.0, 1.0);
+      gl_FragColor = color * fade;
+    }
+  `,
+};
+//# sourceMappingURL=EdgeFade.js.map

package/dist/src/core/shaders/webgl/EdgeFade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeFade.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/EdgeFade.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,GAEjB,MAAM,kCAAkC,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAmC;IACtD,KAAK,EAAE,gBAAgB,CAAC,KAAK;IAC7B,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,wEAAwE;QACxE,wEAAwE;QACxE,gEAAgE;QAChE,IAAI,CAAC,SAAS,CACZ,aAAa,EACb,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EACrC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EACnC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EACvC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAC1C,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;GAwBT;CACF,CAAC"}

package/dist/src/core/shaders/webgl/LinearGradient.js

@@ -2,9 +2,29 @@ import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { LinearGradientTemplate, } from '../templates/LinearGradientTemplate.js';
 export const LinearGradient = {
     props: LinearGradientTemplate.props,
-    update() {
+    update(node) {
         const props = this.props;
-        this.uniform1f('u_angle', props.angle - (Math.PI / 180) * 90);
+        // The gradient distance is an affine function of the node-local texture
+        // coordinates, so it reduces to `dist = dot(v_textureCoords, a) + b`.
+        // `a`/`b` depend only on the angle and node dimensions (both are part of
+        // the value-key), so we compute them once on the CPU here instead of
+        // recomputing the trig per fragment on the GPU.
+        const angle = props.angle - (Math.PI / 180) * 90;
+        const c = Math.cos(angle);
+        const s = Math.sin(angle);
+        const w = node.w;
+        const h = node.h;
+        const lineDist = Math.abs(w * c) + Math.abs(h * s);
+        // Gradient axis (from -> to), gradVec = -lineDist * (c, s)
+        const gx = -lineDist * c;
+        const gy = -lineDist * s;
+        const gg = gx * gx + gy * gy;
+        const invGG = gg > 0 ? 1 / gg : 0;
+        // Gradient origin: f = lineDist * 0.5 * (c, s) + dimensions * 0.5
+        const fx = lineDist * 0.5 * c + w * 0.5;
+        const fy = lineDist * 0.5 * s + h * 0.5;
+        this.uniform2f('u_grad_a', w * gx * invGG, h * gy * invGG);
+        this.uniform1f('u_grad_b', -(fx * gx + fy * gy) * invGG);
         this.uniform1fv('u_stops', new Float32Array(props.stops));
         const colors = [];
         for (let i = 0; i < props.colors.length; i++) {
@@ -16,51 +36,6 @@ export const LinearGradient = {
     getCacheMarkers(props) {
         return `colors:${props.colors.length}`;
     },
-    vertex: `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    attribute vec2 a_position;
-    attribute vec2 a_textureCoords;
-    attribute vec4 a_color;
-
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
-    uniform vec2 u_dimensions;
-    uniform float u_angle;
-
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
-    varying float v_dist;
-
-    const float PI = 3.14159265359;
-
-    vec2 calcPoint(float d, float angle) {
-      return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-    }
-
-    void main() {
-      vec2 normalized = a_position * u_pixelRatio / u_resolution;
-      vec2 zero_two = normalized * 2.0;
-      vec2 clip_space = zero_two - 1.0;
-
-      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
-
-      v_color = a_color;
-      v_textureCoords = a_textureCoords;
-
-      float a = u_angle;
-      float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
-      vec2 f = calcPoint(lineDist * 0.5, a);
-      vec2 t = calcPoint(lineDist * 0.5, a + PI);
-      vec2 gradVec = t - f;
-      float dist = dot(a_textureCoords * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
-      v_dist = dist;
-    }
-  `,
     fragment(renderer, props) {
         return `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
@@ -72,13 +47,17 @@ export const LinearGradient = {
     #define MAX_STOPS ${props.colors.length}
     #define LAST_STOP ${props.colors.length - 1}
 
+    uniform float u_alpha;
+
     uniform sampler2D u_texture;
+
+    uniform vec2 u_grad_a;
+    uniform float u_grad_b;
     uniform float u_stops[MAX_STOPS];
     uniform vec4 u_colors[MAX_STOPS];
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
-    varying float v_dist;
 
     vec4 getGradientColor(float dist) {
       dist = clamp(dist, 0.0, 1.0);
@@ -104,9 +83,10 @@ export const LinearGradient = {
 
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec4 colorOut = getGradientColor(v_dist);
-      vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
-      gl_FragColor = vec4(blendedRGB, color.a);
+      float dist = dot(v_textureCoords, u_grad_a) + u_grad_b;
+      vec4 colorOut = getGradientColor(dist);
+      color = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+      gl_FragColor = color * u_alpha;
     }
   `;
     },

package/dist/src/core/shaders/webgl/LinearGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/LinearGradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAIhD,MAAM,CAAC,MAAM,cAAc,GAAyC;IAClE,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9D,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,eAAe,CAAC,KAA0B;QACxC,OAAO,UAAU,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CP;IACD,QAAQ,CAAC,QAAuB,EAAE,KAA0B;QAC1D,OAAO;;;;;;;wBAOa,KAAK,CAAC,MAAM,CAAC,MAAM;wBACnB,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsC5C,CAAC;IACF,CAAC;CACF,CAAC"}
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/LinearGradient.ts"],"names":[],"mappings":"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"}

package/dist/src/core/shaders/webgl/RadialGradient.js

@@ -72,8 +72,8 @@ export const RadialGradient = {
         float dist = length((point - u_projection) / u_size);
 
         vec4 colorOut = getGradientColor(dist);
-        vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
-        gl_FragColor = vec4(blendedRGB, color.a);
+        color = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+        gl_FragColor = color * u_alpha;
       }
     `;
     },

package/dist/src/core/shaders/webgl/RadialProgress.js

@@ -152,6 +152,13 @@ export const RadialProgress = {
           layer = fillPM * fillCoverage;
         #endif
 
+        // Apply node opacity to the introduced ring/track colors. They come
+        // from u_colors / u_trackColor and do not carry worldAlpha, so without
+        // this a fading RadialProgress node would keep its ring fully opaque.
+        // \`base\` already includes worldAlpha (via v_color), so it is left as-is
+        // to avoid double-applying. Scaling a premultiplied layer is valid.
+        layer *= u_alpha;
+
         // Premultiplied "over": out = src + dst*(1 - src.a). The output stays
         // visible on a fully-transparent \`base\` because layer brings its own alpha.
         float la = clamp(layer.a, 0.0, 1.0);

package/dist/src/core/shaders/webgl/RadialProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialProgress.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RadialProgress.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"RadialProgress.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RadialProgress.ts"],"names":[],"mappings":"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"}

package/dist/src/core/text-rendering/SdfFontHandler.d.ts

@@ -88,6 +88,7 @@ export interface SdfFont {
     metrics: FontMetrics;
     maxCharHeight: number;
 }
+export declare const MAX_FONT_LOAD_RETRIES = 3;
 /**
  * Check if the SDF font handler can render a font
  * @param {TrProps} trProps - Text rendering properties

package/dist/src/core/text-rendering/SdfFontHandler.js

@@ -2,6 +2,11 @@ import { UpdateType } from '../CoreNode.js';
 import { hasZeroWidthSpace } from './Utils.js';
 import { normalizeFontMetrics } from './TextLayoutEngine.js';
 import { isProductionEnvironment } from '../../utils.js';
+// Number of times a failed font load is automatically retried before
+// loadFont() finally rejects. Counts reloads *after* the initial attempt
+// (matching the `maxRetryCount` = retries convention used for textures), so
+// the load is attempted up to MAX_FONT_LOAD_RETRIES + 1 times in total.
+export const MAX_FONT_LOAD_RETRIES = 3;
 //global state variables for SdfFontHandler
 const fontCache = new Map();
 const fontLoadPromises = new Map();
@@ -170,44 +175,55 @@ export const loadFont = (stage, options) => {
     if (atlasDataUrl === undefined) {
         return Promise.reject(new Error(`Atlas data URL must be provided for SDF font: ${fontFamily}`));
     }
-    const nwff = (nodesWaitingForFont[fontFamily] = []);
-    // Create loading promise
-    const loadPromise = (async () => {
-        const fontData = await new Promise((resolve, reject) => {
-            const xhr = new XMLHttpRequest();
-            xhr.open('GET', atlasDataUrl, true);
-            xhr.responseType = 'json';
-            xhr.onload = () => {
-                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) {
-                    let data = xhr.response;
-                    if (typeof data === 'string') {
-                        try {
-                            data = JSON.parse(data);
-                        }
-                        catch (e) {
-                            reject(new Error('Failed to parse font data JSON'));
-                            return;
-                        }
+    // Reuse an existing waiter list. A previous load attempt for this font may
+    // have failed and left nodes parked here; overwriting the list would strand
+    // them, so a successful retry could never wake them. The list is consumed
+    // (and deleted) on the next successful load.
+    let nwff = nodesWaitingForFont[fontFamily];
+    if (nwff === undefined) {
+        nwff = nodesWaitingForFont[fontFamily] = [];
+    }
+    // One attempt at fetching + decoding the JSON atlas description. A fresh
+    // XHR runs per attempt so a transient network/parse failure can recover.
+    const fetchFontData = () => new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', atlasDataUrl, true);
+        xhr.responseType = 'json';
+        xhr.onload = () => {
+            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) {
+                let data = xhr.response;
+                if (typeof data === 'string') {
+                    try {
+                        data = JSON.parse(data);
+                    }
+                    catch (e) {
+                        reject(new Error('Failed to parse font data JSON'));
+                        return;
                     }
-                    resolve(data);
-                }
-                else {
-                    reject(new Error(`Failed to load font data: ${xhr.statusText}`));
                 }
-            };
-            xhr.onerror = () => {
-                reject(new Error('Network error occurred while trying to load the font data.'));
-            };
-            xhr.send(null);
-        });
+                resolve(data);
+            }
+            else {
+                reject(new Error(`Failed to load font data: ${xhr.statusText}`));
+            }
+        };
+        xhr.onerror = () => {
+            reject(new Error('Network error occurred while trying to load the font data.'));
+        };
+        xhr.send(null);
+    });
+    // One attempt at loading the atlas texture for the given font data. On
+    // success it processes + caches the font and wakes parked nodes. On failure
+    // it drops the dead atlas texture (createTexture caches by `src`, so the
+    // next attempt must evict it to build a fresh one) and rejects.
+    const loadAtlas = (fontData) => {
         if (!fontData || !fontData.chars) {
-            throw new Error('Invalid SDF font data format');
+            return Promise.reject(new Error('Invalid SDF font data format'));
         }
         // Atlas texture should be provided externally
         if (!atlasUrl) {
-            throw new Error('Atlas texture must be provided for SDF fonts');
+            return Promise.reject(new Error('Atlas texture must be provided for SDF fonts'));
         }
-        // Wait for atlas texture to load
         return new Promise((resolve, reject) => {
             // create new atlas texture using ImageTexture
             const atlasTexture = stage.txManager.createTexture('ImageTexture', {
@@ -216,41 +232,62 @@ export const loadFont = (stage, options) => {
             });
             atlasTexture.setRenderableOwner(fontFamily, true);
             atlasTexture.preventCleanup = true; // Prevent automatic cleanup
-            if (atlasTexture.state === 'loaded') {
-                // If already loaded, process immediately
-                processFontData(fontFamily, fontData, atlasTexture, metrics);
-                fontLoadPromises.delete(fontFamily);
-                for (let key in nwff) {
-                    nwff[key].setUpdateType(UpdateType.Local);
-                }
-                delete nodesWaitingForFont[fontFamily];
-                return resolve();
-            }
-            atlasTexture.on('loaded', () => {
+            const onLoaded = () => {
                 // Process and cache font data
                 processFontData(fontFamily, fontData, atlasTexture, metrics);
-                // remove from promises
-                fontLoadPromises.delete(fontFamily);
                 for (let key in nwff) {
                     nwff[key].setUpdateType(UpdateType.Local);
                 }
                 delete nodesWaitingForFont[fontFamily];
                 resolve();
-            });
+            };
+            if (atlasTexture.state === 'loaded') {
+                // If already loaded, process immediately
+                onLoaded();
+                return;
+            }
+            atlasTexture.on('loaded', onLoaded);
             // EventEmitter invokes listeners as (target, data), so the error payload
             // is the SECOND argument. The first arg is the Texture that emitted the
             // event. Reading it as the only param (the previous behavior) rejected
             // and logged the Texture instead of the actual TextureError.
             atlasTexture.on('failed', (_target, error) => {
-                // Cleanup on error
-                fontLoadPromises.delete(fontFamily);
-                if (fontCache[fontFamily]) {
-                    delete fontCache[fontFamily];
-                }
-                console.error(`Failed to load SDF font: ${fontFamily}`, error);
+                // Drop the failed atlas so a retry builds a fresh texture rather than
+                // getting this dead instance back from the createTexture key-cache.
+                atlasTexture.setRenderableOwner(fontFamily, false);
+                stage.txManager.removeTextureFromCache(atlasTexture);
                 reject(error);
             });
         });
+    };
+    // Initial attempt plus up to MAX_FONT_LOAD_RETRIES automatic reloads.
+    const loadPromise = (async () => {
+        let lastError;
+        for (let attempt = 0; attempt <= MAX_FONT_LOAD_RETRIES; attempt++) {
+            try {
+                await loadAtlas(await fetchFontData());
+                // Success: clear the in-flight marker (the font now lives in fontCache)
+                // — parked nodes were already woken inside loadAtlas.
+                fontLoadPromises.delete(fontFamily);
+                return;
+            }
+            catch (error) {
+                lastError = error;
+                if (attempt < MAX_FONT_LOAD_RETRIES) {
+                    console.warn(`SDF font "${fontFamily}" failed to load (attempt ${attempt + 1} of ${MAX_FONT_LOAD_RETRIES + 1}), retrying.`, error);
+                }
+            }
+        }
+        // Every attempt failed. Clear the in-flight marker so the font can be
+        // requested again and drop any partial cache entry. nodesWaitingForFont
+        // is deliberately kept: nodes parked here must survive so a later
+        // loadFont() (which reuses the list) can still wake them if the font
+        // eventually loads. The list shrinks as nodes self-remove via
+        // stopWaitingForFont on destroy.
+        fontLoadPromises.delete(fontFamily);
+        fontCache.delete(fontFamily);
+        console.error(`Failed to load SDF font: ${fontFamily}`, lastError);
+        throw lastError;
     })();
     fontLoadPromises.set(fontFamily, loadPromise);
     return loadPromise;