shaders 3.2.474 → 4.0.0

package/dist/js/createShader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createShader.d.ts","sourceRoot":"","sources":["../src/createShader.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAmB,MAAM,cAAc,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAgC5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAsB,YAAY,CAChC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,cAAc,CAAC,CAoczB"}
+{"version":3,"file":"createShader.d.ts","sourceRoot":"","sources":["../src/createShader.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAmB,MAAM,cAAc,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAgC5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAsB,YAAY,CAChC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,cAAc,CAAC,CAyczB"}

package/dist/js/createShader.js

@@ -1,4 +1,4 @@
-import { createGpuUniformsMap, debugError, resolveBoundingBox, rootPassthrough, shaderRendererGPU } from "../core/index.js";
+import { createGpuUniformsMap, debugError, getRegisteredShader, resolveBoundingBox, rootPassthrough, shaderRendererGPU } from "../core/index.js";
 import { getAllShaders } from "../core/registry.js";
 import { isExternalUser, startTelemetry } from "../core/telemetry/index.js";
 function isPropDriver(value) {
@@ -23,6 +23,7 @@ async function createShader(canvas, preset, options) {
 		componentRegistry.set(shader.definition.name, shader.definition);
 		for (const oldName of shader.definition.deprecatedNames ?? []) componentRegistry.set(oldName, shader.definition);
 	});
+	for (const custom of options?.components ?? []) componentRegistry.set(custom.name, custom);
 	if (!canvas.style.width || !canvas.style.height) {
 		const rect = canvas.getBoundingClientRect();
 		const w = rect.width > 0 ? rect.width : canvas.width;
@@ -64,7 +65,7 @@ async function createShader(canvas, preset, options) {
 		notify(reason);
 	}
 	function registerComponent(renderer, nodeEntryMap, component, parentId, renderOrder) {
-		const componentDef = componentRegistry.get(component.type);
+		const componentDef = componentRegistry.get(component.type) ?? getRegisteredShader(component.type);
 		if (!componentDef) {
 			console.warn(`[createShader] Unknown component type: ${component.type}`);
 			return;
@@ -184,7 +185,7 @@ async function createShader(canvas, preset, options) {
 					return;
 				}
 				if (renderer.getPerformanceStats().fps > 0) {
-					state.telemetryCollector = startTelemetry(renderer, "3.2.474", options?.disableTelemetry || false, false);
+					state.telemetryCollector = startTelemetry(renderer, "4.0.0", options?.disableTelemetry || false, false);
 					if (state.telemetryCollector) state.telemetryCollector.start();
 					state.telemetryStartTimeout = null;
 				} else state.telemetryStartTimeout = setTimeout(checkRendering, 500);

package/dist/js/types.d.ts

@@ -1,5 +1,10 @@
 export type { PresetConfig, ComponentConfig } from '../core';
 export interface ShaderOptions {
+    /**
+     * User-defined components (`defineShader(...)` results from `shaders/std`) this preset may
+     * reference by `type`. Components registered globally with `registerShader` are found too.
+     */
+    components?: import('../core').GpuShaderDefinition[];
     colorSpace?: 'p3-linear' | 'srgb';
     toneMapping?: 'linear' | 'reinhard' | 'cineon' | 'aces' | 'agx' | 'neutral' | 'hable' | 'unreal';
     disableTelemetry?: boolean;

package/dist/js/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IACjC,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;IAChG,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;;kBAKc;IACd,GAAG,CAAC,EAAE;QACJ,MAAM,EAAE,SAAS,CAAA;QACjB,OAAO,EAAE,UAAU,CAAA;KACpB,CAAA;CACF;AAED,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,aAAa,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACvC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,iGAAiG;IACjG,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CAC/D;AAED,MAAM,WAAW,cAAc;IAC7B;;;;;;;;OAQG;IACH,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAAA;IACjC,MAAM,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;IAC7D;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7C,mFAAmF;IACnF,KAAK,IAAI,IAAI,CAAA;IACb,kDAAkD;IAClD,MAAM,IAAI,IAAI,CAAA;IACd,OAAO,IAAI,IAAI,CAAA;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,cAAc,EAAE,mBAAmB,EAAE,CAAA;IACzD,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IACjC,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;IAChG,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;;kBAKc;IACd,GAAG,CAAC,EAAE;QACJ,MAAM,EAAE,SAAS,CAAA;QACjB,OAAO,EAAE,UAAU,CAAA;KACpB,CAAA;CACF;AAED,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,aAAa,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACvC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,iGAAiG;IACjG,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CAC/D;AAED,MAAM,WAAW,cAAc;IAC7B;;;;;;;;OAQG;IACH,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAAA;IACjC,MAAM,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;IAC7D;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7C,mFAAmF;IACnF,KAAK,IAAI,IAAI,CAAA;IACb,kDAAkD;IAClD,MAAM,IAAI,IAAI,CAAA;IACd,OAAO,IAAI,IAAI,CAAA;CAChB"}

package/dist/js/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;AA0qGD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,EAAE,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAwBpM;AAGD,eAAO,MAAM,mBAAmB,UAwM/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;AAsrGD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,EAAE,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAwBpM;AAGD,eAAO,MAAM,mBAAmB,UAyM/B,CAAA"}

package/dist/js/utils/generatePresetCode.js

@@ -264,7 +264,7 @@ var shaderMetadata = {
 		"bevelWidth": .05,
 		"bevelShape": 0,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Bulge": {
 		"opacity": 1,
@@ -303,7 +303,7 @@ var shaderMetadata = {
 		"bevelWidth": .05,
 		"bevelShape": 0,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Chalkboard": {
 		"opacity": 1,
@@ -399,7 +399,7 @@ var shaderMetadata = {
 		"shadows": .7,
 		"speed": .5,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"roundedRectSDF\",\"width\":0.42,\"height\":0.3,\"rounding\":0.12}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Circle": {
 		"opacity": 1,
@@ -574,7 +574,7 @@ var shaderMetadata = {
 		"tintColor": "#e8e0ff",
 		"tintIntensity": 0,
 		"tintPreserveLuminosity": true,
-		"shape": "{\"type\":\"polygonSDF\",\"radius\":0.35,\"sides\":10}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"CurlNoise": {
 		"opacity": 1,
@@ -732,7 +732,7 @@ var shaderMetadata = {
 		"lightAngle": 260,
 		"lightIntensity": .6,
 		"shadowIntensity": .3,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Engraving": {
 		"opacity": 1,
@@ -946,7 +946,7 @@ var shaderMetadata = {
 		"fresnel": .02,
 		"lightAngle": 300,
 		"speed": .3,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"GaborNoise": {
 		"opacity": 1,
@@ -989,7 +989,7 @@ var shaderMetadata = {
 		"tintColor": "#ffffff",
 		"tintIntensity": 0,
 		"tintPreserveLuminosity": true,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"GlassTiles": {
 		"opacity": 1,
@@ -1060,7 +1060,7 @@ var shaderMetadata = {
 		"wobble": .5,
 		"breathe": .3,
 		"seed": 1,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"GradientMap": {
 		"opacity": 1,
@@ -1184,7 +1184,7 @@ var shaderMetadata = {
 		"contour": .5,
 		"angle": 90,
 		"speed": 1,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"HexGrid": {
 		"opacity": 1,
@@ -1223,7 +1223,7 @@ var shaderMetadata = {
 		"distortion": .1,
 		"grain": .7,
 		"speed": 1,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Holographic": {
 		"opacity": 1,
@@ -1244,7 +1244,7 @@ var shaderMetadata = {
 		"crinkleScale": 1,
 		"sparkle": .4,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"HTMLInCanvas": {
 		"opacity": 1,
@@ -1328,7 +1328,7 @@ var shaderMetadata = {
 		"bodyLight": .6,
 		"bevelWidth": .01,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"IsometricCubes": {
 		"opacity": 1,
@@ -1458,7 +1458,7 @@ var shaderMetadata = {
 		"smokeSize": .5,
 		"speed": 1,
 		"seed": 0,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"LightLeak": {
 		"opacity": 1,
@@ -1552,7 +1552,7 @@ var shaderMetadata = {
 		"bevelWidth": .05,
 		"bevelShape": 0,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Liquify": {
 		"opacity": 1,
@@ -1699,7 +1699,7 @@ var shaderMetadata = {
 		"lightAngle": 315,
 		"edgeSoftness": .05,
 		"speed": .3,
-		"shape": "{\"type\":\"prism3D\",\"radius\":0.28,\"height\":0.24,\"rotX\":25,\"rotY\":30,\"rotZ\":0}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Neon": {
 		"opacity": 1,
@@ -1728,7 +1728,7 @@ var shaderMetadata = {
 		"flickerAmount": .2,
 		"flowSpeed": 0,
 		"flowAmount": .3,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"NoiseDissolve": {
 		"opacity": 1,
@@ -1810,7 +1810,7 @@ var shaderMetadata = {
 		"bevelWidth": .08,
 		"bevelShape": 0,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"PagePeel": {
 		"opacity": 1,
@@ -1911,7 +1911,7 @@ var shaderMetadata = {
 		"softness": .1,
 		"depth": .18,
 		"colorSpace": "oklab",
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"PerlinNoise": {
 		"opacity": 1,
@@ -2013,7 +2013,7 @@ var shaderMetadata = {
 		"shading": .35,
 		"rim": .25,
 		"rimColor": "#ffffff",
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"PolarCoordinates": {
 		"opacity": 1,
@@ -2381,7 +2381,7 @@ var shaderMetadata = {
 		"mouseInfluence": .1,
 		"mouseRadius": .1,
 		"colorSpace": "linear",
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"SmokeFlow": {
 		"opacity": 1,
@@ -2409,6 +2409,18 @@ var shaderMetadata = {
 		"blendMode": "normal",
 		"color": "#5b18ca"
 	},
+	"Sparkle": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"size": 100,
+		"intensity": 10,
+		"threshold": .2,
+		"expand": 0,
+		"rayLength": 5,
+		"colorize": .45,
+		"speed": 1,
+		"seed": 0
+	},
 	"Spherize": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -2679,7 +2691,7 @@ var shaderMetadata = {
 		"colorC": "#ff7a21",
 		"colorSpace": "oklch",
 		"speed": .1,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"TiltShift": {
 		"opacity": 1,
@@ -2915,7 +2927,7 @@ var shaderMetadata = {
 		"lightAngle": 30,
 		"foam": .3,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Watercolor": {
 		"opacity": 1,
@@ -3303,6 +3315,7 @@ const availableComponents = [
 	"SmokeFlow",
 	"Solarize",
 	"SolidColor",
+	"Sparkle",
 	"Spherize",
 	"Spiral",
 	"Star",

package/dist/react/CustomShader.js

@@ -0,0 +1,178 @@
+import { ShaderContext } from "./Shader.js";
+import { useContext, useEffect, useId, useMemo, useRef } from "react";
+import { createGpuUniformsMap, registerShader, resolveBoundingBox } from "../core/index.js";
+import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
+import { jsx } from "react/jsx-runtime";
+var LAYER_KEYS = new Set([
+	"children",
+	"src",
+	"blendMode",
+	"opacity",
+	"visible",
+	"id",
+	"maskSource",
+	"maskType",
+	"renderOrder",
+	"transform",
+	"boundingBox",
+	"flow",
+	"absolute",
+	"ref",
+	"key"
+]);
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
+}
+var MARKER_STYLE = { display: "contents" };
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+function readShaderProps(definition, props) {
+	const out = {};
+	for (const [key, config] of Object.entries(definition.props)) {
+		const value = LAYER_KEYS.has(key) ? void 0 : props[key];
+		out[key] = value === void 0 ? config.default : value;
+	}
+	return out;
+}
+function uniformValues(definition, values) {
+	const out = {};
+	for (const [key, value] of Object.entries(values)) out[key] = isPropDriver(value) ? definition.props[key]?.default : value;
+	return out;
+}
+function mapsOf(values) {
+	const maps = {};
+	for (const [key, value] of Object.entries(values)) if (isPropDriver(value)) maps[key] = value;
+	return Object.keys(maps).length > 0 ? maps : void 0;
+}
+function CustomShader(props) {
+	const context = useContext(ShaderContext);
+	if (!context) throw new Error("<CustomShader> must be used inside a <Shader> component or another shader component");
+	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
+	const definition = props.src;
+	if (!definition || typeof definition.fragment !== "function") throw new Error("<CustomShader> needs a `src` shader definition (the result of defineShader())");
+	const reactId = useId();
+	const instanceId = useMemo(() => {
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || reactId.replace(/[^a-zA-Z0-9_]/g, "");
+	}, [props.id, reactId]);
+	const values = useMemo(() => readShaderProps(definition, props), [definition, props]);
+	const maps = useMemo(() => mapsOf(values), [values]);
+	const effectiveTransform = useMemo(() => ({
+		...DEFAULT_TRANSFORM,
+		...props.transform
+	}), [props.transform]);
+	const effectiveBoundingBox = useMemo(() => resolveBoundingBox(props.boundingBox), [props.boundingBox]);
+	const markerRef = useRef(null);
+	const detectedOrderRef = useRef(void 0);
+	const uniformsRef = useRef(null);
+	if (uniformsRef.current === null || uniformsRef.current.definition !== definition) {
+		setColorSpaceMode(shaderColorSpace);
+		uniformsRef.current = {
+			definition,
+			uniforms: createGpuUniformsMap(definition, uniformValues(definition, values), instanceId)
+		};
+	}
+	const uniforms = uniformsRef.current.uniforms;
+	const childContextValue = useMemo(() => ({
+		...context,
+		shaderParentId: instanceId
+	}), [context, instanceId]);
+	const metadataFor = () => ({
+		blendMode: props.blendMode || "normal",
+		opacity: props.opacity,
+		visible: props.visible === false ? false : true,
+		id: props.id,
+		mask: props.maskSource ? {
+			source: props.maskSource,
+			type: props.maskType || "alpha"
+		} : void 0,
+		maps,
+		renderOrder: props.renderOrder ?? detectedOrderRef.current,
+		transform: effectiveTransform,
+		boundingBox: effectiveBoundingBox,
+		flow: props.flow,
+		absolute: props.absolute
+	});
+	const metadataRef = useRef(metadataFor);
+	metadataRef.current = metadataFor;
+	const prevValuesRef = useRef({});
+	useEffect(() => {
+		registerShader(definition);
+		parentRegister(instanceId, definition.fragment, parentId, metadataRef.current(), uniforms, definition);
+		prevValuesRef.current = {};
+	}, [
+		instanceId,
+		parentId,
+		parentRegister,
+		definition,
+		uniforms
+	]);
+	useEffect(() => {
+		return () => {
+			parentRegister(instanceId, null, null, null, null);
+		};
+	}, [instanceId, parentRegister]);
+	useEffect(() => {
+		if (props.renderOrder === void 0 && markerRef.current) {
+			const parent = markerRef.current.parentElement;
+			if (parent) {
+				const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+				const position = Array.from(siblings).indexOf(markerRef.current);
+				if (position >= 0) {
+					detectedOrderRef.current = position;
+					parentMetadataUpdate(instanceId, { renderOrder: position });
+				}
+			}
+		}
+	}, []);
+	useEffect(() => {
+		for (const [key, value] of Object.entries(values)) {
+			if (isPropDriver(value)) continue;
+			const entry = uniforms[key];
+			if (!entry || entry.value === void 0) continue;
+			if (prevValuesRef.current[key] !== value) {
+				parentUniformUpdate(instanceId, key, value);
+				prevValuesRef.current[key] = value;
+			}
+		}
+	}, [
+		values,
+		uniforms,
+		instanceId,
+		parentUniformUpdate
+	]);
+	useEffect(() => {
+		parentMetadataUpdate(instanceId, metadataRef.current());
+	}, [
+		props.blendMode,
+		props.opacity,
+		props.visible,
+		props.maskSource,
+		props.maskType,
+		props.renderOrder,
+		props.id,
+		maps,
+		effectiveTransform,
+		effectiveBoundingBox,
+		props.flow,
+		props.absolute,
+		instanceId,
+		parentMetadataUpdate
+	]);
+	return /* @__PURE__ */ jsx(ShaderContext.Provider, {
+		value: childContextValue,
+		children: /* @__PURE__ */ jsx("span", {
+			ref: markerRef,
+			style: MARKER_STYLE,
+			"data-shader-id": instanceId,
+			children: props.children
+		})
+	});
+}
+export { CustomShader };

package/dist/react/Preview.js

@@ -267,6 +267,7 @@ var componentMap = {
 	SmokeFlow: lazy(() => import("./SmokeFlow.js")),
 	Solarize: lazy(() => import("./Solarize.js")),
 	SolidColor: lazy(() => import("./SolidColor.js")),
+	Sparkle: lazy(() => import("./Sparkle.js")),
 	Spherize: lazy(() => import("./Spherize.js")),
 	Spiral: lazy(() => import("./Spiral.js")),
 	Star: lazy(() => import("./Star.js")),

package/dist/react/Shader.js

@@ -93,7 +93,7 @@ const Shader = ({ children, disableTelemetry = false, colorSpace = "p3-linear",
 				return;
 			}
 			if (rendererRef.current.getPerformanceStats().fps > 0) {
-				telemetryCollectorRef.current = startTelemetry(rendererRef.current, "3.2.474", disableTelemetry, isPreview);
+				telemetryCollectorRef.current = startTelemetry(rendererRef.current, "4.0.0", disableTelemetry, isPreview);
 				if (telemetryCollectorRef.current) telemetryCollectorRef.current.start();
 				telemetryStartTimeoutRef.current = null;
 			} else telemetryStartTimeoutRef.current = window.setTimeout(checkRendering, 500);