@solidtv/renderer 1.0.0

package/dist/src/core/renderers/webgl/internal/WebGlUtils.js

@@ -0,0 +1,13 @@
+/**
+ * Generic WebGL Utility Functions
+ *
+ * @remarks
+ * Nothing here should be coupled to Renderer logic / types.
+ *
+ * @param gl
+ * @returns
+ */
+export function isWebGl2(gl) {
+    return (self.WebGL2RenderingContext && gl instanceof self.WebGL2RenderingContext);
+}
+//# sourceMappingURL=WebGlUtils.js.map

package/dist/src/core/renderers/webgl/internal/WebGlUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGlUtils.js","sourceRoot":"","sources":["../../../../../../src/core/renderers/webgl/internal/WebGlUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,UAAU,QAAQ,CACtB,EAAyB;IAEzB,OAAO,CACL,IAAI,CAAC,sBAAsB,IAAI,EAAE,YAAY,IAAI,CAAC,sBAAsB,CACzE,CAAC;AACJ,CAAC"}

package/dist/src/core/shaders/canvas/Border.d.ts

@@ -0,0 +1,15 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type BorderProps } from '../templates/BorderTemplate.js';
+export interface ComputedBorderValues {
+    borderColor: string;
+    borderAsym: boolean;
+    innerX: number;
+    innerY: number;
+    innerW: number;
+    innerH: number;
+    outerX: number;
+    outerY: number;
+    outerW: number;
+    outerH: number;
+}
+export declare const Border: CanvasShaderType<BorderProps, ComputedBorderValues>;

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

@@ -0,0 +1,83 @@
+import { formatRgba, parseColorRgba } from '../../lib/colorParser.js';
+import { valuesAreEqual } from '../../lib/utils.js';
+import { BorderTemplate, } from '../templates/BorderTemplate.js';
+export const Border = {
+    props: BorderTemplate.props,
+    update() {
+        this.computed.borderColor = formatRgba(parseColorRgba(this.props.color));
+        this.computed.borderAsym = !valuesAreEqual(this.props.w);
+        const borderAlign = this.props.align;
+        const borderGap = this.props.gap;
+        const borderW = this.props.w;
+        if (this.computed.borderAsym === false) {
+            const bWidth = borderW[0] * 0.5;
+            //inside
+            const baseline = bWidth - borderW[0] * borderAlign - borderGap;
+            this.computed.outerX = baseline;
+            this.computed.outerY = baseline;
+            this.computed.outerW = -baseline * 2;
+            this.computed.outerH = -baseline * 2;
+            return;
+        }
+        // Calculate outer and inner rectangle dimensions
+        const [t, r, b, l] = this.props.w;
+        const outerX = (this.computed.outerX = -l * borderAlign - borderGap);
+        const outerY = (this.computed.outerY = -t * borderAlign - borderGap);
+        let outerW = 0;
+        let outerH = 0;
+        if (r > 0) {
+            outerW += r * borderAlign + borderGap;
+        }
+        if (l > 0) {
+            outerW += l * borderAlign + borderGap;
+        }
+        if (b > 0) {
+            outerH += b * borderAlign + borderGap;
+        }
+        if (t > 0) {
+            outerH += t * borderAlign + borderGap;
+        }
+        this.computed.outerW = outerW;
+        this.computed.outerH = outerH;
+        this.computed.innerX = outerX + l;
+        this.computed.innerY = outerY + t;
+        this.computed.innerW = outerW - l - r;
+        this.computed.innerH = outerH - t - b;
+    },
+    render(ctx, quad, renderContext) {
+        renderContext();
+        const computed = this.computed;
+        ctx.strokeStyle = computed.borderColor;
+        if (computed.borderAsym === false && this.props.w[0] > 0) {
+            ctx.lineWidth = this.props.w[0];
+            ctx.beginPath();
+            ctx.strokeRect(quad.tx + computed.outerX, quad.ty + computed.outerY, quad.width + computed.outerW, quad.height + computed.outerH);
+            return;
+        }
+        // Pre-calculate common values
+        const tx = quad.tx;
+        const ty = quad.ty;
+        const width = quad.width;
+        const height = quad.height;
+        // Calculate outer rectangle (including border)
+        const outerX = tx + computed.outerX;
+        const outerY = ty + computed.outerY;
+        const outerW = width + computed.outerW;
+        const outerH = height + computed.outerH;
+        // Calculate inner rectangle (excluding border)
+        const innerX = tx + computed.innerX;
+        const innerY = ty + computed.innerY;
+        const innerW = width + computed.innerW;
+        const innerH = height + computed.innerH;
+        // Use clip to subtract inner from outer
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(outerX, outerY, outerW, outerH);
+        ctx.rect(innerX, innerY, innerW, innerH);
+        ctx.clip('evenodd');
+        ctx.fillStyle = this.computed.borderColor;
+        ctx.fillRect(outerX, outerY, outerW, outerH);
+        ctx.restore();
+    },
+};
+//# sourceMappingURL=Border.js.map

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

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

package/dist/src/core/shaders/canvas/HolePunch.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { type HolePunchProps } from '../templates/HolePunchTemplate.js';
+export interface ComputedHolePunchValues {
+    radius: Vec4;
+}
+export declare const HolePunch: CanvasShaderType<HolePunchProps, ComputedHolePunchValues>;

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

@@ -0,0 +1,22 @@
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import { HolePunchTemplate, } from '../templates/HolePunchTemplate.js';
+import { roundRect } from './utils/render.js';
+export const HolePunch = {
+    props: HolePunchTemplate.props,
+    update() {
+        this.computed.radius = calcFactoredRadiusArray(this.props.radius, this.props.w, this.props.h);
+    },
+    render(ctx, quad, renderContext) {
+        ctx.save();
+        renderContext();
+        const { x, y, w, h } = this.props;
+        ctx.beginPath();
+        roundRect(ctx, quad.tx + x, quad.ty + y, w, h, this.computed.radius);
+        ctx.closePath();
+        ctx.fillStyle = 'black';
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.fill();
+        ctx.restore();
+    },
+};
+//# sourceMappingURL=HolePunch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/HolePunch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM9C,MAAM,CAAC,MAAM,SAAS,GAGlB;IACF,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,uBAAuB,CAC5C,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAM,CAAC,CAAC,EACb,IAAI,CAAC,KAAM,CAAC,CAAC,CACd,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAM,CAAC;QACnC,GAAG,CAAC,SAAS,EAAE,CAAC;QAChB,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAO,CAAC,CAAC;QACtE,GAAG,CAAC,SAAS,EAAE,CAAC;QAChB,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC;QACxB,GAAG,CAAC,wBAAwB,GAAG,iBAAiB,CAAC;QACjD,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,GAAG,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/LinearGradient.d.ts

@@ -0,0 +1,10 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type LinearGradientProps } from '../templates/LinearGradientTemplate.js';
+export interface ComputedLinearGradientValues {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    colors: string[];
+}
+export declare const LinearGradient: CanvasShaderType<LinearGradientProps, ComputedLinearGradientValues>;

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

@@ -0,0 +1,32 @@
+import { LinearGradientTemplate, } from '../templates/LinearGradientTemplate.js';
+export const LinearGradient = {
+    props: LinearGradientTemplate.props,
+    update(node) {
+        const angle = this.props.angle - (Math.PI / 180) * 90;
+        const nWidth = node.w;
+        const nHeight = node.h;
+        const line = (Math.abs(nWidth * Math.sin(angle)) +
+            Math.abs(nHeight * Math.cos(angle))) *
+            0.5;
+        this.computed = {
+            x0: line * Math.cos(angle) + nWidth * 0.5,
+            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) => this.toColorString(value)),
+        };
+    },
+    render(ctx, quad, renderContext) {
+        renderContext();
+        const computed = this.computed;
+        const gradient = ctx.createLinearGradient(quad.tx + computed.x0, quad.ty + computed.y0, quad.tx + computed.x1, quad.ty + computed.y1);
+        const colors = computed.colors;
+        const stops = this.props.stops;
+        for (let i = 0; i < colors.length; i++) {
+            gradient.addColorStop(stops[i], colors[i]);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+    },
+};
+//# sourceMappingURL=LinearGradient.js.map

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

@@ -0,0 +1 @@
+{"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,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CACvC,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,EACrB,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,EACrB,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,EACrB,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,CACtB,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,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/RadialGradient.d.ts

@@ -0,0 +1,11 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type RadialGradientProps } from '../templates/RadialGradientTemplate.js';
+export interface ComputedRadialGradientValues {
+    pivotX: number;
+    pivotY: number;
+    scaleX: number;
+    scaleY: number;
+    size: number;
+    colors: string[];
+}
+export declare const RadialGradient: CanvasShaderType<RadialGradientProps, ComputedRadialGradientValues>;

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

@@ -0,0 +1,54 @@
+import { RadialGradientTemplate, } from '../templates/RadialGradientTemplate.js';
+export const RadialGradient = {
+    props: RadialGradientTemplate.props,
+    update(node) {
+        let scaleX = 1;
+        let scaleY = 1;
+        const props = this.props;
+        const pWidth = props.w;
+        const pHeight = props.h;
+        if (pWidth > pHeight) {
+            scaleX = pWidth / pHeight;
+        }
+        else if (pHeight > pWidth) {
+            scaleY = pHeight / pWidth;
+        }
+        this.computed = {
+            pivotX: props.pivot[0] * node.w,
+            pivotY: props.pivot[1] * node.h,
+            scaleX,
+            scaleY,
+            size: Math.min(pWidth, pHeight),
+            colors: props.colors.map((value) => this.toColorString(value)),
+        };
+    },
+    render(ctx, quad, renderContext) {
+        renderContext();
+        const { scaleX, scaleY, pivotX, pivotY, colors, size } = this
+            .computed;
+        let x = quad.tx + pivotX;
+        let y = quad.ty + pivotY;
+        const stops = this.props.stops;
+        if (scaleX === scaleY) {
+            const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
+            for (let i = 0; i < colors.length; i++) {
+                gradient.addColorStop(stops[i], colors[i]);
+            }
+            ctx.fillStyle = gradient;
+            ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+            return;
+        }
+        ctx.save();
+        ctx.scale(scaleX, scaleY);
+        x = x / scaleX;
+        y = y / scaleY;
+        const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
+        for (let i = 0; i < colors.length; i++) {
+            gradient.addColorStop(stops[i], colors[i]);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(quad.tx / scaleX, quad.ty / scaleY, quad.width / scaleX, quad.height / scaleY);
+        ctx.restore();
+    },
+};
+//# sourceMappingURL=RadialGradient.js.map

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

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

package/dist/src/core/shaders/canvas/Rounded.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { type RoundedProps } from '../templates/RoundedTemplate.js';
+export interface ComputedRoundedValues {
+    radius: Vec4;
+}
+export declare const Rounded: CanvasShaderType<RoundedProps, ComputedRoundedValues>;

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

@@ -0,0 +1,17 @@
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import { RoundedTemplate, } from '../templates/RoundedTemplate.js';
+import { roundRect } from './utils/render.js';
+export const Rounded = {
+    props: RoundedTemplate.props,
+    saveAndRestore: true,
+    update(node) {
+        this.computed.radius = calcFactoredRadiusArray(this.props.radius, node.w, node.h);
+    },
+    render(ctx, quad, renderContext) {
+        const path = new Path2D();
+        roundRect(path, quad.tx, quad.ty, quad.width, quad.height, this.computed.radius);
+        ctx.clip(path);
+        renderContext();
+    },
+};
+//# sourceMappingURL=Rounded.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rounded.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Rounded.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM9C,MAAM,CAAC,MAAM,OAAO,GAA0D;IAC5E,KAAK,EAAE,eAAe,CAAC,KAAK;IAC5B,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,uBAAuB,CAC5C,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;QAC1B,SAAS,CACP,IAAI,EACJ,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,MAAO,CACtB,CAAC;QACF,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEf,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/RoundedWithBorder.d.ts

@@ -0,0 +1,10 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { type RoundedWithBorderProps } from '../templates/RoundedWithBorderTemplate.js';
+import type { ComputedBorderValues } from './Border.js';
+import type { ComputedRoundedValues } from './Rounded.js';
+export type ComputedRoundedWithBorderValues = ComputedRoundedValues & ComputedBorderValues & {
+    outerBorderRadius: Vec4;
+    innerBorderRadius: Vec4;
+};
+export declare const RoundedWithBorder: CanvasShaderType<RoundedWithBorderProps, ComputedRoundedWithBorderValues>;

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

@@ -0,0 +1,57 @@
+import { calcFactoredRadiusArray, valuesAreEqual } from '../../lib/utils.js';
+import { RoundedWithBorderTemplate, } from '../templates/RoundedWithBorderTemplate.js';
+import { roundedRectWithBorder } from './utils/render.js';
+export const RoundedWithBorder = {
+    props: RoundedWithBorderTemplate.props,
+    saveAndRestore: true,
+    update(node) {
+        const props = this.props;
+        const radius = calcFactoredRadiusArray(props.radius, node.w, node.h);
+        this.computed.radius = radius;
+        this.computed.borderColor = this.toColorString(props['border-color']);
+        this.computed.borderAsym = !valuesAreEqual(props['border-w']);
+        const borderAlign = this.props['border-align'];
+        const borderGap = this.props['border-gap'];
+        // Calculate outer and inner rectangle dimensions
+        const [t, r, b, l] = this.props['border-w'];
+        const outerX = (this.computed.outerX = -l * borderAlign - borderGap);
+        const outerY = (this.computed.outerY = -t * borderAlign - borderGap);
+        let outerW = 0;
+        let outerH = 0;
+        if (r > 0) {
+            outerW += r * borderAlign + borderGap;
+        }
+        if (l > 0) {
+            outerW += l * borderAlign + borderGap;
+        }
+        if (b > 0) {
+            outerH += b * borderAlign + borderGap;
+        }
+        if (t > 0) {
+            outerH += t * borderAlign + borderGap;
+        }
+        this.computed.outerW = outerW;
+        this.computed.outerH = outerH;
+        this.computed.innerX = outerX + l;
+        this.computed.innerY = outerY + t;
+        this.computed.innerW = outerW - l - r;
+        this.computed.innerH = outerH - t - b;
+        this.computed.outerBorderRadius = [
+            Math.max(0.0, radius[0] + (Math.max(l, r) * borderAlign + borderGap)),
+            Math.max(0.0, radius[1] + (Math.max(t, b) * borderAlign + borderGap)),
+            Math.max(0.0, radius[2] + (Math.max(b, t) * borderAlign + borderGap)),
+            Math.max(0.0, radius[3] + (Math.max(l, r) * borderAlign + borderGap)),
+        ];
+        this.computed.innerBorderRadius = [
+            Math.max(0.0, this.computed.outerBorderRadius[0] - Math.max(l, r)),
+            Math.max(0.0, this.computed.outerBorderRadius[1] - Math.max(t, b)),
+            Math.max(0.0, this.computed.outerBorderRadius[2] - Math.max(b, t)),
+            Math.max(0.0, this.computed.outerBorderRadius[3] - Math.max(l, r)),
+        ];
+    },
+    render(ctx, quad, renderContext) {
+        const computed = this.computed;
+        roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, computed.radius, this.props['border-gap'], computed.outerX, computed.outerY, computed.outerW, computed.outerH, computed.outerBorderRadius, computed.innerX, computed.innerY, computed.innerW, computed.innerH, computed.innerBorderRadius, computed.borderColor, renderContext);
+    },
+};
+//# sourceMappingURL=RoundedWithBorder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,CAAa,CAAC,CAAC;QAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAW,CAAC;QAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,CAAC;QAEtD,iDAAiD;QACjD,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,KAAM,CAAC,UAAU,CAAS,CAAC;QAErD,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;QACrE,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;QACrE,IAAI,MAAM,GAAG,CAAC,CAAC;QACf,IAAI,MAAM,GAAG,CAAC,CAAC;QAEf,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAE9B,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;QAEtC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,GAAG;YAChC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;YACrE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;YACrE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;YACrE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;SACtE,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,iBAAiB,GAAG;YAChC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACnE,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA2C,CAAC;QAClE,qBAAqB,CACnB,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,QAAQ,CAAC,MAAM,EACf,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,EACnC,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,iBAAiB,EAC1B,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,iBAAiB,EAC1B,QAAQ,CAAC,WAAW,EACpB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/RoundedWithBorderAndShadow.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type RoundedWithBorderAndShadowProps } from '../templates/RoundedWithBorderAndShadowTemplate.js';
+import type { ComputedRoundedWithBorderValues } from './RoundedWithBorder.js';
+import type { ComputedShadowValues } from './Shadow.js';
+type ComputedValues = ComputedRoundedWithBorderValues & ComputedShadowValues;
+export declare const RoundedWithBorderAndShadow: CanvasShaderType<RoundedWithBorderAndShadowProps, ComputedValues>;
+export {};

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

@@ -0,0 +1,61 @@
+import { calcFactoredRadiusArray, valuesAreEqual } from '../../lib/utils.js';
+import { RoundedWithBorderAndShadowTemplate, } from '../templates/RoundedWithBorderAndShadowTemplate.js';
+import * as render from './utils/render.js';
+export const RoundedWithBorderAndShadow = {
+    props: RoundedWithBorderAndShadowTemplate.props,
+    saveAndRestore: true,
+    update(node) {
+        const props = this.props;
+        const radius = calcFactoredRadiusArray(props.radius, node.w, node.h);
+        this.computed.radius = radius;
+        this.computed.borderColor = this.toColorString(props['border-color']);
+        this.computed.borderAsym = !valuesAreEqual(props['border-w']);
+        const borderAlign = this.props['border-align'];
+        const borderGap = this.props['border-gap'];
+        // Calculate outer and inner rectangle dimensions
+        const [t, r, b, l] = this.props['border-w'];
+        const outerX = (this.computed.outerX = -l * borderAlign - borderGap);
+        const outerY = (this.computed.outerY = -t * borderAlign - borderGap);
+        let outerW = 0;
+        let outerH = 0;
+        if (r > 0) {
+            outerW += r * borderAlign + borderGap;
+        }
+        if (l > 0) {
+            outerW += l * borderAlign + borderGap;
+        }
+        if (b > 0) {
+            outerH += b * borderAlign + borderGap;
+        }
+        if (t > 0) {
+            outerH += t * borderAlign + borderGap;
+        }
+        this.computed.outerW = outerW;
+        this.computed.outerH = outerH;
+        this.computed.innerX = outerX + l;
+        this.computed.innerY = outerY + t;
+        this.computed.innerW = outerW - l - r;
+        this.computed.innerH = outerH - t - b;
+        this.computed.outerBorderRadius = [
+            Math.max(0.0, radius[0] + (Math.max(l, r) * borderAlign + borderGap)),
+            Math.max(0.0, radius[1] + (Math.max(t, b) * borderAlign + borderGap)),
+            Math.max(0.0, radius[2] + (Math.max(b, t) * borderAlign + borderGap)),
+            Math.max(0.0, radius[3] + (Math.max(l, r) * borderAlign + borderGap)),
+        ];
+        this.computed.innerBorderRadius = [
+            Math.max(0.0, this.computed.outerBorderRadius[0] - Math.max(l, r)),
+            Math.max(0.0, this.computed.outerBorderRadius[1] - Math.max(t, b)),
+            Math.max(0.0, this.computed.outerBorderRadius[2] - Math.max(b, t)),
+            Math.max(0.0, this.computed.outerBorderRadius[3] - Math.max(l, r)),
+        ];
+        this.computed.shadowColor = this.toColorString(props['shadow-color']);
+        this.computed.shadowRadius = this.computed.outerBorderRadius.map((value) => value + props['shadow-blur']);
+    },
+    render(ctx, quad, renderContext) {
+        const { tx, ty, width, height } = quad;
+        const computed = this.computed;
+        render.shadow(ctx, tx + computed.outerX, ty + computed.outerY, height + computed.outerH, width + computed.outerW, computed.shadowColor, this.props['shadow-projection'], computed.shadowRadius, this.stage.pixelRatio);
+        render.roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, computed.radius, this.props['border-gap'], computed.outerX, computed.outerY, computed.outerW, computed.outerH, computed.outerBorderRadius, computed.innerX, computed.innerY, computed.innerW, computed.innerH, computed.innerBorderRadius, computed.borderColor, renderContext);
+    },
+};
+//# sourceMappingURL=RoundedWithBorderAndShadow.js.map

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

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

package/dist/src/core/shaders/canvas/RoundedWithShadow.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type RoundedWithShadowProps } from '../templates/RoundedWithShadowTemplate.js';
+import type { ComputedRoundedValues } from './Rounded.js';
+import type { ComputedShadowValues } from './Shadow.js';
+type ComputedValues = ComputedRoundedValues & ComputedShadowValues;
+export declare const RoundedWithShadow: CanvasShaderType<RoundedWithShadowProps, ComputedValues>;
+export {};

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

@@ -0,0 +1,26 @@
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import { RoundedWithShadowTemplate, } from '../templates/RoundedWithShadowTemplate.js';
+import * as render from './utils/render.js';
+export const RoundedWithShadow = {
+    props: RoundedWithShadowTemplate.props,
+    saveAndRestore: true,
+    update(node) {
+        const props = this.props;
+        const radius = calcFactoredRadiusArray(props.radius, node.w, node.h);
+        this.computed.radius = radius;
+        this.computed.shadowColor = this.toColorString(props['shadow-color']);
+        this.computed.shadowRadius = radius.map((value) => value + props['shadow-blur']);
+    },
+    render(ctx, quad, renderContext) {
+        const { tx, ty, width, height } = quad;
+        const computed = this.computed;
+        if (this.props['shadow-color'] !== 0) {
+            render.shadow(ctx, tx, ty, width, height, computed.shadowColor, this.props['shadow-projection'], computed.shadowRadius, this.stage.pixelRatio);
+        }
+        const path = new Path2D();
+        render.roundRect(path, tx, ty, width, height, computed.radius);
+        ctx.clip(path);
+        renderContext();
+    },
+};
+//# sourceMappingURL=RoundedWithShadow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedWithShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithShadow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAI5C,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAChC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QAEjD,IAAI,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YACtC,MAAM,CAAC,MAAM,CACX,GAAG,EACH,EAAE,EACF,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,CAAC,WAAW,EACpB,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,QAAQ,CAAC,YAAY,EACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACJ,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC/D,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACf,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/Shadow.d.ts

@@ -0,0 +1,8 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { type ShadowProps } from '../templates/ShadowTemplate.js';
+export interface ComputedShadowValues {
+    shadowColor: string;
+    shadowRadius: Vec4;
+}
+export declare const Shadow: CanvasShaderType<ShadowProps, ComputedShadowValues>;

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

@@ -0,0 +1,15 @@
+import { ShadowTemplate, } from '../templates/ShadowTemplate.js';
+import { shadow } from './utils/render.js';
+export const Shadow = {
+    props: ShadowTemplate.props,
+    update() {
+        this.computed.shadowColor = this.toColorString(this.props['color']);
+        const blur = this.props['blur'];
+        this.computed.shadowRadius = [blur, blur, blur, blur];
+    },
+    render(ctx, quad, renderContext) {
+        shadow(ctx, quad.tx, quad.ty, quad.width, quad.height, this.computed.shadowColor, this.props['projection'], this.computed.shadowRadius, this.stage.pixelRatio);
+        renderContext();
+    },
+};
+//# sourceMappingURL=Shadow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Shadow.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAO3C,MAAM,CAAC,MAAM,MAAM,GAAwD;IACzE,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM;QACJ,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACrE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACxD,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,CACJ,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,KAAM,CAAC,YAAY,CAAC,EACzB,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACF,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/utils/render.d.ts

@@ -0,0 +1,5 @@
+import type { Vec4 } from '../../../renderers/webgl/internal/ShaderUtils.js';
+export declare function roundRect(ctx: CanvasRenderingContext2D | Path2D, x: number, y: number, width: number, height: number, radius: Vec4): void;
+export declare function roundedRectWithBorder(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: Vec4, borderGap: number, outerX: number, outerY: number, outerW: number, outerH: number, outerBorderRadius: Vec4, innerX: number, innerY: number, innerW: number, innerH: number, innerBorderRadius: Vec4, borderColor: string, renderContext: () => void): void;
+export declare function shadow(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, color: string, projection: Vec4, radius: Vec4, pixelRatio: number): void;
+export declare function strokeLine(ctx: CanvasRenderingContext2D, x: number, y: number, x2: number, y2: number, lineWidth: number): void;