shaders 2.2.48 → 2.3.50

package/dist/svelte/utils/generatePresetCode.js

@@ -1,2 +1,2 @@
-import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-BD0Ac86C.js";
+import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-Co-oSFXj.js";
 export { availableComponents, generatePresetCode };

package/dist/vue/AngularBlur.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/AngularBlur/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "AngularBlur",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -16,7 +17,6 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		center: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -25,7 +25,7 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	}),
 	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 AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		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 AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					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 AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 							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 AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			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/Ascii.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/Ascii/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Ascii_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Ascii",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -15,10 +16,12 @@ var Ascii_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		characters: {},
 		cellSize: {},
 		fontFamily: {},
-		spacing: {}
+		spacing: {},
+		gamma: {},
+		alphaThreshold: {},
+		preserveAlpha: { type: Boolean }
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -27,7 +30,7 @@ var Ascii_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,
@@ -62,6 +65,8 @@ var Ascii_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,
@@ -72,10 +77,23 @@ var Ascii_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(() => {
@@ -103,7 +121,7 @@ var Ascii_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 });
@@ -120,7 +138,12 @@ var Ascii_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/Beam.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/Beam/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Beam_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Beam",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -23,7 +24,6 @@ var Beam_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		colorSpace: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -32,7 +32,7 @@ var Beam_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,
@@ -67,6 +67,8 @@ var Beam_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,
@@ -77,10 +79,23 @@ var Beam_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(() => {
@@ -108,7 +123,7 @@ var Beam_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 });
@@ -125,7 +140,12 @@ var Beam_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/Blob.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/Blob/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Blob_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Blob",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -28,7 +29,6 @@ var Blob_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		center: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -37,7 +37,7 @@ var Blob_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,
@@ -72,6 +72,8 @@ var Blob_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,
@@ -82,10 +84,23 @@ var Blob_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(() => {
@@ -113,7 +128,7 @@ var Blob_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 });
@@ -130,7 +145,12 @@ var Blob_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/Blur.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/Blur/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Blur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Blur",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -15,7 +16,6 @@ var Blur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		intensity: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -24,7 +24,7 @@ var Blur_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,
@@ -59,6 +59,8 @@ var Blur_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,
@@ -69,10 +71,23 @@ var Blur_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(() => {
@@ -100,7 +115,7 @@ var Blur_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 });
@@ -117,7 +132,12 @@ var Blur_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/BrightnessContrast.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/BrightnessContrast/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var BrightnessContrast_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "BrightnessContrast",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -16,7 +17,6 @@ var BrightnessContrast_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		contrast: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -25,7 +25,7 @@ var BrightnessContrast_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,
@@ -60,6 +60,8 @@ var BrightnessContrast_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,
@@ -70,10 +72,23 @@ var BrightnessContrast_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(() => {
@@ -101,7 +116,7 @@ var BrightnessContrast_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 });
@@ -118,7 +133,12 @@ var BrightnessContrast_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/Bulge.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/Bulge/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var Bulge_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Bulge",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -19,7 +20,6 @@ var Bulge_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;
@@ -28,7 +28,7 @@ var Bulge_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,
@@ -63,6 +63,8 @@ var Bulge_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,
@@ -73,10 +75,23 @@ var Bulge_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(() => {
@@ -104,7 +119,7 @@ var Bulge_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 });
@@ -121,7 +136,12 @@ var Bulge_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/CRTScreen.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/CRTScreen/index.js";
+var _hoisted_1 = ["data-shader-id"];
 var CRTScreen_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "CRTScreen",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -22,7 +23,6 @@ var CRTScreen_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		vignetteRadius: {}
 	}, {
 		blendMode: "normal",
-		renderOrder: 0,
 		visible: true,
 		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
 			acc[key] = config.default;
@@ -31,7 +31,7 @@ var CRTScreen_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,
@@ -66,6 +66,8 @@ var CRTScreen_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,
@@ -76,10 +78,23 @@ var CRTScreen_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(() => {
@@ -107,7 +122,7 @@ var CRTScreen_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 });
@@ -124,7 +139,12 @@ var CRTScreen_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);
 		};
 	}
 });