shaders 3.2.474 → 4.0.0

package/dist/svelte/utils/generatePresetCode.js

@@ -269,7 +269,7 @@ var shaderMetadata = {
 		"bevelWidth": .05,
 		"bevelShape": 0,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Bulge": {
 		"opacity": 1,
@@ -308,7 +308,7 @@ var shaderMetadata = {
 		"bevelWidth": .05,
 		"bevelShape": 0,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Chalkboard": {
 		"opacity": 1,
@@ -404,7 +404,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,
@@ -579,7 +579,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,
@@ -737,7 +737,7 @@ var shaderMetadata = {
 		"lightAngle": 260,
 		"lightIntensity": .6,
 		"shadowIntensity": .3,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Engraving": {
 		"opacity": 1,
@@ -951,7 +951,7 @@ var shaderMetadata = {
 		"fresnel": .02,
 		"lightAngle": 300,
 		"speed": .3,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"GaborNoise": {
 		"opacity": 1,
@@ -994,7 +994,7 @@ var shaderMetadata = {
 		"tintColor": "#ffffff",
 		"tintIntensity": 0,
 		"tintPreserveLuminosity": true,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"GlassTiles": {
 		"opacity": 1,
@@ -1065,7 +1065,7 @@ var shaderMetadata = {
 		"wobble": .5,
 		"breathe": .3,
 		"seed": 1,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"GradientMap": {
 		"opacity": 1,
@@ -1189,7 +1189,7 @@ var shaderMetadata = {
 		"contour": .5,
 		"angle": 90,
 		"speed": 1,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"HexGrid": {
 		"opacity": 1,
@@ -1228,7 +1228,7 @@ var shaderMetadata = {
 		"distortion": .1,
 		"grain": .7,
 		"speed": 1,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Holographic": {
 		"opacity": 1,
@@ -1249,7 +1249,7 @@ var shaderMetadata = {
 		"crinkleScale": 1,
 		"sparkle": .4,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"HTMLInCanvas": {
 		"opacity": 1,
@@ -1333,7 +1333,7 @@ var shaderMetadata = {
 		"bodyLight": .6,
 		"bevelWidth": .01,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"IsometricCubes": {
 		"opacity": 1,
@@ -1463,7 +1463,7 @@ var shaderMetadata = {
 		"smokeSize": .5,
 		"speed": 1,
 		"seed": 0,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"LightLeak": {
 		"opacity": 1,
@@ -1557,7 +1557,7 @@ var shaderMetadata = {
 		"bevelWidth": .05,
 		"bevelShape": 0,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Liquify": {
 		"opacity": 1,
@@ -1704,7 +1704,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,
@@ -1733,7 +1733,7 @@ var shaderMetadata = {
 		"flickerAmount": .2,
 		"flowSpeed": 0,
 		"flowAmount": .3,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"NoiseDissolve": {
 		"opacity": 1,
@@ -1815,7 +1815,7 @@ var shaderMetadata = {
 		"bevelWidth": .08,
 		"bevelShape": 0,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"PagePeel": {
 		"opacity": 1,
@@ -1916,7 +1916,7 @@ var shaderMetadata = {
 		"softness": .1,
 		"depth": .18,
 		"colorSpace": "oklab",
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"PerlinNoise": {
 		"opacity": 1,
@@ -2018,7 +2018,7 @@ var shaderMetadata = {
 		"shading": .35,
 		"rim": .25,
 		"rimColor": "#ffffff",
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"PolarCoordinates": {
 		"opacity": 1,
@@ -2386,7 +2386,7 @@ var shaderMetadata = {
 		"mouseInfluence": .1,
 		"mouseRadius": .1,
 		"colorSpace": "linear",
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"SmokeFlow": {
 		"opacity": 1,
@@ -2414,6 +2414,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",
@@ -2684,7 +2696,7 @@ var shaderMetadata = {
 		"colorC": "#ff7a21",
 		"colorSpace": "oklch",
 		"speed": .1,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"TiltShift": {
 		"opacity": 1,
@@ -2920,7 +2932,7 @@ var shaderMetadata = {
 		"lightAngle": 30,
 		"foam": .3,
 		"edgeSoftness": .05,
-		"shape": "{\"type\":\"circleSDF\",\"radius\":0.35}"
+		"shape": "{\"type\":\"sphere3D\",\"radius\":0.35}"
 	},
 	"Watercolor": {
 		"opacity": 1,
@@ -3348,6 +3360,7 @@ const availableComponents = [
 	"SmokeFlow",
 	"Solarize",
 	"SolidColor",
+	"Sparkle",
 	"Spherize",
 	"Spiral",
 	"Star",

package/dist/vue/CustomShader.js

@@ -0,0 +1,3 @@
+import CustomShader_vue_vue_type_script_setup_true_lang_default from "./CustomShader.vue_vue_type_script_setup_true_lang.js";
+var CustomShader_default = CustomShader_vue_vue_type_script_setup_true_lang_default;
+export { CustomShader_default as default };

package/dist/vue/CustomShader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,173 @@
+import { computed, createElementBlock, defineComponent, effectScope, inject, onBeforeUnmount, onMounted, onUpdated, openBlock, provide, ref, renderSlot, unref, useAttrs, useId, watch } from "vue";
+import { createGpuUniformsMap, registerShader, resolveBoundingBox } from "../core/index.js";
+import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
+var _hoisted_1 = ["data-shader-id"];
+var CustomShader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CustomShader",
+	inheritAttrs: false,
+	__name: "CustomShader",
+	props: {
+		src: {},
+		blendMode: { default: "normal" },
+		opacity: {},
+		visible: {
+			type: Boolean,
+			default: true
+		},
+		id: {},
+		maskSource: {},
+		maskType: {},
+		renderOrder: {},
+		transform: {},
+		boundingBox: {},
+		flow: {},
+		absolute: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		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");
+		}
+		const camelize = (key) => key.replace(/-(\w)/g, (_, c) => c.toUpperCase());
+		function readShaderProps(definition$1) {
+			const authored = {};
+			for (const [key, value] of Object.entries(attrs)) authored[camelize(key)] = value;
+			const out = {};
+			for (const [key, config] of Object.entries(definition$1.props)) {
+				const value = authored[key];
+				out[key] = value === void 0 ? config.default : value;
+			}
+			return out;
+		}
+		function uniformValues(values, definition$1) {
+			const out = {};
+			for (const [key, value] of Object.entries(values)) out[key] = isPropDriver(value) ? definition$1.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;
+		}
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
+		provide("shaderParentId", instanceId);
+		const DEFAULT_TRANSFORM = {
+			offsetX: 0,
+			offsetY: 0,
+			rotation: 0,
+			scale: 1,
+			anchorX: .5,
+			anchorY: .5,
+			edges: "transparent"
+		};
+		const effectiveTransform = computed(() => ({
+			...DEFAULT_TRANSFORM,
+			...props.transform
+		}));
+		const effectiveBoundingBox = computed(() => resolveBoundingBox(props.boundingBox));
+		const shaderColorSpace = inject("shaderColorSpace");
+		const parentId = inject("shaderParentId");
+		if (parentId === void 0) throw new Error("<CustomShader> must be used inside a <Shader> component or another shader component");
+		const parentRegister = inject("shaderNodeRegister");
+		const parentUniformUpdate = inject("shaderUniformUpdate");
+		const parentMetadataUpdate = inject("shaderMetadataUpdate");
+		if (!parentRegister || !parentUniformUpdate || !parentMetadataUpdate) throw new Error("<CustomShader> must be used inside a <Shader> component or another shader component");
+		const rendererResetSignal = inject("shaderRendererResetSignal");
+		let definition = props.src;
+		let currentValues = readShaderProps(definition);
+		let uniforms = buildUniforms();
+		function buildUniforms() {
+			if (shaderColorSpace) setColorSpaceMode(shaderColorSpace.value);
+			return createGpuUniformsMap(definition, uniformValues(currentValues, definition), instanceId);
+		}
+		const orderMarker = ref(null);
+		let detectedRenderOrder = void 0;
+		function metadata() {
+			return {
+				blendMode: props.blendMode,
+				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: mapsOf(currentValues),
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
+				transform: effectiveTransform.value,
+				boundingBox: effectiveBoundingBox.value,
+				flow: props.flow,
+				absolute: props.absolute
+			};
+		}
+		const registerWithRenderer = () => {
+			registerShader(definition);
+			parentRegister(instanceId, definition.fragment, parentId, metadata(), uniforms, definition);
+		};
+		onMounted(() => {
+			if (props.renderOrder === void 0 && orderMarker.value) {
+				const parent = orderMarker.value.parentElement;
+				if (parent) {
+					const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+					const position = Array.from(siblings).indexOf(orderMarker.value);
+					if (position >= 0) {
+						detectedRenderOrder = position;
+						parentMetadataUpdate(instanceId, { renderOrder: position });
+					}
+				}
+			}
+		});
+		onUpdated(() => {
+			const next = readShaderProps(definition);
+			let mapsChanged = false;
+			for (const [key, value] of Object.entries(next)) {
+				const prev = currentValues[key];
+				if (value === prev) continue;
+				if (isPropDriver(value) || isPropDriver(prev)) mapsChanged = true;
+				else if (uniforms[key] && uniforms[key].value !== void 0) parentUniformUpdate(instanceId, key, value);
+			}
+			currentValues = next;
+			if (mapsChanged) parentMetadataUpdate(instanceId, metadata());
+		});
+		const scope = effectScope();
+		scope.run(() => {
+			watch(() => props.src, (next) => {
+				if (!next || next === definition) return;
+				definition = next;
+				currentValues = readShaderProps(definition);
+				uniforms = buildUniforms();
+				registerWithRenderer();
+			});
+			watch(() => [
+				props.blendMode,
+				props.opacity,
+				props.visible,
+				props.id,
+				props.maskSource,
+				props.maskType,
+				props.renderOrder,
+				props.transform,
+				props.boundingBox,
+				props.flow,
+				props.absolute
+			], () => parentMetadataUpdate(instanceId, metadata()), { deep: true });
+			if (rendererResetSignal) watch(() => rendererResetSignal.value, (value) => {
+				if (value > 0) registerWithRenderer();
+			}, { immediate: true });
+		});
+		onBeforeUnmount(() => {
+			scope.stop();
+			parentRegister(instanceId, null, null, null, null, null);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+		};
+	}
+});
+export { CustomShader_vue_vue_type_script_setup_true_lang_default as default };

package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js

@@ -156,6 +156,7 @@ import SmokeFill_default from "./SmokeFill.js";
 import SmokeFlow_default from "./SmokeFlow.js";
 import Solarize_default from "./Solarize.js";
 import SolidColor_default from "./SolidColor.js";
+import Sparkle_default from "./Sparkle.js";
 import Spherize_default from "./Spherize.js";
 import Spiral_default from "./Spiral.js";
 import Star_default from "./Star.js";
@@ -412,6 +413,7 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			SmokeFlow: SmokeFlow_default,
 			Solarize: Solarize_default,
 			SolidColor: SolidColor_default,
+			Sparkle: Sparkle_default,
 			Spherize: Spherize_default,
 			Spiral: Spiral_default,
 			Star: Star_default,

package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js

@@ -91,7 +91,7 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 					return;
 				}
 				if (rendererInstance.value.getPerformanceStats().fps > 0) {
-					telemetryCollector = startTelemetry(rendererInstance.value, "3.2.474", props.disableTelemetry, props.isPreview);
+					telemetryCollector = startTelemetry(rendererInstance.value, "4.0.0", props.disableTelemetry, props.isPreview);
 					if (telemetryCollector) telemetryCollector.start();
 					telemetryStartTimeout = null;
 				} else telemetryStartTimeout = setTimeout(checkRendering, 500);

package/dist/vue/Sparkle.js

@@ -0,0 +1,3 @@
+import Sparkle_vue_vue_type_script_setup_true_lang_default from "./Sparkle.vue_vue_type_script_setup_true_lang.js";
+var Sparkle_default = Sparkle_vue_vue_type_script_setup_true_lang_default;
+export { Sparkle_default as default };

package/dist/vue/Sparkle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,233 @@
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { createGpuUniformsMap, resolveBoundingBox } from "../core/index.js";
+import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
+import { componentDefinition } from "../core/shaders/Sparkle/index.js";
+var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
+var Sparkle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Sparkle",
+	props: /* @__PURE__ */ mergeDefaults({
+		size: {},
+		intensity: {},
+		threshold: {},
+		expand: {},
+		rayLength: {},
+		colorize: {},
+		blendMode: {},
+		opacity: {},
+		visible: { type: Boolean },
+		id: {},
+		maskSource: {},
+		maskType: {},
+		renderOrder: {},
+		transform: {},
+		boundingBox: {},
+		flow: {},
+		absolute: { type: Boolean },
+		speed: {},
+		seed: {}
+	}, {
+		blendMode: "normal",
+		visible: true,
+		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
+			acc[key] = config.default;
+			return acc;
+		}, {})
+	}),
+	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
+		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");
+		}
+		const props = __props;
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
+		provide("shaderParentId", instanceId);
+		const DEFAULT_TRANSFORM = {
+			offsetX: 0,
+			offsetY: 0,
+			rotation: 0,
+			scale: 1,
+			anchorX: .5,
+			anchorY: .5,
+			edges: "transparent"
+		};
+		const effectiveTransform = computed(() => ({
+			...DEFAULT_TRANSFORM,
+			...props.transform
+		}));
+		const effectiveBoundingBox = computed(() => resolveBoundingBox(props.boundingBox));
+		const shaderReadyProps = computed(() => {
+			let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
+				acc[key] = config.default;
+				return acc;
+			}, {}) };
+			for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform" && key !== "boundingBox" && key !== "flow" && key !== "absolute") {
+				const val = toValue(props[key]);
+				if (isPropDriver(val)) continue;
+				if (val !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
+					acc[key$1] = config.default;
+					return acc;
+				}, {})[key]) baseProps[key] = val;
+			}
+			return baseProps;
+		});
+		const mapsFromProps = computed(() => {
+			const maps = {};
+			for (const key of Object.keys(componentDefinition.props)) {
+				const val = props[key];
+				if (isPropDriver(val)) maps[key] = val;
+			}
+			return Object.keys(maps).length > 0 ? maps : void 0;
+		});
+		const shaderColorSpace = inject("shaderColorSpace");
+		if (shaderColorSpace) setColorSpaceMode(shaderColorSpace.value);
+		const uniforms = createGpuUniformsMap(componentDefinition, shaderReadyProps.value, instanceId);
+		const parentId = inject("shaderParentId");
+		if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+		const parentRegister = inject("shaderNodeRegister");
+		if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+		const parentUniformUpdate = inject("shaderUniformUpdate");
+		if (parentUniformUpdate === void 0) throw new Error("Shader components require shaderUniformUpdate from parent");
+		const parentMetadataUpdate = inject("shaderMetadataUpdate");
+		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
+		const rendererResetSignal = inject("shaderRendererResetSignal");
+		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
+		let detectedRenderOrder = void 0;
+		const registerWithRenderer = () => {
+			parentRegister(instanceId, componentDefinition.fragment, parentId, {
+				blendMode: props.blendMode,
+				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: mapsFromProps.value,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
+				transform: effectiveTransform.value,
+				boundingBox: effectiveBoundingBox.value,
+				flow: props.flow,
+				absolute: props.absolute
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
+		};
+		onMounted(() => {
+			if (props.renderOrder === void 0 && orderMarker.value) {
+				const parent = orderMarker.value.parentElement;
+				if (parent) {
+					const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+					const position = Array.from(siblings).indexOf(orderMarker.value);
+					if (position >= 0) {
+						detectedRenderOrder = position;
+						parentMetadataUpdate(instanceId, { renderOrder: position });
+					}
+				}
+			}
+		});
+		const setupUniformWatchers = () => {
+			const scope = effectScope();
+			scope.run(() => {
+				Object.entries(uniforms).forEach(([propName, entry]) => {
+					watch(() => props[propName], (newValue) => {
+						if (entry && entry.value !== void 0 && !isPropDriver(newValue)) parentUniformUpdate(instanceId, propName, newValue);
+					}, { deep: true });
+				});
+				watch(() => [
+					props.blendMode,
+					props.opacity,
+					props.visible,
+					props.id,
+					props.maskSource,
+					props.maskType,
+					props.renderOrder,
+					props.transform,
+					props.boundingBox,
+					props.flow,
+					props.absolute,
+					mapsFromProps.value
+				], ([blendMode, opacity, visible]) => {
+					parentMetadataUpdate(instanceId, {
+						blendMode,
+						opacity,
+						visible: visible === false ? false : true,
+						id: props.id,
+						mask: props.maskSource ? {
+							source: props.maskSource,
+							type: props.maskType || "alpha"
+						} : void 0,
+						maps: mapsFromProps.value,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
+						transform: effectiveTransform.value,
+						boundingBox: effectiveBoundingBox.value,
+						flow: props.flow,
+						absolute: props.absolute
+					});
+				}, { deep: true });
+				if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
+					if (newValue > 0) registerWithRenderer();
+				}, { immediate: true });
+			});
+			onBeforeUnmount(() => {
+				scope.stop();
+			});
+		};
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
+		onBeforeUnmount(() => {
+			parentRegister(instanceId, null, null, null, null, null);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+export { Sparkle_vue_vue_type_script_setup_true_lang_default as default };