shaders 2.5.87 → 2.5.89

package/dist/svelte/index.js

@@ -1,4 +1,4 @@
-import { n as generatePresetCode } from "./generatePresetCode-BzFhasGi.js";
+import { n as generatePresetCode } from "./generatePresetCode-C7KnCLnD.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { getContext, onDestroy, onMount, setContext } from "svelte";
@@ -19,86 +19,96 @@ import { componentDefinition as componentDefinition$11 } from "../core/shaders/C
 import { componentDefinition as componentDefinition$12 } from "../core/shaders/ChromaticAberration/index.js";
 import { componentDefinition as componentDefinition$13 } from "../core/shaders/Circle/index.js";
 import { componentDefinition as componentDefinition$14 } from "../core/shaders/ConcentricSpin/index.js";
-import { componentDefinition as componentDefinition$15 } from "../core/shaders/ContourLines/index.js";
-import { componentDefinition as componentDefinition$16 } from "../core/shaders/Crescent/index.js";
-import { componentDefinition as componentDefinition$17 } from "../core/shaders/Cross/index.js";
-import { componentDefinition as componentDefinition$18 } from "../core/shaders/Crystal/index.js";
-import { componentDefinition as componentDefinition$19 } from "../core/shaders/CursorRipples/index.js";
-import { componentDefinition as componentDefinition$20 } from "../core/shaders/CursorTrail/index.js";
-import { componentDefinition as componentDefinition$21 } from "../core/shaders/DiffuseBlur/index.js";
-import { componentDefinition as componentDefinition$22 } from "../core/shaders/Dither/index.js";
-import { componentDefinition as componentDefinition$23 } from "../core/shaders/DotGrid/index.js";
-import { componentDefinition as componentDefinition$24 } from "../core/shaders/Duotone/index.js";
-import { componentDefinition as componentDefinition$25 } from "../core/shaders/Ellipse/index.js";
-import { componentDefinition as componentDefinition$26 } from "../core/shaders/Emboss/index.js";
-import { componentDefinition as componentDefinition$27 } from "../core/shaders/FallingLines/index.js";
-import { componentDefinition as componentDefinition$28 } from "../core/shaders/FilmGrain/index.js";
-import { componentDefinition as componentDefinition$29 } from "../core/shaders/FloatingParticles/index.js";
-import { componentDefinition as componentDefinition$30 } from "../core/shaders/FlowField/index.js";
-import { componentDefinition as componentDefinition$31 } from "../core/shaders/Flower/index.js";
-import { componentDefinition as componentDefinition$32 } from "../core/shaders/FlowingGradient/index.js";
-import { componentDefinition as componentDefinition$33 } from "../core/shaders/Form3D/index.js";
-import { componentDefinition as componentDefinition$34 } from "../core/shaders/Glass/index.js";
-import { componentDefinition as componentDefinition$35 } from "../core/shaders/GlassTiles/index.js";
-import { componentDefinition as componentDefinition$36 } from "../core/shaders/Glitch/index.js";
-import { componentDefinition as componentDefinition$37 } from "../core/shaders/Glow/index.js";
-import { componentDefinition as componentDefinition$38 } from "../core/shaders/Godrays/index.js";
-import { componentDefinition as componentDefinition$39 } from "../core/shaders/Grayscale/index.js";
-import { componentDefinition as componentDefinition$40 } from "../core/shaders/Grid/index.js";
-import { componentDefinition as componentDefinition$41 } from "../core/shaders/GridDistortion/index.js";
-import { componentDefinition as componentDefinition$42 } from "../core/shaders/Group/index.js";
-import { componentDefinition as componentDefinition$43 } from "../core/shaders/Halftone/index.js";
-import { componentDefinition as componentDefinition$44 } from "../core/shaders/HueShift/index.js";
-import { componentDefinition as componentDefinition$45 } from "../core/shaders/ImageTexture/index.js";
-import { componentDefinition as componentDefinition$46 } from "../core/shaders/Invert/index.js";
-import { componentDefinition as componentDefinition$47 } from "../core/shaders/Kaleidoscope/index.js";
-import { componentDefinition as componentDefinition$48 } from "../core/shaders/LensFlare/index.js";
-import { componentDefinition as componentDefinition$49 } from "../core/shaders/LinearBlur/index.js";
-import { componentDefinition as componentDefinition$50 } from "../core/shaders/LinearGradient/index.js";
-import { componentDefinition as componentDefinition$51 } from "../core/shaders/Liquify/index.js";
-import { componentDefinition as componentDefinition$52 } from "../core/shaders/Mirror/index.js";
-import { componentDefinition as componentDefinition$53 } from "../core/shaders/Neon/index.js";
-import { componentDefinition as componentDefinition$54 } from "../core/shaders/Paper/index.js";
-import { componentDefinition as componentDefinition$55 } from "../core/shaders/Perspective/index.js";
-import { componentDefinition as componentDefinition$56 } from "../core/shaders/Pixelate/index.js";
-import { componentDefinition as componentDefinition$57 } from "../core/shaders/Plasma/index.js";
-import { componentDefinition as componentDefinition$58 } from "../core/shaders/PolarCoordinates/index.js";
-import { componentDefinition as componentDefinition$59 } from "../core/shaders/Polygon/index.js";
-import { componentDefinition as componentDefinition$60 } from "../core/shaders/Posterize/index.js";
-import { componentDefinition as componentDefinition$61 } from "../core/shaders/ProgressiveBlur/index.js";
-import { componentDefinition as componentDefinition$62 } from "../core/shaders/RadialGradient/index.js";
-import { componentDefinition as componentDefinition$63 } from "../core/shaders/RectangularCoordinates/index.js";
-import { componentDefinition as componentDefinition$64 } from "../core/shaders/Ring/index.js";
-import { componentDefinition as componentDefinition$65 } from "../core/shaders/Ripples/index.js";
-import { componentDefinition as componentDefinition$66 } from "../core/shaders/RoundedRect/index.js";
-import { componentDefinition as componentDefinition$67 } from "../core/shaders/Saturation/index.js";
-import { componentDefinition as componentDefinition$68 } from "../core/shaders/Sharpness/index.js";
-import { componentDefinition as componentDefinition$69 } from "../core/shaders/Shatter/index.js";
-import { componentDefinition as componentDefinition$70 } from "../core/shaders/SimplexNoise/index.js";
-import { componentDefinition as componentDefinition$71 } from "../core/shaders/SineWave/index.js";
-import { componentDefinition as componentDefinition$72 } from "../core/shaders/SolidColor/index.js";
-import { componentDefinition as componentDefinition$73 } from "../core/shaders/Spherize/index.js";
-import { componentDefinition as componentDefinition$74 } from "../core/shaders/Spiral/index.js";
-import { componentDefinition as componentDefinition$75 } from "../core/shaders/Star/index.js";
-import { componentDefinition as componentDefinition$76 } from "../core/shaders/Strands/index.js";
-import { componentDefinition as componentDefinition$77 } from "../core/shaders/Stretch/index.js";
-import { componentDefinition as componentDefinition$78 } from "../core/shaders/Stripes/index.js";
-import { componentDefinition as componentDefinition$79 } from "../core/shaders/StudioBackground/index.js";
-import { componentDefinition as componentDefinition$80 } from "../core/shaders/Swirl/index.js";
-import { componentDefinition as componentDefinition$81 } from "../core/shaders/TiltShift/index.js";
-import { componentDefinition as componentDefinition$82 } from "../core/shaders/Tint/index.js";
-import { componentDefinition as componentDefinition$83 } from "../core/shaders/Trapezoid/index.js";
-import { componentDefinition as componentDefinition$84 } from "../core/shaders/Tritone/index.js";
-import { componentDefinition as componentDefinition$85 } from "../core/shaders/Twirl/index.js";
-import { componentDefinition as componentDefinition$86 } from "../core/shaders/Vesica/index.js";
-import { componentDefinition as componentDefinition$87 } from "../core/shaders/Vibrance/index.js";
-import { componentDefinition as componentDefinition$88 } from "../core/shaders/VideoTexture/index.js";
-import { componentDefinition as componentDefinition$89 } from "../core/shaders/WaveDistortion/index.js";
-import { componentDefinition as componentDefinition$90 } from "../core/shaders/WebcamTexture/index.js";
-import { componentDefinition as componentDefinition$91 } from "../core/shaders/ZoomBlur/index.js";
+import { componentDefinition as componentDefinition$15 } from "../core/shaders/ConicGradient/index.js";
+import { componentDefinition as componentDefinition$16 } from "../core/shaders/ContourLines/index.js";
+import { componentDefinition as componentDefinition$17 } from "../core/shaders/Crescent/index.js";
+import { componentDefinition as componentDefinition$18 } from "../core/shaders/Cross/index.js";
+import { componentDefinition as componentDefinition$19 } from "../core/shaders/Crystal/index.js";
+import { componentDefinition as componentDefinition$20 } from "../core/shaders/CursorRipples/index.js";
+import { componentDefinition as componentDefinition$21 } from "../core/shaders/CursorTrail/index.js";
+import { componentDefinition as componentDefinition$22 } from "../core/shaders/DiamondGradient/index.js";
+import { componentDefinition as componentDefinition$23 } from "../core/shaders/DiffuseBlur/index.js";
+import { componentDefinition as componentDefinition$24 } from "../core/shaders/Dither/index.js";
+import { componentDefinition as componentDefinition$25 } from "../core/shaders/DotGrid/index.js";
+import { componentDefinition as componentDefinition$26 } from "../core/shaders/DropShadow/index.js";
+import { componentDefinition as componentDefinition$27 } from "../core/shaders/Duotone/index.js";
+import { componentDefinition as componentDefinition$28 } from "../core/shaders/Ellipse/index.js";
+import { componentDefinition as componentDefinition$29 } from "../core/shaders/Emboss/index.js";
+import { componentDefinition as componentDefinition$30 } from "../core/shaders/FallingLines/index.js";
+import { componentDefinition as componentDefinition$31 } from "../core/shaders/FilmGrain/index.js";
+import { componentDefinition as componentDefinition$32 } from "../core/shaders/FloatingParticles/index.js";
+import { componentDefinition as componentDefinition$33 } from "../core/shaders/FlowField/index.js";
+import { componentDefinition as componentDefinition$34 } from "../core/shaders/Flower/index.js";
+import { componentDefinition as componentDefinition$35 } from "../core/shaders/FlowingGradient/index.js";
+import { componentDefinition as componentDefinition$36 } from "../core/shaders/Form3D/index.js";
+import { componentDefinition as componentDefinition$37 } from "../core/shaders/Glass/index.js";
+import { componentDefinition as componentDefinition$38 } from "../core/shaders/GlassTiles/index.js";
+import { componentDefinition as componentDefinition$39 } from "../core/shaders/Glitch/index.js";
+import { componentDefinition as componentDefinition$40 } from "../core/shaders/Glow/index.js";
+import { componentDefinition as componentDefinition$41 } from "../core/shaders/Godrays/index.js";
+import { componentDefinition as componentDefinition$42 } from "../core/shaders/Grayscale/index.js";
+import { componentDefinition as componentDefinition$43 } from "../core/shaders/Grid/index.js";
+import { componentDefinition as componentDefinition$44 } from "../core/shaders/GridDistortion/index.js";
+import { componentDefinition as componentDefinition$45 } from "../core/shaders/Group/index.js";
+import { componentDefinition as componentDefinition$46 } from "../core/shaders/Halftone/index.js";
+import { componentDefinition as componentDefinition$47 } from "../core/shaders/HexGrid/index.js";
+import { componentDefinition as componentDefinition$48 } from "../core/shaders/HueShift/index.js";
+import { componentDefinition as componentDefinition$49 } from "../core/shaders/ImageTexture/index.js";
+import { componentDefinition as componentDefinition$50 } from "../core/shaders/Invert/index.js";
+import { componentDefinition as componentDefinition$51 } from "../core/shaders/Kaleidoscope/index.js";
+import { componentDefinition as componentDefinition$52 } from "../core/shaders/LensFlare/index.js";
+import { componentDefinition as componentDefinition$53 } from "../core/shaders/LinearBlur/index.js";
+import { componentDefinition as componentDefinition$54 } from "../core/shaders/LinearGradient/index.js";
+import { componentDefinition as componentDefinition$55 } from "../core/shaders/Liquify/index.js";
+import { componentDefinition as componentDefinition$56 } from "../core/shaders/Mirror/index.js";
+import { componentDefinition as componentDefinition$57 } from "../core/shaders/MultiPointGradient/index.js";
+import { componentDefinition as componentDefinition$58 } from "../core/shaders/Neon/index.js";
+import { componentDefinition as componentDefinition$59 } from "../core/shaders/Paper/index.js";
+import { componentDefinition as componentDefinition$60 } from "../core/shaders/Perspective/index.js";
+import { componentDefinition as componentDefinition$61 } from "../core/shaders/Pixelate/index.js";
+import { componentDefinition as componentDefinition$62 } from "../core/shaders/Plasma/index.js";
+import { componentDefinition as componentDefinition$63 } from "../core/shaders/PolarCoordinates/index.js";
+import { componentDefinition as componentDefinition$64 } from "../core/shaders/Polygon/index.js";
+import { componentDefinition as componentDefinition$65 } from "../core/shaders/Posterize/index.js";
+import { componentDefinition as componentDefinition$66 } from "../core/shaders/ProgressiveBlur/index.js";
+import { componentDefinition as componentDefinition$67 } from "../core/shaders/RadialGradient/index.js";
+import { componentDefinition as componentDefinition$68 } from "../core/shaders/RectangularCoordinates/index.js";
+import { componentDefinition as componentDefinition$69 } from "../core/shaders/Ring/index.js";
+import { componentDefinition as componentDefinition$70 } from "../core/shaders/Ripples/index.js";
+import { componentDefinition as componentDefinition$71 } from "../core/shaders/RoundedRect/index.js";
+import { componentDefinition as componentDefinition$72 } from "../core/shaders/Saturation/index.js";
+import { componentDefinition as componentDefinition$73 } from "../core/shaders/Sharpness/index.js";
+import { componentDefinition as componentDefinition$74 } from "../core/shaders/Shatter/index.js";
+import { componentDefinition as componentDefinition$75 } from "../core/shaders/SimplexNoise/index.js";
+import { componentDefinition as componentDefinition$76 } from "../core/shaders/SineWave/index.js";
+import { componentDefinition as componentDefinition$77 } from "../core/shaders/Solarize/index.js";
+import { componentDefinition as componentDefinition$78 } from "../core/shaders/SolidColor/index.js";
+import { componentDefinition as componentDefinition$79 } from "../core/shaders/Spherize/index.js";
+import { componentDefinition as componentDefinition$80 } from "../core/shaders/Spiral/index.js";
+import { componentDefinition as componentDefinition$81 } from "../core/shaders/Star/index.js";
+import { componentDefinition as componentDefinition$82 } from "../core/shaders/Strands/index.js";
+import { componentDefinition as componentDefinition$83 } from "../core/shaders/Stretch/index.js";
+import { componentDefinition as componentDefinition$84 } from "../core/shaders/Stripes/index.js";
+import { componentDefinition as componentDefinition$85 } from "../core/shaders/StudioBackground/index.js";
+import { componentDefinition as componentDefinition$86 } from "../core/shaders/Swirl/index.js";
+import { componentDefinition as componentDefinition$87 } from "../core/shaders/TiltShift/index.js";
+import { componentDefinition as componentDefinition$88 } from "../core/shaders/Tint/index.js";
+import { componentDefinition as componentDefinition$89 } from "../core/shaders/Trapezoid/index.js";
+import { componentDefinition as componentDefinition$90 } from "../core/shaders/Tritone/index.js";
+import { componentDefinition as componentDefinition$91 } from "../core/shaders/Truchet/index.js";
+import { componentDefinition as componentDefinition$92 } from "../core/shaders/Twirl/index.js";
+import { componentDefinition as componentDefinition$93 } from "../core/shaders/Vesica/index.js";
+import { componentDefinition as componentDefinition$94 } from "../core/shaders/Vibrance/index.js";
+import { componentDefinition as componentDefinition$95 } from "../core/shaders/VideoTexture/index.js";
+import { componentDefinition as componentDefinition$96 } from "../core/shaders/Vignette/index.js";
+import { componentDefinition as componentDefinition$97 } from "../core/shaders/Voronoi/index.js";
+import { componentDefinition as componentDefinition$98 } from "../core/shaders/WaveDistortion/index.js";
+import { componentDefinition as componentDefinition$99 } from "../core/shaders/Weave/index.js";
+import { componentDefinition as componentDefinition$100 } from "../core/shaders/WebcamTexture/index.js";
+import { componentDefinition as componentDefinition$101 } from "../core/shaders/ZoomBlur/index.js";
 import { vec4 } from "three/tsl";
 import { isExternalUser, shouldCollectTelemetry, startTelemetry } from "../core/telemetry/index.js";
-var root$92 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$102 = $.from_html(`<span style="display:contents"><!></span>`);
 function AngularBlur($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -234,7 +244,7 @@ function AngularBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$92();
+	var span = root$102();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -243,7 +253,7 @@ function AngularBlur($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$91 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$101 = $.from_html(`<span style="display:contents"><!></span>`);
 function Ascii($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -379,7 +389,7 @@ function Ascii($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$91();
+	var span = root$101();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -388,7 +398,7 @@ function Ascii($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$90 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$100 = $.from_html(`<span style="display:contents"><!></span>`);
 function Aurora($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -524,7 +534,7 @@ function Aurora($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$90();
+	var span = root$100();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -533,7 +543,7 @@ function Aurora($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$89 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$99 = $.from_html(`<span style="display:contents"><!></span>`);
 function Beam($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -669,7 +679,7 @@ function Beam($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$89();
+	var span = root$99();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -678,7 +688,7 @@ function Beam($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$88 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$98 = $.from_html(`<span style="display:contents"><!></span>`);
 function Blob($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -814,7 +824,7 @@ function Blob($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$88();
+	var span = root$98();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -823,7 +833,7 @@ function Blob($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$87 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$97 = $.from_html(`<span style="display:contents"><!></span>`);
 function Blur($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -959,7 +969,7 @@ function Blur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$87();
+	var span = root$97();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -968,7 +978,7 @@ function Blur($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$86 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$96 = $.from_html(`<span style="display:contents"><!></span>`);
 function BrightnessContrast($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -1104,7 +1114,7 @@ function BrightnessContrast($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$86();
+	var span = root$96();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -1113,7 +1123,7 @@ function BrightnessContrast($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$85 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$95 = $.from_html(`<span style="display:contents"><!></span>`);
 function Bulge($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -1249,7 +1259,7 @@ function Bulge($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$85();
+	var span = root$95();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -1258,7 +1268,7 @@ function Bulge($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$84 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$94 = $.from_html(`<span style="display:contents"><!></span>`);
 function CRTScreen($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -1394,7 +1404,7 @@ function CRTScreen($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$84();
+	var span = root$94();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -1403,7 +1413,7 @@ function CRTScreen($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$83 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$93 = $.from_html(`<span style="display:contents"><!></span>`);
 function ChannelBlur($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -1539,7 +1549,7 @@ function ChannelBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$83();
+	var span = root$93();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -1548,7 +1558,7 @@ function ChannelBlur($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$82 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$92 = $.from_html(`<span style="display:contents"><!></span>`);
 function Checkerboard($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -1684,7 +1694,7 @@ function Checkerboard($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$82();
+	var span = root$92();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -1693,7 +1703,7 @@ function Checkerboard($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$81 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$91 = $.from_html(`<span style="display:contents"><!></span>`);
 function ChromaFlow($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -1829,7 +1839,7 @@ function ChromaFlow($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$81();
+	var span = root$91();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -1838,7 +1848,7 @@ function ChromaFlow($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$80 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$90 = $.from_html(`<span style="display:contents"><!></span>`);
 function ChromaticAberration($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -1974,7 +1984,7 @@ function ChromaticAberration($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$80();
+	var span = root$90();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -1983,7 +1993,7 @@ function ChromaticAberration($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$79 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$89 = $.from_html(`<span style="display:contents"><!></span>`);
 function Circle($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -2119,7 +2129,7 @@ function Circle($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$79();
+	var span = root$89();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -2128,7 +2138,7 @@ function Circle($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$78 = $.from_html(`<span style="display:contents"><!></span>`);
+var root$88 = $.from_html(`<span style="display:contents"><!></span>`);
 function ConcentricSpin($$anchor, $$props) {
 	$.push($$props, true);
 	function isPropDriver(value) {
@@ -2264,7 +2274,7 @@ function ConcentricSpin($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$78();
+	var span = root$88();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -2273,8 +2283,8 @@ function ConcentricSpin($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$77 = $.from_html(`<span style="display:contents"><!></span>`);
-function ContourLines($$anchor, $$props) {
+var root$87 = $.from_html(`<span style="display:contents"><!></span>`);
+function ConicGradient($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -2409,7 +2419,7 @@ function ContourLines($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$77();
+	var span = root$87();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -2418,8 +2428,8 @@ function ContourLines($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$76 = $.from_html(`<span style="display:contents"><!></span>`);
-function Crescent($$anchor, $$props) {
+var root$86 = $.from_html(`<span style="display:contents"><!></span>`);
+function ContourLines($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -2554,7 +2564,7 @@ function Crescent($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$76();
+	var span = root$86();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -2563,8 +2573,8 @@ function Crescent($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$75 = $.from_html(`<span style="display:contents"><!></span>`);
-function Cross($$anchor, $$props) {
+var root$85 = $.from_html(`<span style="display:contents"><!></span>`);
+function Crescent($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -2699,7 +2709,7 @@ function Cross($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$75();
+	var span = root$85();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -2708,8 +2718,8 @@ function Cross($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$74 = $.from_html(`<span style="display:contents"><!></span>`);
-function Crystal($$anchor, $$props) {
+var root$84 = $.from_html(`<span style="display:contents"><!></span>`);
+function Cross($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -2844,7 +2854,7 @@ function Crystal($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$74();
+	var span = root$84();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -2853,8 +2863,8 @@ function Crystal($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$73 = $.from_html(`<span style="display:contents"><!></span>`);
-function CursorRipples($$anchor, $$props) {
+var root$83 = $.from_html(`<span style="display:contents"><!></span>`);
+function Crystal($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -2989,7 +2999,7 @@ function CursorRipples($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$73();
+	var span = root$83();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -2998,8 +3008,8 @@ function CursorRipples($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$72 = $.from_html(`<span style="display:contents"><!></span>`);
-function CursorTrail($$anchor, $$props) {
+var root$82 = $.from_html(`<span style="display:contents"><!></span>`);
+function CursorRipples($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -3134,7 +3144,7 @@ function CursorTrail($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$72();
+	var span = root$82();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -3143,8 +3153,8 @@ function CursorTrail($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$71 = $.from_html(`<span style="display:contents"><!></span>`);
-function DiffuseBlur($$anchor, $$props) {
+var root$81 = $.from_html(`<span style="display:contents"><!></span>`);
+function CursorTrail($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -3279,7 +3289,7 @@ function DiffuseBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$71();
+	var span = root$81();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -3288,8 +3298,8 @@ function DiffuseBlur($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$70 = $.from_html(`<span style="display:contents"><!></span>`);
-function Dither($$anchor, $$props) {
+var root$80 = $.from_html(`<span style="display:contents"><!></span>`);
+function DiamondGradient($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -3424,7 +3434,7 @@ function Dither($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$70();
+	var span = root$80();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -3433,8 +3443,8 @@ function Dither($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$69 = $.from_html(`<span style="display:contents"><!></span>`);
-function DotGrid($$anchor, $$props) {
+var root$79 = $.from_html(`<span style="display:contents"><!></span>`);
+function DiffuseBlur($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -3569,7 +3579,7 @@ function DotGrid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$69();
+	var span = root$79();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -3578,8 +3588,8 @@ function DotGrid($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$68 = $.from_html(`<span style="display:contents"><!></span>`);
-function Duotone($$anchor, $$props) {
+var root$78 = $.from_html(`<span style="display:contents"><!></span>`);
+function Dither($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -3714,7 +3724,7 @@ function Duotone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$68();
+	var span = root$78();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -3723,8 +3733,8 @@ function Duotone($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$67 = $.from_html(`<span style="display:contents"><!></span>`);
-function Ellipse($$anchor, $$props) {
+var root$77 = $.from_html(`<span style="display:contents"><!></span>`);
+function DotGrid($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -3859,7 +3869,7 @@ function Ellipse($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$67();
+	var span = root$77();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -3868,8 +3878,8 @@ function Ellipse($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$66 = $.from_html(`<span style="display:contents"><!></span>`);
-function Emboss($$anchor, $$props) {
+var root$76 = $.from_html(`<span style="display:contents"><!></span>`);
+function DropShadow($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -4004,7 +4014,7 @@ function Emboss($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$66();
+	var span = root$76();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -4013,8 +4023,8 @@ function Emboss($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$65 = $.from_html(`<span style="display:contents"><!></span>`);
-function FallingLines($$anchor, $$props) {
+var root$75 = $.from_html(`<span style="display:contents"><!></span>`);
+function Duotone($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -4149,7 +4159,7 @@ function FallingLines($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$65();
+	var span = root$75();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -4158,8 +4168,8 @@ function FallingLines($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$64 = $.from_html(`<span style="display:contents"><!></span>`);
-function FilmGrain($$anchor, $$props) {
+var root$74 = $.from_html(`<span style="display:contents"><!></span>`);
+function Ellipse($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -4294,7 +4304,7 @@ function FilmGrain($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$64();
+	var span = root$74();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -4303,8 +4313,8 @@ function FilmGrain($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$63 = $.from_html(`<span style="display:contents"><!></span>`);
-function FloatingParticles($$anchor, $$props) {
+var root$73 = $.from_html(`<span style="display:contents"><!></span>`);
+function Emboss($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -4439,7 +4449,7 @@ function FloatingParticles($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$63();
+	var span = root$73();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -4448,8 +4458,8 @@ function FloatingParticles($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$62 = $.from_html(`<span style="display:contents"><!></span>`);
-function FlowField($$anchor, $$props) {
+var root$72 = $.from_html(`<span style="display:contents"><!></span>`);
+function FallingLines($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -4584,7 +4594,7 @@ function FlowField($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$62();
+	var span = root$72();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -4593,8 +4603,8 @@ function FlowField($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$61 = $.from_html(`<span style="display:contents"><!></span>`);
-function Flower($$anchor, $$props) {
+var root$71 = $.from_html(`<span style="display:contents"><!></span>`);
+function FilmGrain($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -4729,7 +4739,7 @@ function Flower($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$61();
+	var span = root$71();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -4738,8 +4748,8 @@ function Flower($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$60 = $.from_html(`<span style="display:contents"><!></span>`);
-function FlowingGradient($$anchor, $$props) {
+var root$70 = $.from_html(`<span style="display:contents"><!></span>`);
+function FloatingParticles($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -4874,7 +4884,7 @@ function FlowingGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$60();
+	var span = root$70();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -4883,8 +4893,8 @@ function FlowingGradient($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$59 = $.from_html(`<span style="display:contents"><!></span>`);
-function Form3D($$anchor, $$props) {
+var root$69 = $.from_html(`<span style="display:contents"><!></span>`);
+function FlowField($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -5019,7 +5029,7 @@ function Form3D($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$59();
+	var span = root$69();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -5028,8 +5038,8 @@ function Form3D($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$58 = $.from_html(`<span style="display:contents"><!></span>`);
-function Glass($$anchor, $$props) {
+var root$68 = $.from_html(`<span style="display:contents"><!></span>`);
+function Flower($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -5164,7 +5174,7 @@ function Glass($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$58();
+	var span = root$68();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -5173,8 +5183,8 @@ function Glass($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$57 = $.from_html(`<span style="display:contents"><!></span>`);
-function GlassTiles($$anchor, $$props) {
+var root$67 = $.from_html(`<span style="display:contents"><!></span>`);
+function FlowingGradient($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -5309,7 +5319,7 @@ function GlassTiles($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$57();
+	var span = root$67();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -5318,8 +5328,8 @@ function GlassTiles($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$56 = $.from_html(`<span style="display:contents"><!></span>`);
-function Glitch($$anchor, $$props) {
+var root$66 = $.from_html(`<span style="display:contents"><!></span>`);
+function Form3D($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -5454,7 +5464,7 @@ function Glitch($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$56();
+	var span = root$66();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -5463,8 +5473,8 @@ function Glitch($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$55 = $.from_html(`<span style="display:contents"><!></span>`);
-function Glow($$anchor, $$props) {
+var root$65 = $.from_html(`<span style="display:contents"><!></span>`);
+function Glass($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -5599,7 +5609,7 @@ function Glow($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$55();
+	var span = root$65();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -5608,8 +5618,8 @@ function Glow($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$54 = $.from_html(`<span style="display:contents"><!></span>`);
-function Godrays($$anchor, $$props) {
+var root$64 = $.from_html(`<span style="display:contents"><!></span>`);
+function GlassTiles($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -5744,7 +5754,7 @@ function Godrays($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$54();
+	var span = root$64();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -5753,8 +5763,8 @@ function Godrays($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$53 = $.from_html(`<span style="display:contents"><!></span>`);
-function Grayscale($$anchor, $$props) {
+var root$63 = $.from_html(`<span style="display:contents"><!></span>`);
+function Glitch($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -5889,7 +5899,7 @@ function Grayscale($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$53();
+	var span = root$63();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -5898,8 +5908,8 @@ function Grayscale($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$52 = $.from_html(`<span style="display:contents"><!></span>`);
-function Grid($$anchor, $$props) {
+var root$62 = $.from_html(`<span style="display:contents"><!></span>`);
+function Glow($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -6034,7 +6044,7 @@ function Grid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$52();
+	var span = root$62();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -6043,8 +6053,8 @@ function Grid($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$51 = $.from_html(`<span style="display:contents"><!></span>`);
-function GridDistortion($$anchor, $$props) {
+var root$61 = $.from_html(`<span style="display:contents"><!></span>`);
+function Godrays($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -6179,7 +6189,7 @@ function GridDistortion($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$51();
+	var span = root$61();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -6188,8 +6198,8 @@ function GridDistortion($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$50 = $.from_html(`<span style="display:contents"><!></span>`);
-function Group($$anchor, $$props) {
+var root$60 = $.from_html(`<span style="display:contents"><!></span>`);
+function Grayscale($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -6324,7 +6334,7 @@ function Group($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$50();
+	var span = root$60();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -6333,8 +6343,8 @@ function Group($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$49 = $.from_html(`<span style="display:contents"><!></span>`);
-function Halftone($$anchor, $$props) {
+var root$59 = $.from_html(`<span style="display:contents"><!></span>`);
+function Grid($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -6469,7 +6479,7 @@ function Halftone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$49();
+	var span = root$59();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -6478,8 +6488,8 @@ function Halftone($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$48 = $.from_html(`<span style="display:contents"><!></span>`);
-function HueShift($$anchor, $$props) {
+var root$58 = $.from_html(`<span style="display:contents"><!></span>`);
+function GridDistortion($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -6614,7 +6624,7 @@ function HueShift($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$48();
+	var span = root$58();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -6623,8 +6633,8 @@ function HueShift($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$47 = $.from_html(`<span style="display:contents"><!></span>`);
-function ImageTexture($$anchor, $$props) {
+var root$57 = $.from_html(`<span style="display:contents"><!></span>`);
+function Group($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -6759,7 +6769,7 @@ function ImageTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$47();
+	var span = root$57();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -6768,8 +6778,8 @@ function ImageTexture($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$46 = $.from_html(`<span style="display:contents"><!></span>`);
-function Invert($$anchor, $$props) {
+var root$56 = $.from_html(`<span style="display:contents"><!></span>`);
+function Halftone($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -6904,7 +6914,7 @@ function Invert($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$46();
+	var span = root$56();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -6913,8 +6923,8 @@ function Invert($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$45 = $.from_html(`<span style="display:contents"><!></span>`);
-function Kaleidoscope($$anchor, $$props) {
+var root$55 = $.from_html(`<span style="display:contents"><!></span>`);
+function HexGrid($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -7049,7 +7059,7 @@ function Kaleidoscope($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$45();
+	var span = root$55();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -7058,8 +7068,8 @@ function Kaleidoscope($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$44 = $.from_html(`<span style="display:contents"><!></span>`);
-function LensFlare($$anchor, $$props) {
+var root$54 = $.from_html(`<span style="display:contents"><!></span>`);
+function HueShift($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -7194,7 +7204,7 @@ function LensFlare($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$44();
+	var span = root$54();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -7203,8 +7213,8 @@ function LensFlare($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$43 = $.from_html(`<span style="display:contents"><!></span>`);
-function LinearBlur($$anchor, $$props) {
+var root$53 = $.from_html(`<span style="display:contents"><!></span>`);
+function ImageTexture($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -7339,7 +7349,7 @@ function LinearBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$43();
+	var span = root$53();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -7348,8 +7358,8 @@ function LinearBlur($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$42 = $.from_html(`<span style="display:contents"><!></span>`);
-function LinearGradient($$anchor, $$props) {
+var root$52 = $.from_html(`<span style="display:contents"><!></span>`);
+function Invert($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -7484,7 +7494,7 @@ function LinearGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$42();
+	var span = root$52();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -7493,8 +7503,8 @@ function LinearGradient($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$41 = $.from_html(`<span style="display:contents"><!></span>`);
-function Liquify($$anchor, $$props) {
+var root$51 = $.from_html(`<span style="display:contents"><!></span>`);
+function Kaleidoscope($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -7629,7 +7639,7 @@ function Liquify($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$41();
+	var span = root$51();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -7638,8 +7648,8 @@ function Liquify($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$40 = $.from_html(`<span style="display:contents"><!></span>`);
-function Mirror($$anchor, $$props) {
+var root$50 = $.from_html(`<span style="display:contents"><!></span>`);
+function LensFlare($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -7774,7 +7784,7 @@ function Mirror($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$40();
+	var span = root$50();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -7783,8 +7793,8 @@ function Mirror($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$39 = $.from_html(`<span style="display:contents"><!></span>`);
-function Neon($$anchor, $$props) {
+var root$49 = $.from_html(`<span style="display:contents"><!></span>`);
+function LinearBlur($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -7919,7 +7929,7 @@ function Neon($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$39();
+	var span = root$49();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -7928,8 +7938,8 @@ function Neon($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$38 = $.from_html(`<span style="display:contents"><!></span>`);
-function Paper($$anchor, $$props) {
+var root$48 = $.from_html(`<span style="display:contents"><!></span>`);
+function LinearGradient($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -8064,7 +8074,7 @@ function Paper($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$38();
+	var span = root$48();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -8073,8 +8083,8 @@ function Paper($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$37 = $.from_html(`<span style="display:contents"><!></span>`);
-function Perspective($$anchor, $$props) {
+var root$47 = $.from_html(`<span style="display:contents"><!></span>`);
+function Liquify($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -8209,7 +8219,7 @@ function Perspective($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$37();
+	var span = root$47();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -8218,8 +8228,8 @@ function Perspective($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$36 = $.from_html(`<span style="display:contents"><!></span>`);
-function Pixelate($$anchor, $$props) {
+var root$46 = $.from_html(`<span style="display:contents"><!></span>`);
+function Mirror($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -8354,7 +8364,7 @@ function Pixelate($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$36();
+	var span = root$46();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -8363,8 +8373,8 @@ function Pixelate($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$35 = $.from_html(`<span style="display:contents"><!></span>`);
-function Plasma($$anchor, $$props) {
+var root$45 = $.from_html(`<span style="display:contents"><!></span>`);
+function MultiPointGradient($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -8499,7 +8509,7 @@ function Plasma($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$35();
+	var span = root$45();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -8508,8 +8518,8 @@ function Plasma($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$34 = $.from_html(`<span style="display:contents"><!></span>`);
-function PolarCoordinates($$anchor, $$props) {
+var root$44 = $.from_html(`<span style="display:contents"><!></span>`);
+function Neon($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -8644,7 +8654,7 @@ function PolarCoordinates($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$34();
+	var span = root$44();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -8653,8 +8663,8 @@ function PolarCoordinates($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$33 = $.from_html(`<span style="display:contents"><!></span>`);
-function Polygon($$anchor, $$props) {
+var root$43 = $.from_html(`<span style="display:contents"><!></span>`);
+function Paper($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -8789,7 +8799,7 @@ function Polygon($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$33();
+	var span = root$43();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -8798,8 +8808,8 @@ function Polygon($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$32 = $.from_html(`<span style="display:contents"><!></span>`);
-function Posterize($$anchor, $$props) {
+var root$42 = $.from_html(`<span style="display:contents"><!></span>`);
+function Perspective($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -8934,7 +8944,7 @@ function Posterize($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$32();
+	var span = root$42();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -8943,8 +8953,8 @@ function Posterize($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$31 = $.from_html(`<span style="display:contents"><!></span>`);
-function ProgressiveBlur($$anchor, $$props) {
+var root$41 = $.from_html(`<span style="display:contents"><!></span>`);
+function Pixelate($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -9079,7 +9089,7 @@ function ProgressiveBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$31();
+	var span = root$41();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -9088,8 +9098,8 @@ function ProgressiveBlur($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$30 = $.from_html(`<span style="display:contents"><!></span>`);
-function RadialGradient($$anchor, $$props) {
+var root$40 = $.from_html(`<span style="display:contents"><!></span>`);
+function Plasma($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -9224,7 +9234,7 @@ function RadialGradient($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$30();
+	var span = root$40();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -9233,8 +9243,8 @@ function RadialGradient($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$29 = $.from_html(`<span style="display:contents"><!></span>`);
-function RectangularCoordinates($$anchor, $$props) {
+var root$39 = $.from_html(`<span style="display:contents"><!></span>`);
+function PolarCoordinates($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -9369,7 +9379,7 @@ function RectangularCoordinates($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$29();
+	var span = root$39();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -9378,8 +9388,8 @@ function RectangularCoordinates($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$28 = $.from_html(`<span style="display:contents"><!></span>`);
-function Ring($$anchor, $$props) {
+var root$38 = $.from_html(`<span style="display:contents"><!></span>`);
+function Polygon($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -9514,7 +9524,7 @@ function Ring($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$28();
+	var span = root$38();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -9523,8 +9533,8 @@ function Ring($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$27 = $.from_html(`<span style="display:contents"><!></span>`);
-function Ripples($$anchor, $$props) {
+var root$37 = $.from_html(`<span style="display:contents"><!></span>`);
+function Posterize($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -9659,7 +9669,7 @@ function Ripples($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$27();
+	var span = root$37();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -9668,8 +9678,8 @@ function Ripples($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$26 = $.from_html(`<span style="display:contents"><!></span>`);
-function RoundedRect($$anchor, $$props) {
+var root$36 = $.from_html(`<span style="display:contents"><!></span>`);
+function ProgressiveBlur($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -9804,7 +9814,7 @@ function RoundedRect($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$26();
+	var span = root$36();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -9813,8 +9823,8 @@ function RoundedRect($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$25 = $.from_html(`<span style="display:contents"><!></span>`);
-function Saturation($$anchor, $$props) {
+var root$35 = $.from_html(`<span style="display:contents"><!></span>`);
+function RadialGradient($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -9949,7 +9959,7 @@ function Saturation($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$25();
+	var span = root$35();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -9958,8 +9968,8 @@ function Saturation($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$24 = $.from_html(`<span style="display:contents"><!></span>`);
-function Sharpness($$anchor, $$props) {
+var root$34 = $.from_html(`<span style="display:contents"><!></span>`);
+function RectangularCoordinates($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -10094,7 +10104,7 @@ function Sharpness($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$24();
+	var span = root$34();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -10103,8 +10113,8 @@ function Sharpness($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$23 = $.from_html(`<span style="display:contents"><!></span>`);
-function Shatter($$anchor, $$props) {
+var root$33 = $.from_html(`<span style="display:contents"><!></span>`);
+function Ring($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -10239,7 +10249,7 @@ function Shatter($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$23();
+	var span = root$33();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -10248,8 +10258,8 @@ function Shatter($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$22 = $.from_html(`<span style="display:contents"><!></span>`);
-function SimplexNoise($$anchor, $$props) {
+var root$32 = $.from_html(`<span style="display:contents"><!></span>`);
+function Ripples($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -10384,7 +10394,7 @@ function SimplexNoise($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$22();
+	var span = root$32();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -10393,8 +10403,8 @@ function SimplexNoise($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$21 = $.from_html(`<span style="display:contents"><!></span>`);
-function SineWave($$anchor, $$props) {
+var root$31 = $.from_html(`<span style="display:contents"><!></span>`);
+function RoundedRect($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -10529,7 +10539,7 @@ function SineWave($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$21();
+	var span = root$31();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -10538,8 +10548,8 @@ function SineWave($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$20 = $.from_html(`<span style="display:contents"><!></span>`);
-function SolidColor($$anchor, $$props) {
+var root$30 = $.from_html(`<span style="display:contents"><!></span>`);
+function Saturation($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -10674,7 +10684,7 @@ function SolidColor($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$20();
+	var span = root$30();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -10683,8 +10693,8 @@ function SolidColor($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$19 = $.from_html(`<span style="display:contents"><!></span>`);
-function Spherize($$anchor, $$props) {
+var root$29 = $.from_html(`<span style="display:contents"><!></span>`);
+function Sharpness($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -10819,7 +10829,7 @@ function Spherize($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$19();
+	var span = root$29();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -10828,8 +10838,8 @@ function Spherize($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$18 = $.from_html(`<span style="display:contents"><!></span>`);
-function Spiral($$anchor, $$props) {
+var root$28 = $.from_html(`<span style="display:contents"><!></span>`);
+function Shatter($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -10964,7 +10974,7 @@ function Spiral($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$18();
+	var span = root$28();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -10973,8 +10983,8 @@ function Spiral($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$17 = $.from_html(`<span style="display:contents"><!></span>`);
-function Star($$anchor, $$props) {
+var root$27 = $.from_html(`<span style="display:contents"><!></span>`);
+function SimplexNoise($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -11109,7 +11119,7 @@ function Star($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$17();
+	var span = root$27();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -11118,8 +11128,8 @@ function Star($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$16 = $.from_html(`<span style="display:contents"><!></span>`);
-function Strands($$anchor, $$props) {
+var root$26 = $.from_html(`<span style="display:contents"><!></span>`);
+function SineWave($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -11254,7 +11264,7 @@ function Strands($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$16();
+	var span = root$26();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -11263,8 +11273,8 @@ function Strands($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$15 = $.from_html(`<span style="display:contents"><!></span>`);
-function Stretch($$anchor, $$props) {
+var root$25 = $.from_html(`<span style="display:contents"><!></span>`);
+function Solarize($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -11399,7 +11409,7 @@ function Stretch($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$15();
+	var span = root$25();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -11408,8 +11418,8 @@ function Stretch($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$14 = $.from_html(`<span style="display:contents"><!></span>`);
-function Stripes($$anchor, $$props) {
+var root$24 = $.from_html(`<span style="display:contents"><!></span>`);
+function SolidColor($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -11544,7 +11554,7 @@ function Stripes($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$14();
+	var span = root$24();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -11553,8 +11563,8 @@ function Stripes($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$13 = $.from_html(`<span style="display:contents"><!></span>`);
-function StudioBackground($$anchor, $$props) {
+var root$23 = $.from_html(`<span style="display:contents"><!></span>`);
+function Spherize($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -11689,7 +11699,7 @@ function StudioBackground($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$13();
+	var span = root$23();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -11698,8 +11708,8 @@ function StudioBackground($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$12 = $.from_html(`<span style="display:contents"><!></span>`);
-function Swirl($$anchor, $$props) {
+var root$22 = $.from_html(`<span style="display:contents"><!></span>`);
+function Spiral($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -11834,7 +11844,7 @@ function Swirl($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$12();
+	var span = root$22();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -11843,8 +11853,8 @@ function Swirl($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$11 = $.from_html(`<span style="display:contents"><!></span>`);
-function TiltShift($$anchor, $$props) {
+var root$21 = $.from_html(`<span style="display:contents"><!></span>`);
+function Star($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -11979,7 +11989,7 @@ function TiltShift($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$11();
+	var span = root$21();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -11988,8 +11998,8 @@ function TiltShift($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$10 = $.from_html(`<span style="display:contents"><!></span>`);
-function Tint($$anchor, $$props) {
+var root$20 = $.from_html(`<span style="display:contents"><!></span>`);
+function Strands($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -12124,7 +12134,7 @@ function Tint($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$10();
+	var span = root$20();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -12133,8 +12143,8 @@ function Tint($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$9 = $.from_html(`<span style="display:contents"><!></span>`);
-function Trapezoid($$anchor, $$props) {
+var root$19 = $.from_html(`<span style="display:contents"><!></span>`);
+function Stretch($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -12269,7 +12279,7 @@ function Trapezoid($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$9();
+	var span = root$19();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -12278,8 +12288,8 @@ function Trapezoid($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$8 = $.from_html(`<span style="display:contents"><!></span>`);
-function Tritone($$anchor, $$props) {
+var root$18 = $.from_html(`<span style="display:contents"><!></span>`);
+function Stripes($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -12414,7 +12424,7 @@ function Tritone($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$8();
+	var span = root$18();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -12423,8 +12433,8 @@ function Tritone($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$7 = $.from_html(`<span style="display:contents"><!></span>`);
-function Twirl($$anchor, $$props) {
+var root$17 = $.from_html(`<span style="display:contents"><!></span>`);
+function StudioBackground($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -12559,7 +12569,7 @@ function Twirl($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$7();
+	var span = root$17();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -12568,8 +12578,8 @@ function Twirl($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$6 = $.from_html(`<span style="display:contents"><!></span>`);
-function Vesica($$anchor, $$props) {
+var root$16 = $.from_html(`<span style="display:contents"><!></span>`);
+function Swirl($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -12704,7 +12714,7 @@ function Vesica($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$6();
+	var span = root$16();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -12713,8 +12723,8 @@ function Vesica($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$5 = $.from_html(`<span style="display:contents"><!></span>`);
-function Vibrance($$anchor, $$props) {
+var root$15 = $.from_html(`<span style="display:contents"><!></span>`);
+function TiltShift($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -12849,7 +12859,7 @@ function Vibrance($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$5();
+	var span = root$15();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -12858,8 +12868,8 @@ function Vibrance($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$4 = $.from_html(`<span style="display:contents"><!></span>`);
-function VideoTexture($$anchor, $$props) {
+var root$14 = $.from_html(`<span style="display:contents"><!></span>`);
+function Tint($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -12994,7 +13004,7 @@ function VideoTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$4();
+	var span = root$14();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -13003,8 +13013,8 @@ function VideoTexture($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$3 = $.from_html(`<span style="display:contents"><!></span>`);
-function WaveDistortion($$anchor, $$props) {
+var root$13 = $.from_html(`<span style="display:contents"><!></span>`);
+function Trapezoid($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -13139,7 +13149,7 @@ function WaveDistortion($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$3();
+	var span = root$13();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -13148,8 +13158,8 @@ function WaveDistortion($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$2 = $.from_html(`<span style="display:contents"><!></span>`);
-function WebcamTexture($$anchor, $$props) {
+var root$12 = $.from_html(`<span style="display:contents"><!></span>`);
+function Tritone($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -13284,7 +13294,7 @@ function WebcamTexture($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
-	var span = root$2();
+	var span = root$12();
 	var node = $.child(span);
 	children?.(node);
 	$.reset(span);
@@ -13293,8 +13303,8 @@ function WebcamTexture($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-var root$1 = $.from_html(`<span style="display:contents"><!></span>`);
-function ZoomBlur($$anchor, $$props) {
+var root$11 = $.from_html(`<span style="display:contents"><!></span>`);
+function Truchet($$anchor, $$props) {
 	$.push($$props, true);
 	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");
@@ -13429,6 +13439,1456 @@ function ZoomBlur($$anchor, $$props) {
 		$.set(isRegistered, false);
 		parentRegister(instanceId, null, null, null, null);
 	});
+	var span = root$11();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$10 = $.from_html(`<span style="display:contents"><!></span>`);
+function Twirl($$anchor, $$props) {
+	$.push($$props, true);
+	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$92.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$92.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$92, $.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");
+	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$92 && typeof componentDefinition$92.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$92.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$92);
+			$.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$92,
+			fragmentNode: componentDefinition$92?.fragmentNode,
+			type: typeof componentDefinition$92?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$10();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$9 = $.from_html(`<span style="display:contents"><!></span>`);
+function Vesica($$anchor, $$props) {
+	$.push($$props, true);
+	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$93.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$93.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$93, $.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");
+	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$93 && typeof componentDefinition$93.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$93.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$93);
+			$.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$93,
+			fragmentNode: componentDefinition$93?.fragmentNode,
+			type: typeof componentDefinition$93?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$9();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$8 = $.from_html(`<span style="display:contents"><!></span>`);
+function Vibrance($$anchor, $$props) {
+	$.push($$props, true);
+	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$94.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$94.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$94, $.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");
+	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$94 && typeof componentDefinition$94.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$94.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$94);
+			$.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$94,
+			fragmentNode: componentDefinition$94?.fragmentNode,
+			type: typeof componentDefinition$94?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$8();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$7 = $.from_html(`<span style="display:contents"><!></span>`);
+function VideoTexture($$anchor, $$props) {
+	$.push($$props, true);
+	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$95.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$95.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$95, $.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");
+	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$95 && typeof componentDefinition$95.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$95.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$95);
+			$.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$95,
+			fragmentNode: componentDefinition$95?.fragmentNode,
+			type: typeof componentDefinition$95?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$7();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$6 = $.from_html(`<span style="display:contents"><!></span>`);
+function Vignette($$anchor, $$props) {
+	$.push($$props, true);
+	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$96.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$96.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$96, $.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");
+	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$96 && typeof componentDefinition$96.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$96.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$96);
+			$.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$96,
+			fragmentNode: componentDefinition$96?.fragmentNode,
+			type: typeof componentDefinition$96?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$6();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$5 = $.from_html(`<span style="display:contents"><!></span>`);
+function Voronoi($$anchor, $$props) {
+	$.push($$props, true);
+	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$97.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$97.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$97, $.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");
+	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$97 && typeof componentDefinition$97.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$97.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$97);
+			$.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$97,
+			fragmentNode: componentDefinition$97?.fragmentNode,
+			type: typeof componentDefinition$97?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$5();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$4 = $.from_html(`<span style="display:contents"><!></span>`);
+function WaveDistortion($$anchor, $$props) {
+	$.push($$props, true);
+	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$98.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$98.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$98, $.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");
+	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$98 && typeof componentDefinition$98.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$98.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$98);
+			$.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$98,
+			fragmentNode: componentDefinition$98?.fragmentNode,
+			type: typeof componentDefinition$98?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$4();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$3 = $.from_html(`<span style="display:contents"><!></span>`);
+function Weave($$anchor, $$props) {
+	$.push($$props, true);
+	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$99.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$99.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$99, $.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");
+	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$99 && typeof componentDefinition$99.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$99.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$99);
+			$.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$99,
+			fragmentNode: componentDefinition$99?.fragmentNode,
+			type: typeof componentDefinition$99?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$3();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$2 = $.from_html(`<span style="display:contents"><!></span>`);
+function WebcamTexture($$anchor, $$props) {
+	$.push($$props, true);
+	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$100.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$100.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$100, $.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");
+	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$100 && typeof componentDefinition$100.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$100.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$100);
+			$.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$100,
+			fragmentNode: componentDefinition$100?.fragmentNode,
+			type: typeof componentDefinition$100?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
+	var span = root$2();
+	var node = $.child(span);
+	children?.(node);
+	$.reset(span);
+	$.bind_this(span, ($$value) => orderMarker = $$value, () => orderMarker);
+	$.template_effect(() => $.set_attribute(span, "data-shader-id", instanceId));
+	$.append($$anchor, span);
+	$.pop();
+}
+var root$1 = $.from_html(`<span style="display:contents"><!></span>`);
+function ZoomBlur($$anchor, $$props) {
+	$.push($$props, true);
+	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$101.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$101.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$101, $.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");
+	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$101 && typeof componentDefinition$101.fragmentNode === "function") {
+			parentRegister(instanceId, componentDefinition$101.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$101);
+			$.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$101,
+			fragmentNode: componentDefinition$101?.fragmentNode,
+			type: typeof componentDefinition$101?.fragmentNode
+		});
+	});
+	onDestroy(() => {
+		$.set(isRegistered, false);
+		parentRegister(instanceId, null, null, null, null);
+	});
 	var span = root$1();
 	var node = $.child(span);
 	children?.(node);
@@ -13481,7 +14941,7 @@ function Shader($$anchor, $$props) {
 		const checkRendering = () => {
 			if (!rendererInstance) return;
 			if (rendererInstance.getPerformanceStats().fps > 0) {
-				telemetryCollector = startTelemetry(rendererInstance, "2.5.87", disableTelemetry(), isPreview());
+				telemetryCollector = startTelemetry(rendererInstance, "2.5.89", disableTelemetry(), isPreview());
 				if (telemetryCollector) telemetryCollector.start();
 				telemetryStartTimeout = null;
 			} else telemetryStartTimeout = window.setTimeout(checkRendering, 500);
@@ -13678,15 +15138,18 @@ function Preview($$anchor, $$props) {
 		ChromaticAberration,
 		Circle,
 		ConcentricSpin,
+		ConicGradient,
 		ContourLines,
 		Crescent,
 		Cross,
 		Crystal,
 		CursorRipples,
 		CursorTrail,
+		DiamondGradient,
 		DiffuseBlur,
 		Dither,
 		DotGrid,
+		DropShadow,
 		Duotone,
 		Ellipse,
 		Emboss,
@@ -13707,6 +15170,7 @@ function Preview($$anchor, $$props) {
 		GridDistortion,
 		Group,
 		Halftone,
+		HexGrid,
 		HueShift,
 		ImageTexture,
 		Invert,
@@ -13716,6 +15180,7 @@ function Preview($$anchor, $$props) {
 		LinearGradient,
 		Liquify,
 		Mirror,
+		MultiPointGradient,
 		Neon,
 		Paper,
 		Perspective,
@@ -13735,6 +15200,7 @@ function Preview($$anchor, $$props) {
 		Shatter,
 		SimplexNoise,
 		SineWave,
+		Solarize,
 		SolidColor,
 		Spherize,
 		Spiral,
@@ -13748,11 +15214,15 @@ function Preview($$anchor, $$props) {
 		Tint,
 		Trapezoid,
 		Tritone,
+		Truchet,
 		Twirl,
 		Vesica,
 		Vibrance,
 		VideoTexture,
+		Vignette,
+		Voronoi,
 		WaveDistortion,
+		Weave,
 		WebcamTexture,
 		ZoomBlur
 	};
@@ -13905,4 +15375,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, ContourLines, Crescent, Cross, Crystal, CursorRipples, CursorTrail, DiffuseBlur, Dither, DotGrid, Duotone, Ellipse, Emboss, FallingLines, FilmGrain, FloatingParticles, FlowField, Flower, FlowingGradient, Form3D, Glass, GlassTiles, Glitch, Glow, Godrays, Grayscale, Grid, GridDistortion, Group, Halftone, HueShift, ImageTexture, Invert, Kaleidoscope, LensFlare, LinearBlur, LinearGradient, Liquify, Mirror, Neon, Paper, Perspective, Pixelate, Plasma, PolarCoordinates, Polygon, Posterize, Preview, ProgressiveBlur, RadialGradient, RectangularCoordinates, Ring, Ripples, RoundedRect, Saturation, Shader, Sharpness, Shatter, SimplexNoise, SineWave, SolidColor, Spherize, Spiral, Star, Strands, Stretch, Stripes, StudioBackground, Swirl, TiltShift, Tint, Trapezoid, Tritone, Twirl, Vesica, Vibrance, VideoTexture, WaveDistortion, 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, DiamondGradient, DiffuseBlur, Dither, DotGrid, DropShadow, Duotone, Ellipse, Emboss, FallingLines, FilmGrain, FloatingParticles, FlowField, Flower, FlowingGradient, Form3D, Glass, GlassTiles, Glitch, Glow, Godrays, Grayscale, Grid, GridDistortion, Group, Halftone, HexGrid, HueShift, ImageTexture, Invert, Kaleidoscope, LensFlare, LinearBlur, LinearGradient, Liquify, Mirror, MultiPointGradient, Neon, Paper, Perspective, Pixelate, Plasma, PolarCoordinates, Polygon, Posterize, Preview, ProgressiveBlur, RadialGradient, RectangularCoordinates, Ring, Ripples, RoundedRect, Saturation, Shader, Sharpness, Shatter, SimplexNoise, SineWave, Solarize, SolidColor, Spherize, Spiral, Star, Strands, Stretch, Stripes, StudioBackground, Swirl, TiltShift, Tint, Trapezoid, Tritone, Truchet, Twirl, Vesica, Vibrance, VideoTexture, Vignette, Voronoi, WaveDistortion, Weave, WebcamTexture, ZoomBlur, generatePresetCode };