shaders 2.5.102 → 2.5.104

package/dist/svelte/source/components/SmokeFill.svelte

@@ -0,0 +1,327 @@
+<script lang="ts">
+    import { getContext, setContext, onMount, onDestroy } from 'svelte';
+    import {
+        createUniformsMap,
+        type UniformsMap,
+        type BlendMode,
+        type NodeMetadata,
+        type PropConfig,
+        type MaskConfig,
+        type PropDriver,
+        type TransformConfig
+    } from '../../../core/index.js';
+    import {setColorSpaceMode} from '../../../core/utilities/transformations/index.js';
+
+    // @ts-ignore - this import is replaced at build time
+    import { componentDefinition, type ComponentProps } from '../../../core/shaders/SmokeFill/index.js';
+
+    // Warn once per page load if this is an experimental component
+    let _experimentalWarnedOnce = false;
+    if ((componentDefinition as any).experimental && !_experimentalWarnedOnce) {
+        _experimentalWarnedOnce = true;
+        const _e = (componentDefinition as any).experimental;
+        console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, 'color: #f59e0b; font-weight: bold');
+    }
+
+    /**
+     * Define component props including blend mode, opacity, visibility, masking, and transformation
+     */
+    interface ExtendedComponentProps extends Partial<ComponentProps> {
+        center?: ComponentProps['center'] | PropDriver;
+        emitFrom?: ComponentProps['emitFrom'] | PropDriver;
+        blendMode?: BlendMode;
+        opacity?: number;
+        visible?: boolean;
+        id?: string;
+        maskSource?: string;
+        maskType?: string;
+        renderOrder?: number;
+        transform?: Partial<TransformConfig>;
+        children?: import('svelte').Snippet;
+    }
+
+    function isPropDriver(value: unknown): value is PropDriver {
+        return typeof value === 'object' && value !== null && 'type' in value &&
+            ((value as any).type === 'map' || (value as any).type === 'mouse' || (value as any).type === 'mouse-position' || (value as any).type === 'auto-animate');
+    }
+
+    /**
+     * Default transform configuration (optimized for zero overhead)
+     */
+    const DEFAULT_TRANSFORM: TransformConfig = {
+        offsetX: 0,
+        offsetY: 0,
+        rotation: 0,
+        scale: 1,
+        anchorX: 0.5,
+        anchorY: 0.5,
+        edges: 'transparent'
+    };
+
+    // Define the component props and their default values from the shader definition
+    const componentDefaults = {
+        blendMode: 'normal' as BlendMode,
+        visible: true,
+        // opacity intentionally has no default - handled by renderer
+        // transform intentionally has no default - handled by effectiveTransform
+        ...Object.entries(componentDefinition.props).reduce(
+            (acc, [key, config]) => {
+                acc[key] = (config as unknown as PropConfig<typeof config>).default;
+                return acc;
+            },
+            {} as Record<string, any>
+        )
+    };
+
+    // Declare props using Svelte 5's syntax
+    const props: ExtendedComponentProps = $props();
+
+    // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
+    // Use $derived so the metadata $effect re-runs when any of these change at runtime
+    const blendMode = $derived(props.blendMode ?? componentDefaults.blendMode);
+    const opacity = $derived(props.opacity); // No default - handled by renderer
+    const visible = $derived(props.visible ?? componentDefaults.visible); // Default to true
+    const id = $derived(props.id);
+    const maskSource = $derived(props.maskSource);
+    const maskType = $derived(props.maskType);
+    const renderOrder = $derived(props.renderOrder);
+    const { children } = props;
+
+    // Collect PropDriver values from shader props into the maps metadata structure
+    const mapsFromProps = $derived.by(() => {
+        const maps: Record<string, PropDriver> = {};
+        for (const key of Object.keys(componentDefinition.props)) {
+            const val = (props as any)[key];
+            if (isPropDriver(val)) maps[key] = val as PropDriver;
+        }
+        return Object.keys(maps).length > 0 ? maps : undefined;
+    });
+
+    /**
+     * Computed transform that merges user-provided values with defaults
+     */
+    const effectiveTransform = $derived({
+        ...DEFAULT_TRANSFORM,
+        ...props.transform
+    });
+
+    /**
+     * FIRST: Get the parent ID from context BEFORE setting our own context
+     */
+    const parentId = getContext<string>('shaderParentId');
+    if (parentId === undefined) {
+        throw new Error('Shader components must be used inside an <Shader> component or another shader component');
+    }
+
+    /**
+     * Use the provided ID or generate a unique identifier for this component instance
+     */
+    const instanceId = (id ? id.replace(/[^a-zA-Z0-9_]/g, '_') : null) || Math.random().toString(36).substring(2, 10);
+
+    /**
+     * THEN: Provide our unique identifier to child components
+     */
+    setContext('shaderParentId', instanceId);
+
+    /**
+     * Creates a non-reactive object containing only props that differ from defaults
+     * This optimization prevents unnecessary GPU uniform updates for unchanged values
+     * Special props like blendMode and opacity are handled separately
+     */
+    const shaderReadyProps = $derived.by(() => {
+        let baseProps = { ...componentDefaults };
+
+        // Only include props that differ from defaults (excluding special props and PropDrivers)
+        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 as any)[key];
+                if (isPropDriver(propValue)) continue; // PropDrivers go to metadata.maps, not uniforms
+                const defaultValue = (componentDefaults as any)[key];
+                if (propValue !== undefined && propValue !== defaultValue) {
+                    (baseProps as any)[key] = propValue;
+                }
+            }
+        }
+        return baseProps;
+    });
+
+    /**
+     * Get the color space from the root Shader component.
+     * Used to set the global color space mode before creating uniforms.
+     */
+    const shaderColorSpace = getContext<() => 'p3-linear' | 'srgb'>('shaderColorSpace');
+
+    /**
+     * Creates the GPU uniform values map using only the changed props
+     * Set the global color space mode before creating uniforms so colors are transformed correctly
+     * Note: Intentionally captures initial value - props are immutable after initialization
+     */
+    if (shaderColorSpace) {
+        setColorSpaceMode(shaderColorSpace());
+    }
+    // svelte-ignore state_referenced_locally
+    const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
+
+    /**
+     * Get the node registration function from parent context
+     */
+    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any, domCanvas?: HTMLCanvasElement) => void>('shaderNodeRegister');
+    if (parentRegister === undefined) {
+        throw new Error('Shader components must be used inside an <Shader> component or another shader component');
+    }
+
+    /**
+     * Get the uniform update function from parent context
+     */
+    const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('shaderUniformUpdate');
+    if (parentUniformUpdate === undefined) {
+        throw new Error('Shader components require shaderUniformUpdate from parent');
+    }
+
+    /**
+     * Get the metadata update function from parent context
+     */
+    const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('shaderMetadataUpdate');
+    if (parentMetadataUpdate === undefined) {
+        throw new Error('Shader components require shaderMetadataUpdate from parent');
+    }
+
+    // capturesDOM — canvas layoutsubtree portal for DOMTexture-style shaders
+    const isCapturesDOM = !!(componentDefinition as any).capturesDOM;
+    let captureCanvas: HTMLCanvasElement | undefined;
+    let captureW = $state(typeof window !== 'undefined' ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+    let captureH = $state(typeof window !== 'undefined' ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+
+    function teleportToBody(node: HTMLElement) {
+        document.body.appendChild(node);
+        return { destroy() { node.remove(); } };
+    }
+
+    if (isCapturesDOM) {
+        const onWinResize = () => {
+            const d = Math.min(window.devicePixelRatio, 2);
+            captureW = Math.round(window.innerWidth * d);
+            captureH = Math.round(window.innerHeight * d);
+        };
+        onMount(() => { window.addEventListener('resize', onWinResize); });
+        onDestroy(() => { window.removeEventListener('resize', onWinResize); });
+    }
+
+    // DOM marker ref for determining render order from template position
+    let orderMarker: HTMLSpanElement;
+
+    // Stores the DOM-detected render order
+    let detectedRenderOrder: number | undefined = undefined;
+
+    // Flag to track when component is registered
+    let isRegistered = $state(false);
+
+    // Setup uniform watchers with registration guard
+    Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
+        $effect(() => {
+            // Only run after component is registered
+            if (!isRegistered) return;
+
+            if (uniform && uniform.value !== undefined) {
+                const newValue = (props as any)[propName];
+                if (newValue !== undefined && !isPropDriver(newValue)) {
+                    // Send raw value - renderer will handle transformation
+                    // PropDriver values go to metadata.maps, not uniforms
+                    parentUniformUpdate(instanceId, propName, newValue);
+                }
+            }
+        });
+    });
+
+    // Watch blend mode, opacity, visibility, masking, transformations, and prop maps changes
+    $effect(() => {
+        // Only run after component is registered
+        if (!isRegistered) return;
+
+        const metadata: NodeMetadata = {
+            blendMode,
+            opacity,
+            visible: visible === false ? false : true,
+            id,
+            mask: maskSource ? {
+                source: maskSource,
+                type: (maskType || 'alpha') as MaskConfig['type']
+            } : undefined,
+            maps: mapsFromProps,
+            renderOrder: renderOrder ?? detectedRenderOrder,
+            transform: effectiveTransform
+        };
+        parentMetadataUpdate(instanceId, metadata);
+    });
+
+    // Register this component after mount to ensure parent is ready
+    onMount(() => {
+        // Register this component with safety check
+        if (componentDefinition && typeof componentDefinition.fragmentNode === 'function') {
+            parentRegister(
+                instanceId,
+                componentDefinition.fragmentNode,
+                parentId,
+                {
+                    blendMode,
+                    opacity,
+                    visible: visible !== false ? true : false,
+                    id,
+                    mask: maskSource ? {
+                        source: maskSource,
+                        type: (maskType || 'alpha') as MaskConfig['type']
+                    } as MaskConfig : undefined,
+                    maps: mapsFromProps,
+                    renderOrder: renderOrder ?? detectedRenderOrder,
+                    transform: effectiveTransform
+                },
+                uniforms,
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
+            );
+
+            // Set flag to enable effects after successful registration
+            isRegistered = true;
+
+            // Detect DOM position for correct render ordering
+            if (renderOrder === undefined && 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 } as NodeMetadata);
+                    }
+                }
+            }
+        } else {
+            console.error('componentDefinition.fragmentNode is not a function:', {
+                componentDefinition,
+                fragmentNode: componentDefinition?.fragmentNode,
+                type: typeof componentDefinition?.fragmentNode
+            });
+        }
+    });
+
+    // Clean up node from registry when component is unmounted
+    onDestroy(() => {
+        isRegistered = false;
+        parentRegister(instanceId, null, null, null, null);
+    });
+</script>
+
+<span bind:this={orderMarker} style="display:contents" data-shader-id={instanceId}>
+    {#if !isCapturesDOM}
+        {@render children?.()}
+    {/if}
+</span>
+{#if isCapturesDOM}
+    <canvas use:teleportToBody bind:this={captureCanvas} layoutsubtree
+            width={captureW} height={captureH}
+            style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999">
+        {@render children?.()}
+    </canvas>
+{/if}

package/dist/svelte/source/engine/Preview.svelte

@@ -42,6 +42,7 @@ import FloatingParticles from '../components/FloatingParticles.svelte'
 import FlowField from '../components/FlowField.svelte'
 import Flower from '../components/Flower.svelte'
 import FlowingGradient from '../components/FlowingGradient.svelte'
+import Fog from '../components/Fog.svelte'
 import Form3D from '../components/Form3D.svelte'
 import Glass from '../components/Glass.svelte'
 import GlassTiles from '../components/GlassTiles.svelte'
@@ -83,6 +84,8 @@ import Sharpness from '../components/Sharpness.svelte'
 import Shatter from '../components/Shatter.svelte'
 import SimplexNoise from '../components/SimplexNoise.svelte'
 import SineWave from '../components/SineWave.svelte'
+import Smoke from '../components/Smoke.svelte'
+import SmokeFill from '../components/SmokeFill.svelte'
 import Solarize from '../components/Solarize.svelte'
 import SolidColor from '../components/SolidColor.svelte'
 import Spherize from '../components/Spherize.svelte'
@@ -150,6 +153,7 @@ const componentMap: Record<string, any> = {
   FlowField,
   Flower,
   FlowingGradient,
+  Fog,
   Form3D,
   Glass,
   GlassTiles,
@@ -191,6 +195,8 @@ const componentMap: Record<string, any> = {
   Shatter,
   SimplexNoise,
   SineWave,
+  Smoke,
+  SmokeFill,
   Solarize,
   SolidColor,
   Spherize,

package/dist/svelte/source/index.js

@@ -35,6 +35,7 @@ export { default as FloatingParticles } from './components/FloatingParticles.sve
 export { default as FlowField } from './components/FlowField.svelte';
 export { default as Flower } from './components/Flower.svelte';
 export { default as FlowingGradient } from './components/FlowingGradient.svelte';
+export { default as Fog } from './components/Fog.svelte';
 export { default as Form3D } from './components/Form3D.svelte';
 export { default as Glass } from './components/Glass.svelte';
 export { default as GlassTiles } from './components/GlassTiles.svelte';
@@ -76,6 +77,8 @@ export { default as Sharpness } from './components/Sharpness.svelte';
 export { default as Shatter } from './components/Shatter.svelte';
 export { default as SimplexNoise } from './components/SimplexNoise.svelte';
 export { default as SineWave } from './components/SineWave.svelte';
+export { default as Smoke } from './components/Smoke.svelte';
+export { default as SmokeFill } from './components/SmokeFill.svelte';
 export { default as Solarize } from './components/Solarize.svelte';
 export { default as SolidColor } from './components/SolidColor.svelte';
 export { default as Spherize } from './components/Spherize.svelte';

package/dist/svelte/utils/generatePresetCode.js

@@ -1,2 +1,2 @@
-import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-BygAdFRo.js";
+import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-DR_OAIL7.js";
 export { availableComponents, generatePresetCode };

package/dist/vue/Fog.js

@@ -0,0 +1,3 @@
+import Fog_vue_vue_type_script_setup_true_lang_default from "./Fog.vue_vue_type_script_setup_true_lang.js";
+var Fog_default = Fog_vue_vue_type_script_setup_true_lang_default;
+export { Fog_default as default };

package/dist/vue/Fog.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,222 @@
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { createUniformsMap } from "../core/index.js";
+import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
+import { componentDefinition } from "../core/shaders/Fog/index.js";
+var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
+var Fog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Fog",
+	props: /* @__PURE__ */ mergeDefaults({
+		blendMode: {},
+		opacity: {},
+		visible: { type: Boolean },
+		id: {},
+		maskSource: {},
+		maskType: {},
+		renderOrder: {},
+		transform: {},
+		colorA: {},
+		colorB: {},
+		seed: {},
+		speed: {},
+		turbulence: {},
+		detail: {},
+		blending: {},
+		mouseInfluence: {},
+		mouseRadius: {},
+		colorSpace: {}
+	}, {
+		blendMode: "normal",
+		visible: true,
+		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
+			acc[key] = config.default;
+			return acc;
+		}, {})
+	}),
+	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
+		function isPropDriver(value) {
+			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
+		}
+		const props = __props;
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
+		provide("shaderParentId", instanceId);
+		const DEFAULT_TRANSFORM = {
+			offsetX: 0,
+			offsetY: 0,
+			rotation: 0,
+			scale: 1,
+			anchorX: .5,
+			anchorY: .5,
+			edges: "transparent"
+		};
+		const effectiveTransform = computed(() => ({
+			...DEFAULT_TRANSFORM,
+			...props.transform
+		}));
+		const shaderReadyProps = computed(() => {
+			let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
+				acc[key] = config.default;
+				return acc;
+			}, {}) };
+			for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform") {
+				const val = toValue(props[key]);
+				if (isPropDriver(val)) continue;
+				if (val !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
+					acc[key$1] = config.default;
+					return acc;
+				}, {})[key]) baseProps[key] = val;
+			}
+			return baseProps;
+		});
+		const mapsFromProps = computed(() => {
+			const maps = {};
+			for (const key of Object.keys(componentDefinition.props)) {
+				const val = props[key];
+				if (isPropDriver(val)) maps[key] = val;
+			}
+			return Object.keys(maps).length > 0 ? maps : void 0;
+		});
+		const shaderColorSpace = inject("shaderColorSpace");
+		if (shaderColorSpace) setColorSpaceMode(shaderColorSpace.value);
+		const uniforms = createUniformsMap(componentDefinition, shaderReadyProps.value, instanceId);
+		const parentId = inject("shaderParentId");
+		if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+		const parentRegister = inject("shaderNodeRegister");
+		if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+		const parentUniformUpdate = inject("shaderUniformUpdate");
+		if (parentUniformUpdate === void 0) throw new Error("Shader components require shaderUniformUpdate from parent");
+		const parentMetadataUpdate = inject("shaderMetadataUpdate");
+		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
+		const rendererResetSignal = inject("shaderRendererResetSignal");
+		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
+		let detectedRenderOrder = void 0;
+		const registerWithRenderer = () => {
+			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
+				blendMode: props.blendMode,
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				maps: mapsFromProps.value,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
+				transform: effectiveTransform.value
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
+		};
+		onMounted(() => {
+			if (props.renderOrder === void 0 && orderMarker.value) {
+				const parent = orderMarker.value.parentElement;
+				if (parent) {
+					const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+					const position = Array.from(siblings).indexOf(orderMarker.value);
+					if (position >= 0) {
+						detectedRenderOrder = position;
+						parentMetadataUpdate(instanceId, { renderOrder: position });
+					}
+				}
+			}
+		});
+		const setupUniformWatchers = () => {
+			const scope = effectScope();
+			scope.run(() => {
+				Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
+					watch(() => props[propName], (newValue) => {
+						if (uniform && uniform.value !== void 0 && !isPropDriver(newValue)) parentUniformUpdate(instanceId, propName, newValue);
+					}, { deep: true });
+				});
+				watch(() => [
+					props.blendMode,
+					props.opacity,
+					props.visible,
+					props.id,
+					props.maskSource,
+					props.maskType,
+					props.renderOrder,
+					props.transform,
+					mapsFromProps.value
+				], ([blendMode, opacity, visible]) => {
+					parentMetadataUpdate(instanceId, {
+						blendMode,
+						opacity,
+						visible: visible === false ? false : true,
+						id: props.id,
+						mask: props.maskSource ? {
+							source: props.maskSource,
+							type: props.maskType || "alpha"
+						} : void 0,
+						maps: mapsFromProps.value,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
+						transform: effectiveTransform.value
+					});
+				}, { deep: true });
+				if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
+					if (newValue > 0) registerWithRenderer();
+				}, { immediate: true });
+			});
+			onBeforeUnmount(() => {
+				scope.stop();
+			});
+		};
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
+		onBeforeUnmount(() => {
+			parentRegister(instanceId, null, null, null, null, null);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+export { Fog_vue_vue_type_script_setup_true_lang_default as default };

package/dist/vue/Halftone.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,12 @@ var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	props: /* @__PURE__ */ mergeDefaults({
 		frequency: {},
 		angle: {},
-		smoothness: {},
+		cyanAngle: {},
+		magentaAngle: {},
+		yellowAngle: {},
+		blackAngle: {},
+		misprint: {},
+		misprintAngle: {},
 		blendMode: {},
 		opacity: {},
 		visible: { type: Boolean },
@@ -17,7 +22,13 @@ var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		maskSource: {},
 		maskType: {},
 		renderOrder: {},
-		transform: {}
+		transform: {},
+		style: {},
+		paperColor: {},
+		cyanColor: {},
+		magentaColor: {},
+		yellowColor: {},
+		blackColor: {}
 	}, {
 		blendMode: "normal",
 		visible: true,

package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js

@@ -35,6 +35,7 @@ import FloatingParticles_default from "./FloatingParticles.js";
 import FlowField_default from "./FlowField.js";
 import Flower_default from "./Flower.js";
 import FlowingGradient_default from "./FlowingGradient.js";
+import Fog_default from "./Fog.js";
 import Form3D_default from "./Form3D.js";
 import Glass_default from "./Glass.js";
 import GlassTiles_default from "./GlassTiles.js";
@@ -76,6 +77,8 @@ import Sharpness_default from "./Sharpness.js";
 import Shatter_default from "./Shatter.js";
 import SimplexNoise_default from "./SimplexNoise.js";
 import SineWave_default from "./SineWave.js";
+import Smoke_default from "./Smoke.js";
+import SmokeFill_default from "./SmokeFill.js";
 import Solarize_default from "./Solarize.js";
 import SolidColor_default from "./SolidColor.js";
 import Spherize_default from "./Spherize.js";
@@ -194,6 +197,7 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			FlowField: FlowField_default,
 			Flower: Flower_default,
 			FlowingGradient: FlowingGradient_default,
+			Fog: Fog_default,
 			Form3D: Form3D_default,
 			Glass: Glass_default,
 			GlassTiles: GlassTiles_default,
@@ -235,6 +239,8 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			Shatter: Shatter_default,
 			SimplexNoise: SimplexNoise_default,
 			SineWave: SineWave_default,
+			Smoke: Smoke_default,
+			SmokeFill: SmokeFill_default,
 			Solarize: Solarize_default,
 			SolidColor: SolidColor_default,
 			Spherize: Spherize_default,

package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js

@@ -60,7 +60,7 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		const startTelemetryWhenReady = () => {
 			const checkRendering = () => {
 				if (rendererInstance.value.getPerformanceStats().fps > 0) {
-					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.102", props.disableTelemetry, props.isPreview);
+					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.104", props.disableTelemetry, props.isPreview);
 					if (telemetryCollector) telemetryCollector.start();
 					telemetryStartTimeout = null;
 				} else telemetryStartTimeout = setTimeout(checkRendering, 500);