shaders 2.5.103 → 2.5.104

package/dist/svelte/index.js

@@ -1,4 +1,4 @@
-import { n as generatePresetCode } from "./generatePresetCode-psTzYsW3.js";
+import { n as generatePresetCode } from "./generatePresetCode-DR_OAIL7.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { getContext, onDestroy, onMount, setContext } from "svelte";
@@ -41,77 +41,80 @@ import { componentDefinition as componentDefinition$33 } from "../core/shaders/F
 import { componentDefinition as componentDefinition$34 } from "../core/shaders/FlowField/index.js";
 import { componentDefinition as componentDefinition$35 } from "../core/shaders/Flower/index.js";
 import { componentDefinition as componentDefinition$36 } from "../core/shaders/FlowingGradient/index.js";
-import { componentDefinition as componentDefinition$37 } from "../core/shaders/Form3D/index.js";
-import { componentDefinition as componentDefinition$38 } from "../core/shaders/Glass/index.js";
-import { componentDefinition as componentDefinition$39 } from "../core/shaders/GlassTiles/index.js";
-import { componentDefinition as componentDefinition$40 } from "../core/shaders/Glitch/index.js";
-import { componentDefinition as componentDefinition$41 } from "../core/shaders/Glow/index.js";
-import { componentDefinition as componentDefinition$42 } from "../core/shaders/Godrays/index.js";
-import { componentDefinition as componentDefinition$43 } from "../core/shaders/Grayscale/index.js";
-import { componentDefinition as componentDefinition$44 } from "../core/shaders/Grid/index.js";
-import { componentDefinition as componentDefinition$45 } from "../core/shaders/GridDistortion/index.js";
-import { componentDefinition as componentDefinition$46 } from "../core/shaders/Group/index.js";
-import { componentDefinition as componentDefinition$47 } from "../core/shaders/Halftone/index.js";
-import { componentDefinition as componentDefinition$48 } from "../core/shaders/HexGrid/index.js";
-import { componentDefinition as componentDefinition$49 } from "../core/shaders/HueShift/index.js";
-import { componentDefinition as componentDefinition$50 } from "../core/shaders/ImageTexture/index.js";
-import { componentDefinition as componentDefinition$51 } from "../core/shaders/Invert/index.js";
-import { componentDefinition as componentDefinition$52 } from "../core/shaders/Kaleidoscope/index.js";
-import { componentDefinition as componentDefinition$53 } from "../core/shaders/LensFlare/index.js";
-import { componentDefinition as componentDefinition$54 } from "../core/shaders/LinearBlur/index.js";
-import { componentDefinition as componentDefinition$55 } from "../core/shaders/LinearGradient/index.js";
-import { componentDefinition as componentDefinition$56 } from "../core/shaders/Liquify/index.js";
-import { componentDefinition as componentDefinition$57 } from "../core/shaders/Mirror/index.js";
-import { componentDefinition as componentDefinition$58 } from "../core/shaders/MultiPointGradient/index.js";
-import { componentDefinition as componentDefinition$59 } from "../core/shaders/Neon/index.js";
-import { componentDefinition as componentDefinition$60 } from "../core/shaders/Paper/index.js";
-import { componentDefinition as componentDefinition$61 } from "../core/shaders/Perspective/index.js";
-import { componentDefinition as componentDefinition$62 } from "../core/shaders/Pixelate/index.js";
-import { componentDefinition as componentDefinition$63 } from "../core/shaders/Plasma/index.js";
-import { componentDefinition as componentDefinition$64 } from "../core/shaders/PolarCoordinates/index.js";
-import { componentDefinition as componentDefinition$65 } from "../core/shaders/Polygon/index.js";
-import { componentDefinition as componentDefinition$66 } from "../core/shaders/Posterize/index.js";
-import { componentDefinition as componentDefinition$67 } from "../core/shaders/ProgressiveBlur/index.js";
-import { componentDefinition as componentDefinition$68 } from "../core/shaders/RadialGradient/index.js";
-import { componentDefinition as componentDefinition$69 } from "../core/shaders/RectangularCoordinates/index.js";
-import { componentDefinition as componentDefinition$70 } from "../core/shaders/Ring/index.js";
-import { componentDefinition as componentDefinition$71 } from "../core/shaders/Ripples/index.js";
-import { componentDefinition as componentDefinition$72 } from "../core/shaders/RoundedRect/index.js";
-import { componentDefinition as componentDefinition$73 } from "../core/shaders/Saturation/index.js";
-import { componentDefinition as componentDefinition$74 } from "../core/shaders/Sharpness/index.js";
-import { componentDefinition as componentDefinition$75 } from "../core/shaders/Shatter/index.js";
-import { componentDefinition as componentDefinition$76 } from "../core/shaders/SimplexNoise/index.js";
-import { componentDefinition as componentDefinition$77 } from "../core/shaders/SineWave/index.js";
-import { componentDefinition as componentDefinition$78 } from "../core/shaders/Solarize/index.js";
-import { componentDefinition as componentDefinition$79 } from "../core/shaders/SolidColor/index.js";
-import { componentDefinition as componentDefinition$80 } from "../core/shaders/Spherize/index.js";
-import { componentDefinition as componentDefinition$81 } from "../core/shaders/Spiral/index.js";
-import { componentDefinition as componentDefinition$82 } from "../core/shaders/Star/index.js";
-import { componentDefinition as componentDefinition$83 } from "../core/shaders/Strands/index.js";
-import { componentDefinition as componentDefinition$84 } from "../core/shaders/Stretch/index.js";
-import { componentDefinition as componentDefinition$85 } from "../core/shaders/Stripes/index.js";
-import { componentDefinition as componentDefinition$86 } from "../core/shaders/StudioBackground/index.js";
-import { componentDefinition as componentDefinition$87 } from "../core/shaders/Swirl/index.js";
-import { componentDefinition as componentDefinition$88 } from "../core/shaders/TiltShift/index.js";
-import { componentDefinition as componentDefinition$89 } from "../core/shaders/Tint/index.js";
-import { componentDefinition as componentDefinition$90 } from "../core/shaders/Trapezoid/index.js";
-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/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 { componentDefinition as componentDefinition$37 } from "../core/shaders/Fog/index.js";
+import { componentDefinition as componentDefinition$38 } from "../core/shaders/Form3D/index.js";
+import { componentDefinition as componentDefinition$39 } from "../core/shaders/Glass/index.js";
+import { componentDefinition as componentDefinition$40 } from "../core/shaders/GlassTiles/index.js";
+import { componentDefinition as componentDefinition$41 } from "../core/shaders/Glitch/index.js";
+import { componentDefinition as componentDefinition$42 } from "../core/shaders/Glow/index.js";
+import { componentDefinition as componentDefinition$43 } from "../core/shaders/Godrays/index.js";
+import { componentDefinition as componentDefinition$44 } from "../core/shaders/Grayscale/index.js";
+import { componentDefinition as componentDefinition$45 } from "../core/shaders/Grid/index.js";
+import { componentDefinition as componentDefinition$46 } from "../core/shaders/GridDistortion/index.js";
+import { componentDefinition as componentDefinition$47 } from "../core/shaders/Group/index.js";
+import { componentDefinition as componentDefinition$48 } from "../core/shaders/Halftone/index.js";
+import { componentDefinition as componentDefinition$49 } from "../core/shaders/HexGrid/index.js";
+import { componentDefinition as componentDefinition$50 } from "../core/shaders/HueShift/index.js";
+import { componentDefinition as componentDefinition$51 } from "../core/shaders/ImageTexture/index.js";
+import { componentDefinition as componentDefinition$52 } from "../core/shaders/Invert/index.js";
+import { componentDefinition as componentDefinition$53 } from "../core/shaders/Kaleidoscope/index.js";
+import { componentDefinition as componentDefinition$54 } from "../core/shaders/LensFlare/index.js";
+import { componentDefinition as componentDefinition$55 } from "../core/shaders/LinearBlur/index.js";
+import { componentDefinition as componentDefinition$56 } from "../core/shaders/LinearGradient/index.js";
+import { componentDefinition as componentDefinition$57 } from "../core/shaders/Liquify/index.js";
+import { componentDefinition as componentDefinition$58 } from "../core/shaders/Mirror/index.js";
+import { componentDefinition as componentDefinition$59 } from "../core/shaders/MultiPointGradient/index.js";
+import { componentDefinition as componentDefinition$60 } from "../core/shaders/Neon/index.js";
+import { componentDefinition as componentDefinition$61 } from "../core/shaders/Paper/index.js";
+import { componentDefinition as componentDefinition$62 } from "../core/shaders/Perspective/index.js";
+import { componentDefinition as componentDefinition$63 } from "../core/shaders/Pixelate/index.js";
+import { componentDefinition as componentDefinition$64 } from "../core/shaders/Plasma/index.js";
+import { componentDefinition as componentDefinition$65 } from "../core/shaders/PolarCoordinates/index.js";
+import { componentDefinition as componentDefinition$66 } from "../core/shaders/Polygon/index.js";
+import { componentDefinition as componentDefinition$67 } from "../core/shaders/Posterize/index.js";
+import { componentDefinition as componentDefinition$68 } from "../core/shaders/ProgressiveBlur/index.js";
+import { componentDefinition as componentDefinition$69 } from "../core/shaders/RadialGradient/index.js";
+import { componentDefinition as componentDefinition$70 } from "../core/shaders/RectangularCoordinates/index.js";
+import { componentDefinition as componentDefinition$71 } from "../core/shaders/Ring/index.js";
+import { componentDefinition as componentDefinition$72 } from "../core/shaders/Ripples/index.js";
+import { componentDefinition as componentDefinition$73 } from "../core/shaders/RoundedRect/index.js";
+import { componentDefinition as componentDefinition$74 } from "../core/shaders/Saturation/index.js";
+import { componentDefinition as componentDefinition$75 } from "../core/shaders/Sharpness/index.js";
+import { componentDefinition as componentDefinition$76 } from "../core/shaders/Shatter/index.js";
+import { componentDefinition as componentDefinition$77 } from "../core/shaders/SimplexNoise/index.js";
+import { componentDefinition as componentDefinition$78 } from "../core/shaders/SineWave/index.js";
+import { componentDefinition as componentDefinition$79 } from "../core/shaders/Smoke/index.js";
+import { componentDefinition as componentDefinition$80 } from "../core/shaders/SmokeFill/index.js";
+import { componentDefinition as componentDefinition$81 } from "../core/shaders/Solarize/index.js";
+import { componentDefinition as componentDefinition$82 } from "../core/shaders/SolidColor/index.js";
+import { componentDefinition as componentDefinition$83 } from "../core/shaders/Spherize/index.js";
+import { componentDefinition as componentDefinition$84 } from "../core/shaders/Spiral/index.js";
+import { componentDefinition as componentDefinition$85 } from "../core/shaders/Star/index.js";
+import { componentDefinition as componentDefinition$86 } from "../core/shaders/Strands/index.js";
+import { componentDefinition as componentDefinition$87 } from "../core/shaders/Stretch/index.js";
+import { componentDefinition as componentDefinition$88 } from "../core/shaders/Stripes/index.js";
+import { componentDefinition as componentDefinition$89 } from "../core/shaders/StudioBackground/index.js";
+import { componentDefinition as componentDefinition$90 } from "../core/shaders/Swirl/index.js";
+import { componentDefinition as componentDefinition$91 } from "../core/shaders/TiltShift/index.js";
+import { componentDefinition as componentDefinition$92 } from "../core/shaders/Tint/index.js";
+import { componentDefinition as componentDefinition$93 } from "../core/shaders/Trapezoid/index.js";
+import { componentDefinition as componentDefinition$94 } from "../core/shaders/Tritone/index.js";
+import { componentDefinition as componentDefinition$95 } from "../core/shaders/Truchet/index.js";
+import { componentDefinition as componentDefinition$96 } from "../core/shaders/Twirl/index.js";
+import { componentDefinition as componentDefinition$97 } from "../core/shaders/VHS/index.js";
+import { componentDefinition as componentDefinition$98 } from "../core/shaders/Vesica/index.js";
+import { componentDefinition as componentDefinition$99 } from "../core/shaders/Vibrance/index.js";
+import { componentDefinition as componentDefinition$100 } from "../core/shaders/VideoTexture/index.js";
+import { componentDefinition as componentDefinition$101 } from "../core/shaders/Vignette/index.js";
+import { componentDefinition as componentDefinition$102 } from "../core/shaders/Voronoi/index.js";
+import { componentDefinition as componentDefinition$103 } from "../core/shaders/WaveDistortion/index.js";
+import { componentDefinition as componentDefinition$104 } from "../core/shaders/Weave/index.js";
+import { componentDefinition as componentDefinition$105 } from "../core/shaders/WebcamTexture/index.js";
+import { componentDefinition as componentDefinition$106 } from "../core/shaders/ZoomBlur/index.js";
 import { vec4 } from "three/tsl";
 import { isExternalUser, startTelemetry } from "../core/telemetry/index.js";
-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);
+var root_2$106 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$107 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function AngularBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -276,7 +279,7 @@ function AngularBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$104();
+	var fragment = root$107();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -289,7 +292,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$103();
+		var canvas = root_2$106();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -308,8 +311,8 @@ function AngularBlur($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-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$105 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$106 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Ascii($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -474,7 +477,7 @@ function Ascii($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$103();
+	var fragment = root$106();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -487,7 +490,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$102();
+		var canvas = root_2$105();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -506,8 +509,8 @@ function Ascii($$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$104 = $.from_html(`<canvas layoutsubtree="" style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"><!></canvas>`);
+var root$105 = $.from_html(`<span style="display:contents"><!></span> <!>`, 1);
 function Aurora($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -672,7 +675,7 @@ function Aurora($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$102();
+	var fragment = root$105();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -685,7 +688,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$101();
+		var canvas = root_2$104();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -704,8 +707,8 @@ function Aurora($$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$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 Beam($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -870,7 +873,7 @@ function Beam($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$101();
+	var fragment = root$104();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -883,7 +886,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$100();
+		var canvas = root_2$103();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -902,8 +905,8 @@ function Beam($$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$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 Blob($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1068,7 +1071,7 @@ function Blob($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$100();
+	var fragment = root$103();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1081,7 +1084,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$99();
+		var canvas = root_2$102();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1100,8 +1103,8 @@ function Blob($$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$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 Blur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1266,7 +1269,7 @@ function Blur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$99();
+	var fragment = root$102();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1279,7 +1282,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$98();
+		var canvas = root_2$101();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1298,8 +1301,8 @@ function Blur($$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$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 BrightnessContrast($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1464,7 +1467,7 @@ function BrightnessContrast($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$98();
+	var fragment = root$101();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1477,7 +1480,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$97();
+		var canvas = root_2$100();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1496,8 +1499,8 @@ function BrightnessContrast($$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$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 Bulge($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1662,7 +1665,7 @@ function Bulge($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$97();
+	var fragment = root$100();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1675,7 +1678,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$96();
+		var canvas = root_2$99();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1694,8 +1697,8 @@ function Bulge($$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$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 CRTScreen($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -1860,7 +1863,7 @@ function CRTScreen($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$96();
+	var fragment = root$99();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -1873,7 +1876,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$95();
+		var canvas = root_2$98();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -1892,8 +1895,8 @@ function CRTScreen($$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$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 ChannelBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2058,7 +2061,7 @@ function ChannelBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$95();
+	var fragment = root$98();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2071,7 +2074,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$94();
+		var canvas = root_2$97();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2090,8 +2093,8 @@ function ChannelBlur($$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$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 Checkerboard($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2256,7 +2259,7 @@ function Checkerboard($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$94();
+	var fragment = root$97();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2269,7 +2272,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$93();
+		var canvas = root_2$96();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2288,8 +2291,8 @@ function Checkerboard($$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$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 ChromaFlow($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2454,7 +2457,7 @@ function ChromaFlow($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$93();
+	var fragment = root$96();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2467,7 +2470,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$92();
+		var canvas = root_2$95();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2486,8 +2489,8 @@ function ChromaFlow($$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$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 ChromaticAberration($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2652,7 +2655,7 @@ function ChromaticAberration($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$92();
+	var fragment = root$95();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2665,7 +2668,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$91();
+		var canvas = root_2$94();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2684,8 +2687,8 @@ function ChromaticAberration($$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$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 Circle($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -2850,7 +2853,7 @@ function Circle($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$91();
+	var fragment = root$94();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -2863,7 +2866,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$90();
+		var canvas = root_2$93();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -2882,8 +2885,8 @@ function Circle($$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$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 ConcentricSpin($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3048,7 +3051,7 @@ function ConcentricSpin($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$90();
+	var fragment = root$93();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3061,7 +3064,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$89();
+		var canvas = root_2$92();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3080,8 +3083,8 @@ function ConcentricSpin($$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$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 ConicGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3246,7 +3249,7 @@ function ConicGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$89();
+	var fragment = root$92();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3259,7 +3262,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$88();
+		var canvas = root_2$91();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3278,8 +3281,8 @@ function ConicGradient($$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$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 ContourLines($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3444,7 +3447,7 @@ function ContourLines($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$88();
+	var fragment = root$91();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3457,7 +3460,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$87();
+		var canvas = root_2$90();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3476,8 +3479,8 @@ function ContourLines($$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$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 Crescent($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3642,7 +3645,7 @@ function Crescent($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$87();
+	var fragment = root$90();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3655,7 +3658,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$86();
+		var canvas = root_2$89();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3674,8 +3677,8 @@ function Crescent($$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$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 Cross($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -3840,7 +3843,7 @@ function Cross($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$86();
+	var fragment = root$89();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -3853,7 +3856,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$85();
+		var canvas = root_2$88();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -3872,8 +3875,8 @@ function Cross($$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$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 Crystal($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4038,7 +4041,7 @@ function Crystal($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$85();
+	var fragment = root$88();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4051,7 +4054,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$84();
+		var canvas = root_2$87();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4070,8 +4073,8 @@ function Crystal($$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$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 CursorRipples($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4236,7 +4239,7 @@ function CursorRipples($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$84();
+	var fragment = root$87();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4249,7 +4252,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$83();
+		var canvas = root_2$86();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4268,8 +4271,8 @@ function CursorRipples($$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$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 CursorTrail($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4434,7 +4437,7 @@ function CursorTrail($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$83();
+	var fragment = root$86();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4447,7 +4450,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$82();
+		var canvas = root_2$85();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4466,8 +4469,8 @@ function CursorTrail($$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$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 DOMTexture($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4632,7 +4635,7 @@ function DOMTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$82();
+	var fragment = root$85();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4645,7 +4648,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$81();
+		var canvas = root_2$84();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4664,8 +4667,8 @@ function DOMTexture($$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$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 DiamondGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -4830,7 +4833,7 @@ function DiamondGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$81();
+	var fragment = root$84();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -4843,7 +4846,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$80();
+		var canvas = root_2$83();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -4862,8 +4865,8 @@ function DiamondGradient($$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$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 DiffuseBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5028,7 +5031,7 @@ function DiffuseBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$80();
+	var fragment = root$83();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5041,7 +5044,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$79();
+		var canvas = root_2$82();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5060,8 +5063,8 @@ function DiffuseBlur($$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$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 Dither($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5226,7 +5229,7 @@ function Dither($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$79();
+	var fragment = root$82();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5239,7 +5242,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$78();
+		var canvas = root_2$81();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5258,8 +5261,8 @@ function Dither($$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$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 DotGrid($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5424,7 +5427,7 @@ function DotGrid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$78();
+	var fragment = root$81();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5437,7 +5440,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$77();
+		var canvas = root_2$80();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5456,8 +5459,8 @@ function DotGrid($$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$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 DropShadow($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5622,7 +5625,7 @@ function DropShadow($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$77();
+	var fragment = root$80();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5635,7 +5638,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$76();
+		var canvas = root_2$79();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5654,8 +5657,8 @@ function DropShadow($$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$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 Duotone($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -5820,7 +5823,7 @@ function Duotone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$76();
+	var fragment = root$79();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -5833,7 +5836,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$75();
+		var canvas = root_2$78();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -5852,8 +5855,8 @@ function Duotone($$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$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 Ellipse($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6018,7 +6021,7 @@ function Ellipse($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$75();
+	var fragment = root$78();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6031,7 +6034,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$74();
+		var canvas = root_2$77();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6050,8 +6053,8 @@ function Ellipse($$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$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 Emboss($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6216,7 +6219,7 @@ function Emboss($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$74();
+	var fragment = root$77();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6229,7 +6232,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$73();
+		var canvas = root_2$76();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6248,8 +6251,8 @@ function Emboss($$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$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 FallingLines($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6414,7 +6417,7 @@ function FallingLines($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$73();
+	var fragment = root$76();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6427,7 +6430,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$72();
+		var canvas = root_2$75();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6446,8 +6449,8 @@ function FallingLines($$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$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 FilmGrain($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6612,7 +6615,7 @@ function FilmGrain($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$72();
+	var fragment = root$75();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6625,7 +6628,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$71();
+		var canvas = root_2$74();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6644,8 +6647,8 @@ function FilmGrain($$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$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 FloatingParticles($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -6810,7 +6813,7 @@ function FloatingParticles($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$71();
+	var fragment = root$74();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -6823,7 +6826,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$70();
+		var canvas = root_2$73();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -6842,8 +6845,8 @@ function FloatingParticles($$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$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 FlowField($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7008,7 +7011,7 @@ function FlowField($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$70();
+	var fragment = root$73();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7021,7 +7024,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$69();
+		var canvas = root_2$72();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7040,8 +7043,8 @@ function FlowField($$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$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 Flower($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7206,7 +7209,7 @@ function Flower($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$69();
+	var fragment = root$72();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7219,7 +7222,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$68();
+		var canvas = root_2$71();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7238,8 +7241,8 @@ function Flower($$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$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 FlowingGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
@@ -7404,7 +7407,7 @@ function FlowingGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$68();
+	var fragment = root$71();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7417,7 +7420,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$67();
+		var canvas = root_2$70();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7436,9 +7439,9 @@ function FlowingGradient($$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);
-function Form3D($$anchor, $$props) {
+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 Fog($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$37.experimental && !_experimentalWarnedOnce) {
@@ -7602,7 +7605,7 @@ function Form3D($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$67();
+	var fragment = root$70();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7615,7 +7618,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$66();
+		var canvas = root_2$69();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7634,9 +7637,9 @@ function Form3D($$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);
-function Glass($$anchor, $$props) {
+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 Form3D($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$38.experimental && !_experimentalWarnedOnce) {
@@ -7800,7 +7803,7 @@ function Glass($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$66();
+	var fragment = root$69();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -7813,7 +7816,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$65();
+		var canvas = root_2$68();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -7832,9 +7835,9 @@ function Glass($$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);
-function GlassTiles($$anchor, $$props) {
+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 Glass($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$39.experimental && !_experimentalWarnedOnce) {
@@ -7998,7 +8001,7 @@ function GlassTiles($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$65();
+	var fragment = root$68();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8011,7 +8014,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$64();
+		var canvas = root_2$67();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8030,9 +8033,9 @@ function GlassTiles($$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);
-function Glitch($$anchor, $$props) {
+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 GlassTiles($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$40.experimental && !_experimentalWarnedOnce) {
@@ -8196,7 +8199,7 @@ function Glitch($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$64();
+	var fragment = root$67();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8209,7 +8212,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$63();
+		var canvas = root_2$66();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8228,9 +8231,9 @@ function Glitch($$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);
-function Glow($$anchor, $$props) {
+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 Glitch($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$41.experimental && !_experimentalWarnedOnce) {
@@ -8394,7 +8397,7 @@ function Glow($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$63();
+	var fragment = root$66();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8407,7 +8410,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$62();
+		var canvas = root_2$65();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8426,9 +8429,9 @@ function Glow($$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);
-function Godrays($$anchor, $$props) {
+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 Glow($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$42.experimental && !_experimentalWarnedOnce) {
@@ -8592,7 +8595,7 @@ function Godrays($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$62();
+	var fragment = root$65();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8605,7 +8608,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$61();
+		var canvas = root_2$64();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8624,9 +8627,9 @@ function Godrays($$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);
-function Grayscale($$anchor, $$props) {
+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 Godrays($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$43.experimental && !_experimentalWarnedOnce) {
@@ -8790,7 +8793,7 @@ function Grayscale($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$61();
+	var fragment = root$64();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -8803,7 +8806,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$60();
+		var canvas = root_2$63();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -8822,9 +8825,9 @@ function Grayscale($$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);
-function Grid($$anchor, $$props) {
+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 Grayscale($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$44.experimental && !_experimentalWarnedOnce) {
@@ -8988,7 +8991,7 @@ function Grid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$60();
+	var fragment = root$63();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9001,7 +9004,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$59();
+		var canvas = root_2$62();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9020,9 +9023,9 @@ function Grid($$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);
-function GridDistortion($$anchor, $$props) {
+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 Grid($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$45.experimental && !_experimentalWarnedOnce) {
@@ -9186,7 +9189,7 @@ function GridDistortion($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$59();
+	var fragment = root$62();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9199,7 +9202,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$58();
+		var canvas = root_2$61();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9218,9 +9221,9 @@ function GridDistortion($$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);
-function Group($$anchor, $$props) {
+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 GridDistortion($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$46.experimental && !_experimentalWarnedOnce) {
@@ -9384,7 +9387,7 @@ function Group($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$58();
+	var fragment = root$61();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9397,7 +9400,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$57();
+		var canvas = root_2$60();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9416,9 +9419,9 @@ function Group($$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);
-function Halftone($$anchor, $$props) {
+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 Group($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$47.experimental && !_experimentalWarnedOnce) {
@@ -9582,7 +9585,7 @@ function Halftone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$57();
+	var fragment = root$60();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9595,7 +9598,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$56();
+		var canvas = root_2$59();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9614,9 +9617,9 @@ function Halftone($$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);
-function HexGrid($$anchor, $$props) {
+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 Halftone($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$48.experimental && !_experimentalWarnedOnce) {
@@ -9780,7 +9783,7 @@ function HexGrid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$56();
+	var fragment = root$59();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9793,7 +9796,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$55();
+		var canvas = root_2$58();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -9812,9 +9815,9 @@ function HexGrid($$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);
-function HueShift($$anchor, $$props) {
+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 HexGrid($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$49.experimental && !_experimentalWarnedOnce) {
@@ -9978,7 +9981,7 @@ function HueShift($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$55();
+	var fragment = root$58();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -9991,7 +9994,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$54();
+		var canvas = root_2$57();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10010,9 +10013,9 @@ function HueShift($$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);
-function ImageTexture($$anchor, $$props) {
+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 HueShift($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$50.experimental && !_experimentalWarnedOnce) {
@@ -10176,7 +10179,7 @@ function ImageTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$54();
+	var fragment = root$57();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10189,7 +10192,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$53();
+		var canvas = root_2$56();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10208,9 +10211,9 @@ function ImageTexture($$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);
-function Invert($$anchor, $$props) {
+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 ImageTexture($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$51.experimental && !_experimentalWarnedOnce) {
@@ -10374,7 +10377,7 @@ function Invert($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$53();
+	var fragment = root$56();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10387,7 +10390,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$52();
+		var canvas = root_2$55();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10406,9 +10409,9 @@ function Invert($$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);
-function Kaleidoscope($$anchor, $$props) {
+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 Invert($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$52.experimental && !_experimentalWarnedOnce) {
@@ -10572,7 +10575,7 @@ function Kaleidoscope($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$52();
+	var fragment = root$55();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10585,7 +10588,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$51();
+		var canvas = root_2$54();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10604,9 +10607,9 @@ function Kaleidoscope($$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);
-function LensFlare($$anchor, $$props) {
+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 Kaleidoscope($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$53.experimental && !_experimentalWarnedOnce) {
@@ -10770,7 +10773,7 @@ function LensFlare($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$51();
+	var fragment = root$54();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10783,7 +10786,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$50();
+		var canvas = root_2$53();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -10802,9 +10805,9 @@ function LensFlare($$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);
-function LinearBlur($$anchor, $$props) {
+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 LensFlare($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$54.experimental && !_experimentalWarnedOnce) {
@@ -10968,7 +10971,7 @@ function LinearBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$50();
+	var fragment = root$53();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -10981,7 +10984,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$49();
+		var canvas = root_2$52();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11000,9 +11003,9 @@ function LinearBlur($$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);
-function LinearGradient($$anchor, $$props) {
+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 LinearBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$55.experimental && !_experimentalWarnedOnce) {
@@ -11166,7 +11169,7 @@ function LinearGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$49();
+	var fragment = root$52();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11179,7 +11182,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$48();
+		var canvas = root_2$51();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11198,9 +11201,9 @@ function LinearGradient($$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);
-function Liquify($$anchor, $$props) {
+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 LinearGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$56.experimental && !_experimentalWarnedOnce) {
@@ -11364,7 +11367,7 @@ function Liquify($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$48();
+	var fragment = root$51();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11377,7 +11380,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$47();
+		var canvas = root_2$50();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11396,9 +11399,9 @@ function Liquify($$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);
-function Mirror($$anchor, $$props) {
+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 Liquify($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$57.experimental && !_experimentalWarnedOnce) {
@@ -11562,7 +11565,7 @@ function Mirror($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$47();
+	var fragment = root$50();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11575,7 +11578,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$46();
+		var canvas = root_2$49();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11594,9 +11597,9 @@ function Mirror($$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);
-function MultiPointGradient($$anchor, $$props) {
+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 Mirror($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$58.experimental && !_experimentalWarnedOnce) {
@@ -11760,7 +11763,7 @@ function MultiPointGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$46();
+	var fragment = root$49();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11773,7 +11776,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$45();
+		var canvas = root_2$48();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11792,9 +11795,9 @@ function MultiPointGradient($$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);
-function Neon($$anchor, $$props) {
+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 MultiPointGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$59.experimental && !_experimentalWarnedOnce) {
@@ -11958,7 +11961,7 @@ function Neon($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$45();
+	var fragment = root$48();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -11971,7 +11974,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$44();
+		var canvas = root_2$47();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -11990,9 +11993,9 @@ function Neon($$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);
-function Paper($$anchor, $$props) {
+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 Neon($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$60.experimental && !_experimentalWarnedOnce) {
@@ -12156,7 +12159,7 @@ function Paper($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$44();
+	var fragment = root$47();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12169,7 +12172,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$43();
+		var canvas = root_2$46();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12188,9 +12191,9 @@ function Paper($$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);
-function Perspective($$anchor, $$props) {
+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 Paper($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$61.experimental && !_experimentalWarnedOnce) {
@@ -12354,7 +12357,7 @@ function Perspective($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$43();
+	var fragment = root$46();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12367,7 +12370,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$42();
+		var canvas = root_2$45();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12386,9 +12389,9 @@ function Perspective($$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);
-function Pixelate($$anchor, $$props) {
+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 Perspective($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$62.experimental && !_experimentalWarnedOnce) {
@@ -12552,7 +12555,7 @@ function Pixelate($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$42();
+	var fragment = root$45();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12565,7 +12568,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$41();
+		var canvas = root_2$44();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12584,9 +12587,9 @@ function Pixelate($$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);
-function Plasma($$anchor, $$props) {
+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 Pixelate($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$63.experimental && !_experimentalWarnedOnce) {
@@ -12750,7 +12753,7 @@ function Plasma($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$41();
+	var fragment = root$44();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12763,7 +12766,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$40();
+		var canvas = root_2$43();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12782,9 +12785,9 @@ function Plasma($$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);
-function PolarCoordinates($$anchor, $$props) {
+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 Plasma($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$64.experimental && !_experimentalWarnedOnce) {
@@ -12948,7 +12951,7 @@ function PolarCoordinates($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$40();
+	var fragment = root$43();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -12961,7 +12964,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$39();
+		var canvas = root_2$42();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -12980,9 +12983,9 @@ function PolarCoordinates($$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);
-function Polygon($$anchor, $$props) {
+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 PolarCoordinates($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$65.experimental && !_experimentalWarnedOnce) {
@@ -13146,7 +13149,7 @@ function Polygon($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$39();
+	var fragment = root$42();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13159,7 +13162,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$38();
+		var canvas = root_2$41();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13178,9 +13181,9 @@ function Polygon($$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);
-function Posterize($$anchor, $$props) {
+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 Polygon($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$66.experimental && !_experimentalWarnedOnce) {
@@ -13344,7 +13347,7 @@ function Posterize($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$38();
+	var fragment = root$41();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13357,7 +13360,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$37();
+		var canvas = root_2$40();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13376,9 +13379,9 @@ function Posterize($$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);
-function ProgressiveBlur($$anchor, $$props) {
+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 Posterize($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$67.experimental && !_experimentalWarnedOnce) {
@@ -13542,7 +13545,7 @@ function ProgressiveBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$37();
+	var fragment = root$40();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13555,7 +13558,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$36();
+		var canvas = root_2$39();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13574,9 +13577,9 @@ function ProgressiveBlur($$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);
-function RadialGradient($$anchor, $$props) {
+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 ProgressiveBlur($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$68.experimental && !_experimentalWarnedOnce) {
@@ -13740,7 +13743,7 @@ function RadialGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$36();
+	var fragment = root$39();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13753,7 +13756,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$35();
+		var canvas = root_2$38();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13772,9 +13775,9 @@ function RadialGradient($$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);
-function RectangularCoordinates($$anchor, $$props) {
+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 RadialGradient($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$69.experimental && !_experimentalWarnedOnce) {
@@ -13938,7 +13941,7 @@ function RectangularCoordinates($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$35();
+	var fragment = root$38();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -13951,7 +13954,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$34();
+		var canvas = root_2$37();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -13970,9 +13973,9 @@ function RectangularCoordinates($$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);
-function Ring($$anchor, $$props) {
+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 RectangularCoordinates($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$70.experimental && !_experimentalWarnedOnce) {
@@ -14136,7 +14139,7 @@ function Ring($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$34();
+	var fragment = root$37();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14149,7 +14152,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$33();
+		var canvas = root_2$36();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14168,9 +14171,9 @@ function Ring($$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);
-function Ripples($$anchor, $$props) {
+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 Ring($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$71.experimental && !_experimentalWarnedOnce) {
@@ -14334,7 +14337,7 @@ function Ripples($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$33();
+	var fragment = root$36();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14347,7 +14350,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$32();
+		var canvas = root_2$35();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14366,9 +14369,9 @@ function Ripples($$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);
-function RoundedRect($$anchor, $$props) {
+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 Ripples($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$72.experimental && !_experimentalWarnedOnce) {
@@ -14532,7 +14535,7 @@ function RoundedRect($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$32();
+	var fragment = root$35();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14545,7 +14548,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$31();
+		var canvas = root_2$34();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14564,9 +14567,9 @@ function RoundedRect($$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);
-function Saturation($$anchor, $$props) {
+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 RoundedRect($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$73.experimental && !_experimentalWarnedOnce) {
@@ -14730,7 +14733,7 @@ function Saturation($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$31();
+	var fragment = root$34();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14743,7 +14746,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$30();
+		var canvas = root_2$33();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14762,9 +14765,9 @@ function Saturation($$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);
-function Sharpness($$anchor, $$props) {
+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 Saturation($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$74.experimental && !_experimentalWarnedOnce) {
@@ -14928,7 +14931,7 @@ function Sharpness($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$30();
+	var fragment = root$33();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -14941,7 +14944,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$29();
+		var canvas = root_2$32();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -14960,9 +14963,9 @@ function Sharpness($$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);
-function Shatter($$anchor, $$props) {
+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 Sharpness($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$75.experimental && !_experimentalWarnedOnce) {
@@ -15126,7 +15129,7 @@ function Shatter($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$29();
+	var fragment = root$32();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15139,7 +15142,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$28();
+		var canvas = root_2$31();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15158,9 +15161,9 @@ function Shatter($$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);
-function SimplexNoise($$anchor, $$props) {
+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 Shatter($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$76.experimental && !_experimentalWarnedOnce) {
@@ -15324,7 +15327,7 @@ function SimplexNoise($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$28();
+	var fragment = root$31();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15337,7 +15340,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$27();
+		var canvas = root_2$30();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15356,9 +15359,9 @@ function SimplexNoise($$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);
-function SineWave($$anchor, $$props) {
+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 SimplexNoise($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$77.experimental && !_experimentalWarnedOnce) {
@@ -15522,7 +15525,7 @@ function SineWave($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$27();
+	var fragment = root$30();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15535,7 +15538,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$26();
+		var canvas = root_2$29();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15554,9 +15557,9 @@ function SineWave($$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);
-function Solarize($$anchor, $$props) {
+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 SineWave($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$78.experimental && !_experimentalWarnedOnce) {
@@ -15720,7 +15723,7 @@ function Solarize($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$26();
+	var fragment = root$29();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15733,7 +15736,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$25();
+		var canvas = root_2$28();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15752,9 +15755,9 @@ function Solarize($$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);
-function SolidColor($$anchor, $$props) {
+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 Smoke($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$79.experimental && !_experimentalWarnedOnce) {
@@ -15918,7 +15921,7 @@ function SolidColor($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$25();
+	var fragment = root$28();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -15931,7 +15934,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$24();
+		var canvas = root_2$27();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -15950,9 +15953,9 @@ function SolidColor($$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);
-function Spherize($$anchor, $$props) {
+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 SmokeFill($$anchor, $$props) {
 	$.push($$props, true);
 	let _experimentalWarnedOnce = false;
 	if (componentDefinition$80.experimental && !_experimentalWarnedOnce) {
@@ -16116,7 +16119,7 @@ function Spherize($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$24();
+	var fragment = root$27();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16129,7 +16132,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$23();
+		var canvas = root_2$26();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16148,9 +16151,9 @@ function Spherize($$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);
-function Spiral($$anchor, $$props) {
+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;
 	if (componentDefinition$81.experimental && !_experimentalWarnedOnce) {
@@ -16314,7 +16317,7 @@ function Spiral($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$23();
+	var fragment = root$26();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16327,7 +16330,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$22();
+		var canvas = root_2$25();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16346,9 +16349,9 @@ function Spiral($$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);
-function Star($$anchor, $$props) {
+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;
 	if (componentDefinition$82.experimental && !_experimentalWarnedOnce) {
@@ -16512,7 +16515,7 @@ function Star($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$22();
+	var fragment = root$25();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16525,7 +16528,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$21();
+		var canvas = root_2$24();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16544,9 +16547,9 @@ function Star($$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);
-function Strands($$anchor, $$props) {
+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;
 	if (componentDefinition$83.experimental && !_experimentalWarnedOnce) {
@@ -16710,7 +16713,7 @@ function Strands($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$21();
+	var fragment = root$24();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16723,7 +16726,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$20();
+		var canvas = root_2$23();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16742,9 +16745,9 @@ function Strands($$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);
-function Stretch($$anchor, $$props) {
+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;
 	if (componentDefinition$84.experimental && !_experimentalWarnedOnce) {
@@ -16908,7 +16911,7 @@ function Stretch($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$20();
+	var fragment = root$23();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -16921,7 +16924,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$19();
+		var canvas = root_2$22();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -16940,9 +16943,9 @@ function Stretch($$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);
-function Stripes($$anchor, $$props) {
+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;
 	if (componentDefinition$85.experimental && !_experimentalWarnedOnce) {
@@ -17106,7 +17109,7 @@ function Stripes($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$19();
+	var fragment = root$22();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17119,7 +17122,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$18();
+		var canvas = root_2$21();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17138,9 +17141,9 @@ function Stripes($$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);
-function StudioBackground($$anchor, $$props) {
+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;
 	if (componentDefinition$86.experimental && !_experimentalWarnedOnce) {
@@ -17304,7 +17307,7 @@ function StudioBackground($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$18();
+	var fragment = root$21();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17317,7 +17320,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$17();
+		var canvas = root_2$20();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17336,9 +17339,9 @@ function StudioBackground($$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);
-function Swirl($$anchor, $$props) {
+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;
 	if (componentDefinition$87.experimental && !_experimentalWarnedOnce) {
@@ -17502,7 +17505,7 @@ function Swirl($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$17();
+	var fragment = root$20();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17515,7 +17518,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$16();
+		var canvas = root_2$19();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17534,9 +17537,9 @@ function Swirl($$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);
-function TiltShift($$anchor, $$props) {
+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;
 	if (componentDefinition$88.experimental && !_experimentalWarnedOnce) {
@@ -17700,7 +17703,7 @@ function TiltShift($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$16();
+	var fragment = root$19();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17713,7 +17716,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$15();
+		var canvas = root_2$18();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17732,9 +17735,9 @@ function TiltShift($$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);
-function Tint($$anchor, $$props) {
+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;
 	if (componentDefinition$89.experimental && !_experimentalWarnedOnce) {
@@ -17898,7 +17901,7 @@ function Tint($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$15();
+	var fragment = root$18();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -17911,7 +17914,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$14();
+		var canvas = root_2$17();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -17930,9 +17933,9 @@ function Tint($$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);
-function Trapezoid($$anchor, $$props) {
+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;
 	if (componentDefinition$90.experimental && !_experimentalWarnedOnce) {
@@ -18096,7 +18099,7 @@ function Trapezoid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$14();
+	var fragment = root$17();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18109,7 +18112,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$13();
+		var canvas = root_2$16();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18128,9 +18131,9 @@ function Trapezoid($$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);
-function Tritone($$anchor, $$props) {
+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;
 	if (componentDefinition$91.experimental && !_experimentalWarnedOnce) {
@@ -18294,7 +18297,7 @@ function Tritone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$13();
+	var fragment = root$16();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18307,7 +18310,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$12();
+		var canvas = root_2$15();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18326,9 +18329,9 @@ function Tritone($$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);
-function Truchet($$anchor, $$props) {
+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;
 	if (componentDefinition$92.experimental && !_experimentalWarnedOnce) {
@@ -18492,7 +18495,7 @@ function Truchet($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$12();
+	var fragment = root$15();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18505,7 +18508,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$11();
+		var canvas = root_2$14();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18524,9 +18527,9 @@ function Truchet($$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);
-function Twirl($$anchor, $$props) {
+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;
 	if (componentDefinition$93.experimental && !_experimentalWarnedOnce) {
@@ -18690,7 +18693,7 @@ function Twirl($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$11();
+	var fragment = root$14();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18703,7 +18706,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$10();
+		var canvas = root_2$13();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18722,9 +18725,9 @@ function Twirl($$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);
-function VHS($$anchor, $$props) {
+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;
 	if (componentDefinition$94.experimental && !_experimentalWarnedOnce) {
@@ -18888,7 +18891,7 @@ function VHS($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$10();
+	var fragment = root$13();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -18901,7 +18904,7 @@ function VHS($$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$12();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -18920,9 +18923,9 @@ function VHS($$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$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;
 	if (componentDefinition$95.experimental && !_experimentalWarnedOnce) {
@@ -19086,7 +19089,7 @@ function Vesica($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$9();
+	var fragment = root$12();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19099,7 +19102,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$11();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19118,9 +19121,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$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;
 	if (componentDefinition$96.experimental && !_experimentalWarnedOnce) {
@@ -19284,7 +19287,7 @@ function Vibrance($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$8();
+	var fragment = root$11();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19297,7 +19300,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$10();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19316,9 +19319,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$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$97.experimental && !_experimentalWarnedOnce) {
@@ -19482,7 +19485,7 @@ function VideoTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$7();
+	var fragment = root$10();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19495,7 +19498,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$9();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19514,9 +19517,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$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$98.experimental && !_experimentalWarnedOnce) {
@@ -19680,7 +19683,7 @@ function Vignette($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$6();
+	var fragment = root$9();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19693,7 +19696,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$8();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19712,9 +19715,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$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$99.experimental && !_experimentalWarnedOnce) {
@@ -19878,7 +19881,7 @@ function Voronoi($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$5();
+	var fragment = root$8();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -19891,7 +19894,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$7();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -19910,9 +19913,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$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$100.experimental && !_experimentalWarnedOnce) {
@@ -20076,7 +20079,7 @@ function WaveDistortion($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$4();
+	var fragment = root$7();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -20089,7 +20092,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$6();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -20108,9 +20111,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$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$101.experimental && !_experimentalWarnedOnce) {
@@ -20274,7 +20277,7 @@ function Weave($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$3();
+	var fragment = root$6();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -20287,7 +20290,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$5();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -20306,9 +20309,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$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$102.experimental && !_experimentalWarnedOnce) {
@@ -20472,7 +20475,7 @@ function WebcamTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var fragment = root$2();
+	var fragment = root$5();
 	var span = $.first_child(fragment);
 	var node_1 = $.child(span);
 	var consequent = ($$anchor$1) => {
@@ -20485,7 +20488,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$4();
 		var node_3 = $.child(canvas);
 		children?.(node_3);
 		$.reset(canvas);
@@ -20504,9 +20507,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$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$103.experimental && !_experimentalWarnedOnce) {
@@ -20670,6 +20673,600 @@ function ZoomBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
+	var fragment = root$4();
+	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$3();
+		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$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$104.experimental && !_experimentalWarnedOnce) {
+		_experimentalWarnedOnce = true;
+		const _e = componentDefinition$104.experimental;
+		console.info(`%c⚠ [Shaders] ${componentDefinition$104.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$104.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$104.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$104, $.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$104.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$104 && typeof componentDefinition$104.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$104.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$104, 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$104,
+			fragmentNode: componentDefinition$104?.fragmentNode,
+			type: typeof componentDefinition$104?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var fragment = root$3();
+	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$2();
+		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$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$105.experimental && !_experimentalWarnedOnce) {
+		_experimentalWarnedOnce = true;
+		const _e = componentDefinition$105.experimental;
+		console.info(`%c⚠ [Shaders] ${componentDefinition$105.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$105.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$105.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$105, $.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$105.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$105 && typeof componentDefinition$105.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$105.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$105, 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$105,
+			fragmentNode: componentDefinition$105?.fragmentNode,
+			type: typeof componentDefinition$105?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.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$106.experimental && !_experimentalWarnedOnce) {
+		_experimentalWarnedOnce = true;
+		const _e = componentDefinition$106.experimental;
+		console.info(`%c⚠ [Shaders] ${componentDefinition$106.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$106.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$106.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$106, $.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$106.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$106 && typeof componentDefinition$106.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$106.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$106, 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$106,
+			fragmentNode: componentDefinition$106?.fragmentNode,
+			type: typeof componentDefinition$106?.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);
@@ -20745,7 +21342,7 @@ function Shader($$anchor, $$props) {
 		const checkRendering = () => {
 			if (!rendererInstance) return;
 			if (rendererInstance.getPerformanceStats().fps > 0) {
-				telemetryCollector = startTelemetry(rendererInstance, "2.5.103", disableTelemetry(), isPreview());
+				telemetryCollector = startTelemetry(rendererInstance, "2.5.104", disableTelemetry(), isPreview());
 				if (telemetryCollector) telemetryCollector.start();
 				telemetryStartTimeout = null;
 			} else telemetryStartTimeout = window.setTimeout(checkRendering, 500);
@@ -20964,6 +21561,7 @@ function Preview($$anchor, $$props) {
 		FlowField,
 		Flower,
 		FlowingGradient,
+		Fog,
 		Form3D,
 		Glass,
 		GlassTiles,
@@ -21005,6 +21603,8 @@ function Preview($$anchor, $$props) {
 		Shatter,
 		SimplexNoise,
 		SineWave,
+		Smoke,
+		SmokeFill,
 		Solarize,
 		SolidColor,
 		Spherize,
@@ -21181,4 +21781,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, VHS, 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, Fog, 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, Smoke, SmokeFill, 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 };