@lightningjs/renderer 2.13.1 → 3.0.0-beta2

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

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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.width;
+        const nHeight = node.height;
+        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 gradient = ctx.createLinearGradient(quad.tx + this.computed.x0, quad.ty + this.computed.y0, quad.tx + this.computed.x1, quad.ty + this.computed.y1);
+        const colors = this.computed.colors;
+        for (let i = 0; i < colors.length; i++) {
+            gradient.addColorStop(this.props['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":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,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,KAAK,CAAC;QAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QAC5B,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,GAAG,CAAC,oBAAoB,CACvC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAG,EAC3B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAG,EAC3B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAG,EAC3B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAG,CAC5B,CAAC;QACF,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAO,CAAC;QACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,KAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAE,EAAE,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;QAC9D,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,68 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { RadialGradientTemplate, } from '../templates/RadialGradientTemplate.js';
+export const RadialGradient = {
+    props: RadialGradientTemplate.props,
+    update(node) {
+        let scaleX = 1;
+        let scaleY = 1;
+        const pWidth = this.props.width;
+        const pHeight = this.props.height;
+        if (pWidth > pHeight) {
+            scaleX = pWidth / pHeight;
+        }
+        else if (pHeight > pWidth) {
+            scaleY = pHeight / pWidth;
+        }
+        this.computed = {
+            pivotX: this.props.pivot[0] * node.width,
+            pivotY: this.props.pivot[1] * node.height,
+            scaleX,
+            scaleY,
+            size: Math.min(pWidth, pHeight) * 0.5,
+            colors: this.props.colors.map((value) => this.toColorString(value)),
+        };
+    },
+    render(ctx, quad, renderContext) {
+        renderContext();
+        const { scaleX, scaleY, pivotX, pivotY } = this.computed;
+        const colors = this.computed.colors;
+        let x = quad.tx + pivotX;
+        let y = quad.ty + pivotY;
+        if (scaleX === scaleY) {
+            const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.computed.size);
+            for (let i = 0; i < colors.length; i++) {
+                gradient.addColorStop(this.props['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, this.computed.size);
+        for (let i = 0; i < colors.length; i++) {
+            gradient.addColorStop(this.props['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,33 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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.width, node.height);
+    },
+    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;;;;;;;;;;;;;;;GAeG;AAEH,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,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,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,7 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type RoundedWithBorderProps } from '../templates/RoundedWithBorderTemplate.js';
+import type { ComputedBorderValues } from './Border.js';
+import type { ComputedRoundedValues } from './Rounded.js';
+type ComputedValues = ComputedRoundedValues & ComputedBorderValues;
+export declare const RoundedWithBorder: CanvasShaderType<RoundedWithBorderProps, ComputedValues>;
+export {};

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

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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 radius = calcFactoredRadiusArray(this.props.radius, node.width, node.height);
+        this.computed.radius = radius;
+        this.computed.borderColor = this.toColorString(this.props['border-color']);
+        this.computed.borderAsym = !valuesAreEqual(this.props['border-width']);
+        const borderWidth = this.props['border-width'];
+        this.computed.borderRadius = radius.map((value, index) => Math.max(0, value - borderWidth[index] * 0.5));
+    },
+    render(ctx, quad, renderContext) {
+        roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, this.computed.radius, this.props['border-width'], this.computed.borderRadius, this.computed.borderColor, this.computed.borderAsym, 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;;;;;;;;;;;;;;;GAeG;AAEH,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;AAI1D,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,MAAM,GAAG,uBAAuB,CACpC,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CACxC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAa,CACxC,CAAC;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,CAAC;QACxD,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACvD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC,KAAK,CAAE,GAAG,GAAG,CAAC,CACvC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,qBAAqB,CACnB,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,MAAO,EACrB,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,EACnC,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,QAAQ,CAAC,UAAW,EACzB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}

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

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

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

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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 radius = calcFactoredRadiusArray(this.props.radius, node.width, node.height);
+        this.computed.radius = radius;
+        this.computed.borderColor = this.toColorString(this.props['border-color']);
+        this.computed.borderAsym = !valuesAreEqual(this.props['border-width']);
+        const borderWidth = this.props['border-width'];
+        this.computed.borderRadius = radius.map((value, index) => Math.max(0, value - borderWidth[index] * 0.5));
+        this.computed.shadowColor = this.toColorString(this.props['shadow-color']);
+        this.computed.shadowRadius = radius.map((value) => value + this.props['shadow-blur']);
+    },
+    render(ctx, quad, renderContext) {
+        const { tx, ty, width, height } = quad;
+        render.shadow(ctx, tx, ty, height, width, this.computed.shadowColor, this.props['shadow-projection'], this.computed.shadowRadius, this.stage.pixelRatio);
+        render.roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, this.computed.radius, this.props['border-width'], this.computed.borderRadius, this.computed.borderColor, this.computed.borderAsym, 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":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAI5D,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAM5C,MAAM,CAAC,MAAM,0BAA0B,GAGnC;IACF,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,MAAM,GAAG,uBAAuB,CACpC,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CACxC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAa,CACxC,CAAC;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,CAAC;QACxD,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACvD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC,KAAK,CAAE,GAAG,GAAG,CAAC,CACvC,CAAC;QAEV,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,aAAa,CAAC,CACtC,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,CAAC,MAAM,CACX,GAAG,EACH,EAAE,EACF,EAAE,EACF,MAAM,EACN,KAAK,EACL,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACF,MAAM,CAAC,qBAAqB,CAC1B,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,MAAO,EACrB,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,EACnC,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,QAAQ,CAAC,UAAW,EACzB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}

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,38 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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 radius = calcFactoredRadiusArray(this.props.radius, node.width, node.height);
+        this.computed.radius = radius;
+        this.computed.shadowColor = this.toColorString(this.props['shadow-color']);
+        this.computed.shadowRadius = radius.map((value) => value + this.props['shadow-blur']);
+    },
+    render(ctx, quad, renderContext) {
+        const { tx, ty, width, height } = quad;
+        render.shadow(ctx, tx, ty, width, height, this.computed.shadowColor, this.props['shadow-projection'], this.computed.shadowRadius, this.stage.pixelRatio);
+        const path = new Path2D();
+        render.roundRect(path, tx, ty, width, height, this.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;;;;;;;;;;;;;;;GAeG;AAEH,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,MAAM,GAAG,uBAAuB,CACpC,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,aAAa,CAAC,CACtC,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;QAEvC,MAAM,CAAC,MAAM,CACX,GAAG,EACH,EAAE,EACF,EAAE,EACF,KAAK,EACL,MAAM,EACN,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QAEF,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAO,CAAC,CAAC;QACrE,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,31 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,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, borderWidth: Vec4, borderRadius: Vec4, borderColor: string, borderAsym: boolean, 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;

package/dist/src/core/shaders/canvas/utils/render.js

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export function roundRect(ctx, x, y, width, height, radius) {
+    if (ctx.roundRect !== undefined) {
+        ctx.roundRect(x, y, width, height, radius);
+        return;
+    }
+    const { 0: tl, 1: tr, 2: br, 3: bl } = radius;
+    ctx.moveTo(x + tl, y);
+    ctx.lineTo(x + width - tr, y);
+    ctx.ellipse(x + width - tr, y + tr, tr, tr, 0, 1.5 * Math.PI, 2 * Math.PI);
+    ctx.lineTo(x + width, y - height - br);
+    ctx.ellipse(x + width - br, y + height - br, br, br, 0, 0, 0.5 * Math.PI);
+    ctx.lineTo(x + bl, y + height);
+    ctx.ellipse(x + bl, y + height - bl, bl, bl, 0, 0.5 * Math.PI, Math.PI);
+    ctx.lineTo(x, y + tl);
+    ctx.ellipse(x + tl, y + tl, tl, tl, 0, Math.PI, 1.5 * Math.PI);
+}
+export function roundedRectWithBorder(ctx, x, y, width, height, radius, borderWidth, borderRadius, borderColor, borderAsym, renderContext) {
+    if (borderAsym === false) {
+        const bWidth = borderWidth[0];
+        const bHalfWidth = bWidth * 0.5;
+        const path = new Path2D();
+        roundRect(path, x, y, width, height, radius);
+        ctx.clip(path);
+        renderContext();
+        if (bWidth > 0) {
+            ctx.beginPath();
+            ctx.lineWidth = bWidth;
+            ctx.strokeStyle = borderColor;
+            roundRect(ctx, x + bHalfWidth, y + bHalfWidth, width - bWidth, height - bWidth, borderRadius);
+            ctx.stroke();
+        }
+        return;
+    }
+    ctx.beginPath();
+    roundRect(ctx, x, y, width, height, radius);
+    ctx.fillStyle = borderColor;
+    ctx.fill();
+    const { 0: t, 1: r, 2: b, 3: l } = borderWidth;
+    const path = new Path2D();
+    roundRect(path, x + l, y + t, width - (l + r), height - (t + b), borderRadius);
+    ctx.clip(path);
+    renderContext();
+}
+export function shadow(ctx, x, y, width, height, color, projection, radius, pixelRatio) {
+    ctx.save();
+    const cw = ctx.canvas.width;
+    const ch = ctx.canvas.height;
+    const scaleFactor = (2 * projection[3] + width) / width;
+    ctx.scale(scaleFactor, scaleFactor);
+    ctx.shadowColor = color;
+    ctx.shadowBlur = projection[2] * pixelRatio;
+    ctx.shadowOffsetX = projection[0] + cw * pixelRatio - projection[3] * 0.5;
+    ctx.shadowOffsetY = projection[1] + ch * pixelRatio - projection[3] * 0.5;
+    const spreadFactor = projection[3];
+    ctx.beginPath();
+    roundRect(ctx, (x - spreadFactor - cw) / scaleFactor, (y - spreadFactor - ch) / scaleFactor, width + spreadFactor, height + spreadFactor, radius);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.restore();
+}
+export function strokeLine(ctx, x, y, x2, y2, lineWidth) {
+    ctx.beginPath();
+    ctx.lineWidth = lineWidth;
+    ctx.moveTo(x, y);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+}
+//# sourceMappingURL=render.js.map

package/dist/src/core/shaders/canvas/utils/render.js.map

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

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

@@ -0,0 +1,37 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import { type PrefixedType } from './shaderUtils.js';
+/**
+ * Properties of the {@link Border} shader
+ */
+export interface BorderProps {
+    /**
+     * Width of the border in pixels
+     *
+     * @default 0
+     */
+    width: number | [number, number, number, number];
+    /**
+     * Color of the border in 0xRRGGBBAA
+     *
+     * @default 0xffffffff
+     */
+    color: number;
+    /**
+     * Top width
+     */
+    top: number;
+    /**
+     * Right width
+     */
+    right: number;
+    /**
+     * Bottom width
+     */
+    bottom: number;
+    /**
+     * Left width
+     */
+    left: number;
+}
+export declare function getBorderProps<P extends string>(prefix?: P): PrefixedType<BorderProps, P>;
+export declare const BorderTemplate: CoreShaderType<BorderProps>;

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

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { validateArrayLength4 } from './shaderUtils.js';
+export function getBorderProps(prefix) {
+    const pf = prefix && prefix.length > 0 ? `${prefix}-` : '';
+    const width = pf + 'width';
+    return {
+        [width]: {
+            default: [0, 0, 0, 0],
+            resolve(value) {
+                if (value !== undefined) {
+                    return validateArrayLength4(value);
+                }
+                return [].concat(this.default);
+            },
+        },
+        [pf + 'color']: 0xffffffff,
+        [pf + 'top']: {
+            default: 0,
+            set(value, props) {
+                props[width][0] = value;
+            },
+            get(props) {
+                return props[width][0];
+            },
+        },
+        [pf + 'right']: {
+            default: 0,
+            set(value, props) {
+                props[width][1] = value;
+            },
+            get(props) {
+                return props[width][1];
+            },
+        },
+        [pf + 'bottom']: {
+            default: 0,
+            set(value, props) {
+                props[width][2] = value;
+            },
+            get(props) {
+                return props[width][2];
+            },
+        },
+        [pf + 'left']: {
+            default: 0,
+            set(value, props) {
+                props[width][3] = value;
+            },
+            get(props) {
+                return props[width][3];
+            },
+        },
+    };
+}
+export const BorderTemplate = {
+    props: getBorderProps(),
+};
+//# sourceMappingURL=BorderTemplate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BorderTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/BorderTemplate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,EAAE,oBAAoB,EAAqB,MAAM,kBAAkB,CAAC;AAoC3E,MAAM,UAAU,cAAc,CAC5B,MAAU;IAEV,MAAM,EAAE,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,KAAK,GAAG,EAAE,GAAG,OAAO,CAAC;IAC3B,OAAO;QACL,CAAC,KAAK,CAAC,EAAE;YACP,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;QACD,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,UAAU;QAC1B,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE;YACZ,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE;YACd,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE;YACf,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,CAAC,EAAE,GAAG,MAAM,CAAC,EAAE;YACb,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;KAC8B,CAAC;AACpC,CAAC;AAID,MAAM,CAAC,MAAM,cAAc,GAAgC;IACzD,KAAK,EAAE,cAAc,EAAsB;CAC5C,CAAC"}