shaders 2.3.66 → 2.3.68

package/dist/core/{CursorRipples-JWrDL_dU.js → CursorRipples-CI8y0So9.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 unpremultiplyAlpha } from "./alpha-Byel9eTg.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
@@ -15,7 +15,7 @@ const componentDefinition = {
 			default: 10,
 			description: "Strength of the ripple distortion",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 20,
 				step: .1,
@@ -51,7 +51,7 @@ const componentDefinition = {
 			default: 1,
 			description: "RGB channel separation along ripple edges",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 3,
 				step: .1,
@@ -63,6 +63,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: [
@@ -168,9 +169,9 @@ const componentDefinition = {
 		const rUV = screenUV.sub(clampedDisplacement.mul(float(1).add(chromaticScale)));
 		const gUV = screenUV.sub(clampedDisplacement);
 		const bUV = screenUV.sub(clampedDisplacement.mul(float(1).sub(chromaticScale)));
-		const rSample = applyEdgeHandling(rUV, childTexture.sample(rUV), childTexture, uniforms.edges.uniform);
-		const gSample = applyEdgeHandling(gUV, childTexture.sample(gUV), childTexture, uniforms.edges.uniform);
-		const bSample = applyEdgeHandling(bUV, childTexture.sample(bUV), childTexture, uniforms.edges.uniform);
+		const rSample = applyEdgeHandling(rUV, childTexture.sample(rUV), childTexture, uniforms.edges.uniform.value);
+		const gSample = applyEdgeHandling(gUV, childTexture.sample(gUV), childTexture, uniforms.edges.uniform.value);
+		const bSample = applyEdgeHandling(bUV, childTexture.sample(bUV), childTexture, uniforms.edges.uniform.value);
 		return unpremultiplyAlpha(vec4(rSample.r, gSample.g, bSample.b, gSample.a));
 	}
 };

package/dist/core/{CursorTrail-D2_14ZEz.js → CursorTrail-BBTqzAWC.js}

@@ -1,5 +1,5 @@
 import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
-import { t as mixColors } from "./colorMixing-D_wMclqL.js";
+import { t as mixColors } from "./colorMixing-jSm3tbMv.js";
 import { DataTexture, FloatType, LinearFilter, RGBAFormat } from "three";
 import { float, screenUV, step, texture, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
@@ -66,6 +66,7 @@ const componentDefinition = {
 		colorSpace: {
 			default: "linear",
 			transform: transformColorSpace,
+			compileTime: true,
 			description: "Color space for color interpolation",
 			ui: {
 				type: "select",
@@ -143,7 +144,7 @@ const componentDefinition = {
 		const circleMask = step(float(.01), trailIntensity);
 		const colorA = uniforms.colorA.uniform;
 		const colorB = uniforms.colorB.uniform;
-		const trailColor = mixColors(colorA, colorB, trailAge, uniforms.colorSpace.uniform);
+		const trailColor = mixColors(colorA, colorB, trailAge, uniforms.colorSpace.uniform.value);
 		return vec4(trailColor.rgb, trailColor.a.mul(circleMask));
 	}
 };

package/dist/core/{DiffuseBlur-siJmc-84.js → DiffuseBlur-Qz6vgZgZ.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 unpremultiplyAlpha } from "./alpha-Byel9eTg.js";
 import { convertToTexture, dot, fract, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
@@ -13,7 +13,7 @@ const componentDefinition = {
 			default: 30,
 			description: "Intensity of the diffuse blur effect",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 100,
 				step: 1,
@@ -25,6 +25,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: [
@@ -60,7 +61,7 @@ const componentDefinition = {
 		const sinVal = sin(dot(uv$1.mul(1e3), vec2(25.9796, 156.466)));
 		const offset = fract(vec2(sinVal.mul(43758.5453), sinVal.mul(28461.7231))).mul(2).sub(1).mul(uniforms.intensity.uniform).div(viewportSize);
 		const displacedUV = uv$1.add(offset);
-		return unpremultiplyAlpha(applyEdgeHandling(displacedUV, childTexture.sample(displacedUV), childTexture, uniforms.edges.uniform));
+		return unpremultiplyAlpha(applyEdgeHandling(displacedUV, childTexture.sample(displacedUV), childTexture, uniforms.edges.uniform.value));
 	}
 };
 var DiffuseBlur_default = componentDefinition;

package/dist/core/{Dither-GoyNQ4_v.js → Dither-Csho-L_O.js}

@@ -25,6 +25,7 @@ const componentDefinition = {
 		pattern: {
 			default: "bayer4",
 			transform: transformPattern,
+			compileTime: true,
 			description: "Dithering pattern algorithm",
 			ui: {
 				type: "select",
@@ -74,7 +75,7 @@ const componentDefinition = {
 			default: .5,
 			description: "Luminance threshold for dithering",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .01,
@@ -86,7 +87,7 @@ const componentDefinition = {
 			default: 1,
 			description: "How much of the luminance range participates in dithering (lower = more solid areas)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .01,
@@ -97,6 +98,7 @@ const componentDefinition = {
 		colorMode: {
 			default: "custom",
 			transform: transformColorMode,
+			compileTime: true,
 			description: "How colors are determined",
 			ui: {
 				type: "select",
@@ -192,19 +194,38 @@ const componentDefinition = {
 		const pixelatedUV = pixelCoord.add(.5).mul(pixelSize).div(viewportSize);
 		const sourceColor = unpremultiplyAlpha(childTexture.sample(pixelatedUV));
 		const luminance = dot(sourceColor.rgb, vec3(.299, .587, .114)).mul(sourceColor.a);
-		const patternSample = texture(ditherTex).sample(pixelCoord.div(float(DITHER_SIZE)));
-		const blueNoiseCoord = pixelCoord.add(.5);
-		const blueNoiseValue = fract(float(52.9829189).mul(fract(blueNoiseCoord.x.mul(.06711056).add(blueNoiseCoord.y.mul(.00583715)))));
-		const whiteNoiseValue = fract(sin(dot(pixelCoord, vec2(12.9898, 78.233))).mul(43758.5453));
-		const patternIndex = uniforms.pattern.uniform;
-		const ditherValue = patternIndex.equal(0).select(patternSample.r, patternIndex.equal(1).select(patternSample.g, patternIndex.equal(2).select(patternSample.b, patternIndex.equal(3).select(patternSample.a, patternIndex.equal(4).select(blueNoiseValue, whiteNoiseValue)))));
+		let ditherValue;
+		switch (uniforms.pattern.uniform.value) {
+			case 0:
+				ditherValue = texture(ditherTex).sample(pixelCoord.div(float(DITHER_SIZE))).r;
+				break;
+			case 1:
+				ditherValue = texture(ditherTex).sample(pixelCoord.div(float(DITHER_SIZE))).g;
+				break;
+			case 2:
+				ditherValue = texture(ditherTex).sample(pixelCoord.div(float(DITHER_SIZE))).b;
+				break;
+			case 3:
+				ditherValue = texture(ditherTex).sample(pixelCoord.div(float(DITHER_SIZE))).a;
+				break;
+			case 4: {
+				const blueNoiseCoord = pixelCoord.add(.5);
+				ditherValue = fract(float(52.9829189).mul(fract(blueNoiseCoord.x.mul(.06711056).add(blueNoiseCoord.y.mul(.00583715)))));
+				break;
+			}
+			default: ditherValue = fract(sin(dot(pixelCoord, vec2(12.9898, 78.233))).mul(43758.5453));
+		}
 		const ditherResult = step(float(.5).add(ditherValue.sub(.5).mul(spread)), luminance.add(threshold.sub(.5)));
-		const colorModeIndex = uniforms.colorMode.uniform;
-		const customFinalRGB = mix(uniforms.colorA.uniform.rgb, uniforms.colorB.uniform.rgb, ditherResult);
-		const customFinalAlpha = mix(uniforms.colorA.uniform.a, uniforms.colorB.uniform.a, ditherResult);
-		const sourceFinalRGB = mix(sourceColor.rgb.mul(.3), sourceColor.rgb.mul(1.3).min(vec3(1)), ditherResult);
-		const sourceFinalAlpha = sourceColor.a;
-		return vec4(colorModeIndex.equal(0).select(customFinalRGB, sourceFinalRGB), colorModeIndex.equal(0).select(customFinalAlpha, sourceFinalAlpha));
+		let finalRGB;
+		let finalAlpha;
+		if (uniforms.colorMode.uniform.value === 0) {
+			finalRGB = mix(uniforms.colorA.uniform.rgb, uniforms.colorB.uniform.rgb, ditherResult);
+			finalAlpha = mix(uniforms.colorA.uniform.a, uniforms.colorB.uniform.a, ditherResult);
+		} else {
+			finalRGB = mix(sourceColor.rgb.mul(.3), sourceColor.rgb.mul(1.3).min(vec3(1)), ditherResult);
+			finalAlpha = sourceColor.a;
+		}
+		return vec4(finalRGB, finalAlpha);
 	}
 };
 var Dither_default = componentDefinition;

package/dist/core/{DotGrid-B8bSufr6.js → DotGrid-wOP8tqHX.js}

@@ -31,7 +31,7 @@ const componentDefinition = {
 			default: .3,
 			description: "The size of each dot, zero (0) being invisible, one (1) filled the grid with no gaps",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .05,
@@ -43,7 +43,7 @@ const componentDefinition = {
 			default: 0,
 			description: "Intensity of the twinkle effect (0 = off, 1 = full twinkle)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,
@@ -52,6 +52,15 @@ const componentDefinition = {
 			}
 		}
 	},
+	mapSampleUVs: (uniforms) => {
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const cellCenterCorrected = floor(vec2(screenUV.x.mul(aspect), screenUV.y.oneMinus()).mul(uniforms.density.uniform)).add(.5).div(uniforms.density.uniform);
+		const cellCenterScreen = vec2(cellCenterCorrected.x.div(aspect), cellCenterCorrected.y.oneMinus());
+		return {
+			dotSize: cellCenterScreen,
+			twinkle: cellCenterScreen
+		};
+	},
 	fragmentNode: ({ uniforms }) => {
 		const uvCoords = screenUV;
 		const density = uniforms.density.uniform;
@@ -64,7 +73,7 @@ const componentDefinition = {
 		const gridUV = correctedUV.mul(density);
 		const centerDistance = length(gridUV.sub(floor(gridUV)).sub(.5));
 		const pixelSize = length(fwidth(correctedUV.mul(density)));
-		const dot$1 = float(1).sub(smoothstep(dotSize.mul(.5), dotSize.mul(.5).add(pixelSize.mul(.5)), centerDistance));
+		const dot$1 = float(1).sub(smoothstep(dotSize.mul(.5).sub(pixelSize.mul(.5)), dotSize.mul(.5), centerDistance));
 		const gridPosition = floor(gridUV);
 		const dotPhase = gridPosition.x.mul(12.9898).add(gridPosition.y.mul(78.233)).sin().mul(43758.5453).fract();
 		const twinkleValue = sin(time.mul(2).add(dotPhase.mul(6.28318))).mul(.5).add(.5);

package/dist/core/{Duotone-CRiDL3YN.js → Duotone-haec3FrU.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as unpremultiplyAlpha } from "./alpha-Byel9eTg.js";
-import { t as mixColors } from "./colorMixing-D_wMclqL.js";
+import { t as mixColors } from "./colorMixing-jSm3tbMv.js";
 import { convertToTexture, dot, screenUV, smoothstep, vec3, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "Duotone",
@@ -33,7 +33,7 @@ const componentDefinition = {
 			default: .5,
 			description: "Blend point between the two colors",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,
@@ -44,6 +44,7 @@ const componentDefinition = {
 		colorSpace: {
 			default: "linear",
 			transform: transformColorSpace,
+			compileTime: true,
 			description: "Color space for color interpolation",
 			ui: {
 				type: "select",
@@ -62,7 +63,7 @@ const componentDefinition = {
 		const inputColor = unpremultiplyAlpha(childTexture.sample(screenUV));
 		const luminance = dot(inputColor.rgb, vec3(.299, .587, .114));
 		const adjustedLuminance = smoothstep(uniforms.blend.uniform.sub(.5), uniforms.blend.uniform.add(.5), luminance);
-		return vec4(mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, adjustedLuminance, uniforms.colorSpace.uniform).rgb, inputColor.a);
+		return vec4(mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, adjustedLuminance, uniforms.colorSpace.uniform.value).rgb, inputColor.a);
 	}
 };
 var Duotone_default = componentDefinition;

package/dist/core/{FilmGrain-BxtaYExl.js → FilmGrain-BVDkgA2W.js}

@@ -8,7 +8,7 @@ const componentDefinition = {
 		default: .5,
 		description: "Intensity of the film grain noise",
 		ui: {
-			type: "range",
+			type: ["range", "map"],
 			min: 0,
 			max: 1,
 			step: .1,

package/dist/core/{FloatingParticles-CtrWM2rw.js → FloatingParticles-D6fgcEbH.js}

@@ -30,7 +30,7 @@ const componentDefinition = {
 			default: .25,
 			description: "Randomness of particle animation",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,
@@ -66,7 +66,7 @@ const componentDefinition = {
 			default: 1,
 			description: "Size of particles",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: .1,
 				max: 20,
 				step: .1,
@@ -78,7 +78,7 @@ const componentDefinition = {
 			default: 0,
 			description: "Edge softness of particles (0 = sharp, 1 = very soft)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 5,
 				step: .1,
@@ -90,7 +90,7 @@ const componentDefinition = {
 			default: .5,
 			description: "Intensity of the twinkle effect (0 = off, 1 = full twinkle)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,

package/dist/core/{FlowField-B-sNApu9.js → FlowField-C2KW9_D1.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: .15,
 			description: "Intensity of the flow distortion",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: .5,
 				step: .05,
@@ -26,7 +26,7 @@ const componentDefinition = {
 			default: 2,
 			description: "Scale of the flow patterns",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: .5,
 				max: 5,
 				step: .1,
@@ -50,6 +50,7 @@ const componentDefinition = {
 			default: "mirror",
 			description: "How to handle edges when distortion pushes content out of bounds",
 			transform: transformEdges,
+			compileTime: true,
 			ui: {
 				type: "select",
 				options: [
@@ -101,7 +102,7 @@ const componentDefinition = {
 		const normalizedFlow = combinedFlow.div(flowLength);
 		const finalFlow = vec2(normalizedFlow.x.mul(strength).div(aspect), normalizedFlow.y.mul(strength));
 		const distortedUV = vec2(screenUV.x.add(finalFlow.x), screenUV.y.add(finalFlow.y));
-		return unpremultiplyAlpha(applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform));
+		return unpremultiplyAlpha(applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform.value));
 	}
 };
 var FlowField_default = componentDefinition;

package/dist/core/{GlassTiles-DR6mVq-O.js → GlassTiles-4nBI82dT.js}

@@ -11,7 +11,7 @@ const componentDefinition = {
 			default: 2,
 			description: "The intensity of the glass tiles effect",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 10,
 				step: .1,
@@ -23,7 +23,7 @@ const componentDefinition = {
 			default: 20,
 			description: "Number of tiles across the longest dimension",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 5,
 				max: 50,
 				step: 1,
@@ -35,7 +35,7 @@ const componentDefinition = {
 			default: 0,
 			description: "Rotation angle of the tile grid in degrees",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 360,
 				step: 1,
@@ -47,7 +47,7 @@ const componentDefinition = {
 			default: 0,
 			description: "Makes tiles more circular instead of square",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,

package/dist/core/{Glitch-D3mDX28q.js → Glitch-DoFQeNTD.js}

@@ -14,7 +14,7 @@ const componentDefinition = {
 			default: .5,
 			description: "Overall glitch strength and frequency of glitch bursts",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .01,
@@ -38,7 +38,7 @@ const componentDefinition = {
 			default: 5,
 			description: "Amount of chromatic aberration (RGB channel splitting)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 20,
 				step: .5,
@@ -50,7 +50,7 @@ const componentDefinition = {
 			default: 10,
 			description: "Base number of horizontal glitch bands",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 2,
 				max: 50,
 				step: 1,
@@ -62,7 +62,7 @@ const componentDefinition = {
 			default: .2,
 			description: "Intensity of vivid neon color bar overlay in glitch regions",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .01,
@@ -74,7 +74,7 @@ const componentDefinition = {
 			default: .3,
 			description: "Chance of glitch blocks showing mirrored/flipped content",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .01,
@@ -86,7 +86,7 @@ const componentDefinition = {
 			default: .2,
 			description: "Visibility of CRT-style horizontal scanlines in distorted areas",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .01,

package/dist/core/{Glow-CN4IeRq4.js → Glow-CURvWSnB.js}

@@ -11,7 +11,7 @@ const componentDefinition = {
 			default: 1,
 			description: "Glow intensity (brightness of the glow effect)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 10,
 				step: .1,
@@ -23,7 +23,7 @@ const componentDefinition = {
 			default: .5,
 			description: "Brightness threshold for glow extraction (lower = more glow)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,
@@ -35,7 +35,7 @@ const componentDefinition = {
 			default: 10,
 			description: "Size/spread of the glow effect",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 1,
 				max: 20,
 				step: .1,

package/dist/core/{Godrays-BV94FCDI.js → Godrays-BWEMe4dJ.js}

@@ -24,7 +24,7 @@ const componentDefinition = {
 			default: .3,
 			description: "Frequency of ray sectors",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,
@@ -36,7 +36,7 @@ const componentDefinition = {
 			default: .8,
 			description: "Ray visibility within sectors",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,
@@ -48,7 +48,7 @@ const componentDefinition = {
 			default: 1,
 			description: "Density of spots on rays (higher = more spots)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 1,
 				step: .1,

package/dist/core/{Grid-Czxa6-My.js → Grid-BwRz6-s5.js}

@@ -1,5 +1,5 @@
 import { a as transformColor } from "./transformations-B5lM6fYX.js";
-import { fract, fwidth, max, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+import { floor, fract, fwidth, max, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Grid",
 	category: "Textures",
@@ -19,7 +19,7 @@ const componentDefinition = {
 			default: 10,
 			description: "Number of cells along the shortest canvas edge (creates square cells)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 1,
 				max: 50,
 				step: 1,
@@ -31,15 +31,24 @@ const componentDefinition = {
 			default: 1,
 			description: "Thickness of grid lines (normalized, 0.0-1.0)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
-				max: 5,
+				max: 20,
 				step: .1,
 				label: "Thickness",
 				group: "Effect"
 			}
 		}
 	},
+	mapSampleUVs: (uniforms) => {
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const cellCenterCorrected = floor(vec2(screenUV.x.mul(aspect), screenUV.y.oneMinus()).mul(uniforms.cells.uniform)).add(.5).div(uniforms.cells.uniform);
+		const cellCenterScreen = vec2(cellCenterCorrected.x.div(aspect), cellCenterCorrected.y.oneMinus());
+		return {
+			thickness: cellCenterScreen,
+			cells: cellCenterScreen
+		};
+	},
 	fragmentNode: ({ uniforms }) => {
 		const uv$1 = screenUV;
 		const aspect = viewportSize.x.div(viewportSize.y);
@@ -51,7 +60,7 @@ const componentDefinition = {
 		const distToLineX = gridFract.x.min(gridFract.x.oneMinus());
 		const distToLineY = gridFract.y.min(gridFract.y.oneMinus());
 		const pixelSize = fwidth(gridUV);
-		const gridMask = max(smoothstep(lineWidth, lineWidth.add(pixelSize.x), distToLineX).oneMinus(), smoothstep(lineWidth, lineWidth.add(pixelSize.y), distToLineY).oneMinus());
+		const gridMask = max(smoothstep(lineWidth.sub(pixelSize.x), lineWidth, distToLineX).oneMinus(), smoothstep(lineWidth.sub(pixelSize.y), lineWidth, distToLineY).oneMinus());
 		return vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(gridMask));
 	}
 };

package/dist/core/{GridDistortion-CKhOZRpM.js → GridDistortion-BjfEpWUs.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 unpremultiplyAlpha } from "./alpha-Byel9eTg.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
@@ -76,7 +76,7 @@ const componentDefinition = {
 			default: 20,
 			description: "Resolution of the distortion grid (higher = more detailed)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 8,
 				max: 128,
 				step: 1,
@@ -88,6 +88,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: [
@@ -175,7 +176,7 @@ const componentDefinition = {
 		const negMaxDisplacement = float(-.1);
 		const clampedDisplacement = displacement.clamp(vec2(negMaxDisplacement, negMaxDisplacement), vec2(maxDisplacement, maxDisplacement));
 		const distortedUV = screenUV.sub(clampedDisplacement);
-		return unpremultiplyAlpha(applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform));
+		return unpremultiplyAlpha(applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform.value));
 	}
 };
 var GridDistortion_default = componentDefinition;

package/dist/core/{Halftone-YTJAc3Ie.js → Halftone-DogLm5Sz.js}

@@ -10,7 +10,7 @@ const componentDefinition = {
 			default: 100,
 			description: "Frequency of the halftone dots",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 10,
 				max: 300,
 				step: 1,
@@ -23,7 +23,7 @@ const componentDefinition = {
 			transform: transformAngle,
 			description: "Rotation angle of the pattern (in degrees)",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 360,
 				step: 1,
@@ -35,7 +35,7 @@ const componentDefinition = {
 			default: .1,
 			description: "Edge smoothness of the dots",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: .3,
 				step: .1,

package/dist/core/{HueShift-Bf2V6FVR.js → HueShift-CcobQ2yn.js}

@@ -8,7 +8,7 @@ const componentDefinition = {
 		default: 0,
 		description: "The amount to shift the hue by",
 		ui: {
-			type: "range",
+			type: ["range", "map"],
 			min: -180,
 			max: 180,
 			step: 1,

package/dist/core/{Kaleidoscope-B1mL-Yj3.js → Kaleidoscope-Wq5CGMiP.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, l as transformPosition } from "./transformations-B5lM6fYX.js";
 import { t as unpremultiplyAlpha } from "./alpha-Byel9eTg.js";
 import { atan, convertToTexture, cos, float, length, mod, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
@@ -26,7 +26,7 @@ const componentDefinition = {
 			default: 6,
 			description: "Number of radial segments in the kaleidoscope",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 2,
 				max: 24,
 				step: 1,
@@ -38,7 +38,7 @@ const componentDefinition = {
 			default: 0,
 			description: "Rotation offset for the entire kaleidoscope pattern",
 			ui: {
-				type: "range",
+				type: ["range", "map"],
 				min: 0,
 				max: 360,
 				step: 1,
@@ -50,6 +50,7 @@ const componentDefinition = {
 			default: "mirror",
 			description: "How to handle edges when distortion pushes content out of bounds",
 			transform: transformEdges,
+			compileTime: true,
 			ui: {
 				type: "select",
 				options: [
@@ -95,7 +96,7 @@ const componentDefinition = {
 		const kaleidoscopeDelta = vec2(cos(finalAngle).mul(radius), sin(finalAngle).mul(radius));
 		const kaleidoscopePos = centerPos.add(kaleidoscopeDelta);
 		const finalUV = vec2(kaleidoscopePos.x.div(aspect), kaleidoscopePos.y);
-		return unpremultiplyAlpha(applyEdgeHandling(finalUV, childTexture.sample(finalUV), childTexture, uniforms.edges.uniform));
+		return unpremultiplyAlpha(applyEdgeHandling(finalUV, childTexture.sample(finalUV), childTexture, uniforms.edges.uniform.value));
 	}
 };
 var Kaleidoscope_default = componentDefinition;