shaders 2.4.78 → 2.5.80

package/dist/js/utils/generatePresetCode.template.d.ts

@@ -0,0 +1,13 @@
+interface ComponentConfig {
+    type: string;
+    id?: string;
+    props?: Record<string, any>;
+    children?: ComponentConfig[];
+}
+interface PresetConfig {
+    components: ComponentConfig[];
+}
+export declare function generatePresetCode(preset: PresetConfig, colorSpace?: 'p3-linear' | 'srgb'): string;
+export declare const availableComponents: any[];
+export {};
+//# sourceMappingURL=generatePresetCode.template.d.ts.map

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

@@ -0,0 +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;AAkKD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAoBlG;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}

package/dist/react/Shader.js

@@ -80,7 +80,7 @@ const Shader = ({ children, disableTelemetry = false, colorSpace = "p3-linear",
 				return;
 			}
 			if (rendererRef.current.getPerformanceStats().fps > 0) {
-				telemetryCollectorRef.current = startTelemetry(rendererRef.current, "2.4.78", disableTelemetry, isPreview);
+				telemetryCollectorRef.current = startTelemetry(rendererRef.current, "2.5.80", disableTelemetry, isPreview);
 				if (telemetryCollectorRef.current) telemetryCollectorRef.current.start();
 				telemetryStartTimeoutRef.current = null;
 			} else telemetryStartTimeoutRef.current = window.setTimeout(checkRendering, 500);

package/dist/react/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;AA8rCD,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;AA8tCD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAsElG;AAGD,eAAO,MAAM,mBAAmB,UA4F/B,CAAA"}

package/dist/react/utils/generatePresetCode.js

@@ -7,9 +7,16 @@ var DEFAULT_TRANSFORM = {
 	anchorY: .5,
 	edges: "transparent"
 };
+function toJSLiteral(value) {
+	if (typeof value === "string") return JSON.stringify(value);
+	if (typeof value === "boolean" || typeof value === "number" || value === null || value === void 0) return String(value);
+	if (Array.isArray(value)) return `[${value.map((v) => toJSLiteral(v)).join(", ")}]`;
+	if (typeof value === "object") return `{ ${Object.entries(value).map(([k, v]) => `${k}: ${toJSLiteral(v)}`).join(", ")} }`;
+	return String(value);
+}
 function toObjectLiteral(obj) {
 	return `{ ${Object.entries(obj).map(([key, value]) => {
-		return `${key}: ${typeof value === "string" ? `"${value}"` : value}`;
+		return `${key}: ${toJSLiteral(value)}`;
 	}).join(", ")} }`;
 }
 var shaderMetadata = {
@@ -1084,7 +1091,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;
 		}
@@ -1113,11 +1120,22 @@ function generatePropString(props, componentType, indent = "  ") {
 			const v = value[k];
 			return `${k}: ${typeof v === "string" ? `"${v}"` : v}`;
 		}).join(`,\n${indent}    `)}\n${indent}  }}`;
-		if (typeof value === "string") return `${key}="${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 > 1) return `${key}={{\n${indent}    ${keys.map((k) => `${k}: ${toJSLiteral(parsed[k])}`).join(`,\n${indent}    `)}\n${indent}  }}`;
+					return `${key}={${toObjectLiteral(parsed)}}`;
+				}
+			} catch {}
+			return `${key}="${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;
+			const keys = Object.keys(roundedValue);
+			if (keys.length > 1) return `${key}={{\n${indent}    ${keys.map((k) => `${k}: ${typeof roundedValue[k] === "string" ? `"${roundedValue[k]}"` : roundedValue[k]}`).join(`,\n${indent}    `)}\n${indent}  }}`;
 			return `${key}={${toObjectLiteral(roundedValue)}}`;
 		} else return `${key}={${value}}`;
 	}).join("\n" + indent + "  ");
@@ -1140,7 +1158,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) {
@@ -1155,7 +1181,17 @@ 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" ? ` colorSpace="${colorSpace}"` : ""}>\n${componentStrings}\n</Shader>`;
+	const shaderProps = colorSpace && colorSpace !== "p3-linear" ? ` colorSpace="${colorSpace}"` : "";
+	const allImports = ["Shader", ...Array.from(componentTypes).sort()];
+	return `${allImports.length > 3 ? `import {\n  ${allImports.join(",\n  ")},\n} from 'shaders/react'` : `import { ${allImports.join(", ")} } from 'shaders/react'`}
+
+export default function ShaderEffect() {
+  return (
+    <Shader${shaderProps}>
+${componentStrings}
+    </Shader>
+  )
+}`;
 }
 const availableComponents = [
 	"AngularBlur",

package/dist/react/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;AAqJD,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;AAqLD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAsElG;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}

package/dist/solid/engine/Shader.js

@@ -63,7 +63,7 @@ function Shader(allProps) {
     const checkRendering = () => {
       const stats = rendererInstance.getPerformanceStats();
       if (stats.fps > 0) {
-        const version = "2.4.78";
+        const version = "2.5.80";
         telemetryCollector = startTelemetry(rendererInstance, version, props.disableTelemetry, props.isPreview);
         if (telemetryCollector) {
           telemetryCollector.start();

package/dist/solid/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;AAgsCD,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,CAsElG;AAGD,eAAO,MAAM,mBAAmB,UA4F/B,CAAA"}

package/dist/solid/utils/generatePresetCode.js

@@ -1086,7 +1086,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") {
       const allDefaults = Object.keys(DEFAULT_TRANSFORM).every(
         (k) => value[k] === DEFAULT_TRANSFORM[k]
@@ -1136,6 +1136,23 @@ ${indent}    `)}
 ${indent}  }}`;
     }
     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 > 1) {
+              const entries = keys.map((k) => `${k}: ${typeof parsed[k] === "string" ? `"${parsed[k]}"` : parsed[k]}`);
+              return `${key}={{
+${indent}    ${entries.join(`,
+${indent}    `)}
+${indent}  }}`;
+            }
+            return `${key}={${toObjectLiteral(parsed)}}`;
+          }
+        } catch {
+        }
+      }
       return `${key}=${JSON.stringify(value)}`;
     } else if (value !== null && typeof value === "object") {
       const roundedValue = { ...value };
@@ -1145,6 +1162,14 @@ ${indent}  }}`;
       if ("y" in roundedValue && typeof roundedValue.y === "number") {
         roundedValue.y = Math.round(roundedValue.y * 100) / 100;
       }
+      const keys = Object.keys(roundedValue);
+      if (keys.length > 1) {
+        const entries = keys.map((k) => `${k}: ${typeof roundedValue[k] === "string" ? `"${roundedValue[k]}"` : roundedValue[k]}`);
+        return `${key}={{
+${indent}    ${entries.join(`,
+${indent}    `)}
+${indent}  }}`;
+      }
       return `${key}={${toObjectLiteral(roundedValue)}}`;
     } else {
       return `${key}={${value}}`;
@@ -1174,7 +1199,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) {
@@ -1207,9 +1240,20 @@ ${indent}  ${attributes} />`;
   };
   const componentStrings = preset.components.map((config) => generateComponentString(config)).join("\n");
   const shaderProps = colorSpace && colorSpace !== "p3-linear" ? ` colorSpace="${colorSpace}"` : "";
-  return `<Shader${shaderProps}>
+  const sortedTypes = Array.from(componentTypes).sort();
+  const allImports = ["Shader", ...sortedTypes];
+  const importStatement = allImports.length > 3 ? `import {
+  ${allImports.join(",\n  ")},
+} from 'shaders/solid'` : `import { ${allImports.join(", ")} } from 'shaders/solid'`;
+  return `${importStatement}
+
+export default function ShaderEffect() {
+  return (
+    <Shader${shaderProps}>
 ${componentStrings}
-</Shader>`;
+    </Shader>
+  )
+}`;
 }
 const availableComponents = [
   // @ts-ignore - replaced at build time

package/dist/solid/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;AAuJD,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;AA4KD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAsElG;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}

package/dist/svelte/engine/Preview.svelte.d.ts

@@ -1,27 +1,13 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    shader?: string;
+    presetId?: string;
+    apiBaseUrl?: string;
+    obfuscationKey?: string;
+    watermarkText?: string;
+    watermarkLink?: string;
+    style?: string;
+    [key: string]: any;
 }
-declare const Preview: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    shader?: string | undefined | undefined;
-    presetId?: string | undefined | undefined;
-    apiBaseUrl?: string | undefined;
-    obfuscationKey?: string | undefined;
-    watermarkText?: string | undefined;
-    watermarkLink?: string | undefined;
-    style?: string | undefined | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Preview = InstanceType<typeof Preview>;
+declare const Preview: import("svelte").Component<Props, {}, "">;
+type Preview = ReturnType<typeof Preview>;
 export default Preview;

package/dist/svelte/engine/PreviewRenderComponent.svelte.d.ts

@@ -1,22 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PreviewRenderComponent: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     config: any;
     componentMap: Record<string, any>;
-    structureVersion?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PreviewRenderComponent = InstanceType<typeof PreviewRenderComponent>;
+    structureVersion?: number;
+}
+declare const PreviewRenderComponent: import("svelte").Component<Props, {}, "">;
+type PreviewRenderComponent = ReturnType<typeof PreviewRenderComponent>;
 export default PreviewRenderComponent;

package/dist/svelte/{generatePresetCode-Bpe8YcaW.js → generatePresetCode-BN1puRG_.js}

@@ -1084,7 +1084,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;
 		}
@@ -1113,11 +1113,22 @@ function generatePropString(props, componentType, indent = "  ") {
 			const v = value[k];
 			return `${k}: ${typeof v === "string" ? `"${v}"` : v}`;
 		}).join(`,\n${indent}    `)}\n${indent}  }}`;
-		if (typeof value === "string") return `${key}="${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 > 1) return `${key}={{\n${indent}    ${keys.map((k) => `${k}: ${typeof parsed[k] === "string" ? `"${parsed[k]}"` : parsed[k]}`).join(`,\n${indent}    `)}\n${indent}  }}`;
+					return `${key}={${toObjectLiteral(parsed)}}`;
+				}
+			} catch {}
+			return `${key}="${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;
+			const keys = Object.keys(roundedValue);
+			if (keys.length > 1) return `${key}={{\n${indent}    ${keys.map((k) => `${k}: ${typeof roundedValue[k] === "string" ? `"${roundedValue[k]}"` : roundedValue[k]}`).join(`,\n${indent}    `)}\n${indent}  }}`;
 			return `${key}={${toObjectLiteral(roundedValue)}}`;
 		} else return `${key}={${value}}`;
 	}).join("\n" + indent + "  ");
@@ -1140,6 +1151,14 @@ function isIdReferenced(id, allComponents) {
 	});
 }
 function generatePresetCode(preset, colorSpace) {
+	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 = "";
@@ -1155,7 +1174,15 @@ 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" ? ` colorSpace="${colorSpace}"` : ""}>\n${componentStrings}\n</Shader>`;
+	const shaderProps = colorSpace && colorSpace !== "p3-linear" ? ` colorSpace="${colorSpace}"` : "";
+	const allImports = ["Shader", ...Array.from(componentTypes).sort()];
+	return `<script>
+  ${allImports.length > 3 ? `import {\n    ${allImports.join(",\n    ")},\n  } from 'shaders/svelte'` : `import { ${allImports.join(", ")} } from 'shaders/svelte'`}
+<\/script>
+
+<Shader${shaderProps}>
+${componentStrings}
+</Shader>`;
 }
 const availableComponents = [
 	"AngularBlur",

package/dist/svelte/index.js

@@ -1,4 +1,4 @@
-import { n as generatePresetCode } from "./generatePresetCode-Bpe8YcaW.js";
+import { n as generatePresetCode } from "./generatePresetCode-BN1puRG_.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.80", 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;
 								}
 							});
 						}