shaders 3.0.453 → 3.1.455

package/dist/core/{Tint-DBM82OkZ.js → Tint-Dj1rSoJ0.js}

@@ -1,5 +1,6 @@
-import { At as max, Gt as data_exports, Mt as mix, cn as vec4f, d as ZERO, it as std_exports, ln as f32, m as call, nt as src_default, on as vec3f, wt as dot } from "./edges-B7Yet3LV.js";
-import { a as transformColor } from "./transformations-C7gn_5rF.js";
+import { At as max, Gt as data_exports, Mt as mix, at as std_exports, cn as vec4f, on as vec3f, rt as src_default, un as f32, wt as dot } from "./edges-CD7gCAto.js";
+import { S as definePointwiseFilter } from "./porters-DUtQounc.js";
+import { a as transformColor } from "./transformations-B-zNWNdd.js";
 const tintColorPlain = src_default.fn([
 	vec4f,
 	vec4f,
@@ -360,12 +361,11 @@ const tintColorPreserve = src_default.fn([
 		std: std_exports
 	})
 }) && $.f)({}));
-const componentDefinition = {
+const componentDefinition = definePointwiseFilter({
 	name: "Tint",
 	boundingBoxDeclaration: { aspectRatio: null },
 	category: "Adjustments",
 	description: "Apply a color tint to the image",
-	requiresChild: true,
 	props: {
 		color: {
 			default: "#ff8800",
@@ -401,22 +401,15 @@ const componentDefinition = {
 			}
 		}
 	},
-	fragment: ({ uniforms, childNode, propValues }) => {
-		if (!childNode) {
-			console.error("You must pass a child component into the Tint shader.");
-			return ZERO;
-		}
-		if (Number(propValues.preserveLuminosity) > 0) return call(tintColorPreserve, "tintColorPreserve", [
-			childNode,
-			uniforms.color,
-			uniforms.amount
-		]);
-		return call(tintColorPlain, "tintColorPlain", [
-			childNode,
-			uniforms.color,
-			uniforms.amount
-		]);
-	}
-};
+	body: (propValues) => Number(propValues.preserveLuminosity) > 0 ? {
+		fn: tintColorPreserve,
+		hint: "tintColorPreserve"
+	} : {
+		fn: tintColorPlain,
+		hint: "tintColorPlain"
+	},
+	args: ({ uniforms }) => [uniforms.color, uniforms.amount],
+	missingChildMessage: "You must pass a child component into the Tint shader."
+});
 var Tint_default = componentDefinition;
 export { tintColorPreserve as i, componentDefinition as n, tintColorPlain as r, Tint_default as t };

package/dist/core/{Trapezoid-DaIBhsop.js → Trapezoid-D2PMU9G3.js}

@@ -1,6 +1,16 @@
-import { G as mixColorsVariants, W as mixColorsLinear, b as vec4, ln as f32, m as call, nt as src_default, rn as vec2f } from "./edges-B7Yet3LV.js";
-import { b as trapezoidSdf, g as shapeLocalCoords, h as sdf_exports, n as ShapeMask, v as strokeMaskFromSdf } from "./sdf-B8rPE1PG.js";
-import { a as transformColor, c as transformPosition, l as transformStrokePosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-C7gn_5rF.js";
+import { rn as vec2f, rt as src_default, un as f32 } from "./edges-CD7gCAto.js";
+import { C as defineSdfShapeShader } from "./porters-DUtQounc.js";
+import { C as sdf_exports, E as strokeMaskFromSdf, O as trapezoidSdf, a as ShapeMask, w as shapeLocalCoords } from "./device-B0ZwBfOg.js";
+function halfUvFromProp(value, canvasHeight, fallback) {
+	const safeFallback = Number.isFinite(fallback) ? fallback : .5;
+	if (value != null && typeof value === "object" && typeof value.value === "number") {
+		const dv = value;
+		if (!Number.isFinite(dv.value)) return safeFallback;
+		if (dv.unit !== "px") return dv.value;
+		return Number.isFinite(canvasHeight) && canvasHeight !== 0 ? dv.value / (2 * canvasHeight) : safeFallback;
+	}
+	return typeof value === "number" && Number.isFinite(value) ? value : safeFallback;
+}
 const trapezoidShape = src_default.fn([
 	vec2f,
 	f32,
@@ -127,10 +137,20 @@ const trapezoidShape = src_default.fn([
 	},
 	externals: () => ({ sdf: sdf_exports })
 }) && $.f)({}));
-var trapezoidHalfUV = (v, ch, fallback) => v != null && typeof v === "object" && typeof v.value === "number" ? v.unit === "px" ? v.value / (2 * ch) : v.value : typeof v === "number" ? v : fallback;
-const componentDefinition = {
+const componentDefinition = defineSdfShapeShader({
 	name: "Trapezoid",
-	boundingBoxDeclaration: {
+	description: "Trapezoid with adjustable top and bottom widths and height",
+	shapeFn: trapezoidShape,
+	shapeFnName: "trapezoidShape",
+	bodyArgs: [
+		"topWidth",
+		"bottomWidth",
+		"height",
+		"rotation"
+	],
+	colorDescription: "Fill color of the trapezoid",
+	centerDescription: "Center position of the trapezoid",
+	bounds: { custom: {
 		propBindings: {
 			x: {
 				prop: "center",
@@ -146,9 +166,9 @@ const componentDefinition = {
 			}
 		},
 		computeBounds(props, cw, ch) {
-			const bottom = trapezoidHalfUV(props.bottomWidth, ch, .35);
+			const bottom = halfUvFromProp(props.bottomWidth, ch, .35);
 			const top = typeof props.topWidth === "number" ? props.topWidth : .2;
-			const halfH = trapezoidHalfUV(props.height, ch, .25);
+			const halfH = halfUvFromProp(props.height, ch, .25);
 			const cx = typeof props.center?.x === "number" ? props.center.x : .5;
 			const cy = typeof props.center?.y === "number" ? props.center.y : .5;
 			return {
@@ -164,65 +184,30 @@ const componentDefinition = {
 				value: Math.max(0, Math.round(newHalfUV * 2 * ch)),
 				unit: "px"
 			} : Math.max(.001, newHalfUV);
-			const bottom = trapezoidHalfUV(currentProps.bottomWidth, ch, .35);
+			const bottom = halfUvFromProp(currentProps.bottomWidth, ch, .35);
 			const top = typeof currentProps.topWidth === "number" ? currentProps.topWidth : .2;
 			const oldMax = Math.max(top, bottom);
 			const newMax = ch > 0 ? bounds.widthPx / (2 * ch) : oldMax;
 			const factor = oldMax > 0 ? newMax / oldMax : 1;
+			const prevCenter = currentProps.center ?? {
+				x: .5,
+				y: .5
+			};
 			return {
 				center: {
-					...currentProps.center ?? {
-						x: .5,
-						y: .5
-					},
-					x: bounds.centerXPx / cw,
-					y: bounds.centerYPx / ch
+					...prevCenter,
+					x: cw > 0 ? bounds.centerXPx / cw : prevCenter.x ?? .5,
+					y: ch > 0 ? bounds.centerYPx / ch : prevCenter.y ?? .5
 				},
 				bottomWidth: keepUnit(currentProps.bottomWidth, bottom * factor),
 				topWidth: Math.max(.001, top * factor),
-				height: keepUnit(currentProps.height, ch > 0 ? bounds.heightPx / (2 * ch) : trapezoidHalfUV(currentProps.height, ch, .25)),
+				height: keepUnit(currentProps.height, ch > 0 ? bounds.heightPx / (2 * ch) : halfUvFromProp(currentProps.height, ch, .25)),
 				rotation: bounds.rotationDeg
 			};
 		},
 		freeResize: true
-	},
-	category: "Shapes",
-	description: "Trapezoid with adjustable top and bottom widths and height",
-	acceptsUVContext: true,
-	props: {
-		origin: {
-			default: "center",
-			description: "Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.",
-			ui: {
-				type: "origin",
-				label: "Origin",
-				group: "Position"
-			}
-		},
-		color: {
-			default: "#ffffff",
-			transform: transformColor,
-			description: "Fill color of the trapezoid",
-			ui: {
-				type: "color",
-				label: "Color",
-				group: "Colors"
-			}
-		},
-		center: {
-			default: {
-				x: .5,
-				y: .5
-			},
-			transform: transformPosition,
-			description: "Center position of the trapezoid",
-			ui: {
-				type: "position",
-				label: "Center",
-				group: "Position",
-				units: ["%", "px"]
-			}
-		},
+	} },
+	shapeProps: {
 		bottomWidth: {
 			default: .35,
 			description: "Half-width of the bottom edge",
@@ -262,113 +247,8 @@ const componentDefinition = {
 				units: ["%", "px"],
 				dimensional: "half-canvas-height"
 			}
-		},
-		rotation: {
-			default: 0,
-			description: "Rotation in degrees",
-			ui: {
-				type: "range",
-				min: 0,
-				max: 360,
-				step: 1,
-				label: "Rotation",
-				group: "Shape"
-			}
-		},
-		softness: {
-			default: 0,
-			description: "Edge softness for antialiasing",
-			ui: {
-				type: "range",
-				min: 0,
-				max: .1,
-				step: .001,
-				label: "Softness",
-				group: "Effect"
-			}
-		},
-		strokeThickness: {
-			default: 0,
-			description: "Stroke thickness. Zero means no stroke.",
-			ui: {
-				type: "range",
-				min: 0,
-				max: .2,
-				step: .005,
-				label: "Stroke Thickness",
-				group: "Stroke"
-			}
-		},
-		strokeColor: {
-			default: "#000000",
-			transform: transformColor,
-			description: "Color of the stroke outline",
-			ui: {
-				type: "color",
-				label: "Stroke Color",
-				group: "Colors"
-			}
-		},
-		strokePosition: {
-			default: "center",
-			transform: transformStrokePosition,
-			description: "Position of the stroke relative to the shape edge",
-			ui: {
-				type: "select",
-				options: [
-					{
-						label: "Outside",
-						value: "outside"
-					},
-					{
-						label: "Center",
-						value: "center"
-					},
-					{
-						label: "Inside",
-						value: "inside"
-					}
-				],
-				label: "Stroke Position",
-				group: "Stroke"
-			}
-		},
-		colorSpace: {
-			default: "linear",
-			transform: transformColorSpace,
-			compileTime: true,
-			description: "Color space for blending fill and stroke colors",
-			ui: {
-				type: "select",
-				options: colorSpaceOptions,
-				label: "Color Blending",
-				group: "Colors"
-			}
 		}
-	},
-	fragment: (params) => {
-		const { uniforms, ctx, propValues } = params;
-		const uv = params.uvContext ?? ctx.uv;
-		const colorSpaceMode = propValues.colorSpace ?? 0;
-		const mask = call(trapezoidShape, "trapezoidShape", [
-			uniforms.center,
-			uniforms.topWidth,
-			uniforms.bottomWidth,
-			uniforms.height,
-			uniforms.rotation,
-			uniforms.softness,
-			uniforms.strokeThickness,
-			uniforms.strokePosition,
-			uv,
-			ctx.aspect
-		]);
-		const blended = call(mixColorsVariants[colorSpaceMode] ?? mixColorsLinear, "mixColors", [
-			uniforms.color,
-			uniforms.strokeColor,
-			mask.member("strokeBlend")
-		]);
-		return vec4(blended.member("rgb"), blended.member("a").mul(mask.member("overallMask")));
 	}
-};
+});
 var Trapezoid_default = componentDefinition;
 export { componentDefinition as n, trapezoidShape as r, Trapezoid_default as t };