shaders 2.5.84 → 2.5.85

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,

package/dist/vue/ImageTexture.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/ImageTexture/index.js";
@@ -29,7 +29,7 @@ var ImageTexture_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/Invert.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/Invert/index.js";
@@ -27,7 +27,7 @@ var Invert_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/Kaleidoscope.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/Kaleidoscope/index.js";
@@ -31,7 +31,7 @@ var Kaleidoscope_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/LensFlare.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/LensFlare/index.js";
@@ -44,7 +44,7 @@ var LensFlare_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/LinearBlur.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/LinearBlur/index.js";
@@ -29,7 +29,7 @@ var LinearBlur_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/LinearGradient.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/LinearGradient/index.js";
@@ -34,7 +34,7 @@ var LinearGradient_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/Liquify.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/Liquify/index.js";
@@ -32,7 +32,7 @@ var Liquify_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/Mirror.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/Mirror/index.js";
@@ -30,7 +30,7 @@ var Mirror_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/Neon.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/Neon/index.js";
@@ -49,7 +49,7 @@ var Neon_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/Paper.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/Paper/index.js";
@@ -31,7 +31,7 @@ var Paper_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/Perspective.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/Perspective/index.js";
@@ -34,7 +34,7 @@ var Perspective_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/Pixelate.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/Pixelate/index.js";
@@ -30,7 +30,7 @@ var Pixelate_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/Plasma.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/Plasma/index.js";
@@ -36,7 +36,7 @@ var Plasma_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/PolarCoordinates.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/PolarCoordinates/index.js";
@@ -32,7 +32,7 @@ var PolarCoordinates_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/Polygon.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/Polygon/index.js";
@@ -38,7 +38,7 @@ var Polygon_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/Posterize.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/Posterize/index.js";
@@ -28,7 +28,7 @@ var Posterize_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/ProgressiveBlur.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/ProgressiveBlur/index.js";
@@ -31,7 +31,7 @@ var ProgressiveBlur_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/RadialGradient.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/RadialGradient/index.js";
@@ -32,7 +32,7 @@ var RadialGradient_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/RectangularCoordinates.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/RectangularCoordinates/index.js";
@@ -31,7 +31,7 @@ var RectangularCoordinates_vue_vue_type_script_setup_true_lang_default = /* @__P
 			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/Ring.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/Ring/index.js";
@@ -36,7 +36,7 @@ var Ring_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/Ripples.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/Ripples/index.js";
@@ -35,7 +35,7 @@ var Ripples_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/RoundedRect.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/RoundedRect/index.js";
@@ -38,7 +38,7 @@ var RoundedRect_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/Saturation.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/Saturation/index.js";
@@ -28,7 +28,7 @@ var Saturation_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/Shader.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, watch } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, useId, watch } from "vue";
 import { shaderRenderer } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { vec4 } from "three/tsl";
@@ -27,7 +27,7 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		provide("shaderColorSpace", computed(() => props.colorSpace));
 		const containerRef = ref(null);
 		const canvasRef = ref(null);
-		const rootId = ref("shader-root-" + Math.random().toString(36).substring(7));
+		const rootId = ref("shader-root-" + useId().replace(/[^a-zA-Z0-9_]/g, ""));
 		const rendererInstance = shallowRef(shaderRenderer());
 		rendererInstance.value.setOnReady(() => emit("ready"));
 		const rendererResetSignal = ref(0);
@@ -60,7 +60,7 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		const startTelemetryWhenReady = () => {
 			const checkRendering = () => {
 				if (rendererInstance.value.getPerformanceStats().fps > 0) {
-					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.84", props.disableTelemetry, props.isPreview);
+					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.85", props.disableTelemetry, props.isPreview);
 					if (telemetryCollector) telemetryCollector.start();
 					telemetryStartTimeout = null;
 				} else telemetryStartTimeout = setTimeout(checkRendering, 500);

package/dist/vue/Sharpness.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/Sharpness/index.js";
@@ -28,7 +28,7 @@ var Sharpness_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/Shatter.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/Shatter/index.js";
@@ -36,7 +36,7 @@ var Shatter_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/SimplexNoise.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/SimplexNoise/index.js";
@@ -34,7 +34,7 @@ var SimplexNoise_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/SineWave.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/SineWave/index.js";
@@ -35,7 +35,7 @@ var SineWave_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/SolidColor.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/SolidColor/index.js";
@@ -28,7 +28,7 @@ var SolidColor_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/Spherize.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/Spherize/index.js";
@@ -34,7 +34,7 @@ var Spherize_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/Spiral.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/Spiral/index.js";
@@ -36,7 +36,7 @@ var Spiral_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/Star.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/Star/index.js";
@@ -38,7 +38,7 @@ var Star_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,