shaders 2.3.54 → 2.3.56

package/dist/core/Circle-ChQqil0S.js

@@ -0,0 +1,148 @@
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
+import { float, length, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+var transformStrokePosition = (value) => {
+	const mode = {
+		"outside": 0,
+		"center": 1,
+		"inside": 2
+	}[value.toLowerCase()];
+	if (mode === void 0) {
+		console.warn(`Invalid stroke position: ${value}. Defaulting to 'outside'.`);
+		return 0;
+	}
+	return mode;
+};
+const componentDefinition = {
+	name: "Circle",
+	category: "Textures",
+	description: "Generate a circle with adjustable size and softness",
+	props: {
+		color: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "The color of the circle",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		radius: {
+			default: 1,
+			description: "The radius of the circle. A value of one (1) is sets the circle to fit the canvas.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .05,
+				label: "Radius",
+				group: "Effect"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Softness",
+				group: "Effect"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "The center point of the circle",
+			ui: {
+				type: "position",
+				label: "Center Position",
+				group: "Position"
+			}
+		},
+		strokeThickness: {
+			default: 0,
+			description: "The thickness of the stroke outline. Zero (0) means no stroke.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .5,
+				step: .01,
+				label: "Stroke Thickness",
+				group: "Stroke"
+			}
+		},
+		strokeColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "The 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 circle 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,
+			description: "Color space for blending fill and stroke colors in soft edges",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Blending",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectCorrectedUV = vec2(uv$1.x.mul(aspect), uv$1.y);
+		const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const distanceFromCenter = length(aspectCorrectedUV.sub(centerPos));
+		const edgeSoftness = uniforms.softness.uniform;
+		const circleEdge = uniforms.radius.uniform.mul(.5);
+		const strokeThickness = uniforms.strokeThickness.uniform;
+		const strokePositionMode = uniforms.strokePosition.uniform;
+		const isCenter = strokePositionMode.greaterThanEqual(float(.5)).and(strokePositionMode.lessThan(float(1.5)));
+		const isInside = strokePositionMode.greaterThanEqual(float(1.5));
+		const halfThickness = strokeThickness.mul(.5);
+		const strokeInner = isInside.select(circleEdge.sub(strokeThickness), isCenter.select(circleEdge.sub(halfThickness), circleEdge));
+		const strokeOuter = isInside.select(circleEdge, isCenter.select(circleEdge.add(halfThickness), circleEdge.add(strokeThickness)));
+		const overallMask = smoothstep(strokeOuter.sub(edgeSoftness), strokeOuter, distanceFromCenter).oneMinus();
+		const strokeBlend = strokeThickness.greaterThan(float(0)).select(smoothstep(strokeInner.sub(edgeSoftness), strokeInner, distanceFromCenter), float(0));
+		const blendedColor = mixColors(vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a), vec4(uniforms.strokeColor.uniform.rgb, uniforms.strokeColor.uniform.a), strokeBlend, uniforms.colorSpace.uniform);
+		return vec4(blendedColor.xyz, blendedColor.w.mul(overallMask));
+	}
+};
+var Circle_default = componentDefinition;
+export { componentDefinition as n, Circle_default as t };

package/dist/core/index.js

@@ -258,6 +258,8 @@ function applyMask(target, mask, maskType = "alpha") {
 }
 var PerformanceTracker = class {
 	frameTimesMs = [];
+	frameTimesIndex = 0;
+	frameTimesCount = 0;
 	maxSamples = 60;
 	targetFrameTime = 16.67;
 	jankFrameCount = 0;
@@ -272,16 +274,37 @@ var PerformanceTracker = class {
 	isRendering = false;
 	lastFrameTimestamp = 0;
 	frameIntervals = [];
+	frameIntervalsIndex = 0;
+	frameIntervalsCount = 0;
+	pushToCircularBuffer(buffer, value, index, _count, maxSize) {
+		if (buffer.length < maxSize) {
+			buffer.push(value);
+			return {
+				index: buffer.length,
+				count: buffer.length
+			};
+		}
+		buffer[index % maxSize] = value;
+		return {
+			index: index + 1,
+			count: maxSize
+		};
+	}
+	getBufferValues(buffer, count) {
+		return count <= buffer.length ? buffer.slice(0, count) : buffer;
+	}
 	recordFrame(frameTimeMs) {
-		this.frameTimesMs.push(frameTimeMs);
-		if (this.frameTimesMs.length > this.maxSamples) this.frameTimesMs.shift();
+		const result = this.pushToCircularBuffer(this.frameTimesMs, frameTimeMs, this.frameTimesIndex, this.frameTimesCount, this.maxSamples);
+		this.frameTimesIndex = result.index;
+		this.frameTimesCount = result.count;
 		this.totalFrameCount++;
 		if (frameTimeMs > this.targetFrameTime) this.jankFrameCount++;
 		const now = performance.now();
 		if (this.lastFrameTimestamp > 0) {
 			const interval = now - this.lastFrameTimestamp;
-			this.frameIntervals.push(interval);
-			if (this.frameIntervals.length > this.maxSamples) this.frameIntervals.shift();
+			const intervalResult = this.pushToCircularBuffer(this.frameIntervals, interval, this.frameIntervalsIndex, this.frameIntervalsCount, this.maxSamples);
+			this.frameIntervalsIndex = intervalResult.index;
+			this.frameIntervalsCount = intervalResult.count;
 		}
 		this.lastFrameTimestamp = now;
 		this.recordMemorySnapshot();
@@ -357,12 +380,13 @@ var PerformanceTracker = class {
 		return this.nodeCount + this.rttNodeCount * 10;
 	}
 	calculateIntensityScore() {
-		const frameCount = this.frameTimesMs.length;
+		const frameTimes = this.getBufferValues(this.frameTimesMs, this.frameTimesCount);
+		const frameCount = frameTimes.length;
 		if (frameCount === 0) return {
 			score: 0,
 			label: "N/A"
 		};
-		const avgFrameTime = this.frameTimesMs.reduce((a, b) => a + b, 0) / frameCount;
+		const avgFrameTime = frameTimes.reduce((a, b) => a + b, 0) / frameCount;
 		const frameTimeScore = Math.min(avgFrameTime / 16.67 * 100, 100);
 		const complexity = this.calculateComplexityScore();
 		const complexityScore = Math.min(complexity / 100 * 100, 100);
@@ -390,13 +414,15 @@ var PerformanceTracker = class {
 		};
 	}
 	getStats(rendererInfo) {
-		const frameCount = this.frameTimesMs.length;
-		const fps = this.frameIntervals.length > 0 ? 1e3 / (this.frameIntervals.reduce((a, b) => a + b, 0) / this.frameIntervals.length) : 0;
-		const avgFrameTime = frameCount > 0 ? this.frameTimesMs.reduce((a, b) => a + b, 0) / frameCount : 0;
-		const minFrameTime = frameCount > 0 ? Math.min(...this.frameTimesMs) : 0;
-		const maxFrameTime = frameCount > 0 ? Math.max(...this.frameTimesMs) : 0;
-		const p99FrameTime = this.calculateP99(this.frameTimesMs);
-		const stdDevFrameTime = this.calculateStdDev(this.frameTimesMs);
+		const frameTimes = this.getBufferValues(this.frameTimesMs, this.frameTimesCount);
+		const intervals = this.getBufferValues(this.frameIntervals, this.frameIntervalsCount);
+		const frameCount = frameTimes.length;
+		const fps = intervals.length > 0 ? 1e3 / (intervals.reduce((a, b) => a + b, 0) / intervals.length) : 0;
+		const avgFrameTime = frameCount > 0 ? frameTimes.reduce((a, b) => a + b, 0) / frameCount : 0;
+		const minFrameTime = frameCount > 0 ? Math.min(...frameTimes) : 0;
+		const maxFrameTime = frameCount > 0 ? Math.max(...frameTimes) : 0;
+		const p99FrameTime = this.calculateP99(frameTimes);
+		const stdDevFrameTime = this.calculateStdDev(frameTimes);
 		const jankPercent = this.totalFrameCount > 0 ? this.jankFrameCount / this.totalFrameCount * 100 : 0;
 		const memory = performance.memory;
 		const memoryUsedMB = memory ? memory.usedJSHeapSize / (1024 * 1024) : null;
@@ -433,7 +459,11 @@ var PerformanceTracker = class {
 	}
 	reset() {
 		this.frameTimesMs.length = 0;
+		this.frameTimesIndex = 0;
+		this.frameTimesCount = 0;
 		this.frameIntervals.length = 0;
+		this.frameIntervalsIndex = 0;
+		this.frameIntervalsCount = 0;
 		this.lastFrameTimestamp = 0;
 		this.jankFrameCount = 0;
 		this.totalFrameCount = 0;
@@ -654,7 +684,7 @@ function shaderRenderer() {
 					});
 				});
 				lastRenderTime = 0;
-				renderFrame().catch(console.warn);
+				renderFrame();
 			});
 		}
 	};
@@ -755,7 +785,7 @@ function shaderRenderer() {
 			isUpdatingMaterial = false;
 			pendingNodeRemoval = false;
 		}
-		if (!animationFrameId) renderFrame().catch(console.warn);
+		if (!animationFrameId) renderFrame();
 	};
 	const findChildNodes = (parentId) => {
 		const childIds = parentToChildren.get(parentId);
@@ -1120,7 +1150,7 @@ function shaderRenderer() {
 		if (!uniformDefinition || !uniformDefinition.uniform) return;
 		if (uniformDefinition.transform) updateUniformValue(uniformDefinition, value);
 		else uniformDefinition.uniform.value = value;
-		if (!animationFrameId) renderFrame().catch(console.warn);
+		if (!animationFrameId) renderFrame();
 	};
 	const updateNodeMetadata = (nodeId, metadata) => {
 		const existingNode = nodeRegistry.nodes.get(nodeId);
@@ -1185,7 +1215,7 @@ function shaderRenderer() {
 				materialUpdateBatchRAF = null;
 				updateMaterial();
 			});
-		} else if (!animationFrameId) renderFrame().catch(console.warn);
+		} else if (!animationFrameId) renderFrame();
 	};
 	const removeNode = (id) => {
 		if (!nodeRegistry.nodes.has(id)) return;
@@ -1254,7 +1284,7 @@ function shaderRenderer() {
 	};
 	const renderAndWait = async () => {
 		if (!canRender()) throw new Error("Renderer is not ready");
-		await renderFrame();
+		renderFrame();
 		if (renderer instanceof WebGPURenderer) try {
 			const backend = renderer.backend;
 			if (backend?.device) await backend.device.queue.onSubmittedWorkDone();
@@ -1262,7 +1292,7 @@ function shaderRenderer() {
 			await new Promise((resolve) => setTimeout(resolve, 16));
 		}
 	};
-	const renderFrame = async () => {
+	const renderFrame = () => {
 		if (pendingNodeRemoval) return;
 		if (!canRender()) return;
 		const frameStartTime = enablePerformanceTracking ? performance.now() : 0;
@@ -1335,15 +1365,23 @@ function shaderRenderer() {
 	const startAnimation = () => {
 		if (animationFrameId || !shouldAnimate) return;
 		performanceTracker.setRendering(true);
-		const animate = () => {
-			animationFrameId = requestAnimationFrame(animate);
-			renderFrame().catch(console.warn);
-		};
-		animate();
+		if (renderer && "setAnimationLoop" in renderer && typeof renderer.setAnimationLoop === "function") {
+			renderer.setAnimationLoop(() => {
+				renderFrame();
+			});
+			animationFrameId = 1;
+		} else {
+			const animate = () => {
+				renderFrame();
+				animationFrameId = requestAnimationFrame(animate);
+			};
+			animate();
+		}
 	};
 	const stopAnimation = () => {
 		if (animationFrameId) {
-			cancelAnimationFrame(animationFrameId);
+			if (renderer && "setAnimationLoop" in renderer && typeof renderer.setAnimationLoop === "function") renderer.setAnimationLoop(null);
+			else cancelAnimationFrame(animationFrameId);
 			animationFrameId = null;
 		}
 		performanceTracker.setRendering(false);
@@ -1377,20 +1415,20 @@ function shaderRenderer() {
 	const globalMouseUpHandler = () => {
 		if (!isInitialized) return;
 		pointerActive = false;
-		if (!animationFrameId) renderFrame().catch(console.warn);
+		if (!animationFrameId) renderFrame();
 	};
 	const globalTouchEndHandler = () => {
 		if (!isInitialized) return;
 		pointerActive = false;
-		if (!animationFrameId) renderFrame().catch(console.warn);
+		if (!animationFrameId) renderFrame();
 	};
 	const canvasMouseDownHandler = () => {
 		pointerActive = true;
-		if (!animationFrameId) renderFrame().catch(console.warn);
+		if (!animationFrameId) renderFrame();
 	};
 	const canvasTouchStartHandler = () => {
 		pointerActive = true;
-		if (!animationFrameId) renderFrame().catch(console.warn);
+		if (!animationFrameId) renderFrame();
 	};
 	const processQueuedRegistrations = () => {
 		if (pendingRegistrationQueue.length === 0) return;
@@ -1398,7 +1436,7 @@ function shaderRenderer() {
 		pendingRegistrationQueue = [];
 		for (const { id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition } of queue) if (fragmentNodeFunc) registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition);
 	};
-	const initialize = async ({ canvas, enablePerformanceTracking: enableTracking = true }) => {
+	const initialize = async ({ canvas, enablePerformanceTracking: enableTracking = false }) => {
 		if (isInitialized || isInitializing) return;
 		enablePerformanceTracking = enableTracking;
 		isInitializing = true;
@@ -1425,18 +1463,13 @@ function shaderRenderer() {
 			window.addEventListener("beforeunload", unloadHandler);
 			if (localAbortController.signal.aborted) return;
 			try {
-				const rendererOptions = {
+				renderer = new WebGPURenderer({
 					canvas,
 					antialias: true,
 					alpha: true,
 					depth: false,
 					powerPreference: "high-performance"
-				};
-				if (enablePerformanceTracking) {
-					rendererOptions.forceWebGL = false;
-					rendererOptions.requiredFeatures = ["timestamp-query"];
-				}
-				renderer = new WebGPURenderer(rendererOptions);
+				});
 				await renderer.init();
 				if (localAbortController.signal.aborted) return;
 			} catch (e) {
@@ -1493,7 +1526,7 @@ function shaderRenderer() {
 				camera.bottom = -frustumHeight / 2;
 				camera.updateProjectionMatrix();
 				mesh.scale.set(frustumWidth, frustumHeight, 1);
-				await renderFrame();
+				renderFrame();
 			} else hasInitialDimensions = false;
 			if (shouldAnimate) startAnimation();
 			if (!localAbortController.signal.aborted) {

package/dist/core/performanceTracker.d.ts

@@ -28,6 +28,8 @@ export interface PerformanceStats {
 }
 export declare class PerformanceTracker {
     private frameTimesMs;
+    private frameTimesIndex;
+    private frameTimesCount;
     private readonly maxSamples;
     private readonly targetFrameTime;
     private jankFrameCount;
@@ -42,6 +44,16 @@ export declare class PerformanceTracker {
     private isRendering;
     private lastFrameTimestamp;
     private frameIntervals;
+    private frameIntervalsIndex;
+    private frameIntervalsCount;
+    /**
+     * Adds a value to a circular buffer, returning the active slice for calculations
+     */
+    private pushToCircularBuffer;
+    /**
+     * Gets the active values from a circular buffer
+     */
+    private getBufferValues;
     /**
      * Records a frame's render time
      */

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

@@ -1 +1 @@
-{"version":3,"file":"performanceTracker.d.ts","sourceRoot":"","sources":["../src/performanceTracker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,gBAAgB;IAE7B,GAAG,EAAE,MAAM,CAAA;IACX,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IAGvB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAGnB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IAGvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAG/B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAGlB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAG3B,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IAGtB,WAAW,EAAE,OAAO,CAAA;CACvB;AAED,qBAAa,kBAAkB;IAC3B,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAK;IAChC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAQ;IAExC,OAAO,CAAC,cAAc,CAAI;IAC1B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,eAAe,CAAwC;IAC/D,OAAO,CAAC,mBAAmB,CAAI;IAC/B,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAM;IAEzC,OAAO,CAAC,SAAS,CAAI;IACrB,OAAO,CAAC,YAAY,CAAI;IAExB,OAAO,CAAC,WAAW,CAAsB;IACzC,OAAO,CAAC,WAAW,CAAsB;IAEzC,OAAO,CAAC,WAAW,CAAQ;IAG3B,OAAO,CAAC,kBAAkB,CAAI;IAC9B,OAAO,CAAC,cAAc,CAAe;IAErC;;OAEG;IACH,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IA0BtC;;OAEG;IACH,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAInC;;OAEG;IACH,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAInC;;OAEG;IACH,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,IAAI;IAK/D;;OAEG;IACH,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAItC;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAmB5B;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAoBjC;;;OAGG;IACH,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,UAAU,CAAe;IAEjC;;;OAGG;IACH,OAAO,CAAC,YAAY;IA6BpB;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAIhC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,uBAAuB;IA6C/B;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,GAAG,GAAG,gBAAgB;IA2D9C;;OAEG;IACH,KAAK,IAAI,IAAI;CAYhB"}
+{"version":3,"file":"performanceTracker.d.ts","sourceRoot":"","sources":["../src/performanceTracker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,gBAAgB;IAE7B,GAAG,EAAE,MAAM,CAAA;IACX,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IAGvB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAGnB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IAGvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAG/B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAGlB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAG3B,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IAGtB,WAAW,EAAE,OAAO,CAAA;CACvB;AAED,qBAAa,kBAAkB;IAC3B,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,eAAe,CAAI;IAC3B,OAAO,CAAC,eAAe,CAAI;IAC3B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAK;IAChC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAQ;IAExC,OAAO,CAAC,cAAc,CAAI;IAC1B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,eAAe,CAAwC;IAC/D,OAAO,CAAC,mBAAmB,CAAI;IAC/B,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAM;IAEzC,OAAO,CAAC,SAAS,CAAI;IACrB,OAAO,CAAC,YAAY,CAAI;IAExB,OAAO,CAAC,WAAW,CAAsB;IACzC,OAAO,CAAC,WAAW,CAAsB;IAEzC,OAAO,CAAC,WAAW,CAAQ;IAG3B,OAAO,CAAC,kBAAkB,CAAI;IAC9B,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,mBAAmB,CAAI;IAC/B,OAAO,CAAC,mBAAmB,CAAI;IAE/B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAe5B;;OAEG;IACH,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IA8BtC;;OAEG;IACH,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAInC;;OAEG;IACH,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAInC;;OAEG;IACH,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,IAAI;IAK/D;;OAEG;IACH,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAItC;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAmB5B;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAoBjC;;;OAGG;IACH,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,UAAU,CAAe;IAEjC;;;OAGG;IACH,OAAO,CAAC,YAAY;IA6BpB;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAIhC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,uBAAuB;IA8C/B;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,GAAG,GAAG,gBAAgB;IA6D9C;;OAEG;IACH,KAAK,IAAI,IAAI;CAgBhB"}

package/dist/core/registry.js

@@ -14,7 +14,7 @@ import { n as componentDefinition$8 } from "./ChannelBlur-A0r5Gx_y.js";
 import { n as componentDefinition$9 } from "./Checkerboard-XJh_tV6B.js";
 import { n as componentDefinition$10 } from "./ChromaFlow-Cc647Knw.js";
 import { n as componentDefinition$11 } from "./ChromaticAberration-CYvju_kr.js";
-import { n as componentDefinition$12 } from "./Circle-C9DYXDnD.js";
+import { n as componentDefinition$12 } from "./Circle-ChQqil0S.js";
 import { n as componentDefinition$13 } from "./ConcentricSpin-CnuAW_6I.js";
 import { n as componentDefinition$14 } from "./ContourLines-DJ0R9q6Y.js";
 import { n as componentDefinition$15 } from "./CRTScreen-BHKDJ9_0.js";

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

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,IAAI,EAMZ,MAAM,cAAc,CAAA;AAKrB,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACvH,OAAO,EAAqB,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAKzE;;GAEG;AACH,UAAU,QAAQ;IAEd;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,gBAAgB,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAErD;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAEvB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,aAAa,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,cAAc,EAAE,GAAG,CAAA;IAEnB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAA;IAEtB;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAA;IAErB;;;OAGG;IACH,gBAAgB,EAAE,eAAe,EAAE,CAAA;IAEnC;;;OAGG;IACH,qBAAqB,EAAE,cAAc,EAAE,CAAA;IAEvC;;;OAGG;IACH,oBAAoB,EAAE,cAAc,EAAE,CAAA;IAEtC;;;OAGG;IACH,eAAe,EAAE,cAAc,EAAE,CAAA;IAEjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE;QAChB,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,QAAQ,EAAE,GAAG,CAAA;QACb,KAAK,EAAE,GAAG,CAAA;QACV,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,KAAK,EAAE,GAAG,CAAA;QACV,WAAW,EAAE,GAAG,CAAA;KACnB,CAAA;IAED;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAE/B;AAED;;GAEG;AACH,UAAU,YAAY;IAClB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAClC;AAED;;GAEG;AACH,UAAU,iBAAiB;IACvB,MAAM,EAAE,iBAAiB,CAAA;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACtC;AA2FD;;GAEG;AACH,wBAAgB,cAAc;wEA2nDG,iBAAiB;;uBArsBpB,MAAM,oBAAoB,mBAAmB,CAAC,cAAc,CAAC,GAAG,IAAI,YAAY,MAAM,GAAG,IAAI,YAAY,YAAY,GAAG,IAAI,aAAY,WAAW,wBAA6B,mBAAmB,KAAG,IAAI;qBA0R5M,MAAM,KAAG,IAAI;iCAxID,MAAM,eAAe,MAAM,SAAS,GAAG,KAAG,IAAI;iCAgC9C,MAAM,YAAY,OAAO,CAAC,YAAY,CAAC,KAAG,IAAI;;0BAkYvD,IAAI;yBAeL,IAAI;yBAnME,OAAO,CAAC,IAAI,CAAC;+BAoKb,gBAAgB;;eA6dmB,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;;2BAjBpE,QAAQ,GAAG,OAAO,GAAG,IAAI;;;mCAziDnB,MAAM,KAAG,QAAQ,EAAE;oCAuCzC,IAAI,YACF,QAAQ,UACV,MAAM,kBACE,GAAG,CAAC,MAAM,CAAC,gBACb,IAAI,KACnB,IAAI;0CAuCK,IAAI,YACF,QAAQ,KACnB,IAAI;;;;EAk/CV"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,IAAI,EAMZ,MAAM,cAAc,CAAA;AAKrB,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACvH,OAAO,EAAqB,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAKzE;;GAEG;AACH,UAAU,QAAQ;IAEd;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,gBAAgB,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAErD;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAEvB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,aAAa,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,cAAc,EAAE,GAAG,CAAA;IAEnB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAA;IAEtB;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAA;IAErB;;;OAGG;IACH,gBAAgB,EAAE,eAAe,EAAE,CAAA;IAEnC;;;OAGG;IACH,qBAAqB,EAAE,cAAc,EAAE,CAAA;IAEvC;;;OAGG;IACH,oBAAoB,EAAE,cAAc,EAAE,CAAA;IAEtC;;;OAGG;IACH,eAAe,EAAE,cAAc,EAAE,CAAA;IAEjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE;QAChB,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,QAAQ,EAAE,GAAG,CAAA;QACb,KAAK,EAAE,GAAG,CAAA;QACV,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,KAAK,EAAE,GAAG,CAAA;QACV,WAAW,EAAE,GAAG,CAAA;KACnB,CAAA;IAED;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAE/B;AAED;;GAEG;AACH,UAAU,YAAY;IAClB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAClC;AAED;;GAEG;AACH,UAAU,iBAAiB;IACvB,MAAM,EAAE,iBAAiB,CAAA;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACtC;AA2FD;;GAEG;AACH,wBAAgB,cAAc;wEA2oDG,iBAAiB;;uBArtBpB,MAAM,oBAAoB,mBAAmB,CAAC,cAAc,CAAC,GAAG,IAAI,YAAY,MAAM,GAAG,IAAI,YAAY,YAAY,GAAG,IAAI,aAAY,WAAW,wBAA6B,mBAAmB,KAAG,IAAI;qBA0R5M,MAAM,KAAG,IAAI;iCAxID,MAAM,eAAe,MAAM,SAAS,GAAG,KAAG,IAAI;iCAgC9C,MAAM,YAAY,OAAO,CAAC,YAAY,CAAC,KAAG,IAAI;;0BAmYvD,IAAI;yBAyBL,IAAI;yBA9ME,OAAO,CAAC,IAAI,CAAC;+BAoKb,gBAAgB;;eAsemB,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;;2BAjBpE,QAAQ,GAAG,OAAO,GAAG,IAAI;;;mCAljDnB,MAAM,KAAG,QAAQ,EAAE;oCAuCzC,IAAI,YACF,QAAQ,UACV,MAAM,kBACE,GAAG,CAAC,MAAM,CAAC,gBACb,IAAI,KACnB,IAAI;0CAuCK,IAAI,YACF,QAAQ,KACnB,IAAI;;;;EA2/CV"}

package/dist/core/shaders/Circle/index.d.ts

@@ -30,6 +30,34 @@ export interface ComponentProps {
      * @default {"x":0.5,"y":0.5}
      */
     center: Parameters<typeof transformPosition>[0];
+    /**
+     * The thickness of the stroke outline. Zero (0) means no stroke.
+     *
+     * Accepts a number between 0 and 0.5.
+     * @default 0
+     */
+    strokeThickness: number;
+    /**
+     * The color of the stroke outline
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#000000"
+     */
+    strokeColor: Parameters<typeof transformColor>[0];
+    /**
+     * Position of the stroke relative to the circle edge
+     *
+     * Accepts one of: `"outside"`, `"center"`, `"inside"`.
+     * @default "center"
+     */
+    strokePosition: string;
+    /**
+     * Color space for blending fill and stroke colors in soft edges
+     *
+     * Accepts one of the predefined option values.
+     * @default "linear"
+     */
+    colorSpace: string;
 }
 export declare const componentDefinition: ComponentDefinition<ComponentProps>;
 export default componentDefinition;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Circle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAIvE,OAAO,EAAC,cAAc,EAAE,iBAAiB,EAAC,MAAM,qCAAqC,CAAA;AAErF,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAA;CAClD;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CA2EnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Circle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAGvE,OAAO,EAAC,cAAc,EAAE,iBAAiB,EAAyC,MAAM,qCAAqC,CAAA;AAwB7H,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CA6JnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/core/shaders/Circle/index.js

@@ -1,3 +1,4 @@
 import "../../transformations-CC_c-QAT.js";
-import { n as componentDefinition, t as Circle_default } from "../../Circle-C9DYXDnD.js";
+import "../../colorMixing-Ehw-Hfs_.js";
+import { n as componentDefinition, t as Circle_default } from "../../Circle-ChQqil0S.js";
 export { componentDefinition, Circle_default as default };

package/dist/core/telemetry/index.js

@@ -2,7 +2,7 @@ const TELEMETRY_CONFIG = {
 	samplingRate: .01,
 	collectionDuration: 5e3,
 	warmupDuration: 500,
-	sampleInterval: 100,
+	sampleInterval: 500,
 	apiEndpoint: "https://shaders.com/api/telemetry"
 };
 function detectBrowserFamily(userAgent) {
@@ -68,7 +68,7 @@ var TelemetryCollector = class {
 				clearInterval(this.sampleInterval);
 				this.sampleInterval = null;
 			}
-			if (!this.stopped && this.frameSamples.length >= 50) {
+			if (!this.stopped && this.frameSamples.length >= 5) {
 				const payload = this.aggregateData();
 				await this.sendTelemetry(payload);
 			}

package/dist/react/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAq4BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAy4BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}

package/dist/react/utils/generatePresetCode.js

@@ -162,7 +162,11 @@ var shaderMetadata = {
 		"center": {
 			"x": .5,
 			"y": .5
-		}
+		},
+		"strokeThickness": 0,
+		"strokeColor": "#000000",
+		"strokePosition": "center",
+		"colorSpace": "linear"
 	},
 	"ConcentricSpin": {
 		"opacity": 1,

package/dist/registry.js

@@ -2182,7 +2182,7 @@ export const shaderRegistry = [
             "type": "range",
             "min": 0,
             "max": 1,
-            "step": 0.05,
+            "step": 0.01,
             "label": "Softness",
             "group": "Effect"
           }
@@ -2198,6 +2198,73 @@ export const shaderRegistry = [
             "label": "Center Position",
             "group": "Position"
           }
+        },
+        "strokeThickness": {
+          "default": 0,
+          "description": "The thickness of the stroke outline. Zero (0) means no stroke.",
+          "ui": {
+            "type": "range",
+            "min": 0,
+            "max": 0.5,
+            "step": 0.01,
+            "label": "Stroke Thickness",
+            "group": "Stroke"
+          }
+        },
+        "strokeColor": {
+          "default": "#000000",
+          "description": "The color of the stroke outline",
+          "ui": {
+            "type": "color",
+            "label": "Stroke Color",
+            "group": "Colors"
+          }
+        },
+        "strokePosition": {
+          "default": "center",
+          "description": "Position of the stroke relative to the circle 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",
+          "description": "Color space for blending fill and stroke colors in soft edges",
+          "ui": {
+            "type": "select",
+            "options": [
+              {
+                "label": "Linear RGB",
+                "value": "linear"
+              },
+              {
+                "label": "OKLCh",
+                "value": "oklch"
+              },
+              {
+                "label": "OKLAB",
+                "value": "oklab"
+              }
+            ],
+            "label": "Color Blending",
+            "group": "Colors"
+          }
         }
       }
     },
@@ -2228,7 +2295,7 @@ export const shaderRegistry = [
           "type": "range",
           "min": 0,
           "max": 1,
-          "step": 0.05,
+          "step": 0.01,
           "label": "Softness",
           "group": "Effect"
         },
@@ -2246,6 +2313,73 @@ export const shaderRegistry = [
           "y": 0.5
         },
         "description": "The center point of the circle"
+      },
+      "strokeThickness": {
+        "ui": {
+          "type": "range",
+          "min": 0,
+          "max": 0.5,
+          "step": 0.01,
+          "label": "Stroke Thickness",
+          "group": "Stroke"
+        },
+        "default": 0,
+        "description": "The thickness of the stroke outline. Zero (0) means no stroke."
+      },
+      "strokeColor": {
+        "ui": {
+          "type": "color",
+          "label": "Stroke Color",
+          "group": "Colors"
+        },
+        "default": "#000000",
+        "description": "The color of the stroke outline"
+      },
+      "strokePosition": {
+        "ui": {
+          "type": "select",
+          "options": [
+            {
+              "label": "Outside",
+              "value": "outside"
+            },
+            {
+              "label": "Center",
+              "value": "center"
+            },
+            {
+              "label": "Inside",
+              "value": "inside"
+            }
+          ],
+          "label": "Stroke Position",
+          "group": "Stroke"
+        },
+        "default": "center",
+        "description": "Position of the stroke relative to the circle edge"
+      },
+      "colorSpace": {
+        "ui": {
+          "type": "select",
+          "options": [
+            {
+              "label": "Linear RGB",
+              "value": "linear"
+            },
+            {
+              "label": "OKLCh",
+              "value": "oklch"
+            },
+            {
+              "label": "OKLAB",
+              "value": "oklab"
+            }
+          ],
+          "label": "Color Blending",
+          "group": "Colors"
+        },
+        "default": "linear",
+        "description": "Color space for blending fill and stroke colors in soft edges"
       }
     }
   },

package/dist/solid/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAu4BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA24BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}

package/dist/solid/utils/generatePresetCode.js

@@ -164,7 +164,11 @@ const shaderMetadata = {
     "center": {
       "x": 0.5,
       "y": 0.5
-    }
+    },
+    "strokeThickness": 0,
+    "strokeColor": "#000000",
+    "strokePosition": "center",
+    "colorSpace": "linear"
   },
   "ConcentricSpin": {
     "opacity": 1,

package/dist/svelte/{generatePresetCode-DN-iUvZN.js → generatePresetCode-CO9fAymD.js}

@@ -162,7 +162,11 @@ var shaderMetadata = {
 		"center": {
 			"x": .5,
 			"y": .5
-		}
+		},
+		"strokeThickness": 0,
+		"strokeColor": "#000000",
+		"strokePosition": "center",
+		"colorSpace": "linear"
 	},
 	"ConcentricSpin": {
 		"opacity": 1,

package/dist/svelte/index.js

@@ -1,4 +1,4 @@
-import { n as generatePresetCode } from "./generatePresetCode-DN-iUvZN.js";
+import { n as generatePresetCode } from "./generatePresetCode-CO9fAymD.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { getContext, onDestroy, onMount, setContext } from "svelte";

package/dist/svelte/utils/generatePresetCode.js

@@ -1,2 +1,2 @@
-import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-DN-iUvZN.js";
+import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-CO9fAymD.js";
 export { availableComponents, generatePresetCode };

package/dist/vue/Circle.vue_vue_type_script_setup_true_lang.js

@@ -16,7 +16,11 @@ var Circle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		color: {},
 		radius: {},
 		softness: {},
-		center: {}
+		center: {},
+		strokeThickness: {},
+		strokeColor: {},
+		strokePosition: {},
+		colorSpace: {}
 	}, {
 		blendMode: "normal",
 		visible: true,

package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,25 @@
-import { createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef } from "vue";
 import { shaderRenderer } from "../core/index.js";
 import { vec4 } from "three/tsl";
 import { TelemetryCollector, isExternalUser, shouldCollectTelemetry } from "../core/telemetry/index.js";
 var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Shader",
-	props: { disableTelemetry: {
-		type: Boolean,
-		default: false
-	} },
+	props: {
+		disableTelemetry: {
+			type: Boolean,
+			default: false
+		},
+		enablePerformanceTracking: {
+			type: Boolean,
+			default: false
+		}
+	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const containerRef = ref(null);
 		const canvasRef = ref(null);
 		const rootId = ref("shader-root-" + Math.random().toString(36).substring(7));
-		const rendererInstance = ref(shaderRenderer());
+		const rendererInstance = shallowRef(shaderRenderer());
 		const rendererResetSignal = ref(0);
 		let telemetryCollector = null;
 		let telemetryStartTimeout = null;
@@ -33,7 +39,7 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			if (!canvasRef.value) return;
 			if (!rendererInstance.value.isInitialized()) await rendererInstance.value.initialize({
 				canvas: canvasRef.value,
-				enablePerformanceTracking: true
+				enablePerformanceTracking: props.enablePerformanceTracking
 			});
 			rendererInstance.value.registerNode(rootId.value, ({ childNode }) => childNode || vec4(0, 0, 0, 0), null, null, {}, void 0);
 			if (isExternalUser() && shouldCollectTelemetry(props.disableTelemetry) && !telemetryCollector) startTelemetryWhenReady();
@@ -55,8 +61,7 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			visibilityObserver = new IntersectionObserver((entries) => {
 				const entry = entries[0];
 				if (!entry) return;
-				const rect = containerRef.value?.getBoundingClientRect();
-				const isCurrentlyVisible = entry.isIntersecting && rect && rect.width > 0 && rect.height > 0;
+				const isCurrentlyVisible = entry.isIntersecting;
 				if (isCurrentlyVisible && !wasVisible) {
 					if (rendererInstance.value.isInitialized()) {
 						rendererInstance.value.startAnimation();

package/dist/vue/engine/Shader.vue.d.ts

@@ -1,18 +1,22 @@
 interface Props {
     disableTelemetry?: boolean;
+    enablePerformanceTracking?: boolean;
 }
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     disableTelemetry: boolean;
+    enablePerformanceTracking: boolean;
 }>>, {
     captureScreenshot: (maxWidth?: number) => Promise<Blob>;
     getPerformanceStats: () => import('../../core').PerformanceStats;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     disableTelemetry: boolean;
+    enablePerformanceTracking: boolean;
 }>>> & Readonly<{}>, {
     disableTelemetry: boolean;
+    enablePerformanceTracking: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/dist/vue/engine/Shader.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shader.vue.d.ts","sourceRoot":"","sources":["../../src/engine/Shader.vue"],"names":[],"mappings":"AASA,UAAU,KAAK;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAgRD,iBAAS,cAAc;qBAkDO,GAAG;EAKhC;AAUD,QAAA,MAAM,eAAe;;;8CA9K8B,OAAO,CAAC,IAAI,CAAC;;;;;sBApK3C,OAAO;4EAyV1B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Shader.vue.d.ts","sourceRoot":"","sources":["../../src/engine/Shader.vue"],"names":[],"mappings":"AASA,UAAU,KAAK;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC;AAiRD,iBAAS,cAAc;qBAkDO,GAAG;EAKhC;AAUD,QAAA,MAAM,eAAe;;;;8CA/K8B,OAAO,CAAC,IAAI,CAAC;;;;;;sBArK3C,OAAO;+BACE,OAAO;4EA0VnC,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/vue/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAk4BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAs4BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}

package/dist/vue/utils/generatePresetCode.js

@@ -160,7 +160,11 @@ var shaderMetadata = {
 		"center": {
 			"x": .5,
 			"y": .5
-		}
+		},
+		"strokeThickness": 0,
+		"strokeColor": "#000000",
+		"strokePosition": "center",
+		"colorSpace": "linear"
 	},
 	"ConcentricSpin": {
 		"opacity": 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaders",
-  "version": "2.3.54",
+  "version": "2.3.56",
   "description": "Shader magic for modern frontends",
   "author": "Shader Effects Inc.",
   "homepage": "https://shaders.com/",

package/dist/core/Circle-C9DYXDnD.js

@@ -1,69 +0,0 @@
-import { r as transformColor, s as transformPosition } from "./transformations-CC_c-QAT.js";
-import { length, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
-const componentDefinition = {
-	name: "Circle",
-	category: "Textures",
-	description: "Generate a circle with adjustable size and softness",
-	props: {
-		color: {
-			default: "#ffffff",
-			transform: transformColor,
-			description: "The color of the circle",
-			ui: {
-				type: "color",
-				label: "Color",
-				group: "Colors"
-			}
-		},
-		radius: {
-			default: 1,
-			description: "The radius of the circle. A value of one (1) is sets the circle to fit the canvas.",
-			ui: {
-				type: "range",
-				min: 0,
-				max: 2,
-				step: .05,
-				label: "Radius",
-				group: "Effect"
-			}
-		},
-		softness: {
-			default: 0,
-			description: "Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.",
-			ui: {
-				type: "range",
-				min: 0,
-				max: 1,
-				step: .05,
-				label: "Softness",
-				group: "Effect"
-			}
-		},
-		center: {
-			default: {
-				x: .5,
-				y: .5
-			},
-			transform: transformPosition,
-			description: "The center point of the circle",
-			ui: {
-				type: "position",
-				label: "Center Position",
-				group: "Position"
-			}
-		}
-	},
-	fragmentNode: ({ uniforms }) => {
-		const uv$1 = screenUV;
-		const aspect = viewportSize.x.div(viewportSize.y);
-		const aspectCorrectedUV = vec2(uv$1.x.mul(aspect), uv$1.y);
-		const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
-		const distanceFromCenter = length(aspectCorrectedUV.sub(centerPos));
-		const edgeSoftness = uniforms.softness.uniform;
-		const circleEdge = uniforms.radius.uniform.mul(.5);
-		const circleMask = smoothstep(circleEdge.sub(edgeSoftness), circleEdge, distanceFromCenter).oneMinus();
-		return vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(circleMask));
-	}
-};
-var Circle_default = componentDefinition;
-export { componentDefinition as n, Circle_default as t };