shaders 3.0.453 → 3.1.455

package/dist/core/{RectangularCoordinates-CFGiELUv.js → RectangularCoordinates-BEOFurXt.js}

@@ -1,7 +1,9 @@
-import { Bt as sin, F as unpremultiplyAlpha, Gt as data_exports, St as cos, c as sampleRemappedExpr, d as ZERO, it as std_exports, ln as f32, m as call, n as composeEdgeRemapExpr, nt as src_default, rn as vec2f, y as mixExpr } from "./edges-B7Yet3LV.js";
-import { c as transformPosition, s as transformEdges } from "./transformations-C7gn_5rF.js";
-var PI = Math.PI;
-var TAU = Math.PI * 2;
+import { Bt as sin, Gt as data_exports, St as cos, at as std_exports, h as call, rn as vec2f, rt as src_default, un as f32 } from "./edges-CD7gCAto.js";
+import { i as PI$1, o as TAU$1 } from "./constants-DoOzbl5b.js";
+import { E as uvRemapShader, w as lerpToIdentity } from "./porters-DUtQounc.js";
+import { n as edgesPropConfig, t as centerPropConfig } from "./propConfigs-k3hs8KYL.js";
+var PI = PI$1;
+var TAU = TAU$1;
 const rectCoordsUV = src_default.fn([
 	vec2f,
 	f32,
@@ -188,19 +190,7 @@ const componentDefinition = {
 	requiresChild: true,
 	boundingBoxDeclaration: { aspectRatio: null },
 	props: {
-		center: {
-			default: {
-				x: .5,
-				y: .5
-			},
-			transform: transformPosition,
-			description: "The center point for rectangular coordinate conversion",
-			ui: {
-				type: "position",
-				label: "Center",
-				group: "Position"
-			}
-		},
+		center: centerPropConfig("The center point for rectangular coordinate conversion"),
 		scale: {
 			default: 1,
 			description: "Scale factor for the rectangular output",
@@ -225,60 +215,14 @@ const componentDefinition = {
 				group: "Effect"
 			}
 		},
-		edges: {
-			default: "transparent",
-			description: "How to handle edges when distortion pushes content out of bounds",
-			transform: transformEdges,
-			compileTime: true,
-			ui: {
-				type: "select",
-				options: [
-					{
-						label: "Stretch",
-						value: "stretch"
-					},
-					{
-						label: "Transparent",
-						value: "transparent"
-					},
-					{
-						label: "Mirror",
-						value: "mirror"
-					},
-					{
-						label: "Wrap",
-						value: "wrap"
-					}
-				],
-				label: "Edges",
-				group: "Effect"
-			}
-		}
-	},
-	fragment: ({ uniforms, childNode, ctx, propValues, convertToTexture }) => {
-		if (!childNode) {
-			console.error("You must pass a child component into the RectangularCoordinates shader.");
-			return ZERO;
-		}
-		const texture = convertToTexture(childNode);
-		const edgeMode = propValues.edges ?? 0;
-		const rect = call(rectCoordsUV, "rectCoordsUV", [
-			uniforms.center,
-			uniforms.scale,
-			ctx.uv,
-			ctx.aspect
-		]);
-		return call(unpremultiplyAlpha, "unpremultiplyAlpha", [sampleRemappedExpr(texture, mixExpr(ctx.uv, rect, uniforms.intensity), edgeMode)]);
+		edges: edgesPropConfig("transparent", "How to handle edges when distortion pushes content out of bounds")
 	},
-	uvRemap: ({ uv, mask, uniforms, aspect, propValues }) => {
-		const edgeMode = propValues.edges ?? 0;
-		return composeEdgeRemapExpr(mixExpr(uv, call(rectCoordsUV, "rectCoordsUV", [
-			uniforms.center,
-			uniforms.scale,
-			uv,
-			aspect
-		]), uniforms.intensity), mask, edgeMode);
-	}
+	...uvRemapShader(({ uniforms }) => lerpToIdentity({ map: (uv, aspect) => call(rectCoordsUV, "rectCoordsUV", [
+		uniforms.center,
+		uniforms.scale,
+		uv,
+		aspect
+	]) }, () => uniforms.intensity), { requireChildMessage: "You must pass a child component into the RectangularCoordinates shader." })
 };
 var RectangularCoordinates_default = componentDefinition;
 export { componentDefinition as n, rectCoordsUV as r, RectangularCoordinates_default as t };

package/dist/core/{ReflectivePlane-BbKUjtUs.js → ReflectivePlane-wERmyiKx.js}

@@ -1,7 +1,6 @@
-import { At as max, F as unpremultiplyAlpha, Gt as data_exports, Mt as mix, Ut as step, Vt as smoothstep, Yt as textureStorage2d, an as vec2u, cn as vec4f, ct as textureStore, d as ZERO, dn as u32, en as struct, it as std_exports, ln as f32, m as call, nt as src_default, rn as vec2f, t as applyEdgeHandlingExpr } from "./edges-B7Yet3LV.js";
-import { n as createGuardedCompute } from "./compute-Ax-p6Ubc.js";
-import { a as createVariableGaussianBlurCompute, t as BLUR_MAP_FORMAT } from "./blur-cLcFzL4x.js";
-import { s as transformEdges } from "./transformations-C7gn_5rF.js";
+import { At as max, Gt as data_exports, I as unpremultiplyAlpha, Mt as mix, Ut as step, Vt as smoothstep, Yt as textureStorage2d, an as vec2u, at as std_exports, cn as vec4f, en as struct, f as ZERO, fn as u32, h as call, lt as textureStore, rn as vec2f, rt as src_default, t as applyEdgeHandlingExpr, un as f32 } from "./edges-CD7gCAto.js";
+import { t as BLUR_MAP_FORMAT, v as withVariableBlurCompute } from "./blur-CZuIxzX6.js";
+import { s as transformEdges } from "./transformations-B-zNWNdd.js";
 var HALF_KERNEL = 30;
 var BLUR_TO_RADIUS_PX = 12;
 const reflectedPlaneUV = src_default.fn([vec2f, f32], vec2f)(/* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((uv, floorY) => {
@@ -606,79 +605,15 @@ const componentDefinition = {
 			}
 		}
 	},
-	compute: (params) => {
-		const { childNode, gpu, convertToTexture, registerComputeTexture, getCpuValue, onCleanup, onResize, dimensions } = params;
-		if (!childNode) return null;
-		const root = gpu?.root;
-		if (!root) return null;
-		const childTexture = convertToTexture(childNode);
-		let curWidth = Math.max(1, Math.round(dimensions.width));
-		let curHeight = Math.max(1, Math.round(dimensions.height));
-		const variable = createVariableGaussianBlurCompute(root, null, curWidth, curHeight, onCleanup, HALF_KERNEL);
-		const blurredTexture = registerComputeTexture(variable.outputTexture);
-		const graph = buildReflectivePlaneFillGraph(variable.computeWidth, variable.computeHeight);
-		const fillParams = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createUniform(graph.Params), "fillParams");
-		const fillBindGroup = root.createBindGroup(graph.layout, {
-			blurMap: variable.blurMapTexture,
-			params: fillParams.buffer
-		});
-		const fillPass = createGuardedCompute(root, /* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((cx, cy) => {
-			"use gpu";
-			graph.kernel(cx, cy);
-		}), {
-			v: 1,
-			name: void 0,
-			ast: {
-				"params": [{
-					"type": "i",
-					"name": "cx"
-				}, {
-					"type": "i",
-					"name": "cy"
-				}],
-				"body": [0, [[
-					6,
-					[
-						7,
-						"graph",
-						"kernel"
-					],
-					["cx", "cy"]
-				]]],
-				"externalNames": ["graph"]
-			},
-			externals: () => ({ graph })
-		}) && $.f)({}), {
-			size: [variable.computeWidth, variable.computeHeight],
-			bindGroup: fillBindGroup
-		});
-		onResize(({ width, height }) => {
-			curWidth = Math.max(1, Math.round(width));
-			curHeight = Math.max(1, Math.round(height));
-			variable.setInputDimensions(curWidth, curHeight);
-		});
-		return {
-			outputs: {
-				childTexture,
-				blurredTexture
-			},
-			bindInputs: (resolve) => {
-				const src = resolve(childTexture.key);
-				if (src) variable.setInputTexture(src.texture);
-			},
-			getComputeNodes: () => {
-				const height = getCpuValue("height") ?? .5;
-				const blurAmount = getCpuValue("blur") ?? 1;
-				const blurDistance = Math.max(.01, getCpuValue("blurDistance") ?? .5);
-				fillParams.write({
-					height,
-					blurAmount,
-					blurDistance
-				});
-				return [fillPass, ...variable.computeSteps];
-			}
-		};
-	},
+	compute: (params) => withVariableBlurCompute(params, {
+		halfKernel: HALF_KERNEL,
+		buildFill: buildReflectivePlaneFillGraph,
+		fillValues: () => ({
+			height: params.getCpuValue("height") ?? .5,
+			blurAmount: params.getCpuValue("blur") ?? 1,
+			blurDistance: Math.max(.01, params.getCpuValue("blurDistance") ?? .5)
+		})
+	}),
 	fragment: ({ uniforms, childNode, ctx, propValues, computeOutputs, convertToTexture }) => {
 		if (!childNode) return ZERO;
 		const edgeMode = propValues.edges ?? 0;

package/dist/core/{Repeater-DZhhgwMr.js → Repeater-Cy8up7cj.js}

@@ -1,5 +1,5 @@
-import { F as unpremultiplyAlpha, S as formatFloat, _ as expr, d as ZERO, m as call, x as Expr } from "./edges-B7Yet3LV.js";
-import { i as transformBoolean } from "./transformations-C7gn_5rF.js";
+import { C as formatFloat, I as unpremultiplyAlpha, S as Expr, f as ZERO, h as call, v as expr } from "./edges-CD7gCAto.js";
+import { i as transformBoolean } from "./transformations-B-zNWNdd.js";
 const componentDefinition = {
 	name: "Repeater",
 	category: "Distortions",

package/dist/core/{Ring-DFxV0XzX.js → Ring-Cogdtn-0.js}

@@ -1,6 +1,6 @@
-import { G as mixColorsVariants, Gt as data_exports, W as mixColorsLinear, b as vec4, ln as f32, m as call, nt as src_default, rn as vec2f } from "./edges-B7Yet3LV.js";
-import { h as sdf_exports, n as ShapeMask, p as ringSdf, 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 { Gt as data_exports, 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, a as ShapeMask, x as ringSdf } from "./device-B0ZwBfOg.js";
 const ringShape = src_default.fn([
 	vec2f,
 	f32,
@@ -187,9 +187,16 @@ const ringShape = src_default.fn([
 		sdf: sdf_exports
 	})
 }) && $.f)({}));
-const componentDefinition = {
+const componentDefinition = defineSdfShapeShader({
 	name: "Ring",
-	boundingBoxDeclaration: {
+	description: "Annular ring (donut) with adjustable radius and band thickness",
+	shapeFn: ringShape,
+	shapeFnName: "ringShape",
+	bodyArgs: ["radius", "thickness"],
+	rotatable: false,
+	colorDescription: "Fill color of the ring",
+	centerDescription: "Center position of the ring",
+	bounds: { custom: {
 		propBindings: {
 			x: {
 				prop: "center",
@@ -229,44 +236,8 @@ const componentDefinition = {
 				radius: Math.max(0, newOuter - thickness)
 			};
 		}
-	},
-	category: "Shapes",
-	description: "Annular ring (donut) with adjustable radius and band thickness",
-	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 ring",
-			ui: {
-				type: "color",
-				label: "Color",
-				group: "Colors"
-			}
-		},
-		center: {
-			default: {
-				x: .5,
-				y: .5
-			},
-			transform: transformPosition,
-			description: "Center position of the ring",
-			ui: {
-				type: "position",
-				label: "Center",
-				group: "Position",
-				units: ["%", "px"]
-			}
-		},
+	} },
+	shapeProps: {
 		radius: {
 			default: .3,
 			description: "Distance from center to the ring's midline in UV space",
@@ -290,99 +261,13 @@ const componentDefinition = {
 				label: "Thickness",
 				group: "Shape"
 			}
-		},
-		softness: {
-			default: 0,
-			description: "Edge softness for antialiasing (applied to both inner and outer ring edges)",
-			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: .1,
-				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 ring 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(ringShape, "ringShape", [
-			uniforms.center,
-			uniforms.radius,
-			uniforms.thickness,
-			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")));
+	stroke: {
+		softnessDescription: "Edge softness for antialiasing (applied to both inner and outer ring edges)",
+		strokeThicknessMax: .1,
+		strokePositionDescription: "Position of the stroke relative to the ring edge"
 	}
-};
+});
 var Ring_default = componentDefinition;
 export { componentDefinition as n, ringShape as r, Ring_default as t };