shaders 2.3.66 → 2.3.68

package/dist/core/{WaveDistortion-D8LOc-Dc.js → WaveDistortion-HrmY6hF5.js}

@@ -1,4 +1,4 @@
-import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
+import { t as applyEdgeHandling } from "./edges-CfGcQniB.js";
 import { c as transformEdges } from "./transformations-B5lM6fYX.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
 import { t as unpremultiplyAlpha } from "./alpha-Byel9eTg.js";
@@ -14,7 +14,7 @@ const componentDefinition = {
 			default: .3,
 			description: "Distortion intensity",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .05,
@@ -26,7 +26,7 @@ const componentDefinition = {
 			default: 1,
 			description: "Number of bends/waves",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: .1,
 				max: 10,
 				step: .1,
@@ -50,7 +50,7 @@ const componentDefinition = {
 			default: 0,
 			description: "Direction of wave distortion in degrees",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 360,
 				step: 1,
@@ -61,6 +61,7 @@ const componentDefinition = {
 		waveType: {
 			default: "sine",
 			description: "Shape of the distortion wave",
+			compileTime: true,
 			transform: (value) => {
 				return {
 					"sine": 0,
@@ -102,6 +103,7 @@ const componentDefinition = {
 			default: "stretch",
 			description: "How to handle edges when distortion pushes content out of bounds",
 			transform: transformEdges,
+			compileTime: true,
 			ui: {
 				type: "select",
 				options: [
@@ -139,19 +141,25 @@ const componentDefinition = {
 		const centeredUV = uvCoord.sub(vec2(.5, .5));
 		const aspectCorrectedUV = vec2(centeredUV.x.mul(aspect), centeredUV.y);
 		const phase = vec2(aspectCorrectedUV.x.mul(cosAngle).sub(aspectCorrectedUV.y.mul(sinAngle)), aspectCorrectedUV.x.mul(sinAngle).add(aspectCorrectedUV.y.mul(cosAngle))).y.add(.5).mul(uniforms.frequency.uniform).mul(PI.mul(2)).add(t);
-		const normalizedPhase = fract(phase.div(PI.mul(2)));
-		const sineWave = sin(phase);
-		const triangleWave = abs(normalizedPhase.mul(2).sub(1)).mul(2).sub(1);
-		const squareWave = step(float(.5), normalizedPhase).mul(2).sub(1);
-		const sawtoothWave = normalizedPhase.mul(2).sub(1);
-		const bounceWave = abs(sin(phase));
-		const waveTypeValue = uniforms.waveType.uniform;
-		const isSine = step(waveTypeValue, float(.5));
-		const isTriangle = step(float(.5), waveTypeValue).mul(step(waveTypeValue, float(1.5)));
-		const isSquare = step(float(1.5), waveTypeValue).mul(step(waveTypeValue, float(2.5)));
-		const isSawtooth = step(float(2.5), waveTypeValue).mul(step(waveTypeValue, float(3.5)));
-		const isBounce = step(float(3.5), waveTypeValue);
-		const displacement = sineWave.mul(isSine).add(triangleWave.mul(isTriangle)).add(squareWave.mul(isSquare)).add(sawtoothWave.mul(isSawtooth)).add(bounceWave.mul(isBounce)).mul(uniforms.strength.uniform).mul(.5);
+		let finalWave;
+		switch (uniforms.waveType.uniform.value) {
+			case 1:
+				finalWave = abs(fract(phase.div(PI.mul(2))).mul(2).sub(1)).mul(2).sub(1);
+				break;
+			case 2: {
+				const normalizedPhase = fract(phase.div(PI.mul(2)));
+				finalWave = step(float(.5), normalizedPhase).mul(2).sub(1);
+				break;
+			}
+			case 3:
+				finalWave = fract(phase.div(PI.mul(2))).mul(2).sub(1);
+				break;
+			case 4:
+				finalWave = abs(sin(phase));
+				break;
+			default: finalWave = sin(phase);
+		}
+		const displacement = finalWave.mul(uniforms.strength.uniform).mul(.5);
 		const displacementX = displacement.mul(cosAngle).div(aspect);
 		const displacementY = displacement.mul(sinAngle);
 		const distortedUV = vec2(uvCoord.x.add(displacementX), uvCoord.y.add(displacementY));
@@ -159,7 +167,7 @@ const componentDefinition = {
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
-		return unpremultiplyAlpha(applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform));
+		return unpremultiplyAlpha(applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform.value));
 	}
 };
 var WaveDistortion_default = componentDefinition;

package/dist/core/{ZoomBlur-BE1vT38D.js → ZoomBlur-DSCQQerF.js}

@@ -18,7 +18,7 @@ const componentDefinition = {
 			default: 30,
 			description: "Intensity of the zoom blur effect",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 100,
 				step: 1,

package/dist/core/{colorMixing-D_wMclqL.js → colorMixing-jSm3tbMv.js}

@@ -172,25 +172,46 @@ const mixColors = (colorA, colorB, t, colorSpaceMode) => {
 	const alphaWeightedMix = (rgbA, rgbB) => {
 		return rgbA.mul(weightA).add(rgbB.mul(weightB)).div(safeWeight);
 	};
-	const linearMix = alphaWeightedMix(p3A, p3B);
-	const srgbA = p3ToSRGB(p3A);
-	const srgbB = p3ToSRGB(p3B);
-	const oklabA = rgbToOklab(srgbA);
-	const oklabB = rgbToOklab(srgbB);
-	const oklchResult = sRGBToP3(oklabToRgb(oklchToOklab(alphaWeightedMix(oklabToOklch(oklabA), oklabToOklch(oklabB)))));
-	const oklabResult = sRGBToP3(oklabToRgb(alphaWeightedMix(oklabA, oklabB)));
-	const hslResult = sRGBToP3(hslToRgb(alphaWeightedMix(rgbToHsl(srgbA), rgbToHsl(srgbB))));
-	const hsvResult = sRGBToP3(hsvToRgb(alphaWeightedMix(rgbToHsv(srgbA), rgbToHsv(srgbB))));
-	const labA = rgbToLab(srgbA);
-	const labB = rgbToLab(srgbB);
-	const lchResult = sRGBToP3(labToRgb(lchToLab(alphaWeightedMix(labToLch(labA), labToLch(labB)))));
-	const isMode1OrHigher = colorSpaceMode.greaterThanEqual(float(.5));
-	const isMode2OrHigher = colorSpaceMode.greaterThanEqual(float(1.5));
-	const isMode3OrHigher = colorSpaceMode.greaterThanEqual(float(2.5));
-	const isMode4OrHigher = colorSpaceMode.greaterThanEqual(float(3.5));
-	const isMode5 = colorSpaceMode.greaterThanEqual(float(4.5));
-	const rgb = isMode1OrHigher.select(isMode2OrHigher.select(isMode3OrHigher.select(isMode4OrHigher.select(isMode5.select(lchResult, hsvResult), hslResult), oklabResult), oklchResult), linearMix);
 	const alpha = totalWeight;
-	return vec4(rgb.x, rgb.y, rgb.z, alpha);
+	switch (colorSpaceMode) {
+		case 1: {
+			const srgbA = p3ToSRGB(p3A);
+			const srgbB = p3ToSRGB(p3B);
+			const oklabA = rgbToOklab(srgbA);
+			const oklabB = rgbToOklab(srgbB);
+			const rgb = sRGBToP3(oklabToRgb(oklchToOklab(alphaWeightedMix(oklabToOklch(oklabA), oklabToOklch(oklabB)))));
+			return vec4(rgb.x, rgb.y, rgb.z, alpha);
+		}
+		case 2: {
+			const srgbA = p3ToSRGB(p3A);
+			const srgbB = p3ToSRGB(p3B);
+			const rgb = sRGBToP3(oklabToRgb(alphaWeightedMix(rgbToOklab(srgbA), rgbToOklab(srgbB))));
+			return vec4(rgb.x, rgb.y, rgb.z, alpha);
+		}
+		case 3: {
+			const srgbA = p3ToSRGB(p3A);
+			const srgbB = p3ToSRGB(p3B);
+			const rgb = sRGBToP3(hslToRgb(alphaWeightedMix(rgbToHsl(srgbA), rgbToHsl(srgbB))));
+			return vec4(rgb.x, rgb.y, rgb.z, alpha);
+		}
+		case 4: {
+			const srgbA = p3ToSRGB(p3A);
+			const srgbB = p3ToSRGB(p3B);
+			const rgb = sRGBToP3(hsvToRgb(alphaWeightedMix(rgbToHsv(srgbA), rgbToHsv(srgbB))));
+			return vec4(rgb.x, rgb.y, rgb.z, alpha);
+		}
+		case 5: {
+			const srgbA = p3ToSRGB(p3A);
+			const srgbB = p3ToSRGB(p3B);
+			const labA = rgbToLab(srgbA);
+			const labB = rgbToLab(srgbB);
+			const rgb = sRGBToP3(labToRgb(lchToLab(alphaWeightedMix(labToLch(labA), labToLch(labB)))));
+			return vec4(rgb.x, rgb.y, rgb.z, alpha);
+		}
+		default: {
+			const rgb = alphaWeightedMix(p3A, p3B);
+			return vec4(rgb.x, rgb.y, rgb.z, alpha);
+		}
+	}
 };
 export { mixColors as t };

package/dist/core/edges-CfGcQniB.js

@@ -0,0 +1,25 @@
+import { abs, float, fract, mod, select, step, vec2, vec4 } from "three/tsl";
+const applyEdgeHandling = (distortedUV, sampledColor, childTexture, edgeMode) => {
+	switch (edgeMode) {
+		case 1: {
+			const inBoundsX = step(float(0), distortedUV.x).mul(step(distortedUV.x, float(1)));
+			const inBoundsY = step(float(0), distortedUV.y).mul(step(distortedUV.y, float(1)));
+			const inBounds = inBoundsX.mul(inBoundsY);
+			return vec4(sampledColor.rgb, sampledColor.a.mul(inBounds));
+		}
+		case 2: {
+			if (!childTexture) return sampledColor;
+			const mirrorX = mod(abs(distortedUV.x), float(2));
+			const mirrorY = mod(abs(distortedUV.y), float(2));
+			const mirroredUV = vec2(select(step(float(1), mirrorX), float(2).sub(mirrorX), mirrorX), select(step(float(1), mirrorY), float(2).sub(mirrorY), mirrorY));
+			return childTexture.sample(mirroredUV);
+		}
+		case 3: {
+			if (!childTexture) return sampledColor;
+			const wrappedUV = vec2(fract(distortedUV.x), fract(distortedUV.y));
+			return childTexture.sample(wrappedUV);
+		}
+		default: return sampledColor;
+	}
+};
+export { applyEdgeHandling as t };

package/dist/core/index.d.ts

@@ -12,7 +12,7 @@ export { grain } from './helpers/grain';
 export { distort } from './helpers/distort';
 export { glow } from './helpers/glow';
 export { edgeMask } from './helpers/edgeMask';
-export type { UniformsMap, PropConfig, NodeMetadata, MaskConfig, TransformConfig } from './types';
+export type { UniformsMap, PropConfig, NodeMetadata, MaskConfig, MapConfig, MapChannel, PropDriver, TransformConfig } from './types';
 export type { BlendMode } from './blendModes';
 export type { PerformanceStats } from './performanceTracker';
 //# sourceMappingURL=index.d.ts.map

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAG7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAC/F,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAC3C,YAAY,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAG7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAClI,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAC3C,YAAY,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA"}

package/dist/core/index.js

@@ -1,9 +1,9 @@
-import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
+import { t as applyEdgeHandling } from "./edges-CfGcQniB.js";
 import { a as transformColor, l as transformPosition, n as setColorSpaceMode, s as transformColorUpdate, u as transformPositionUpdate } from "./transformations-B5lM6fYX.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
 import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, WebGPURenderer } from "three/webgpu";
 import { WebGLRenderer } from "three";
-import { PI, abs, add, atan, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sign, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
+import { PI, abs, add, atan, clamp, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sign, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
 function normal_default(base, overlay, opacity = 1) {
 	const overlayAlpha = mul(overlay.a, opacity);
 	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
@@ -518,7 +518,8 @@ function createUniformsMap(component, reactiveProps, instanceId) {
 		if (typeof uniformValue === "string" && uniformNode.value === null) uniformNode.value = uniformValue;
 		uniformsMap[propName] = {
 			uniform: uniformNode,
-			transform: propConfig.transform || void 0
+			transform: propConfig.transform || void 0,
+			compileTime: propConfig.compileTime || false
 		};
 	});
 	return uniformsMap;
@@ -798,8 +799,10 @@ function shaderRenderer() {
 		}
 		return children;
 	};
+	const sanitizeId = (id) => id.replace(/[^a-zA-Z0-9_]/g, "_");
 	const findNodeByCustomId = (customId) => {
-		for (const [nodeId, info] of nodeRegistry.nodes.entries()) if (info.metadata.id === customId) return nodeId;
+		const sanitized = sanitizeId(customId);
+		for (const [nodeId, info] of nodeRegistry.nodes.entries()) if (info.metadata.id === sanitized) return nodeId;
 		return null;
 	};
 	const applyMaskIfNeeded = (result, nodeInfo, nodeId, processedMasks, distortedUV) => {
@@ -819,11 +822,72 @@ function shaderRenderer() {
 		const maskType = nodeInfo.metadata.mask.type || "alpha";
 		return applyMask(result, finalMaskNode, maskType);
 	};
+	const resolveMapForProp = (mapConfig, processedMasks, currentNodeId, propName, sampleUV) => {
+		const sourceNodeId = findNodeByCustomId(mapConfig.source);
+		if (!sourceNodeId) return null;
+		if (processedMasks.has(sourceNodeId)) {
+			console.error(`[Shaders] Circular dependency detected in prop maps: node "${mapConfig.source}" is already being processed.`);
+			return null;
+		}
+		const newProcessedMasks = new Set(processedMasks);
+		newProcessedMasks.add(currentNodeId);
+		const sampled = trackConvertToTexture(composeNodeTree(sourceNodeId, newProcessedMasks)).sample(sampleUV ?? screenUV);
+		let raw;
+		switch (mapConfig.channel) {
+			case "alpha":
+				raw = sampled.a;
+				break;
+			case "alphaInverted":
+				raw = sampled.a.oneMinus();
+				break;
+			case "luminanceInverted":
+				raw = dot(sampled.rgb, vec3(.2126, .7152, .0722)).oneMinus();
+				break;
+			case "luminance":
+			default:
+				raw = dot(sampled.rgb, vec3(.2126, .7152, .0722));
+				break;
+		}
+		const nodeInfo = nodeRegistry.nodes.get(currentNodeId);
+		if (!nodeInfo) return null;
+		if (!nodeInfo.mapUniforms) nodeInfo.mapUniforms = {};
+		if (!nodeInfo.mapUniforms[propName]) nodeInfo.mapUniforms[propName] = {
+			inputMin: uniform(mapConfig.inputMin),
+			inputMax: uniform(mapConfig.inputMax),
+			outputMin: uniform(mapConfig.outputMin),
+			outputMax: uniform(mapConfig.outputMax),
+			curve: uniform(mapConfig.curve ?? 0)
+		};
+		else {
+			nodeInfo.mapUniforms[propName].inputMin.value = mapConfig.inputMin;
+			nodeInfo.mapUniforms[propName].inputMax.value = mapConfig.inputMax;
+			nodeInfo.mapUniforms[propName].outputMin.value = mapConfig.outputMin;
+			nodeInfo.mapUniforms[propName].outputMax.value = mapConfig.outputMax;
+			nodeInfo.mapUniforms[propName].curve.value = mapConfig.curve ?? 0;
+		}
+		const { inputMin: inputMinU, inputMax: inputMaxU, outputMin: outputMinU, outputMax: outputMaxU, curve: curveU } = nodeInfo.mapUniforms[propName];
+		const inputRange = max(inputMaxU.sub(inputMinU), 1e-4);
+		return mix(outputMinU, outputMaxU, pow(clamp(raw.sub(inputMinU).div(inputRange), 0, 1), pow(float(2), curveU.negate().mul(2))));
+	};
+	const buildEffectiveUniforms = (baseUniforms, maps, nodeId, processedMasks) => {
+		if (!maps || Object.keys(maps).length === 0) return baseUniforms;
+		const effectiveUniforms = { ...baseUniforms };
+		const customSampleUVs = nodeRegistry.nodes.get(nodeId)?.mapSampleUVsFunc?.(baseUniforms) ?? {};
+		for (const [propName, mapConfig] of Object.entries(maps)) {
+			if (!(propName in effectiveUniforms)) continue;
+			const resolvedNode = resolveMapForProp(mapConfig, processedMasks, nodeId, propName, customSampleUVs[propName]);
+			if (resolvedNode !== null) effectiveUniforms[propName] = {
+				...effectiveUniforms[propName],
+				uniform: resolvedNode
+			};
+		}
+		return effectiveUniforms;
+	};
 	const applyNodeTransformation = (result, nodeInfo) => {
 		if (!nodeInfo.metadata.transform || !nodeInfo.transformUniforms || !needsTransformation(nodeInfo.metadata.transform) && !nodeInfo.transformRTTActive) return result;
 		const texture$1 = trackConvertToTexture(result);
 		const transformedUV = applyUVTransform(screenUV, nodeInfo.transformUniforms.offsetX, nodeInfo.transformUniforms.offsetY, nodeInfo.transformUniforms.rotation, nodeInfo.transformUniforms.scale, nodeInfo.transformUniforms.anchorX, nodeInfo.transformUniforms.anchorY, nodeInfo.transformUniforms.aspectRatio);
-		return applyEdgeHandling(transformedUV, texture$1.sample(transformedUV), texture$1, nodeInfo.transformUniforms.edges);
+		return applyEdgeHandling(transformedUV, texture$1.sample(transformedUV), texture$1, nodeInfo.transformUniforms.edges.value);
 	};
 	const composeNodeTree = (nodeId, processedMasks = /* @__PURE__ */ new Set(), currentlyComposedNodes) => {
 		if (currentWidth === 0 || currentHeight === 0) return vec4(0, 0, 0, 0);
@@ -854,8 +918,9 @@ function shaderRenderer() {
 			nodeInfo.beforeRenderCallbacks = [];
 			nodeInfo.afterRenderCallbacks = [];
 			nodeInfo.resizeCallbacks = [];
+			const effectiveUniforms0 = buildEffectiveUniforms(nodeInfo.uniforms ?? {}, nodeInfo.metadata.maps, nodeId, processedMasks);
 			return applyMaskIfNeeded(applyNodeTransformation(nodeInfo.fragmentNodeFunc({
-				uniforms: nodeInfo.uniforms ?? {},
+				uniforms: effectiveUniforms0,
 				childNode: void 0,
 				onCleanup: nodeSpecificOnCleanup,
 				onBeforeRender: nodeSpecificOnBeforeRender,
@@ -913,8 +978,9 @@ function shaderRenderer() {
 						childInfo.beforeRenderCallbacks = [];
 						childInfo.afterRenderCallbacks = [];
 						childInfo.resizeCallbacks = [];
+						const effectiveUniforms1 = buildEffectiveUniforms(childInfo.uniforms ?? {}, childInfo.metadata.maps, childInfo.id, processedMasks);
 						childResult = applyMaskIfNeeded(applyNodeTransformation(childInfo.fragmentNodeFunc({
-							uniforms: childInfo.uniforms ?? {},
+							uniforms: effectiveUniforms1,
 							childNode: effectiveChildNode,
 							onCleanup: childSpecificOnCleanup,
 							onBeforeRender: childSpecificOnBeforeRender,
@@ -944,8 +1010,9 @@ function shaderRenderer() {
 				nodeInfo.beforeRenderCallbacks = [];
 				nodeInfo.afterRenderCallbacks = [];
 				nodeInfo.resizeCallbacks = [];
+				const effectiveUniforms2 = buildEffectiveUniforms(nodeInfo.uniforms ?? {}, nodeInfo.metadata.maps, nodeId, processedMasks);
 				return applyMaskIfNeeded(applyNodeTransformation(nodeInfo.fragmentNodeFunc({
-					uniforms: nodeInfo.uniforms ?? {},
+					uniforms: effectiveUniforms2,
 					childNode: composedChildren,
 					onCleanup: nodeSpecificOnCleanup,
 					onBeforeRender: nodeSpecificOnBeforeRender,
@@ -994,8 +1061,9 @@ function shaderRenderer() {
 						childInfo.beforeRenderCallbacks = [];
 						childInfo.afterRenderCallbacks = [];
 						childInfo.resizeCallbacks = [];
+						const effectiveUniforms3 = buildEffectiveUniforms(childInfo.uniforms ?? {}, childInfo.metadata.maps, childInfo.id, processedMasks);
 						childResult = applyMaskIfNeeded(applyNodeTransformation(childInfo.fragmentNodeFunc({
-							uniforms: childInfo.uniforms ?? {},
+							uniforms: effectiveUniforms3,
 							childNode: effectiveChildNode,
 							onCleanup: childSpecificOnCleanup,
 							onBeforeRender: childSpecificOnBeforeRender,
@@ -1025,8 +1093,9 @@ function shaderRenderer() {
 				nodeInfo.beforeRenderCallbacks = [];
 				nodeInfo.afterRenderCallbacks = [];
 				nodeInfo.resizeCallbacks = [];
+				const effectiveUniforms4 = buildEffectiveUniforms(nodeInfo.uniforms ?? {}, nodeInfo.metadata.maps, nodeId, processedMasks);
 				return applyMaskIfNeeded(applyNodeTransformation(nodeInfo.fragmentNodeFunc({
-					uniforms: nodeInfo.uniforms ?? {},
+					uniforms: effectiveUniforms4,
 					childNode: composedChildrenResult,
 					onCleanup: nodeSpecificOnCleanup,
 					onBeforeRender: nodeSpecificOnBeforeRender,
@@ -1111,8 +1180,9 @@ function shaderRenderer() {
 				blendMode: metadata?.blendMode || "normal",
 				opacity: metadata?.opacity,
 				visible: metadata?.visible === false ? false : true,
-				id: metadata?.id,
+				id: metadata?.id ? sanitizeId(metadata.id) : metadata?.id,
 				mask: metadata?.mask,
+				maps: metadata?.maps,
 				renderOrder: metadata?.renderOrder !== void 0 ? metadata?.renderOrder : defaultRenderOrder,
 				transform: metadata?.transform
 			},
@@ -1122,7 +1192,8 @@ function shaderRenderer() {
 			afterRenderCallbacks: [],
 			resizeCallbacks: [],
 			transformUniforms,
-			transformRTTActive: false
+			transformRTTActive: false,
+			mapSampleUVsFunc: componentDefinition?.mapSampleUVs
 		};
 		nodeRegistry.nodes.set(id, nodeInfo);
 		if (parentId === null) nodeRegistry.rootId = id;
@@ -1153,6 +1224,13 @@ function shaderRenderer() {
 			setColorSpaceMode(rendererColorSpace);
 			updateUniformValue(uniformDefinition, value);
 		} else uniformDefinition.uniform.value = value;
+		if (uniformDefinition.compileTime && material && isInitialized && currentWidth > 0 && currentHeight > 0) {
+			if (materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
+				materialUpdateBatchRAF = null;
+				updateMaterial();
+			});
+			return;
+		}
 		if (!animationFrameId) renderFrame();
 	};
 	const updateNodeMetadata = (nodeId, metadata) => {
@@ -1176,14 +1254,42 @@ function shaderRenderer() {
 			existingNode.metadata.visible = newVisible;
 			needsRecompose = true;
 		}
-		if (metadata.id !== void 0 && existingNode.metadata.id !== metadata.id) {
-			existingNode.metadata.id = metadata.id;
-			needsRecompose = true;
+		if (metadata.id !== void 0) {
+			const sanitizedId = sanitizeId(metadata.id);
+			if (existingNode.metadata.id !== sanitizedId) {
+				existingNode.metadata.id = sanitizedId;
+				needsRecompose = true;
+			}
 		}
 		if (metadata.mask !== void 0 && (existingNode.metadata.mask?.source !== metadata.mask?.source || existingNode.metadata.mask?.type !== metadata.mask?.type)) {
 			existingNode.metadata.mask = metadata.mask;
 			needsRecompose = true;
 		}
+		if ("maps" in metadata && JSON.stringify(existingNode.metadata.maps) !== JSON.stringify(metadata.maps)) {
+			const oldMaps = existingNode.metadata.maps;
+			const newMaps = metadata.maps;
+			existingNode.metadata.maps = newMaps;
+			if ((() => {
+				if (!oldMaps || !newMaps) return true;
+				const oldKeys = Object.keys(oldMaps);
+				const newKeys = Object.keys(newMaps);
+				if (oldKeys.length !== newKeys.length || !oldKeys.every((k) => k in newMaps)) return true;
+				for (const key of newKeys) {
+					if (oldMaps[key].source !== newMaps[key].source) return true;
+					if (oldMaps[key].channel !== newMaps[key].channel) return true;
+					if (!existingNode.mapUniforms?.[key]) return true;
+				}
+				return false;
+			})()) needsRecompose = true;
+			else for (const [key, mapCfg] of Object.entries(newMaps)) {
+				const cached = existingNode.mapUniforms[key];
+				cached.inputMin.value = mapCfg.inputMin;
+				cached.inputMax.value = mapCfg.inputMax;
+				cached.outputMin.value = mapCfg.outputMin;
+				cached.outputMax.value = mapCfg.outputMax;
+				cached.curve.value = mapCfg.curve ?? 0;
+			}
+		}
 		if (metadata.transform !== void 0) {
 			const newTransformState = needsTransformation(metadata.transform);
 			existingNode.metadata.transform = metadata.transform;
@@ -1206,7 +1312,9 @@ function shaderRenderer() {
 				existingNode.transformUniforms.scale.value = metadata.transform.scale;
 				existingNode.transformUniforms.anchorX.value = metadata.transform.anchorX;
 				existingNode.transformUniforms.anchorY.value = metadata.transform.anchorY;
+				const oldEdgesValue = existingNode.transformUniforms.edges.value;
 				existingNode.transformUniforms.edges.value = metadata.transform.edges === "stretch" ? 0 : metadata.transform.edges === "transparent" ? 1 : metadata.transform.edges === "mirror" ? 2 : 3;
+				if (existingNode.transformUniforms.edges.value !== oldEdgesValue) needsRecompose = true;
 			}
 			if (newTransformState && !existingNode.transformRTTActive) {
 				existingNode.transformRTTActive = true;

package/dist/core/registry.js

@@ -1,83 +1,83 @@
-import "./edges-Bd7GP4s2.js";
+import "./edges-CfGcQniB.js";
 import "./transformations-B5lM6fYX.js";
 import "./time-BZqyVJXt.js";
 import "./alpha-Byel9eTg.js";
-import { n as componentDefinition } from "./AngularBlur-m_DWR-a1.js";
-import { n as componentDefinition$1 } from "./Ascii-CmRuGRU3.js";
-import "./colorMixing-D_wMclqL.js";
-import { n as componentDefinition$2 } from "./Aurora-CYCPE1wp.js";
-import { n as componentDefinition$3 } from "./Beam-COjEb2JI.js";
-import { n as componentDefinition$4 } from "./Blob-jHnoxt2N.js";
-import { n as componentDefinition$5 } from "./Blur-DpAOfmjB.js";
-import { n as componentDefinition$6 } from "./BrightnessContrast-zL5bGGzg.js";
-import { n as componentDefinition$7 } from "./Bulge-CsNj4Jew.js";
-import { n as componentDefinition$8 } from "./ChannelBlur-4f44pSJj.js";
-import { n as componentDefinition$9 } from "./Checkerboard-DwiW08iJ.js";
-import { n as componentDefinition$10 } from "./ChromaFlow-DfP9ZDg0.js";
-import { n as componentDefinition$11 } from "./ChromaticAberration-VL5tfOeo.js";
-import { n as componentDefinition$12 } from "./Circle-CUYMdgd5.js";
-import { n as componentDefinition$13 } from "./ConcentricSpin-DBqXmCjg.js";
-import { n as componentDefinition$14 } from "./ContourLines-D2KRIOBw.js";
-import { n as componentDefinition$15 } from "./CRTScreen-cc_j5lyg.js";
-import { n as componentDefinition$16 } from "./CursorRipples-JWrDL_dU.js";
-import { n as componentDefinition$17 } from "./CursorTrail-D2_14ZEz.js";
-import { n as componentDefinition$18 } from "./DiffuseBlur-siJmc-84.js";
-import { n as componentDefinition$19 } from "./Dither-GoyNQ4_v.js";
-import { n as componentDefinition$20 } from "./DotGrid-B8bSufr6.js";
-import { n as componentDefinition$21 } from "./Duotone-CRiDL3YN.js";
-import { n as componentDefinition$22 } from "./FilmGrain-BxtaYExl.js";
-import { n as componentDefinition$23 } from "./FloatingParticles-CtrWM2rw.js";
-import { n as componentDefinition$24 } from "./FlowField-B-sNApu9.js";
-import { n as componentDefinition$25 } from "./GlassTiles-DR6mVq-O.js";
-import { n as componentDefinition$26 } from "./Glitch-D3mDX28q.js";
-import { n as componentDefinition$27 } from "./Glow-CN4IeRq4.js";
-import { n as componentDefinition$28 } from "./Godrays-BV94FCDI.js";
+import { n as componentDefinition } from "./AngularBlur-BBVuS72B.js";
+import { n as componentDefinition$1 } from "./Ascii-C57qusEP.js";
+import "./colorMixing-jSm3tbMv.js";
+import { n as componentDefinition$2 } from "./Aurora-LKsAmrmY.js";
+import { n as componentDefinition$3 } from "./Beam-BkYNheGX.js";
+import { n as componentDefinition$4 } from "./Blob-CWfHiQeb.js";
+import { n as componentDefinition$5 } from "./Blur-BguzqgHU.js";
+import { n as componentDefinition$6 } from "./BrightnessContrast-BoR9bi58.js";
+import { n as componentDefinition$7 } from "./Bulge-B8jPaomW.js";
+import { n as componentDefinition$8 } from "./ChannelBlur-BAq9PV6G.js";
+import { n as componentDefinition$9 } from "./Checkerboard-BtVQVtsL.js";
+import { n as componentDefinition$10 } from "./ChromaFlow-Cq6hDVjX.js";
+import { n as componentDefinition$11 } from "./ChromaticAberration-Ck4Zd3W1.js";
+import { n as componentDefinition$12 } from "./Circle-DdVVbdgQ.js";
+import { n as componentDefinition$13 } from "./ConcentricSpin-BQTBqzyV.js";
+import { n as componentDefinition$14 } from "./ContourLines-yEb5IJ1Y.js";
+import { n as componentDefinition$15 } from "./CRTScreen-C5v58BPh.js";
+import { n as componentDefinition$16 } from "./CursorRipples-CI8y0So9.js";
+import { n as componentDefinition$17 } from "./CursorTrail-BBTqzAWC.js";
+import { n as componentDefinition$18 } from "./DiffuseBlur-Qz6vgZgZ.js";
+import { n as componentDefinition$19 } from "./Dither-Csho-L_O.js";
+import { n as componentDefinition$20 } from "./DotGrid-wOP8tqHX.js";
+import { n as componentDefinition$21 } from "./Duotone-haec3FrU.js";
+import { n as componentDefinition$22 } from "./FilmGrain-BVDkgA2W.js";
+import { n as componentDefinition$23 } from "./FloatingParticles-D6fgcEbH.js";
+import { n as componentDefinition$24 } from "./FlowField-C2KW9_D1.js";
+import { n as componentDefinition$25 } from "./GlassTiles-4nBI82dT.js";
+import { n as componentDefinition$26 } from "./Glitch-DoFQeNTD.js";
+import { n as componentDefinition$27 } from "./Glow-CURvWSnB.js";
+import { n as componentDefinition$28 } from "./Godrays-BWEMe4dJ.js";
 import { n as componentDefinition$29 } from "./Grayscale-B_YZd3uy.js";
-import { n as componentDefinition$30 } from "./Grid-Czxa6-My.js";
-import { n as componentDefinition$31 } from "./GridDistortion-CKhOZRpM.js";
+import { n as componentDefinition$30 } from "./Grid-BwRz6-s5.js";
+import { n as componentDefinition$31 } from "./GridDistortion-BjfEpWUs.js";
 import { n as componentDefinition$32 } from "./Group-NJlcbnkb.js";
-import { n as componentDefinition$33 } from "./Halftone-YTJAc3Ie.js";
-import { n as componentDefinition$34 } from "./HueShift-Bf2V6FVR.js";
+import { n as componentDefinition$33 } from "./Halftone-DogLm5Sz.js";
+import { n as componentDefinition$34 } from "./HueShift-CcobQ2yn.js";
 import { n as componentDefinition$35 } from "./ImageTexture-6e1Gz4IG.js";
 import { n as componentDefinition$36 } from "./Invert-c6RNEzsq.js";
-import { n as componentDefinition$37 } from "./Kaleidoscope-B1mL-Yj3.js";
-import { n as componentDefinition$38 } from "./LensFlare-sRuR8OkY.js";
-import { n as componentDefinition$39 } from "./LinearBlur-BtsleV0J.js";
-import { n as componentDefinition$40 } from "./LinearGradient-BP91wtXm.js";
-import { n as componentDefinition$41 } from "./Liquify-2u2lkBhB.js";
-import { n as componentDefinition$42 } from "./Mirror-BonA1elw.js";
-import { n as componentDefinition$43 } from "./Perspective-Cwpv4683.js";
-import { n as componentDefinition$44 } from "./Pixelate-Bxo1bkqM.js";
-import { n as componentDefinition$45 } from "./Plasma-BU4ujuLB.js";
-import { n as componentDefinition$46 } from "./PolarCoordinates-6BZYZFoj.js";
-import { n as componentDefinition$47 } from "./Posterize--X9GTtfd.js";
-import { n as componentDefinition$48 } from "./ProgressiveBlur-Y8YqC7HM.js";
-import { n as componentDefinition$49 } from "./RadialGradient-DauSwpwY.js";
-import { n as componentDefinition$50 } from "./RectangularCoordinates-C5585uvf.js";
-import { n as componentDefinition$51 } from "./Ripples-QWGujQgy.js";
-import { n as componentDefinition$52 } from "./Saturation-1mdcFzVI.js";
-import { n as componentDefinition$53 } from "./Sharpness-DAu01Qy4.js";
-import { n as componentDefinition$54 } from "./Shatter-DRSn9uGZ.js";
-import { n as componentDefinition$55 } from "./SimplexNoise-W0fx_Y5Q.js";
-import { n as componentDefinition$56 } from "./SineWave-C-r5bVGK.js";
+import { n as componentDefinition$37 } from "./Kaleidoscope-Wq5CGMiP.js";
+import { n as componentDefinition$38 } from "./LensFlare-BvU6_Rjd.js";
+import { n as componentDefinition$39 } from "./LinearBlur-WcJbCWwj.js";
+import { n as componentDefinition$40 } from "./LinearGradient-CCTJoXKq.js";
+import { n as componentDefinition$41 } from "./Liquify-Ad7waFTE.js";
+import { n as componentDefinition$42 } from "./Mirror-QfQBv7v_.js";
+import { n as componentDefinition$43 } from "./Perspective-CZiW61kj.js";
+import { n as componentDefinition$44 } from "./Pixelate-DCUPU8V-.js";
+import { n as componentDefinition$45 } from "./Plasma-CEs9bH1D.js";
+import { n as componentDefinition$46 } from "./PolarCoordinates-ituaMXaH.js";
+import { n as componentDefinition$47 } from "./Posterize-B_XGPa8l.js";
+import { n as componentDefinition$48 } from "./ProgressiveBlur-DEfvy5dW.js";
+import { n as componentDefinition$49 } from "./RadialGradient-Di_VuDot.js";
+import { n as componentDefinition$50 } from "./RectangularCoordinates-xmILlyac.js";
+import { n as componentDefinition$51 } from "./Ripples-rV1yHHuE.js";
+import { n as componentDefinition$52 } from "./Saturation-DmUZQ3u7.js";
+import { n as componentDefinition$53 } from "./Sharpness-DeD2T2-a.js";
+import { n as componentDefinition$54 } from "./Shatter-DpPRGA0l.js";
+import { n as componentDefinition$55 } from "./SimplexNoise-C648ofLb.js";
+import { n as componentDefinition$56 } from "./SineWave-t5aPlKh4.js";
 import { n as componentDefinition$57 } from "./SolidColor-BY2tBGcO.js";
-import { n as componentDefinition$58 } from "./Spherize-DF4iTTzb.js";
-import { n as componentDefinition$59 } from "./Spiral-DWBdkW7Y.js";
-import { n as componentDefinition$60 } from "./Strands-BFVI3C04.js";
-import { n as componentDefinition$61 } from "./Stretch-CB92XLiC.js";
-import { n as componentDefinition$62 } from "./Stripes-CTmvjI0U.js";
-import { n as componentDefinition$63 } from "./StudioBackground-DXHPEKcb.js";
-import { n as componentDefinition$64 } from "./Swirl-DVaTB8HY.js";
-import { n as componentDefinition$65 } from "./TiltShift-CMTVpEBO.js";
-import { n as componentDefinition$66 } from "./Tint-COD37j4D.js";
-import { n as componentDefinition$67 } from "./Tritone-BETUi-og.js";
-import { n as componentDefinition$68 } from "./Twirl-BUlMUymT.js";
-import { n as componentDefinition$69 } from "./Vibrance-CWMwA5S-.js";
+import { n as componentDefinition$58 } from "./Spherize-CkHw6wfO.js";
+import { n as componentDefinition$59 } from "./Spiral-C4xcFRWd.js";
+import { n as componentDefinition$60 } from "./Strands-FVw1VjAV.js";
+import { n as componentDefinition$61 } from "./Stretch-BmPCPWY8.js";
+import { n as componentDefinition$62 } from "./Stripes-D-fIDK48.js";
+import { n as componentDefinition$63 } from "./StudioBackground-BqIq7k14.js";
+import { n as componentDefinition$64 } from "./Swirl-C137NvM7.js";
+import { n as componentDefinition$65 } from "./TiltShift-vr8k-bAX.js";
+import { n as componentDefinition$66 } from "./Tint-Cw39HvaL.js";
+import { n as componentDefinition$67 } from "./Tritone-NDERRh_N.js";
+import { n as componentDefinition$68 } from "./Twirl-BFocvCoq.js";
+import { n as componentDefinition$69 } from "./Vibrance-HMvQZ4tL.js";
 import "./browser-C7ZSkE-t.js";
 import { n as componentDefinition$70 } from "./VideoTexture-DUk9pA_6.js";
-import { n as componentDefinition$71 } from "./WaveDistortion-D8LOc-Dc.js";
+import { n as componentDefinition$71 } from "./WaveDistortion-HrmY6hF5.js";
 import { n as componentDefinition$72 } from "./WebcamTexture-BmeO4qY-.js";
-import { n as componentDefinition$73 } from "./ZoomBlur-BE1vT38D.js";
+import { n as componentDefinition$73 } from "./ZoomBlur-DSCQQerF.js";
 var createShaderRegistry = () => {
 	const registry = {};
 	const shaderDefinitions = {

package/dist/core/renderer.d.ts

@@ -86,6 +86,22 @@ interface NodeInfo {
      * NOT persisted - renderer-only flag
      */
     transformRTTActive?: boolean;
+    /**
+     * Optional function returning custom sample UVs for prop maps.
+     * Stored from ComponentDefinition.mapSampleUVs at registration time.
+     */
+    mapSampleUVsFunc?: (uniforms: UniformsMap) => Record<string, any>;
+    /**
+     * Cached uniform nodes for map remapping values, keyed by prop name.
+     * Allows inputMin/inputMax/outputMin/outputMax updates to bypass shader recompilation.
+     */
+    mapUniforms?: Record<string, {
+        inputMin: any;
+        inputMax: any;
+        outputMin: any;
+        outputMax: any;
+        curve: any;
+    }>;
 }
 /**
  * The registry of nodes in the shader tree.