shaders 2.5.101 → 2.5.102

package/dist/svelte/index.js

@@ -1,4 +1,4 @@
-import { n as generatePresetCode } from "./generatePresetCode-Cdho2JhN.js";
+import { n as generatePresetCode } from "./generatePresetCode-BygAdFRo.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { getContext, onDestroy, onMount, setContext } from "svelte";
@@ -98,19 +98,20 @@ import { componentDefinition as componentDefinition$90 } from "../core/shaders/T
 import { componentDefinition as componentDefinition$91 } from "../core/shaders/Tritone/index.js";
 import { componentDefinition as componentDefinition$92 } from "../core/shaders/Truchet/index.js";
 import { componentDefinition as componentDefinition$93 } from "../core/shaders/Twirl/index.js";
-import { componentDefinition as componentDefinition$94 } from "../core/shaders/Vesica/index.js";
-import { componentDefinition as componentDefinition$95 } from "../core/shaders/Vibrance/index.js";
-import { componentDefinition as componentDefinition$96 } from "../core/shaders/VideoTexture/index.js";
-import { componentDefinition as componentDefinition$97 } from "../core/shaders/Vignette/index.js";
-import { componentDefinition as componentDefinition$98 } from "../core/shaders/Voronoi/index.js";
-import { componentDefinition as componentDefinition$99 } from "../core/shaders/WaveDistortion/index.js";
-import { componentDefinition as componentDefinition$100 } from "../core/shaders/Weave/index.js";
-import { componentDefinition as componentDefinition$101 } from "../core/shaders/WebcamTexture/index.js";
-import { componentDefinition as componentDefinition$102 } from "../core/shaders/ZoomBlur/index.js";
+import { componentDefinition as componentDefinition$94 } from "../core/shaders/VHS/index.js";
+import { componentDefinition as componentDefinition$95 } from "../core/shaders/Vesica/index.js";
+import { componentDefinition as componentDefinition$96 } from "../core/shaders/Vibrance/index.js";
+import { componentDefinition as componentDefinition$97 } from "../core/shaders/VideoTexture/index.js";
+import { componentDefinition as componentDefinition$98 } from "../core/shaders/Vignette/index.js";
+import { componentDefinition as componentDefinition$99 } from "../core/shaders/Voronoi/index.js";
+import { componentDefinition as componentDefinition$100 } from "../core/shaders/WaveDistortion/index.js";
+import { componentDefinition as componentDefinition$101 } from "../core/shaders/Weave/index.js";
+import { componentDefinition as componentDefinition$102 } from "../core/shaders/WebcamTexture/index.js";
+import { componentDefinition as componentDefinition$103 } from "../core/shaders/ZoomBlur/index.js";
 import { vec4 } from "three/tsl";
 import { isExternalUser, startTelemetry } from "../core/telemetry/index.js";
-var root_2$102 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$103 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$103 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$104 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function AngularBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -275,7 +276,7 @@ function AngularBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$103();
+	var fragment = root$104();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -288,7 +289,7 @@ function AngularBlur($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$102();
+		var canvas = root_2$103();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -307,8 +308,8 @@ function AngularBlur($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$101 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$102 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$102 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$103 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Ascii($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -473,7 +474,7 @@ function Ascii($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$102();
+	var fragment = root$103();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -486,7 +487,7 @@ function Ascii($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$101();
+		var canvas = root_2$102();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -505,8 +506,8 @@ function Ascii($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$100 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$101 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$101 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$102 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Aurora($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -671,7 +672,7 @@ function Aurora($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$101();
+	var fragment = root$102();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -684,7 +685,7 @@ function Aurora($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$100();
+		var canvas = root_2$101();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -703,8 +704,8 @@ function Aurora($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$99 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$100 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$100 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$101 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Beam($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -869,7 +870,7 @@ function Beam($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$100();
+	var fragment = root$101();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -882,7 +883,7 @@ function Beam($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$99();
+		var canvas = root_2$100();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -901,8 +902,8 @@ function Beam($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$98 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$99 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$99 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$100 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Blob($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1067,7 +1068,7 @@ function Blob($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$99();
+	var fragment = root$100();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1080,7 +1081,7 @@ function Blob($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$98();
+		var canvas = root_2$99();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1099,8 +1100,8 @@ function Blob($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$97 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$98 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$98 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$99 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Blur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1265,7 +1266,7 @@ function Blur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$98();
+	var fragment = root$99();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1278,7 +1279,7 @@ function Blur($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$97();
+		var canvas = root_2$98();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1297,8 +1298,8 @@ function Blur($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$96 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$97 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$97 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$98 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function BrightnessContrast($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1463,7 +1464,7 @@ function BrightnessContrast($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$97();
+	var fragment = root$98();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1476,7 +1477,7 @@ function BrightnessContrast($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$96();
+		var canvas = root_2$97();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1495,8 +1496,8 @@ function BrightnessContrast($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$95 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$96 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$96 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$97 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Bulge($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1661,7 +1662,7 @@ function Bulge($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$96();
+	var fragment = root$97();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1674,7 +1675,7 @@ function Bulge($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$95();
+		var canvas = root_2$96();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1693,8 +1694,8 @@ function Bulge($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$94 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$95 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$95 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$96 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function CRTScreen($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1859,7 +1860,7 @@ function CRTScreen($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$95();
+	var fragment = root$96();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1872,7 +1873,7 @@ function CRTScreen($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$94();
+		var canvas = root_2$95();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1891,8 +1892,8 @@ function CRTScreen($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$93 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$94 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$94 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$95 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function ChannelBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2057,7 +2058,7 @@ function ChannelBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$94();
+	var fragment = root$95();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2070,7 +2071,7 @@ function ChannelBlur($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$93();
+		var canvas = root_2$94();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2089,8 +2090,8 @@ function ChannelBlur($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$92 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$93 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$93 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$94 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Checkerboard($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2255,7 +2256,7 @@ function Checkerboard($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$93();
+	var fragment = root$94();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2268,7 +2269,7 @@ function Checkerboard($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$92();
+		var canvas = root_2$93();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2287,8 +2288,8 @@ function Checkerboard($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$91 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$92 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$92 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$93 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function ChromaFlow($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2453,7 +2454,7 @@ function ChromaFlow($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$92();
+	var fragment = root$93();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2466,7 +2467,7 @@ function ChromaFlow($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$91();
+		var canvas = root_2$92();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2485,8 +2486,8 @@ function ChromaFlow($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$90 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$91 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$91 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$92 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function ChromaticAberration($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2651,7 +2652,7 @@ function ChromaticAberration($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$91();
+	var fragment = root$92();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2664,7 +2665,7 @@ function ChromaticAberration($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$90();
+		var canvas = root_2$91();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2683,8 +2684,8 @@ function ChromaticAberration($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$89 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$90 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$90 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$91 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Circle($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2849,7 +2850,7 @@ function Circle($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$90();
+	var fragment = root$91();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2862,7 +2863,7 @@ function Circle($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$89();
+		var canvas = root_2$90();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2881,8 +2882,8 @@ function Circle($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$88 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$89 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$89 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$90 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function ConcentricSpin($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3047,7 +3048,7 @@ function ConcentricSpin($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$89();
+	var fragment = root$90();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3060,7 +3061,7 @@ function ConcentricSpin($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$88();
+		var canvas = root_2$89();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3079,8 +3080,8 @@ function ConcentricSpin($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$87 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$88 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$88 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$89 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function ConicGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3245,7 +3246,7 @@ function ConicGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$88();
+	var fragment = root$89();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3258,7 +3259,7 @@ function ConicGradient($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$87();
+		var canvas = root_2$88();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3277,8 +3278,8 @@ function ConicGradient($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$86 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$87 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$87 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$88 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function ContourLines($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3443,7 +3444,7 @@ function ContourLines($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$87();
+	var fragment = root$88();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3456,7 +3457,7 @@ function ContourLines($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$86();
+		var canvas = root_2$87();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3475,8 +3476,8 @@ function ContourLines($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$85 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$86 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$86 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$87 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Crescent($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3641,7 +3642,7 @@ function Crescent($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$86();
+	var fragment = root$87();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3654,7 +3655,7 @@ function Crescent($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$85();
+		var canvas = root_2$86();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3673,8 +3674,8 @@ function Crescent($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$84 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$85 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$85 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$86 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Cross($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3839,7 +3840,7 @@ function Cross($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$85();
+	var fragment = root$86();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3852,7 +3853,7 @@ function Cross($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$84();
+		var canvas = root_2$85();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3871,8 +3872,8 @@ function Cross($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$83 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$84 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$84 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$85 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Crystal($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4037,7 +4038,7 @@ function Crystal($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$84();
+	var fragment = root$85();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4050,7 +4051,7 @@ function Crystal($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$83();
+		var canvas = root_2$84();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4069,8 +4070,8 @@ function Crystal($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$82 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$83 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$83 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$84 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function CursorRipples($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4235,7 +4236,7 @@ function CursorRipples($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$83();
+	var fragment = root$84();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4248,7 +4249,7 @@ function CursorRipples($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$82();
+		var canvas = root_2$83();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4267,8 +4268,8 @@ function CursorRipples($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$81 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$82 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$82 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$83 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function CursorTrail($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4433,7 +4434,7 @@ function CursorTrail($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$82();
+	var fragment = root$83();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4446,7 +4447,7 @@ function CursorTrail($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$81();
+		var canvas = root_2$82();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4465,8 +4466,8 @@ function CursorTrail($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$80 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$81 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$81 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$82 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function DOMTexture($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4631,7 +4632,7 @@ function DOMTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$81();
+	var fragment = root$82();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4644,7 +4645,7 @@ function DOMTexture($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$80();
+		var canvas = root_2$81();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4663,8 +4664,8 @@ function DOMTexture($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$79 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$80 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$80 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$81 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function DiamondGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4829,7 +4830,7 @@ function DiamondGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$80();
+	var fragment = root$81();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4842,7 +4843,7 @@ function DiamondGradient($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$79();
+		var canvas = root_2$80();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4861,8 +4862,8 @@ function DiamondGradient($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$78 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$79 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$79 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$80 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function DiffuseBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5027,7 +5028,7 @@ function DiffuseBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$79();
+	var fragment = root$80();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5040,7 +5041,7 @@ function DiffuseBlur($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$78();
+		var canvas = root_2$79();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5059,8 +5060,8 @@ function DiffuseBlur($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$77 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$78 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$78 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$79 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Dither($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5225,7 +5226,7 @@ function Dither($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$78();
+	var fragment = root$79();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5238,7 +5239,7 @@ function Dither($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$77();
+		var canvas = root_2$78();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5257,8 +5258,8 @@ function Dither($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$76 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$77 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$77 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$78 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function DotGrid($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5423,7 +5424,7 @@ function DotGrid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$77();
+	var fragment = root$78();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5436,7 +5437,7 @@ function DotGrid($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$76();
+		var canvas = root_2$77();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5455,8 +5456,8 @@ function DotGrid($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$75 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$76 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$76 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$77 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function DropShadow($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5621,7 +5622,7 @@ function DropShadow($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$76();
+	var fragment = root$77();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5634,7 +5635,7 @@ function DropShadow($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$75();
+		var canvas = root_2$76();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5653,8 +5654,8 @@ function DropShadow($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$74 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$75 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$75 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$76 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Duotone($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5819,7 +5820,7 @@ function Duotone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$75();
+	var fragment = root$76();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5832,7 +5833,7 @@ function Duotone($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$74();
+		var canvas = root_2$75();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5851,8 +5852,8 @@ function Duotone($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$73 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$74 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$74 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$75 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Ellipse($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6017,7 +6018,7 @@ function Ellipse($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$74();
+	var fragment = root$75();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6030,7 +6031,7 @@ function Ellipse($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$73();
+		var canvas = root_2$74();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6049,8 +6050,8 @@ function Ellipse($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$72 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$73 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$73 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$74 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Emboss($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6215,7 +6216,7 @@ function Emboss($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$73();
+	var fragment = root$74();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6228,7 +6229,7 @@ function Emboss($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$72();
+		var canvas = root_2$73();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6247,8 +6248,8 @@ function Emboss($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$71 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$72 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$72 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$73 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function FallingLines($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6413,7 +6414,7 @@ function FallingLines($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$72();
+	var fragment = root$73();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6426,7 +6427,7 @@ function FallingLines($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$71();
+		var canvas = root_2$72();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6445,8 +6446,8 @@ function FallingLines($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$70 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$71 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$71 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$72 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function FilmGrain($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6611,7 +6612,7 @@ function FilmGrain($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$71();
+	var fragment = root$72();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6624,7 +6625,7 @@ function FilmGrain($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$70();
+		var canvas = root_2$71();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6643,8 +6644,8 @@ function FilmGrain($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$69 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$70 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$70 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$71 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function FloatingParticles($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6809,7 +6810,7 @@ function FloatingParticles($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$70();
+	var fragment = root$71();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6822,7 +6823,7 @@ function FloatingParticles($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$69();
+		var canvas = root_2$70();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6841,8 +6842,8 @@ function FloatingParticles($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$68 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$69 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$69 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$70 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function FlowField($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7007,7 +7008,7 @@ function FlowField($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$69();
+	var fragment = root$70();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7020,7 +7021,7 @@ function FlowField($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$68();
+		var canvas = root_2$69();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7039,8 +7040,8 @@ function FlowField($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$67 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$68 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$68 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$69 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Flower($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7205,7 +7206,7 @@ function Flower($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$68();
+	var fragment = root$69();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7218,7 +7219,7 @@ function Flower($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$67();
+		var canvas = root_2$68();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7237,8 +7238,8 @@ function Flower($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$66 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$67 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$67 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$68 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function FlowingGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7403,7 +7404,7 @@ function FlowingGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$67();
+	var fragment = root$68();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7416,7 +7417,7 @@ function FlowingGradient($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$66();
+		var canvas = root_2$67();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7435,8 +7436,8 @@ function FlowingGradient($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$65 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$66 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$66 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$67 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Form3D($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7601,7 +7602,7 @@ function Form3D($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$66();
+	var fragment = root$67();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7614,7 +7615,7 @@ function Form3D($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$65();
+		var canvas = root_2$66();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7633,8 +7634,8 @@ function Form3D($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$64 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$65 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$65 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$66 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Glass($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7799,7 +7800,7 @@ function Glass($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$65();
+	var fragment = root$66();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7812,7 +7813,7 @@ function Glass($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$64();
+		var canvas = root_2$65();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7831,8 +7832,8 @@ function Glass($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$63 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$64 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$64 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$65 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function GlassTiles($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7997,7 +7998,7 @@ function GlassTiles($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$64();
+	var fragment = root$65();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8010,7 +8011,7 @@ function GlassTiles($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$63();
+		var canvas = root_2$64();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8029,8 +8030,8 @@ function GlassTiles($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$62 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$63 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$63 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$64 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Glitch($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -8195,7 +8196,7 @@ function Glitch($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$63();
+	var fragment = root$64();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8208,7 +8209,7 @@ function Glitch($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$62();
+		var canvas = root_2$63();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8227,8 +8228,8 @@ function Glitch($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$61 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$62 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$62 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$63 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Glow($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -8393,7 +8394,7 @@ function Glow($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$62();
+	var fragment = root$63();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8406,7 +8407,7 @@ function Glow($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$61();
+		var canvas = root_2$62();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8425,8 +8426,8 @@ function Glow($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$60 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$61 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$61 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$62 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Godrays($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -8591,7 +8592,7 @@ function Godrays($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$61();
+	var fragment = root$62();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8604,7 +8605,7 @@ function Godrays($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$60();
+		var canvas = root_2$61();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8623,8 +8624,8 @@ function Godrays($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$59 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$60 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$60 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$61 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Grayscale($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -8789,7 +8790,7 @@ function Grayscale($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$60();
+	var fragment = root$61();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8802,7 +8803,7 @@ function Grayscale($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$59();
+		var canvas = root_2$60();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8821,8 +8822,8 @@ function Grayscale($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$58 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$59 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$59 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$60 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Grid($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -8987,7 +8988,7 @@ function Grid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$59();
+	var fragment = root$60();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9000,7 +9001,7 @@ function Grid($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$58();
+		var canvas = root_2$59();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9019,8 +9020,8 @@ function Grid($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$57 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$58 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$58 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$59 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function GridDistortion($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -9185,7 +9186,7 @@ function GridDistortion($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$58();
+	var fragment = root$59();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9198,7 +9199,7 @@ function GridDistortion($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$57();
+		var canvas = root_2$58();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9217,8 +9218,8 @@ function GridDistortion($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$56 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$57 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$57 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$58 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Group($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -9383,7 +9384,7 @@ function Group($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$57();
+	var fragment = root$58();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9396,7 +9397,7 @@ function Group($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$56();
+		var canvas = root_2$57();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9415,8 +9416,8 @@ function Group($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$55 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$56 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$56 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$57 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Halftone($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -9581,7 +9582,7 @@ function Halftone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$56();
+	var fragment = root$57();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9594,7 +9595,7 @@ function Halftone($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$55();
+		var canvas = root_2$56();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9613,8 +9614,8 @@ function Halftone($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$54 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$55 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$55 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$56 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function HexGrid($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -9779,7 +9780,7 @@ function HexGrid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$55();
+	var fragment = root$56();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9792,7 +9793,7 @@ function HexGrid($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$54();
+		var canvas = root_2$55();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9811,8 +9812,8 @@ function HexGrid($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$53 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$54 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$54 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$55 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function HueShift($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -9977,7 +9978,7 @@ function HueShift($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$54();
+	var fragment = root$55();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9990,7 +9991,7 @@ function HueShift($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$53();
+		var canvas = root_2$54();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10009,8 +10010,8 @@ function HueShift($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$52 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$53 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$53 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$54 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function ImageTexture($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -10175,7 +10176,7 @@ function ImageTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$53();
+	var fragment = root$54();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10188,7 +10189,7 @@ function ImageTexture($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$52();
+		var canvas = root_2$53();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10207,8 +10208,8 @@ function ImageTexture($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$51 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$52 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$52 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$53 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Invert($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -10373,7 +10374,7 @@ function Invert($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$52();
+	var fragment = root$53();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10386,7 +10387,7 @@ function Invert($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$51();
+		var canvas = root_2$52();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10405,8 +10406,8 @@ function Invert($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$50 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$51 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$51 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$52 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Kaleidoscope($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -10571,7 +10572,7 @@ function Kaleidoscope($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$51();
+	var fragment = root$52();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10584,7 +10585,7 @@ function Kaleidoscope($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$50();
+		var canvas = root_2$51();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10603,8 +10604,8 @@ function Kaleidoscope($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$49 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$50 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$50 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$51 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function LensFlare($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -10769,7 +10770,7 @@ function LensFlare($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$50();
+	var fragment = root$51();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10782,7 +10783,7 @@ function LensFlare($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$49();
+		var canvas = root_2$50();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10801,8 +10802,8 @@ function LensFlare($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$48 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$49 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$49 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$50 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function LinearBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -10967,7 +10968,7 @@ function LinearBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$49();
+	var fragment = root$50();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10980,7 +10981,7 @@ function LinearBlur($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$48();
+		var canvas = root_2$49();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10999,8 +11000,8 @@ function LinearBlur($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$47 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$48 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$48 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$49 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function LinearGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -11165,7 +11166,7 @@ function LinearGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$48();
+	var fragment = root$49();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11178,7 +11179,7 @@ function LinearGradient($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$47();
+		var canvas = root_2$48();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11197,8 +11198,8 @@ function LinearGradient($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$46 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$47 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$47 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$48 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Liquify($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -11363,7 +11364,7 @@ function Liquify($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$47();
+	var fragment = root$48();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11376,7 +11377,7 @@ function Liquify($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$46();
+		var canvas = root_2$47();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11395,8 +11396,8 @@ function Liquify($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$45 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$46 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$46 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$47 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Mirror($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -11561,7 +11562,7 @@ function Mirror($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$46();
+	var fragment = root$47();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11574,7 +11575,7 @@ function Mirror($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$45();
+		var canvas = root_2$46();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11593,8 +11594,8 @@ function Mirror($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$44 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$45 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$45 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$46 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function MultiPointGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -11759,7 +11760,7 @@ function MultiPointGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$45();
+	var fragment = root$46();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11772,7 +11773,7 @@ function MultiPointGradient($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$44();
+		var canvas = root_2$45();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11791,8 +11792,8 @@ function MultiPointGradient($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$43 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$44 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$44 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$45 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Neon($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -11957,7 +11958,7 @@ function Neon($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$44();
+	var fragment = root$45();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11970,7 +11971,7 @@ function Neon($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$43();
+		var canvas = root_2$44();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11989,8 +11990,8 @@ function Neon($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$42 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$43 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$43 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$44 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Paper($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -12155,7 +12156,7 @@ function Paper($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$43();
+	var fragment = root$44();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12168,7 +12169,7 @@ function Paper($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$42();
+		var canvas = root_2$43();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12187,8 +12188,8 @@ function Paper($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$41 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$42 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$42 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$43 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Perspective($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -12353,7 +12354,7 @@ function Perspective($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$42();
+	var fragment = root$43();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12366,7 +12367,7 @@ function Perspective($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$41();
+		var canvas = root_2$42();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12385,8 +12386,8 @@ function Perspective($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$40 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$41 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$41 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$42 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Pixelate($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -12551,7 +12552,7 @@ function Pixelate($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$41();
+	var fragment = root$42();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12564,7 +12565,7 @@ function Pixelate($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$40();
+		var canvas = root_2$41();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12583,8 +12584,8 @@ function Pixelate($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$39 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$40 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$40 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$41 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Plasma($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -12749,7 +12750,7 @@ function Plasma($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$40();
+	var fragment = root$41();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12762,7 +12763,7 @@ function Plasma($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$39();
+		var canvas = root_2$40();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12781,8 +12782,8 @@ function Plasma($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$38 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$39 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$39 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$40 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function PolarCoordinates($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -12947,7 +12948,7 @@ function PolarCoordinates($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$39();
+	var fragment = root$40();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12960,7 +12961,7 @@ function PolarCoordinates($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$38();
+		var canvas = root_2$39();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12979,8 +12980,8 @@ function PolarCoordinates($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$37 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$38 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$38 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$39 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Polygon($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -13145,7 +13146,7 @@ function Polygon($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$38();
+	var fragment = root$39();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13158,7 +13159,7 @@ function Polygon($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$37();
+		var canvas = root_2$38();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13177,8 +13178,8 @@ function Polygon($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$36 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$37 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$37 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$38 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Posterize($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -13343,7 +13344,7 @@ function Posterize($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$37();
+	var fragment = root$38();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13356,7 +13357,7 @@ function Posterize($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$36();
+		var canvas = root_2$37();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13375,8 +13376,8 @@ function Posterize($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$35 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$36 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$36 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$37 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function ProgressiveBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -13541,7 +13542,7 @@ function ProgressiveBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$36();
+	var fragment = root$37();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13554,7 +13555,7 @@ function ProgressiveBlur($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$35();
+		var canvas = root_2$36();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13573,8 +13574,8 @@ function ProgressiveBlur($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$34 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$35 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$35 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$36 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function RadialGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -13739,7 +13740,7 @@ function RadialGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$35();
+	var fragment = root$36();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13752,7 +13753,7 @@ function RadialGradient($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$34();
+		var canvas = root_2$35();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13771,8 +13772,8 @@ function RadialGradient($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$33 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$34 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$34 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$35 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function RectangularCoordinates($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -13937,7 +13938,7 @@ function RectangularCoordinates($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$34();
+	var fragment = root$35();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13950,7 +13951,7 @@ function RectangularCoordinates($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$33();
+		var canvas = root_2$34();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13969,8 +13970,8 @@ function RectangularCoordinates($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$32 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$33 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$33 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$34 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Ring($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -14135,7 +14136,7 @@ function Ring($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$33();
+	var fragment = root$34();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14148,7 +14149,7 @@ function Ring($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$32();
+		var canvas = root_2$33();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14167,8 +14168,8 @@ function Ring($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$31 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$32 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$32 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$33 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Ripples($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -14333,7 +14334,7 @@ function Ripples($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$32();
+	var fragment = root$33();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14346,7 +14347,7 @@ function Ripples($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$31();
+		var canvas = root_2$32();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14365,8 +14366,8 @@ function Ripples($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$30 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$31 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$31 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$32 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function RoundedRect($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -14531,7 +14532,7 @@ function RoundedRect($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$31();
+	var fragment = root$32();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14544,7 +14545,7 @@ function RoundedRect($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$30();
+		var canvas = root_2$31();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14563,8 +14564,8 @@ function RoundedRect($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$29 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$30 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$30 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$31 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Saturation($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -14729,7 +14730,7 @@ function Saturation($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$30();
+	var fragment = root$31();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14742,7 +14743,7 @@ function Saturation($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$29();
+		var canvas = root_2$30();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14761,8 +14762,8 @@ function Saturation($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$28 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$29 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$29 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$30 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Sharpness($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -14927,7 +14928,7 @@ function Sharpness($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$29();
+	var fragment = root$30();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14940,7 +14941,7 @@ function Sharpness($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$28();
+		var canvas = root_2$29();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14959,8 +14960,8 @@ function Sharpness($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$27 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$28 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$28 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$29 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Shatter($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -15125,7 +15126,7 @@ function Shatter($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$28();
+	var fragment = root$29();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15138,7 +15139,7 @@ function Shatter($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$27();
+		var canvas = root_2$28();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15157,8 +15158,8 @@ function Shatter($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$26 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$27 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$27 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$28 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function SimplexNoise($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -15323,7 +15324,7 @@ function SimplexNoise($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$27();
+	var fragment = root$28();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15336,7 +15337,7 @@ function SimplexNoise($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$26();
+		var canvas = root_2$27();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15355,8 +15356,8 @@ function SimplexNoise($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$25 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$26 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$26 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$27 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function SineWave($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -15521,7 +15522,7 @@ function SineWave($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$26();
+	var fragment = root$27();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15534,7 +15535,7 @@ function SineWave($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$25();
+		var canvas = root_2$26();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15553,8 +15554,8 @@ function SineWave($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$24 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$25 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$25 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$26 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Solarize($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -15719,7 +15720,7 @@ function Solarize($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$25();
+	var fragment = root$26();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15732,7 +15733,7 @@ function Solarize($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$24();
+		var canvas = root_2$25();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15751,8 +15752,8 @@ function Solarize($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$23 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$24 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$24 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$25 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function SolidColor($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -15917,7 +15918,7 @@ function SolidColor($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$24();
+	var fragment = root$25();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15930,7 +15931,7 @@ function SolidColor($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$23();
+		var canvas = root_2$24();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15949,8 +15950,8 @@ function SolidColor($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$22 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$23 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$23 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$24 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Spherize($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -16115,7 +16116,7 @@ function Spherize($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$23();
+	var fragment = root$24();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16128,7 +16129,7 @@ function Spherize($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$22();
+		var canvas = root_2$23();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16147,8 +16148,8 @@ function Spherize($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$21 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$22 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$22 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$23 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Spiral($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -16313,7 +16314,7 @@ function Spiral($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$22();
+	var fragment = root$23();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16326,7 +16327,7 @@ function Spiral($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$21();
+		var canvas = root_2$22();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16345,8 +16346,8 @@ function Spiral($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$20 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$21 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$21 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$22 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Star($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -16511,7 +16512,7 @@ function Star($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$21();
+	var fragment = root$22();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16524,7 +16525,7 @@ function Star($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$20();
+		var canvas = root_2$21();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16543,8 +16544,8 @@ function Star($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$19 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$20 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$20 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$21 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Strands($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -16709,7 +16710,7 @@ function Strands($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$20();
+	var fragment = root$21();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16722,7 +16723,7 @@ function Strands($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$19();
+		var canvas = root_2$20();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16741,8 +16742,8 @@ function Strands($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$18 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$19 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$19 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$20 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Stretch($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -16907,7 +16908,7 @@ function Stretch($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$19();
+	var fragment = root$20();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16920,7 +16921,7 @@ function Stretch($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$18();
+		var canvas = root_2$19();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16939,8 +16940,8 @@ function Stretch($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$17 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$18 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$18 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$19 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Stripes($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -17105,7 +17106,7 @@ function Stripes($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$18();
+	var fragment = root$19();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17118,7 +17119,7 @@ function Stripes($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$17();
+		var canvas = root_2$18();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17137,8 +17138,8 @@ function Stripes($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$16 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$17 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$17 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$18 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function StudioBackground($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -17303,7 +17304,7 @@ function StudioBackground($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$17();
+	var fragment = root$18();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17316,7 +17317,7 @@ function StudioBackground($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$16();
+		var canvas = root_2$17();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17335,8 +17336,8 @@ function StudioBackground($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$15 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$16 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$16 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$17 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Swirl($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -17501,7 +17502,7 @@ function Swirl($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$16();
+	var fragment = root$17();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17514,7 +17515,7 @@ function Swirl($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$15();
+		var canvas = root_2$16();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17533,8 +17534,8 @@ function Swirl($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$14 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$15 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$15 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$16 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function TiltShift($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -17699,7 +17700,7 @@ function TiltShift($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$15();
+	var fragment = root$16();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17712,7 +17713,7 @@ function TiltShift($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$14();
+		var canvas = root_2$15();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17731,8 +17732,8 @@ function TiltShift($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$13 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$14 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$14 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$15 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Tint($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -17897,7 +17898,7 @@ function Tint($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$14();
+	var fragment = root$15();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17910,7 +17911,7 @@ function Tint($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$13();
+		var canvas = root_2$14();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17929,8 +17930,8 @@ function Tint($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$12 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$13 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$13 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$14 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Trapezoid($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -18095,7 +18096,7 @@ function Trapezoid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$13();
+	var fragment = root$14();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18108,7 +18109,7 @@ function Trapezoid($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$12();
+		var canvas = root_2$13();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18127,8 +18128,8 @@ function Trapezoid($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$11 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$12 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$12 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$13 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Tritone($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -18293,7 +18294,7 @@ function Tritone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$12();
+	var fragment = root$13();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18306,7 +18307,7 @@ function Tritone($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$11();
+		var canvas = root_2$12();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18325,8 +18326,8 @@ function Tritone($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$10 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$11 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$11 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$12 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Truchet($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -18491,7 +18492,7 @@ function Truchet($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$11();
+	var fragment = root$12();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18504,7 +18505,7 @@ function Truchet($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$10();
+		var canvas = root_2$11();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18523,8 +18524,8 @@ function Truchet($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$9 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$10 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+var root_2$10 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$11 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Twirl($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -18689,7 +18690,7 @@ function Twirl($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$10();
+	var fragment = root$11();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18702,7 +18703,7 @@ function Twirl($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$9();
+		var canvas = root_2$10();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18721,9 +18722,9 @@ function Twirl($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$8 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$9 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function Vesica($$anchor, $$props) {
+var root_2$9 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$10 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function VHS($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$94.experimental && !_experimentalWarnedOnce) {
@@ -18887,7 +18888,7 @@ function Vesica($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$9();
+	var fragment = root$10();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18900,7 +18901,7 @@ function Vesica($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$8();
+		var canvas = root_2$9();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18919,9 +18920,9 @@ function Vesica($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$7 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$8 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function Vibrance($$anchor, $$props) {
+var root_2$8 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$9 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function Vesica($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$95.experimental && !_experimentalWarnedOnce) {
@@ -19085,7 +19086,7 @@ function Vibrance($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$8();
+	var fragment = root$9();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19098,7 +19099,7 @@ function Vibrance($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$7();
+		var canvas = root_2$8();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19117,9 +19118,9 @@ function Vibrance($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$6 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$7 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function VideoTexture($$anchor, $$props) {
+var root_2$7 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$8 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function Vibrance($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$96.experimental && !_experimentalWarnedOnce) {
@@ -19283,7 +19284,7 @@ function VideoTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$7();
+	var fragment = root$8();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19296,7 +19297,7 @@ function VideoTexture($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$6();
+		var canvas = root_2$7();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19315,9 +19316,9 @@ function VideoTexture($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$5 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$6 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function Vignette($$anchor, $$props) {
+var root_2$6 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$7 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function VideoTexture($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$97.experimental && !_experimentalWarnedOnce) {
@@ -19481,7 +19482,7 @@ function Vignette($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$6();
+	var fragment = root$7();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19494,7 +19495,7 @@ function Vignette($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$5();
+		var canvas = root_2$6();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19513,9 +19514,9 @@ function Vignette($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$4 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$5 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function Voronoi($$anchor, $$props) {
+var root_2$5 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$6 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function Vignette($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$98.experimental && !_experimentalWarnedOnce) {
@@ -19679,7 +19680,7 @@ function Voronoi($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$5();
+	var fragment = root$6();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19692,7 +19693,7 @@ function Voronoi($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$4();
+		var canvas = root_2$5();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19711,9 +19712,9 @@ function Voronoi($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$3 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$4 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function WaveDistortion($$anchor, $$props) {
+var root_2$4 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$5 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function Voronoi($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$99.experimental && !_experimentalWarnedOnce) {
@@ -19877,7 +19878,7 @@ function WaveDistortion($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$4();
+	var fragment = root$5();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19890,7 +19891,7 @@ function WaveDistortion($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$3();
+		var canvas = root_2$4();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19909,9 +19910,9 @@ function WaveDistortion($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$2 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$3 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function Weave($$anchor, $$props) {
+var root_2$3 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$4 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function WaveDistortion($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$100.experimental && !_experimentalWarnedOnce) {
@@ -20075,7 +20076,7 @@ function Weave($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$3();
+	var fragment = root$4();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -20088,7 +20089,7 @@ function Weave($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$2();
+		var canvas = root_2$3();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -20107,9 +20108,9 @@ function Weave($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2$1 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$2 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function WebcamTexture($$anchor, $$props) {
+var root_2$2 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$3 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function Weave($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$101.experimental && !_experimentalWarnedOnce) {
@@ -20273,7 +20274,7 @@ function WebcamTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$2();
+	var fragment = root$3();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -20286,7 +20287,7 @@ function WebcamTexture($$anchor, $$props) {
 	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
 	var node_2 = $.sibling(span, 2);
 	var consequent_1 = ($$anchor$1) => {
-		var canvas = root_2$1();
+		var canvas = root_2$2();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -20305,9 +20306,9 @@ function WebcamTexture($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-var root_2 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
-var root$1 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
-function ZoomBlur($$anchor, $$props) {
+var root_2$1 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$2 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function WebcamTexture($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$102.experimental && !_experimentalWarnedOnce) {
@@ -20471,6 +20472,204 @@ function ZoomBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
+	var fragment = root$2();
+	var span = $.first_child(fragment);
+	var node_1 = $.child(span);
+	var consequent = ($$anchor$1) => {
+		children?.($$anchor$1);
+	};
+	$.if(node_1, ($$render) => {
+		if (!isCapturesDOM) $$render(consequent);
+	});
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	var node_2 = $.sibling(span, 2);
+	var consequent_1 = ($$anchor$1) => {
+		var canvas = root_2$1();
+		var node_3 = $.child(canvas);
+		children?.(node_3);
+		$.reset(canvas);
+		$.action(canvas, ($$node) => teleportToBody?.($$node));
+		$.bind_this(canvas, ($$value) => captureCanvas = $$value, () => captureCanvas);
+		$.template_effect(() => {
+			$.set_attribute(canvas, "width", $.get(captureW));
+			$.set_attribute(canvas, "height", $.get(captureH));
+		});
+		$.append($$anchor$1, canvas);
+	};
+	$.if(node_2, ($$render) => {
+		if (isCapturesDOM) $$render(consequent_1);
+	});
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, fragment);
+	$.pop();
+}
+var root_2 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$1 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
+function ZoomBlur($$anchor, $$props) {
+	$.push($$props, true);
+	let _experimentalWarnedOnce = false;
+	if (componentDefinition$103.experimental && !_experimentalWarnedOnce) {
+		_experimentalWarnedOnce = true;
+		const _e = componentDefinition$103.experimental;
+		console.info(`%c⚠ [Shaders] ${componentDefinition$103.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+	}
+	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 DEFAULT_TRANSFORM = {
+		offsetX: 0,
+		offsetY: 0,
+		rotation: 0,
+		scale: 1,
+		anchorX: .5,
+		anchorY: .5,
+		edges: "transparent"
+	};
+	const componentDefaults = {
+		blendMode: "normal",
+		visible: true,
+		...Object.entries(componentDefinition$103.props).reduce((acc, [key, config]) => {
+			acc[key] = config.default;
+			return acc;
+		}, {})
+	};
+	const props = $.rest_props($$props, [
+		"$$slots",
+		"$$events",
+		"$$legacy"
+	]);
+	const blendMode = $.derived(() => $$props.blendMode ?? componentDefaults.blendMode);
+	const opacity = $.derived(() => $$props.opacity);
+	const visible = $.derived(() => $$props.visible ?? componentDefaults.visible);
+	const id = $.derived(() => $$props.id);
+	const maskSource = $.derived(() => $$props.maskSource);
+	const maskType = $.derived(() => $$props.maskType);
+	const renderOrder = $.derived(() => $$props.renderOrder);
+	const { children } = props;
+	const mapsFromProps = $.derived(() => {
+		const maps = {};
+		for (const key of Object.keys(componentDefinition$103.props)) {
+			const val = props[key];
+			if (isPropDriver(val)) maps[key] = val;
+		}
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	});
+	const effectiveTransform = $.derived(() => ({
+		...DEFAULT_TRANSFORM,
+		...$$props.transform
+	}));
+	const parentId = getContext("shaderParentId");
+	if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+	const instanceId = ($.get(id) ? $.get(id).replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+	setContext("shaderParentId", instanceId);
+	const shaderReadyProps = $.derived(() => {
+		let baseProps = { ...componentDefaults };
+		for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform" && key !== "children") {
+			const propValue = props[key];
+			if (isPropDriver(propValue)) continue;
+			const defaultValue = componentDefaults[key];
+			if (propValue !== void 0 && propValue !== defaultValue) baseProps[key] = propValue;
+		}
+		return baseProps;
+	});
+	const shaderColorSpace = getContext("shaderColorSpace");
+	if (shaderColorSpace) setColorSpaceMode(shaderColorSpace());
+	const uniforms = createUniformsMap(componentDefinition$103, $.get(shaderReadyProps), instanceId);
+	const parentRegister = getContext("shaderNodeRegister");
+	if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+	const parentUniformUpdate = getContext("shaderUniformUpdate");
+	if (parentUniformUpdate === void 0) throw new Error("Shader components require shaderUniformUpdate from parent");
+	const parentMetadataUpdate = getContext("shaderMetadataUpdate");
+	if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
+	const isCapturesDOM = !!componentDefinition$103.capturesDOM;
+	let captureCanvas;
+	let captureW = $.state($.proxy(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0));
+	let captureH = $.state($.proxy(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0));
+	function teleportToBody(node) {
+		document.body.appendChild(node);
+		return { destroy() {
+			node.remove();
+		} };
+	}
+	if (isCapturesDOM) {
+		const onWinResize = () => {
+			const d = Math.min(window.devicePixelRatio, 2);
+			$.set(captureW, Math.round(window.innerWidth * d), true);
+			$.set(captureH, Math.round(window.innerHeight * d), true);
+		};
+		onMount(() => {
+			window.addEventListener("resize", onWinResize);
+		});
+		onDestroy(() => {
+			window.removeEventListener("resize", onWinResize);
+		});
+	}
+	let orderMarker;
+	let detectedRenderOrder = void 0;
+	let isRegistered = $.state(false);
+	Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
+		$.user_effect(() => {
+			if (!$.get(isRegistered)) return;
+			if (uniform && uniform.value !== void 0) {
+				const newValue = props[propName];
+				if (newValue !== void 0 && !isPropDriver(newValue)) parentUniformUpdate(instanceId, propName, newValue);
+			}
+		});
+	});
+	$.user_effect(() => {
+		if (!$.get(isRegistered)) return;
+		parentMetadataUpdate(instanceId, {
+			blendMode: $.get(blendMode),
+			opacity: $.get(opacity),
+			visible: $.get(visible) === false ? false : true,
+			id: $.get(id),
+			mask: $.get(maskSource) ? {
+				source: $.get(maskSource),
+				type: $.get(maskType) || "alpha"
+			} : void 0,
+			maps: $.get(mapsFromProps),
+			renderOrder: $.get(renderOrder) ?? detectedRenderOrder,
+			transform: $.get(effectiveTransform)
+		});
+	});
+	onMount(() => {
+		if (componentDefinition$103 && typeof componentDefinition$103.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$103.fragmentNode, parentId, {
+				blendMode: $.get(blendMode),
+				opacity: $.get(opacity),
+				visible: $.get(visible) !== false ? true : false,
+				id: $.get(id),
+				mask: $.get(maskSource) ? {
+					source: $.get(maskSource),
+					type: $.get(maskType) || "alpha"
+				} : void 0,
+				maps: $.get(mapsFromProps),
+				renderOrder: $.get(renderOrder) ?? detectedRenderOrder,
+				transform: $.get(effectiveTransform)
+			}, uniforms, componentDefinition$103, isCapturesDOM ? captureCanvas : void 0);
+			$.set(isRegistered, true);
+			if ($.get(renderOrder) === void 0 && orderMarker) {
+				const parent = orderMarker.parentElement;
+				if (parent) {
+					const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+					const position = Array.from(siblings).indexOf(orderMarker);
+					if (position >= 0) {
+						detectedRenderOrder = position;
+						parentMetadataUpdate(instanceId, { renderOrder: position });
+					}
+				}
+			}
+		} else console.error("componentDefinition.fragmentNode is not a function:", {
+			componentDefinition: componentDefinition$103,
+			fragmentNode: componentDefinition$103?.fragmentNode,
+			type: typeof componentDefinition$103?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
 	var fragment = root$1();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
@@ -20546,7 +20745,7 @@ function Shader($$anchor, $$props) {
 		const checkRendering = () => {
 			if (!rendererInstance) return;
 			if (rendererInstance.getPerformanceStats().fps > 0) {
-				telemetryCollector = startTelemetry(rendererInstance, "2.5.101", disableTelemetry(), isPreview());
+				telemetryCollector = startTelemetry(rendererInstance, "2.5.102", disableTelemetry(), isPreview());
 				if (telemetryCollector) telemetryCollector.start();
 				telemetryStartTimeout = null;
 			} else telemetryStartTimeout = window.setTimeout(checkRendering, 500);
@@ -20822,6 +21021,7 @@ function Preview($$anchor, $$props) {
 		Tritone,
 		Truchet,
 		Twirl,
+		VHS,
 		Vesica,
 		Vibrance,
 		VideoTexture,
@@ -20981,4 +21181,4 @@ function Preview($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-export { AngularBlur, Ascii, Aurora, Beam, Blob, Blur, BrightnessContrast, Bulge, CRTScreen, ChannelBlur, Checkerboard, ChromaFlow, ChromaticAberration, Circle, ConcentricSpin, ConicGradient, ContourLines, Crescent, Cross, Crystal, CursorRipples, CursorTrail, DOMTexture, DiamondGradient, DiffuseBlur, Dither, DotGrid, DropShadow, Duotone, Ellipse, Emboss, FallingLines, FilmGrain, FloatingParticles, FlowField, Flower, FlowingGradient, Form3D, Glass, GlassTiles, Glitch, Glow, Godrays, Grayscale, Grid, GridDistortion, Group, Halftone, HexGrid, HueShift, ImageTexture, Invert, Kaleidoscope, LensFlare, LinearBlur, LinearGradient, Liquify, Mirror, MultiPointGradient, Neon, Paper, Perspective, Pixelate, Plasma, PolarCoordinates, Polygon, Posterize, Preview, ProgressiveBlur, RadialGradient, RectangularCoordinates, Ring, Ripples, RoundedRect, Saturation, Shader, Sharpness, Shatter, SimplexNoise, SineWave, Solarize, SolidColor, Spherize, Spiral, Star, Strands, Stretch, Stripes, StudioBackground, Swirl, TiltShift, Tint, Trapezoid, Tritone, Truchet, Twirl, Vesica, Vibrance, VideoTexture, Vignette, Voronoi, WaveDistortion, Weave, WebcamTexture, ZoomBlur, generatePresetCode };
+export { AngularBlur, Ascii, Aurora, Beam, Blob, Blur, BrightnessContrast, Bulge, CRTScreen, ChannelBlur, Checkerboard, ChromaFlow, ChromaticAberration, Circle, ConcentricSpin, ConicGradient, ContourLines, Crescent, Cross, Crystal, CursorRipples, CursorTrail, DOMTexture, DiamondGradient, DiffuseBlur, Dither, DotGrid, DropShadow, Duotone, Ellipse, Emboss, FallingLines, FilmGrain, FloatingParticles, FlowField, Flower, FlowingGradient, Form3D, Glass, GlassTiles, Glitch, Glow, Godrays, Grayscale, Grid, GridDistortion, Group, Halftone, HexGrid, HueShift, ImageTexture, Invert, Kaleidoscope, LensFlare, LinearBlur, LinearGradient, Liquify, Mirror, MultiPointGradient, Neon, Paper, Perspective, Pixelate, Plasma, PolarCoordinates, Polygon, Posterize, Preview, ProgressiveBlur, RadialGradient, RectangularCoordinates, Ring, Ripples, RoundedRect, Saturation, Shader, Sharpness, Shatter, SimplexNoise, SineWave, Solarize, SolidColor, Spherize, Spiral, Star, Strands, Stretch, Stripes, StudioBackground, Swirl, TiltShift, Tint, Trapezoid, Tritone, Truchet, Twirl, VHS, Vesica, Vibrance, VideoTexture, Vignette, Voronoi, WaveDistortion, Weave, WebcamTexture, ZoomBlur, generatePresetCode };