shaders 2.3.75 → 2.4.77

package/dist/svelte/source/components/Vesica.svelte

@@ -0,0 +1,287 @@
+<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/Vesica/index.js';
+
+    /**
+     * Define component props including blend mode, opacity, visibility, masking, and transformation
+     */
+    interface ExtendedComponentProps extends Partial<ComponentProps> {
+        center?: ComponentProps['center'] | 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) => 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');
+    }
+
+    // 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
+            );
+
+            // 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}>
+    {@render children?.()}
+</span>

package/dist/svelte/source/components/Vibrance.svelte

@@ -7,7 +7,6 @@
         type NodeMetadata,
         type PropConfig,
         type MaskConfig,
-        type MapConfig,
         type PropDriver,
         type TransformConfig
     } from '../../../core/index.js';
@@ -33,7 +32,8 @@
     }
 
     function isPropDriver(value: unknown): value is PropDriver {
-        return typeof value === 'object' && value !== null && 'type' in value && (value as any).type === 'map';
+        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');
     }
 
     /**
@@ -80,10 +80,10 @@
 
     // Collect PropDriver values from shader props into the maps metadata structure
     const mapsFromProps = $derived.by(() => {
-        const maps: Record<string, MapConfig> = {};
+        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 MapConfig;
+            if (isPropDriver(val)) maps[key] = val as PropDriver;
         }
         return Object.keys(maps).length > 0 ? maps : undefined;
     });

package/dist/svelte/source/components/VideoTexture.svelte

@@ -7,7 +7,6 @@
         type NodeMetadata,
         type PropConfig,
         type MaskConfig,
-        type MapConfig,
         type PropDriver,
         type TransformConfig
     } from '../../../core/index.js';
@@ -32,7 +31,8 @@
     }
 
     function isPropDriver(value: unknown): value is PropDriver {
-        return typeof value === 'object' && value !== null && 'type' in value && (value as any).type === 'map';
+        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');
     }
 
     /**
@@ -79,10 +79,10 @@
 
     // Collect PropDriver values from shader props into the maps metadata structure
     const mapsFromProps = $derived.by(() => {
-        const maps: Record<string, MapConfig> = {};
+        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 MapConfig;
+            if (isPropDriver(val)) maps[key] = val as PropDriver;
         }
         return Object.keys(maps).length > 0 ? maps : undefined;
     });

package/dist/svelte/source/components/WaveDistortion.svelte

@@ -7,7 +7,6 @@
         type NodeMetadata,
         type PropConfig,
         type MaskConfig,
-        type MapConfig,
         type PropDriver,
         type TransformConfig
     } from '../../../core/index.js';
@@ -35,7 +34,8 @@
     }
 
     function isPropDriver(value: unknown): value is PropDriver {
-        return typeof value === 'object' && value !== null && 'type' in value && (value as any).type === 'map';
+        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');
     }
 
     /**
@@ -82,10 +82,10 @@
 
     // Collect PropDriver values from shader props into the maps metadata structure
     const mapsFromProps = $derived.by(() => {
-        const maps: Record<string, MapConfig> = {};
+        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 MapConfig;
+            if (isPropDriver(val)) maps[key] = val as PropDriver;
         }
         return Object.keys(maps).length > 0 ? maps : undefined;
     });

package/dist/svelte/source/components/WebcamTexture.svelte

@@ -7,7 +7,6 @@
         type NodeMetadata,
         type PropConfig,
         type MaskConfig,
-        type MapConfig,
         type PropDriver,
         type TransformConfig
     } from '../../../core/index.js';
@@ -32,7 +31,8 @@
     }
 
     function isPropDriver(value: unknown): value is PropDriver {
-        return typeof value === 'object' && value !== null && 'type' in value && (value as any).type === 'map';
+        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');
     }
 
     /**
@@ -79,10 +79,10 @@
 
     // Collect PropDriver values from shader props into the maps metadata structure
     const mapsFromProps = $derived.by(() => {
-        const maps: Record<string, MapConfig> = {};
+        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 MapConfig;
+            if (isPropDriver(val)) maps[key] = val as PropDriver;
         }
         return Object.keys(maps).length > 0 ? maps : undefined;
     });

package/dist/svelte/source/components/ZoomBlur.svelte

@@ -7,7 +7,6 @@
         type NodeMetadata,
         type PropConfig,
         type MaskConfig,
-        type MapConfig,
         type PropDriver,
         type TransformConfig
     } from '../../../core/index.js';
@@ -21,6 +20,7 @@
      */
     interface ExtendedComponentProps extends Partial<ComponentProps> {
         intensity?: ComponentProps['intensity'] | PropDriver;
+        center?: ComponentProps['center'] | PropDriver;
         blendMode?: BlendMode;
         opacity?: number;
         visible?: boolean;
@@ -33,7 +33,8 @@
     }
 
     function isPropDriver(value: unknown): value is PropDriver {
-        return typeof value === 'object' && value !== null && 'type' in value && (value as any).type === 'map';
+        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');
     }
 
     /**
@@ -80,10 +81,10 @@
 
     // Collect PropDriver values from shader props into the maps metadata structure
     const mapsFromProps = $derived.by(() => {
-        const maps: Record<string, MapConfig> = {};
+        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 MapConfig;
+            if (isPropDriver(val)) maps[key] = val as PropDriver;
         }
         return Object.keys(maps).length > 0 ? maps : undefined;
     });

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

@@ -19,15 +19,23 @@ import ChromaticAberration from '../components/ChromaticAberration.svelte'
 import Circle from '../components/Circle.svelte'
 import ConcentricSpin from '../components/ConcentricSpin.svelte'
 import ContourLines from '../components/ContourLines.svelte'
+import Crescent from '../components/Crescent.svelte'
+import Cross from '../components/Cross.svelte'
 import CursorRipples from '../components/CursorRipples.svelte'
 import CursorTrail from '../components/CursorTrail.svelte'
 import DiffuseBlur from '../components/DiffuseBlur.svelte'
 import Dither from '../components/Dither.svelte'
 import DotGrid from '../components/DotGrid.svelte'
 import Duotone from '../components/Duotone.svelte'
+import Ellipse from '../components/Ellipse.svelte'
+import Emboss from '../components/Emboss.svelte'
+import FallingLines from '../components/FallingLines.svelte'
 import FilmGrain from '../components/FilmGrain.svelte'
 import FloatingParticles from '../components/FloatingParticles.svelte'
 import FlowField from '../components/FlowField.svelte'
+import Flower from '../components/Flower.svelte'
+import Form3D from '../components/Form3D.svelte'
+import Glass from '../components/Glass.svelte'
 import GlassTiles from '../components/GlassTiles.svelte'
 import Glitch from '../components/Glitch.svelte'
 import Glow from '../components/Glow.svelte'
@@ -46,15 +54,20 @@ import LinearBlur from '../components/LinearBlur.svelte'
 import LinearGradient from '../components/LinearGradient.svelte'
 import Liquify from '../components/Liquify.svelte'
 import Mirror from '../components/Mirror.svelte'
+import Neon from '../components/Neon.svelte'
+import Paper from '../components/Paper.svelte'
 import Perspective from '../components/Perspective.svelte'
 import Pixelate from '../components/Pixelate.svelte'
 import Plasma from '../components/Plasma.svelte'
 import PolarCoordinates from '../components/PolarCoordinates.svelte'
+import Polygon from '../components/Polygon.svelte'
 import Posterize from '../components/Posterize.svelte'
 import ProgressiveBlur from '../components/ProgressiveBlur.svelte'
 import RadialGradient from '../components/RadialGradient.svelte'
 import RectangularCoordinates from '../components/RectangularCoordinates.svelte'
+import Ring from '../components/Ring.svelte'
 import Ripples from '../components/Ripples.svelte'
+import RoundedRect from '../components/RoundedRect.svelte'
 import Saturation from '../components/Saturation.svelte'
 import Sharpness from '../components/Sharpness.svelte'
 import Shatter from '../components/Shatter.svelte'
@@ -63,6 +76,7 @@ import SineWave from '../components/SineWave.svelte'
 import SolidColor from '../components/SolidColor.svelte'
 import Spherize from '../components/Spherize.svelte'
 import Spiral from '../components/Spiral.svelte'
+import Star from '../components/Star.svelte'
 import Strands from '../components/Strands.svelte'
 import Stretch from '../components/Stretch.svelte'
 import Stripes from '../components/Stripes.svelte'
@@ -70,8 +84,10 @@ import StudioBackground from '../components/StudioBackground.svelte'
 import Swirl from '../components/Swirl.svelte'
 import TiltShift from '../components/TiltShift.svelte'
 import Tint from '../components/Tint.svelte'
+import Trapezoid from '../components/Trapezoid.svelte'
 import Tritone from '../components/Tritone.svelte'
 import Twirl from '../components/Twirl.svelte'
+import Vesica from '../components/Vesica.svelte'
 import Vibrance from '../components/Vibrance.svelte'
 import VideoTexture from '../components/VideoTexture.svelte'
 import WaveDistortion from '../components/WaveDistortion.svelte'
@@ -97,15 +113,23 @@ const componentMap: Record<string, any> = {
   Circle,
   ConcentricSpin,
   ContourLines,
+  Crescent,
+  Cross,
   CursorRipples,
   CursorTrail,
   DiffuseBlur,
   Dither,
   DotGrid,
   Duotone,
+  Ellipse,
+  Emboss,
+  FallingLines,
   FilmGrain,
   FloatingParticles,
   FlowField,
+  Flower,
+  Form3D,
+  Glass,
   GlassTiles,
   Glitch,
   Glow,
@@ -124,15 +148,20 @@ const componentMap: Record<string, any> = {
   LinearGradient,
   Liquify,
   Mirror,
+  Neon,
+  Paper,
   Perspective,
   Pixelate,
   Plasma,
   PolarCoordinates,
+  Polygon,
   Posterize,
   ProgressiveBlur,
   RadialGradient,
   RectangularCoordinates,
+  Ring,
   Ripples,
+  RoundedRect,
   Saturation,
   Sharpness,
   Shatter,
@@ -141,6 +170,7 @@ const componentMap: Record<string, any> = {
   SolidColor,
   Spherize,
   Spiral,
+  Star,
   Strands,
   Stretch,
   Stripes,
@@ -148,8 +178,10 @@ const componentMap: Record<string, any> = {
   Swirl,
   TiltShift,
   Tint,
+  Trapezoid,
   Tritone,
   Twirl,
+  Vesica,
   Vibrance,
   VideoTexture,
   WaveDistortion,

package/dist/svelte/source/index.js

@@ -14,15 +14,23 @@ export { default as ChromaticAberration } from './components/ChromaticAberration
 export { default as Circle } from './components/Circle.svelte';
 export { default as ConcentricSpin } from './components/ConcentricSpin.svelte';
 export { default as ContourLines } from './components/ContourLines.svelte';
+export { default as Crescent } from './components/Crescent.svelte';
+export { default as Cross } from './components/Cross.svelte';
 export { default as CursorRipples } from './components/CursorRipples.svelte';
 export { default as CursorTrail } from './components/CursorTrail.svelte';
 export { default as DiffuseBlur } from './components/DiffuseBlur.svelte';
 export { default as Dither } from './components/Dither.svelte';
 export { default as DotGrid } from './components/DotGrid.svelte';
 export { default as Duotone } from './components/Duotone.svelte';
+export { default as Ellipse } from './components/Ellipse.svelte';
+export { default as Emboss } from './components/Emboss.svelte';
+export { default as FallingLines } from './components/FallingLines.svelte';
 export { default as FilmGrain } from './components/FilmGrain.svelte';
 export { default as FloatingParticles } from './components/FloatingParticles.svelte';
 export { default as FlowField } from './components/FlowField.svelte';
+export { default as Flower } from './components/Flower.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';
 export { default as Glitch } from './components/Glitch.svelte';
 export { default as Glow } from './components/Glow.svelte';
@@ -41,15 +49,20 @@ export { default as LinearBlur } from './components/LinearBlur.svelte';
 export { default as LinearGradient } from './components/LinearGradient.svelte';
 export { default as Liquify } from './components/Liquify.svelte';
 export { default as Mirror } from './components/Mirror.svelte';
+export { default as Neon } from './components/Neon.svelte';
+export { default as Paper } from './components/Paper.svelte';
 export { default as Perspective } from './components/Perspective.svelte';
 export { default as Pixelate } from './components/Pixelate.svelte';
 export { default as Plasma } from './components/Plasma.svelte';
 export { default as PolarCoordinates } from './components/PolarCoordinates.svelte';
+export { default as Polygon } from './components/Polygon.svelte';
 export { default as Posterize } from './components/Posterize.svelte';
 export { default as ProgressiveBlur } from './components/ProgressiveBlur.svelte';
 export { default as RadialGradient } from './components/RadialGradient.svelte';
 export { default as RectangularCoordinates } from './components/RectangularCoordinates.svelte';
+export { default as Ring } from './components/Ring.svelte';
 export { default as Ripples } from './components/Ripples.svelte';
+export { default as RoundedRect } from './components/RoundedRect.svelte';
 export { default as Saturation } from './components/Saturation.svelte';
 export { default as Sharpness } from './components/Sharpness.svelte';
 export { default as Shatter } from './components/Shatter.svelte';
@@ -58,6 +71,7 @@ export { default as SineWave } from './components/SineWave.svelte';
 export { default as SolidColor } from './components/SolidColor.svelte';
 export { default as Spherize } from './components/Spherize.svelte';
 export { default as Spiral } from './components/Spiral.svelte';
+export { default as Star } from './components/Star.svelte';
 export { default as Strands } from './components/Strands.svelte';
 export { default as Stretch } from './components/Stretch.svelte';
 export { default as Stripes } from './components/Stripes.svelte';
@@ -65,8 +79,10 @@ export { default as StudioBackground } from './components/StudioBackground.svelt
 export { default as Swirl } from './components/Swirl.svelte';
 export { default as TiltShift } from './components/TiltShift.svelte';
 export { default as Tint } from './components/Tint.svelte';
+export { default as Trapezoid } from './components/Trapezoid.svelte';
 export { default as Tritone } from './components/Tritone.svelte';
 export { default as Twirl } from './components/Twirl.svelte';
+export { default as Vesica } from './components/Vesica.svelte';
 export { default as Vibrance } from './components/Vibrance.svelte';
 export { default as VideoTexture } from './components/VideoTexture.svelte';
 export { default as WaveDistortion } from './components/WaveDistortion.svelte';

package/dist/svelte/utils/generatePresetCode.js

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

package/dist/vue/AngularBlur.vue_vue_type_script_setup_true_lang.js

@@ -7,6 +7,7 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	__name: "AngularBlur",
 	props: /* @__PURE__ */ mergeDefaults({
 		intensity: {},
+		center: {},
 		blendMode: {},
 		opacity: {},
 		visible: { type: Boolean },
@@ -14,8 +15,7 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		maskSource: {},
 		maskType: {},
 		renderOrder: {},
-		transform: {},
-		center: {}
+		transform: {}
 	}, {
 		blendMode: "normal",
 		visible: true,
@@ -26,7 +26,7 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	}),
 	setup(__props) {
 		function isPropDriver(value) {
-			return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
 		const props = __props;
 		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);