shaders 2.2.47 → 2.3.49

package/dist/vue/Stripes.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/Stripes/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Stripes_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Stripes",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -23,7 +24,6 @@ var Stripes_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		colorSpace: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -32,7 +32,7 @@ var Stripes_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 Stripes_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 Stripes_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 Stripes_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 Stripes_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/Swirl.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/Swirl/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Swirl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Swirl",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -20,7 +21,6 @@ var Swirl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		colorSpace: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -29,7 +29,7 @@ var Swirl_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,
@@ -64,6 +64,8 @@ var Swirl_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,
@@ -74,10 +76,23 @@ var Swirl_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(() => {
@@ -105,7 +120,7 @@ var Swirl_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 });
@@ -122,7 +137,12 @@ var Swirl_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/TiltShift.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/TiltShift/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var TiltShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "TiltShift",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -19,7 +20,6 @@ var TiltShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		center: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -28,7 +28,7 @@ var TiltShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	}),
 	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 TiltShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		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 TiltShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					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 TiltShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 							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 TiltShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			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/Tint.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/Tint/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Tint_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Tint",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -17,7 +18,6 @@ var Tint_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		preserveLuminosity: { type: Boolean }
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -26,7 +26,7 @@ var Tint_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 Tint_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 Tint_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 Tint_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 Tint_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/Tritone.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/Tritone/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Tritone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Tritone",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -19,7 +20,6 @@ var Tritone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		colorSpace: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -28,7 +28,7 @@ var Tritone_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 Tritone_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 Tritone_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 Tritone_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 Tritone_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/Twirl.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/Twirl/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Twirl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Twirl",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -17,7 +18,6 @@ var Twirl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		edges: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -26,7 +26,7 @@ var Twirl_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,
@@ -61,6 +61,8 @@ var Twirl_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,
@@ -71,10 +73,23 @@ var Twirl_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(() => {
@@ -102,7 +117,7 @@ var Twirl_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 });
@@ -119,7 +134,12 @@ var Twirl_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/Vibrance.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/Vibrance/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Vibrance_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Vibrance",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -15,7 +16,6 @@ var Vibrance_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		intensity: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -24,7 +24,7 @@ var Vibrance_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 Vibrance_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 Vibrance_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 Vibrance_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 Vibrance_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/VideoTexture.js

@@ -0,0 +1,3 @@
+import VideoTexture_vue_vue_type_script_setup_true_lang_default from "./VideoTexture.vue_vue_type_script_setup_true_lang.js";
+var VideoTexture_default = VideoTexture_vue_vue_type_script_setup_true_lang_default;
+export { VideoTexture_default as default };