shaders 2.2.47 → 2.3.49

package/dist/vue/Shatter.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { componentDefinition } from "../core/shaders/Shatter/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Shatter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Shatter",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -23,7 +24,6 @@ var Shatter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		edges: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -32,7 +32,7 @@ var Shatter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	}),
 	setup(__props) {
 		const props = __props;
-		const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+		const instanceId = props.id || Math.random().toString(36).substring(2, 10);
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,
@@ -67,6 +67,8 @@ var Shatter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		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);
+		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
 				blendMode: props.blendMode,
@@ -77,10 +79,23 @@ var Shatter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
-				renderOrder: props.renderOrder,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
 			}, uniforms, componentDefinition);
 		};
+		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(() => {
@@ -108,7 +123,7 @@ var Shatter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -125,7 +140,12 @@ var Shatter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 		};
 	}
 });

package/dist/vue/SimplexNoise.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { componentDefinition } from "../core/shaders/SimplexNoise/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var SimplexNoise_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "SimplexNoise",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -21,7 +22,6 @@ var SimplexNoise_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		speed: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -30,7 +30,7 @@ var SimplexNoise_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	}),
 	setup(__props) {
 		const props = __props;
-		const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+		const instanceId = props.id || Math.random().toString(36).substring(2, 10);
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,
@@ -65,6 +65,8 @@ var SimplexNoise_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		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);
+		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
 				blendMode: props.blendMode,
@@ -75,10 +77,23 @@ var SimplexNoise_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
-				renderOrder: props.renderOrder,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
 			}, uniforms, componentDefinition);
 		};
+		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(() => {
@@ -106,7 +121,7 @@ var SimplexNoise_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -123,7 +138,12 @@ var SimplexNoise_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 		};
 	}
 });

package/dist/vue/SineWave.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { componentDefinition } from "../core/shaders/SineWave/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var SineWave_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "SineWave",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -22,7 +23,6 @@ var SineWave_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		softness: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -31,7 +31,7 @@ var SineWave_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	}),
 	setup(__props) {
 		const props = __props;
-		const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+		const instanceId = props.id || Math.random().toString(36).substring(2, 10);
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,
@@ -66,6 +66,8 @@ var SineWave_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		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);
+		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
 				blendMode: props.blendMode,
@@ -76,10 +78,23 @@ var SineWave_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
-				renderOrder: props.renderOrder,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
 			}, uniforms, componentDefinition);
 		};
+		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(() => {
@@ -107,7 +122,7 @@ var SineWave_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -124,7 +139,12 @@ var SineWave_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 		};
 	}
 });

package/dist/vue/SolidColor.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { componentDefinition } from "../core/shaders/SolidColor/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var SolidColor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "SolidColor",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -15,7 +16,6 @@ var SolidColor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		color: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -24,7 +24,7 @@ var SolidColor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 	}),
 	setup(__props) {
 		const props = __props;
-		const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+		const instanceId = props.id || Math.random().toString(36).substring(2, 10);
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,
@@ -59,6 +59,8 @@ var SolidColor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		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);
+		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
 				blendMode: props.blendMode,
@@ -69,10 +71,23 @@ var SolidColor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
-				renderOrder: props.renderOrder,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
 			}, uniforms, componentDefinition);
 		};
+		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(() => {
@@ -100,7 +115,7 @@ var SolidColor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -117,7 +132,12 @@ var SolidColor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 		};
 	}
 });

package/dist/vue/Spherize.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { componentDefinition } from "../core/shaders/Spherize/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Spherize_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Spherize",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -21,7 +22,6 @@ var Spherize_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		lightColor: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -30,7 +30,7 @@ var Spherize_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	}),
 	setup(__props) {
 		const props = __props;
-		const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+		const instanceId = props.id || Math.random().toString(36).substring(2, 10);
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,
@@ -65,6 +65,8 @@ var Spherize_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		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);
+		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
 				blendMode: props.blendMode,
@@ -75,10 +77,23 @@ var Spherize_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
-				renderOrder: props.renderOrder,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
 			}, uniforms, componentDefinition);
 		};
+		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(() => {
@@ -106,7 +121,7 @@ var Spherize_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -123,7 +138,12 @@ var Spherize_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 		};
 	}
 });

package/dist/vue/Spiral.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { componentDefinition } from "../core/shaders/Spiral/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Spiral_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Spiral",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -23,7 +24,6 @@ var Spiral_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		colorSpace: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -32,7 +32,7 @@ var Spiral_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 	}),
 	setup(__props) {
 		const props = __props;
-		const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+		const instanceId = props.id || Math.random().toString(36).substring(2, 10);
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,
@@ -67,6 +67,8 @@ var Spiral_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		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);
+		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
 				blendMode: props.blendMode,
@@ -77,10 +79,23 @@ var Spiral_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
-				renderOrder: props.renderOrder,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
 			}, uniforms, componentDefinition);
 		};
+		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(() => {
@@ -108,7 +123,7 @@ var Spiral_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -125,7 +140,12 @@ var Spiral_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 		};
 	}
 });

package/dist/vue/Strands.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { componentDefinition } from "../core/shaders/Strands/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Strands_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Strands",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -23,7 +24,6 @@ var Strands_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		end: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -32,7 +32,7 @@ var Strands_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	}),
 	setup(__props) {
 		const props = __props;
-		const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+		const instanceId = props.id || Math.random().toString(36).substring(2, 10);
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,
@@ -67,6 +67,8 @@ var Strands_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		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);
+		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
 				blendMode: props.blendMode,
@@ -77,10 +79,23 @@ var Strands_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
-				renderOrder: props.renderOrder,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
 			}, uniforms, componentDefinition);
 		};
+		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(() => {
@@ -108,7 +123,7 @@ var Strands_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -125,7 +140,12 @@ var Strands_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 		};
 	}
 });

package/dist/vue/Stretch.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { componentDefinition } from "../core/shaders/Stretch/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Stretch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Stretch",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -19,7 +20,6 @@ var Stretch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		edges: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -28,7 +28,7 @@ var Stretch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	}),
 	setup(__props) {
 		const props = __props;
-		const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+		const instanceId = props.id || Math.random().toString(36).substring(2, 10);
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,
@@ -63,6 +63,8 @@ var Stretch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		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);
+		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
 				blendMode: props.blendMode,
@@ -73,10 +75,23 @@ var Stretch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
-				renderOrder: props.renderOrder,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
 			}, uniforms, componentDefinition);
 		};
+		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(() => {
@@ -104,7 +119,7 @@ var Stretch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -121,7 +136,12 @@ var Stretch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 		};
 	}
 });