shaders 2.5.84 → 2.5.86

package/dist/vue/Crystal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,186 @@
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { createUniformsMap } from "../core/index.js";
+import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
+import { componentDefinition } from "../core/shaders/Crystal/index.js";
+var _hoisted_1 = ["data-shader-id"];
+var Crystal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Crystal",
+	props: /* @__PURE__ */ mergeDefaults({
+		center: {},
+		blendMode: {},
+		opacity: {},
+		visible: { type: Boolean },
+		id: {},
+		maskSource: {},
+		maskType: {},
+		renderOrder: {},
+		transform: {},
+		scale: {},
+		refraction: {},
+		dispersion: {},
+		facets: {},
+		edgeSoftness: {},
+		innerZoom: {},
+		cutout: { type: Boolean },
+		lightAngle: {},
+		highlights: {},
+		shadows: {},
+		brightness: {},
+		fresnel: {},
+		fresnelSoftness: {},
+		fresnelColor: {},
+		tintColor: {},
+		tintIntensity: {},
+		tintPreserveLuminosity: { type: Boolean },
+		shape: {},
+		shapeSdfUrl: {},
+		shapeType: {}
+	}, {
+		blendMode: "normal",
+		visible: true,
+		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
+			acc[key] = config.default;
+			return acc;
+		}, {})
+	}),
+	setup(__props) {
+		function isPropDriver(value) {
+			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
+		}
+		const props = __props;
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
+		provide("shaderParentId", instanceId);
+		const DEFAULT_TRANSFORM = {
+			offsetX: 0,
+			offsetY: 0,
+			rotation: 0,
+			scale: 1,
+			anchorX: .5,
+			anchorY: .5,
+			edges: "transparent"
+		};
+		const effectiveTransform = computed(() => ({
+			...DEFAULT_TRANSFORM,
+			...props.transform
+		}));
+		const shaderReadyProps = computed(() => {
+			let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
+				acc[key] = config.default;
+				return acc;
+			}, {}) };
+			for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform") {
+				const val = toValue(props[key]);
+				if (isPropDriver(val)) continue;
+				if (val !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
+					acc[key$1] = config.default;
+					return acc;
+				}, {})[key]) baseProps[key] = val;
+			}
+			return baseProps;
+		});
+		const mapsFromProps = computed(() => {
+			const maps = {};
+			for (const key of Object.keys(componentDefinition.props)) {
+				const val = props[key];
+				if (isPropDriver(val)) maps[key] = val;
+			}
+			return Object.keys(maps).length > 0 ? maps : void 0;
+		});
+		const shaderColorSpace = inject("shaderColorSpace");
+		if (shaderColorSpace) setColorSpaceMode(shaderColorSpace.value);
+		const uniforms = createUniformsMap(componentDefinition, shaderReadyProps.value, instanceId);
+		const parentId = inject("shaderParentId");
+		if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+		const parentRegister = inject("shaderNodeRegister");
+		if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+		const parentUniformUpdate = inject("shaderUniformUpdate");
+		if (parentUniformUpdate === void 0) throw new Error("Shader components require shaderUniformUpdate from parent");
+		const parentMetadataUpdate = inject("shaderMetadataUpdate");
+		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
+		const rendererResetSignal = inject("shaderRendererResetSignal");
+		const orderMarker = ref(null);
+		let detectedRenderOrder = void 0;
+		const registerWithRenderer = () => {
+			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
+				blendMode: props.blendMode,
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				maps: mapsFromProps.value,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
+				transform: effectiveTransform.value
+			}, 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(() => {
+				Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
+					watch(() => props[propName], (newValue) => {
+						if (uniform && uniform.value !== void 0 && !isPropDriver(newValue)) parentUniformUpdate(instanceId, propName, newValue);
+					}, { deep: true });
+				});
+				watch(() => [
+					props.blendMode,
+					props.opacity,
+					props.visible,
+					props.id,
+					props.maskSource,
+					props.maskType,
+					props.renderOrder,
+					props.transform,
+					mapsFromProps.value
+				], ([blendMode, opacity, visible]) => {
+					parentMetadataUpdate(instanceId, {
+						blendMode,
+						opacity,
+						visible: visible === false ? false : true,
+						id: props.id,
+						mask: props.maskSource ? {
+							source: props.maskSource,
+							type: props.maskType || "alpha"
+						} : void 0,
+						maps: mapsFromProps.value,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
+						transform: effectiveTransform.value
+					});
+				}, { deep: true });
+				if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
+					if (newValue > 0) registerWithRenderer();
+				}, { immediate: true });
+			});
+			onBeforeUnmount(() => {
+				scope.stop();
+			});
+		};
+		setupUniformWatchers();
+		onBeforeUnmount(() => {
+			parentRegister(instanceId, null, null, null, null, null);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+		};
+	}
+});
+export { Crystal_vue_vue_type_script_setup_true_lang_default as default };

package/dist/vue/CursorRipples.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/CursorRipples/index.js";
@@ -32,7 +32,7 @@ var CursorRipples_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/CursorTrail.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/CursorTrail/index.js";
@@ -33,7 +33,7 @@ var CursorTrail_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/DiffuseBlur.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/DiffuseBlur/index.js";
@@ -29,7 +29,7 @@ var DiffuseBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Dither.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Dither/index.js";
@@ -34,7 +34,7 @@ var Dither_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/DotGrid.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/DotGrid/index.js";
@@ -31,7 +31,7 @@ var DotGrid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Duotone.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Duotone/index.js";
@@ -31,7 +31,7 @@ var Duotone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Ellipse.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Ellipse/index.js";
@@ -37,7 +37,7 @@ var Ellipse_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Emboss.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Emboss/index.js";
@@ -36,7 +36,7 @@ var Emboss_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/FallingLines.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/FallingLines/index.js";
@@ -38,7 +38,7 @@ var FallingLines_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/FilmGrain.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/FilmGrain/index.js";
@@ -28,7 +28,7 @@ var FilmGrain_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/FloatingParticles.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/FloatingParticles/index.js";
@@ -38,7 +38,7 @@ var FloatingParticles_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/FlowField.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/FlowField/index.js";
@@ -32,7 +32,7 @@ var FlowField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Flower.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Flower/index.js";
@@ -38,7 +38,7 @@ var Flower_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/FlowingGradient.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/FlowingGradient/index.js";
@@ -35,7 +35,7 @@ var FlowingGradient_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Form3D.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Form3D/index.js";
@@ -35,7 +35,7 @@ var Form3D_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Glass.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Glass/index.js";
@@ -49,7 +49,7 @@ var Glass_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/GlassTiles.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/GlassTiles/index.js";
@@ -31,7 +31,7 @@ var GlassTiles_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Glitch.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Glitch/index.js";
@@ -34,7 +34,7 @@ var Glitch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Glow.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Glow/index.js";
@@ -30,7 +30,7 @@ var Glow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Godrays.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Godrays/index.js";
@@ -34,7 +34,7 @@ var Godrays_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Grayscale.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Grayscale/index.js";
@@ -27,7 +27,7 @@ var Grayscale_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Grid.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Grid/index.js";
@@ -30,7 +30,7 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/GridDistortion.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/GridDistortion/index.js";
@@ -32,7 +32,7 @@ var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Group.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Group/index.js";
@@ -27,7 +27,7 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/Halftone.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Halftone/index.js";
@@ -30,7 +30,7 @@ var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,

package/dist/vue/HueShift.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, watch } from "vue";
+import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/HueShift/index.js";
@@ -28,7 +28,7 @@ var HueShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
-		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
 		provide("shaderParentId", instanceId);
 		const DEFAULT_TRANSFORM = {
 			offsetX: 0,