shaders 2.4.78 → 2.5.81

package/dist/svelte/index.js

@@ -1,4 +1,4 @@
-import { n as generatePresetCode } from "./generatePresetCode-Bpe8YcaW.js";
+import { n as generatePresetCode } from "./generatePresetCode-6ecNqXs9.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { getContext, onDestroy, onMount, setContext } from "svelte";
@@ -96,7 +96,6 @@ import { componentDefinition as componentDefinition$88 } from "../core/shaders/W
 import { componentDefinition as componentDefinition$89 } from "../core/shaders/ZoomBlur/index.js";
 import { vec4 } from "three/tsl";
 import { isExternalUser, shouldCollectTelemetry, startTelemetry } from "../core/telemetry/index.js";
-import "svelte/internal/flags/legacy";
 var root$90 = $.from_html(`<span style="display:contents"><!></span>`);
 function AngularBlur($$anchor, $$props) {
 	$.push($$props, true);
@@ -13189,7 +13188,7 @@ function Shader($$anchor, $$props) {
 		const checkRendering = () => {
 			if (!rendererInstance) return;
 			if (rendererInstance.getPerformanceStats().fps > 0) {
-				telemetryCollector = startTelemetry(rendererInstance, "2.4.78", disableTelemetry(), isPreview());
+				telemetryCollector = startTelemetry(rendererInstance, "2.5.81", disableTelemetry(), isPreview());
 				if (telemetryCollector) telemetryCollector.start();
 				telemetryStartTimeout = null;
 			} else telemetryStartTimeout = window.setTimeout(checkRendering, 500);
@@ -13301,20 +13300,10 @@ function Shader($$anchor, $$props) {
 	$.pop();
 }
 function PreviewRenderComponent($$anchor, $$props) {
-	$.push($$props, false);
-	const Component = $.mutable_source();
-	const componentProps = $.mutable_source();
-	let config = $.prop($$props, "config", 8);
-	let componentMap = $.prop($$props, "componentMap", 8);
-	let structureVersion = $.prop($$props, "structureVersion", 8, void 0);
-	$.legacy_pre_effect(() => ($.deep_read_state(componentMap()), $.deep_read_state(config())), () => {
-		$.set(Component, componentMap()[config().type]);
-	});
-	$.legacy_pre_effect(() => $.deep_read_state(config()), () => {
-		$.set(componentProps, config().props ? { ...config().props } : {});
-	});
-	$.legacy_pre_effect_reset();
-	$.init();
+	$.push($$props, true);
+	const structureVersion = $.prop($$props, "structureVersion", 3, void 0);
+	const Component = $.derived(() => $$props.componentMap[$$props.config.type]);
+	const componentProps = $.derived(() => $$props.config.props ? { ...$$props.config.props } : {});
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent_1 = ($$anchor$1) => {
@@ -13323,10 +13312,10 @@ function PreviewRenderComponent($$anchor, $$props) {
 		$.component(node_1, () => $.get(Component), ($$anchor$2, $$component) => {
 			$$component($$anchor$2, $.spread_props({
 				get id() {
-					return $.deep_read_state(config()), $.untrack(() => config().id);
+					return $$props.config.id;
 				},
 				get renderOrder() {
-					return $.deep_read_state(config()), $.untrack(() => config().renderOrder);
+					return $$props.config.renderOrder;
 				}
 			}, () => $.get(componentProps), {
 				children: ($$anchor$3, $$slotProps) => {
@@ -13335,20 +13324,20 @@ function PreviewRenderComponent($$anchor, $$props) {
 					var consequent = ($$anchor$4) => {
 						var fragment_3 = $.comment();
 						var node_3 = $.first_child(fragment_3);
-						$.each(node_3, 3, () => ($.deep_read_state(config()), $.untrack(() => config().children)), (child, index) => child.id || `child_${index}_v${structureVersion() || 0}`, ($$anchor$5, child, index) => {
+						$.each(node_3, 19, () => $$props.config.children, (child, index) => child.id || `child_${index}_v${structureVersion() || 0}`, ($$anchor$5, child, index) => {
 							var fragment_4 = $.comment();
 							var node_4 = $.first_child(fragment_4);
 							{
-								let $0 = $.derived_safe_equal(() => ($.get(child), $.deep_read_state($.get(index)), $.untrack(() => ({
+								let $0 = $.derived(() => ({
 									...$.get(child),
 									renderOrder: $.get(child).renderOrder ?? $.get(index)
-								}))));
+								}));
 								PreviewRenderComponent(node_4, {
 									get config() {
 										return $.get($0);
 									},
 									get componentMap() {
-										return componentMap();
+										return $$props.componentMap;
 									},
 									get structureVersion() {
 										return structureVersion();
@@ -13360,7 +13349,7 @@ function PreviewRenderComponent($$anchor, $$props) {
 						$.append($$anchor$4, fragment_3);
 					};
 					$.if(node_2, ($$render) => {
-						if ($.deep_read_state(config()), $.untrack(() => config().children)) $$render(consequent);
+						if ($$props.config.children) $$render(consequent);
 					});
 					$.append($$anchor$3, fragment_2);
 				},
@@ -13378,22 +13367,7 @@ function PreviewRenderComponent($$anchor, $$props) {
 var root_4 = $.from_html(`<a target="_blank" rel="noopener noreferrer"> </a>`);
 var root_1 = $.from_html(`<div><!> <!></div>`);
 function Preview($$anchor, $$props) {
-	const $$sanitized_props = $.legacy_rest_props($$props, [
-		"children",
-		"$$slots",
-		"$$events",
-		"$$legacy"
-	]);
-	const $$restProps = $.legacy_rest_props($$sanitized_props, [
-		"shader",
-		"presetId",
-		"apiBaseUrl",
-		"obfuscationKey",
-		"watermarkText",
-		"watermarkLink",
-		"style"
-	]);
-	$.push($$props, false);
+	$.push($$props, true);
 	const componentMap = {
 		AngularBlur,
 		Ascii,
@@ -13517,40 +13491,40 @@ function Preview($$anchor, $$props) {
 			return null;
 		});
 	}
-	let shader = $.prop($$props, "shader", 8, void 0);
-	let presetId = $.prop($$props, "presetId", 8, void 0);
-	let apiBaseUrl = $.prop($$props, "apiBaseUrl", 8, "https://shaders.com");
-	let obfuscationKey = $.prop($$props, "obfuscationKey", 8, "shaders-preview-key");
-	let watermarkText = $.prop($$props, "watermarkText", 8, "Unlock your Shaders Pro license");
-	let watermarkLink = $.prop($$props, "watermarkLink", 8, "https://shaders.com/dashboard?pricing=true");
-	let style = $.prop($$props, "style", 8, void 0);
-	let resolvedDefinition = $.mutable_source(null);
-	let fetchedDefinition = $.mutable_source(null);
-	let watermarkHovered = $.mutable_source(false);
-	onMount(() => {
-		console.warn("[Shaders] Preview component is intended for use with a Shaders license. Visit https://shaders.com for more information.");
-	});
-	$.legacy_pre_effect(() => ($.deep_read_state(shader()), $.deep_read_state(apiBaseUrl()), $.deep_read_state(obfuscationKey()), $.deep_read_state(presetId())), () => {
+	const shader = $.prop($$props, "shader", 3, void 0), presetId = $.prop($$props, "presetId", 3, void 0), apiBaseUrl = $.prop($$props, "apiBaseUrl", 3, "https://shaders.com"), obfuscationKey = $.prop($$props, "obfuscationKey", 3, "shaders-preview-key"), watermarkText = $.prop($$props, "watermarkText", 3, "Unlock your Shaders Pro license"), watermarkLink = $.prop($$props, "watermarkLink", 3, "https://shaders.com/dashboard?pricing=true"), style = $.prop($$props, "style", 3, void 0), restProps = $.rest_props($$props, [
+		"$$slots",
+		"$$events",
+		"$$legacy",
+		"shader",
+		"presetId",
+		"apiBaseUrl",
+		"obfuscationKey",
+		"watermarkText",
+		"watermarkLink",
+		"style"
+	]);
+	let fetchedDefinition = $.state(null);
+	let watermarkHovered = $.state(false);
+	let resolvedDefinition = $.derived(() => $.get(fetchedDefinition) ?? null);
+	$.user_effect(() => {
 		if (shader()) {
 			$.set(fetchedDefinition, null);
 			fetchAndDecode(`${apiBaseUrl()}/api/preview/shader/${shader()}`, obfuscationKey()).then((def) => {
-				$.set(fetchedDefinition, def);
+				$.set(fetchedDefinition, def, true);
 			});
 		} else if (!presetId()) $.set(fetchedDefinition, null);
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(presetId()), $.deep_read_state(apiBaseUrl()), $.deep_read_state(obfuscationKey()), $.deep_read_state(shader())), () => {
+	$.user_effect(() => {
 		if (presetId()) {
 			$.set(fetchedDefinition, null);
 			fetchAndDecode(`${apiBaseUrl()}/api/preview/preset/${presetId()}`, obfuscationKey()).then((def) => {
-				$.set(fetchedDefinition, def);
+				$.set(fetchedDefinition, def, true);
 			});
 		} else if (!shader()) $.set(fetchedDefinition, null);
 	});
-	$.legacy_pre_effect(() => $.get(fetchedDefinition), () => {
-		$.set(resolvedDefinition, $.get(fetchedDefinition) ?? null);
+	onMount(() => {
+		console.warn("[Shaders] Preview component is intended for use with a Shaders license. Visit https://shaders.com for more information.");
 	});
-	$.legacy_pre_effect_reset();
-	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent_1 = ($$anchor$1) => {
@@ -13558,11 +13532,11 @@ function Preview($$anchor, $$props) {
 		$.attribute_effect(div, () => ({
 			class: "shaders-preview",
 			style: `position: relative; width: 100%; height: 100%;${style() ? " " + style() : ""}`,
-			...$$restProps
+			...restProps
 		}));
 		var node_1 = $.child(div);
 		{
-			let $0 = $.derived_safe_equal(() => ($.get(resolvedDefinition), $.untrack(() => $.get(resolvedDefinition).colorSpace || "p3-linear")));
+			let $0 = $.derived(() => $.get(resolvedDefinition).colorSpace || "p3-linear");
 			Shader(node_1, {
 				get colorSpace() {
 					return $.get($0);
@@ -13573,12 +13547,12 @@ function Preview($$anchor, $$props) {
 				children: ($$anchor$2, $$slotProps) => {
 					var fragment_1 = $.comment();
 					var node_2 = $.first_child(fragment_1);
-					$.each(node_2, 3, () => ($.get(resolvedDefinition), $.untrack(() => $.get(resolvedDefinition).components)), (config, index) => config.id || `root_${index}_v${$.get(resolvedDefinition).structureVersion || 0}`, ($$anchor$3, config, index) => {
+					$.each(node_2, 19, () => $.get(resolvedDefinition).components, (config, index) => config.id || `root_${index}_v${$.get(resolvedDefinition).structureVersion || 0}`, ($$anchor$3, config, index) => {
 						{
-							let $0$1 = $.derived_safe_equal(() => ($.get(config), $.deep_read_state($.get(index)), $.untrack(() => ({
+							let $0$1 = $.derived(() => ({
 								...$.get(config),
 								renderOrder: $.get(config).renderOrder ?? $.get(index)
-							}))));
+							}));
 							PreviewRenderComponent($$anchor$3, {
 								get config() {
 									return $.get($0$1);
@@ -13587,7 +13561,7 @@ function Preview($$anchor, $$props) {
 									return componentMap;
 								},
 								get structureVersion() {
-									return $.get(resolvedDefinition), $.untrack(() => $.get(resolvedDefinition).structureVersion);
+									return $.get(resolvedDefinition).structureVersion;
 								}
 							});
 						}

package/dist/svelte/source/components/Liquify.svelte

@@ -19,6 +19,7 @@
      * Define component props including blend mode, opacity, visibility, masking, and transformation
      */
     interface ExtendedComponentProps extends Partial<ComponentProps> {
+        intensity?: ComponentProps['intensity'] | PropDriver;
         blendMode?: BlendMode;
         opacity?: number;
         visible?: boolean;

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

@@ -1,7 +1,9 @@
 <script lang="ts">
 import { onMount } from 'svelte'
+import type { Snippet } from 'svelte'
 
 import Shader from './Shader.svelte'
+import RenderComponent from './PreviewRenderComponent.svelte'
 // <<< SHADERS_PREVIEW_MAP:START >>>
 import AngularBlur from '../components/AngularBlur.svelte'
 import Ascii from '../components/Ascii.svelte'
@@ -258,39 +260,56 @@ function fetchAndDecode(url: string, key: string): Promise<ShaderDefinition | nu
 
 // --- Props ---
 
-export let shader: string | undefined = undefined
-export let presetId: string | undefined = undefined
-export let apiBaseUrl: string = 'https://shaders.com'
-export let obfuscationKey: string = 'shaders-preview-key'
-export let watermarkText: string = 'Unlock your Shaders Pro license'
-export let watermarkLink: string = 'https://shaders.com/dashboard?pricing=true'
-export let style: string | undefined = undefined
+interface Props {
+  shader?: string
+  presetId?: string
+  apiBaseUrl?: string
+  obfuscationKey?: string
+  watermarkText?: string
+  watermarkLink?: string
+  style?: string
+  [key: string]: any
+}
+
+const {
+  shader = undefined,
+  presetId = undefined,
+  apiBaseUrl = 'https://shaders.com',
+  obfuscationKey = 'shaders-preview-key',
+  watermarkText = 'Unlock your Shaders Pro license',
+  watermarkLink = 'https://shaders.com/dashboard?pricing=true',
+  style = undefined,
+  ...restProps
+}: Props = $props()
 
 // --- Decode & Resolve ---
 
-let resolvedDefinition: ShaderDefinition | null = null
-let fetchedDefinition: ShaderDefinition | null = null
-let watermarkHovered = false
+let fetchedDefinition: ShaderDefinition | null = $state(null)
+let watermarkHovered = $state(false)
+
+let resolvedDefinition: ShaderDefinition | null = $derived(fetchedDefinition ?? null)
 
 // Fetch shader by token
-$: if (shader) {
-  fetchedDefinition = null
-  fetchAndDecode(`${apiBaseUrl}/api/preview/shader/${shader}`, obfuscationKey)
-    .then(def => { fetchedDefinition = def })
-} else if (!presetId) {
-  fetchedDefinition = null
-}
+$effect(() => {
+  if (shader) {
+    fetchedDefinition = null
+    fetchAndDecode(`${apiBaseUrl}/api/preview/shader/${shader}`, obfuscationKey)
+      .then(def => { fetchedDefinition = def })
+  } else if (!presetId) {
+    fetchedDefinition = null
+  }
+})
 
 // Fetch preset by ID
-$: if (presetId) {
-  fetchedDefinition = null
-  fetchAndDecode(`${apiBaseUrl}/api/preview/preset/${presetId}`, obfuscationKey)
-    .then(def => { fetchedDefinition = def })
-} else if (!shader) {
-  fetchedDefinition = null
-}
-
-$: resolvedDefinition = fetchedDefinition ?? null
+$effect(() => {
+  if (presetId) {
+    fetchedDefinition = null
+    fetchAndDecode(`${apiBaseUrl}/api/preview/preset/${presetId}`, obfuscationKey)
+      .then(def => { fetchedDefinition = def })
+  } else if (!shader) {
+    fetchedDefinition = null
+  }
+})
 
 // --- Licensing Warning ---
 
@@ -303,15 +322,10 @@ onMount(() => {
 
 </script>
 
-<script lang="ts" context="module">
-// Recursive component for rendering nested shader components
-import { default as RenderComponent } from './PreviewRenderComponent.svelte'
-</script>
-
 {#if resolvedDefinition}
-  <div class="shaders-preview" style="position: relative; width: 100%; height: 100%;{style ? ' ' + style : ''}" {...$$restProps}>
+  <div class="shaders-preview" style="position: relative; width: 100%; height: 100%;{style ? ' ' + style : ''}" {...restProps}>
     <Shader
-colorSpace={resolvedDefinition.colorSpace || 'p3-linear'}
+      colorSpace={resolvedDefinition.colorSpace || 'p3-linear'}
       isPreview={true}
       enablePerformanceTracking={true}
       style="width: 100%; height: 100%;"
@@ -342,8 +356,8 @@ colorSpace={resolvedDefinition.colorSpace || 'p3-linear'}
           text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
           transition: color 0.2s ease;
         "
-        on:mouseenter={() => watermarkHovered = true}
-        on:mouseleave={() => watermarkHovered = false}
+        onmouseenter={() => watermarkHovered = true}
+        onmouseleave={() => watermarkHovered = false}
       >
         {watermarkText}
       </a>

package/dist/svelte/source/engine/PreviewRenderComponent.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
-export let config: any
-export let componentMap: Record<string, any>
-export let structureVersion: number | undefined = undefined
+interface Props {
+  config: any
+  componentMap: Record<string, any>
+  structureVersion?: number
+}
 
-$: Component = componentMap[config.type]
-$: componentProps = config.props ? { ...config.props } : {}
+const { config, componentMap, structureVersion = undefined }: Props = $props()
+
+const Component = $derived(componentMap[config.type])
+const componentProps = $derived(config.props ? { ...config.props } : {})
 </script>
 
 {#if Component}

package/dist/svelte/utils/generatePresetCode.js

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

package/dist/vue/Liquify.vue_vue_type_script_setup_true_lang.js

@@ -6,6 +6,7 @@ var _hoisted_1 = ["data-shader-id"];
 var Liquify_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Liquify",
 	props: /* @__PURE__ */ mergeDefaults({
+		intensity: {},
 		blendMode: {},
 		opacity: {},
 		visible: { type: Boolean },
@@ -14,8 +15,8 @@ var Liquify_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		maskType: {},
 		renderOrder: {},
 		transform: {},
-		intensity: {},
-		decay: {},
+		stiffness: {},
+		damping: {},
 		radius: {},
 		edges: {}
 	}, {

package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js

@@ -57,7 +57,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.4.78", props.disableTelemetry, props.isPreview);
+					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.81", props.disableTelemetry, props.isPreview);
 					if (telemetryCollector) telemetryCollector.start();
 					telemetryStartTimeout = null;
 				} else telemetryStartTimeout = setTimeout(checkRendering, 500);

package/dist/vue/components/Liquify.vue.d.ts

@@ -1,10 +1,11 @@
-import { BlendMode, TransformConfig } from '../../core';
+import { BlendMode, PropDriver, TransformConfig } from '../../core';
 import { ComponentProps } from '../../core/shaders/Liquify';
 
 /**
  * Define component props including blend mode, opacity, visibility, masking, and transformation
  */
 interface ExtendedComponentProps extends Partial<ComponentProps> {
+    intensity?: ComponentProps['intensity'] | PropDriver;
     blendMode?: BlendMode;
     opacity?: number;
     visible?: boolean;

package/dist/vue/components/Liquify.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Liquify.vue.d.ts","sourceRoot":"","sources":["../../src/components/Liquify.vue"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAKd,KAAK,eAAe,EACrB,MAAM,cAAc,CAAA;AAIrB,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAI7E;;GAEG;AACH,UAAU,sBAAuB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAC9D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACtC;AA0RD,iBAAS,cAAc;qBAsCM,GAAG;EAK/B;AAUD,QAAA,MAAM,eAAe;;;;;;;eAvVP,SAAS;aAEX,OAAO;4EA2VjB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Liquify.vue.d.ts","sourceRoot":"","sources":["../../src/components/Liquify.vue"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAId,KAAK,UAAU,EACf,KAAK,eAAe,EACrB,MAAM,cAAc,CAAA;AAIrB,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAI7E;;GAEG;AACH,UAAU,sBAAuB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAC9D,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACtC;AA0RD,iBAAS,cAAc;qBAsCM,GAAG;EAK/B;AAUD,QAAA,MAAM,eAAe;;;;;;;eAvVP,SAAS;aAEX,OAAO;4EA2VjB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/vue/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA2rCD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CA4ClG;AAGD,eAAO,MAAM,mBAAmB,UA4F/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAqtCD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAiFlG;AAGD,eAAO,MAAM,mBAAmB,UA4F/B,CAAA"}

package/dist/vue/utils/generatePresetCode.js

@@ -575,8 +575,9 @@ var shaderMetadata = {
 	"Liquify": {
 		"opacity": 1,
 		"blendMode": "normal",
-		"intensity": 1,
-		"decay": 3,
+		"intensity": 10,
+		"stiffness": 3,
+		"damping": 3,
 		"radius": 1,
 		"edges": "stretch"
 	},
@@ -1082,7 +1083,7 @@ function isPropMapValue(value) {
 function generatePropString(props, componentType, indent = "  ") {
 	return Object.entries(props).sort(([a], [b]) => a.localeCompare(b)).filter(([key, value]) => {
 		if (key === "maskType" && value === "alpha") return false;
-		if (componentType === "Glass" && key === "shape" && props.shapeType === "svg") return false;
+		if (key === "shape" && props.shapeSdfUrl) return false;
 		if (key === "transform" && typeof value === "object") {
 			if (Object.keys(DEFAULT_TRANSFORM).every((k) => value[k] === DEFAULT_TRANSFORM[k])) return false;
 		}
@@ -1101,23 +1102,38 @@ function generatePropString(props, componentType, indent = "  ") {
 			const nonDefaultKeys = {};
 			for (const k in value) if (value[k] !== DEFAULT_TRANSFORM[k]) nonDefaultKeys[k] = value[k];
 			const keys = Object.keys(nonDefaultKeys).sort();
-			if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `'${k}':${typeof nonDefaultKeys[k] === "string" ? `'${nonDefaultKeys[k]}'` : nonDefaultKeys[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
+			if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `${k}: ${typeof nonDefaultKeys[k] === "string" ? `'${nonDefaultKeys[k]}'` : nonDefaultKeys[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
 			else if (keys.length === 1) {
 				const k = keys[0];
 				const v = nonDefaultKeys[k];
-				return `:${kebabKey}="{'${k}':${typeof v === "string" ? `'${v}'` : v}}"`;
+				return `:${kebabKey}="{ ${k}: ${typeof v === "string" ? `'${v}'` : v} }"`;
 			}
 		}
 		if (isPropMapValue(value)) return `:${kebabKey}="{\n${indent}    ${Object.keys(value).map((k) => {
 			const v = value[k];
 			return `${k}: ${typeof v === "string" ? `'${v}'` : v}`;
 		}).join(`,\n${indent}    `)}\n${indent}  }"`;
-		if (typeof value === "string") return `${kebabKey}="${value}"`;
-		else if (value !== null && typeof value === "object") {
+		if (typeof value === "string") {
+			if (value.startsWith("{") && value.endsWith("}")) try {
+				const parsed = JSON.parse(value);
+				if (typeof parsed === "object" && parsed !== null) {
+					const keys = Object.keys(parsed);
+					if (keys.length === 0) return `:${kebabKey}="{}"`;
+					if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `${k}: ${typeof parsed[k] === "string" ? `'${parsed[k]}'` : parsed[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
+					const [pk] = keys;
+					return `:${kebabKey}="{ ${pk}: ${typeof parsed[pk] === "string" ? `'${parsed[pk]}'` : parsed[pk]} }"`;
+				}
+			} catch {}
+			return `${kebabKey}="${value}"`;
+		} else if (value !== null && typeof value === "object") {
 			const roundedValue = { ...value };
 			if ("x" in roundedValue && typeof roundedValue.x === "number") roundedValue.x = Math.round(roundedValue.x * 100) / 100;
 			if ("y" in roundedValue && typeof roundedValue.y === "number") roundedValue.y = Math.round(roundedValue.y * 100) / 100;
-			return `:${kebabKey}="${JSON.stringify(roundedValue).replace(/"/g, "'")}"`;
+			const keys = Object.keys(roundedValue);
+			if (keys.length === 0) return `:${kebabKey}="{}"`;
+			if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `${k}: ${typeof roundedValue[k] === "string" ? `'${roundedValue[k]}'` : roundedValue[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
+			const [rk] = keys;
+			return `:${kebabKey}="{ ${rk}: ${typeof roundedValue[rk] === "string" ? `'${roundedValue[rk]}'` : roundedValue[rk]} }"`;
 		} else return `:${kebabKey}="${value}"`;
 	}).join("\n" + indent + "  ");
 }
@@ -1139,7 +1155,15 @@ function isIdReferenced(id, allComponents) {
 	});
 }
 function generatePresetCode(preset, colorSpace) {
-	const generateComponentString = (config, indent = "  ") => {
+	const componentTypes = /* @__PURE__ */ new Set();
+	function collectTypes(components) {
+		for (const config of components) {
+			componentTypes.add(config.type);
+			if (config.children) collectTypes(config.children);
+		}
+	}
+	collectTypes(preset.components);
+	const generateComponentString = (config, indent = "    ") => {
 		const propString = config.props ? generatePropString(config.props, config.type, indent) : "";
 		let idString = "";
 		if (config.id) {
@@ -1154,7 +1178,21 @@ function generatePresetCode(preset, colorSpace) {
 		else return `${indent}<${config.type}/>`;
 	};
 	const componentStrings = preset.components.map((config) => generateComponentString(config)).join("\n");
-	return `<Shader${colorSpace && colorSpace !== "p3-linear" ? ` color-space="${colorSpace}"` : ""}>\n${componentStrings}\n</Shader>`;
+	const shaderProps = colorSpace && colorSpace !== "p3-linear" ? ` color-space="${colorSpace}"` : "";
+	const allImports = ["Shader", ...Array.from(componentTypes).sort()];
+	const uniqueImports = [...new Set(allImports)];
+	const imports = uniqueImports.length > 3 ? uniqueImports.join(",\n  ") : uniqueImports.join(", ");
+	return [
+		"<script setup lang=\"ts\">",
+		uniqueImports.length > 3 ? `import {\n  ${imports}\n} from 'shaders/vue'` : `import { ${imports} } from 'shaders/vue'`,
+		"<\/script>",
+		"",
+		"<template>",
+		`  <Shader${shaderProps}>`,
+		componentStrings,
+		"  </Shader>",
+		"</template>"
+	].join("\n");
 }
 const availableComponents = [
 	"AngularBlur",

package/dist/vue/utils/generatePresetCode.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.template.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.template.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAkJD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CA4ClG;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}
+{"version":3,"file":"generatePresetCode.template.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.template.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA2KD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAiFlG;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaders",
-  "version": "2.4.78",
+  "version": "2.5.81",
   "description": "Shader magic for modern frontends",
   "author": "Shader Effects Inc.",
   "homepage": "https://shaders.com/",
@@ -55,6 +55,14 @@
       "types": "./dist/pixi/index.d.ts",
       "import": "./dist/pixi/index.js"
     },
+    "./js": {
+      "types": "./dist/js/index.d.ts",
+      "import": "./dist/js/index.js"
+    },
+    "./js/codegen": {
+      "types": "./dist/js/codegen.d.ts",
+      "import": "./dist/js/codegen.js"
+    },
     "./core": {
       "types": "./dist/core/index.d.ts",
       "import": "./dist/core/index.js",
@@ -570,6 +578,12 @@
       "pixi": [
         "./dist/pixi/index.d.ts"
       ],
+      "js": [
+        "./dist/js/index.d.ts"
+      ],
+      "js/codegen": [
+        "./dist/js/codegen.d.ts"
+      ],
       "core": [
         "./dist/core/index.d.ts"
       ],