shaders 2.2.48 → 2.3.50

package/dist/vue/Grid.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/Grid/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Grid",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -17,7 +18,6 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		thickness: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -26,7 +26,7 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 	}),
 	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,
@@ -61,6 +61,8 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		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,
@@ -71,10 +73,23 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 					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(() => {
@@ -102,7 +117,7 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -119,7 +134,12 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			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/GridDistortion.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/GridDistortion/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "GridDistortion",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -19,7 +20,6 @@ var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		edges: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -28,7 +28,7 @@ var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	}),
 	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 GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		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 GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					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 GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							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 GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			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/Group.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/Group/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Group",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -14,7 +15,6 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		transform: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -23,7 +23,7 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	}),
 	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,
@@ -58,6 +58,8 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		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,
@@ -68,10 +70,23 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					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(() => {
@@ -99,7 +114,7 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 							source: props.maskSource,
 							type: props.maskType || "alpha"
 						} : void 0,
-						renderOrder: props.renderOrder,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
 						transform: effectiveTransform.value
 					});
 				}, { deep: true });
@@ -116,7 +131,12 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			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/Halftone.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/Halftone/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Halftone",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -17,7 +18,6 @@ var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		smoothness: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -26,7 +26,7 @@ var Halftone_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,
@@ -61,6 +61,8 @@ var Halftone_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,
@@ -71,10 +73,23 @@ var Halftone_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(() => {
@@ -102,7 +117,7 @@ var Halftone_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 });
@@ -119,7 +134,12 @@ var Halftone_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/HueShift.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/HueShift/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var HueShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "HueShift",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -15,7 +16,6 @@ var HueShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		shift: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -24,7 +24,7 @@ var HueShift_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,
@@ -59,6 +59,8 @@ var HueShift_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,
@@ -69,10 +71,23 @@ var HueShift_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(() => {
@@ -100,7 +115,7 @@ var HueShift_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 });
@@ -117,7 +132,12 @@ var HueShift_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/ImageTexture.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/ImageTexture/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var ImageTexture_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ImageTexture",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -16,7 +17,6 @@ var ImageTexture_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		objectFit: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -25,7 +25,7 @@ var ImageTexture_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,
@@ -60,6 +60,8 @@ var ImageTexture_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,
@@ -70,10 +72,23 @@ var ImageTexture_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(() => {
@@ -101,7 +116,7 @@ var ImageTexture_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 });
@@ -118,7 +133,12 @@ var ImageTexture_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/Invert.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/Invert/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Invert_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Invert",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -14,7 +15,6 @@ var Invert_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		transform: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -23,7 +23,7 @@ var Invert_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,
@@ -58,6 +58,8 @@ var Invert_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,
@@ -68,10 +70,23 @@ var Invert_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(() => {
@@ -99,7 +114,7 @@ var Invert_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 });
@@ -116,7 +131,12 @@ var Invert_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/Kaleidoscope.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/Kaleidoscope/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Kaleidoscope_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Kaleidoscope",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -18,7 +19,6 @@ var Kaleidoscope_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		edges: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -27,7 +27,7 @@ var Kaleidoscope_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,
@@ -62,6 +62,8 @@ var Kaleidoscope_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,
@@ -72,10 +74,23 @@ var Kaleidoscope_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(() => {
@@ -103,7 +118,7 @@ var Kaleidoscope_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 });
@@ -120,7 +135,12 @@ var Kaleidoscope_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/LensFlare.js

@@ -0,0 +1,3 @@
+import LensFlare_vue_vue_type_script_setup_true_lang_default from "./LensFlare.vue_vue_type_script_setup_true_lang.js";
+var LensFlare_default = LensFlare_vue_vue_type_script_setup_true_lang_default;
+export { LensFlare_default as default };