shaders 2.5.113 → 2.5.115

package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js

@@ -157,7 +157,9 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		apiBaseUrl: { default: "https://shaders.com" },
 		obfuscationKey: { default: "shaders-preview-key" },
 		watermarkText: { default: "Unlock your Shaders Pro license" },
-		watermarkLink: { default: "https://shaders.com/dashboard?pricing=true" }
+		watermarkLink: { default: "https://shaders.com/dashboard?pricing=true" },
+		configuration: {},
+		version: {}
 	},
 	setup(__props) {
 		const componentMap = {
@@ -288,11 +290,100 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				throw new Error("Failed to decode shader definition: invalid data or incorrect key");
 			}
 		}
+		const RESERVED_IDENTIFIERS = new Set([
+			"break",
+			"case",
+			"catch",
+			"class",
+			"const",
+			"continue",
+			"default",
+			"delete",
+			"do",
+			"else",
+			"export",
+			"extends",
+			"finally",
+			"for",
+			"function",
+			"if",
+			"import",
+			"in",
+			"instanceof",
+			"new",
+			"return",
+			"super",
+			"switch",
+			"this",
+			"throw",
+			"try",
+			"typeof",
+			"var",
+			"void",
+			"while",
+			"with",
+			"yield"
+		]);
+		function slugifyIdentifier(label, fallback) {
+			const cleaned = label.replace(/[^A-Za-z0-9]+/g, " ").trim();
+			if (!cleaned) return fallback;
+			const camel = cleaned.split(/\s+/).map((part, i) => i === 0 ? part.charAt(0).toLowerCase() + part.slice(1) : part.charAt(0).toUpperCase() + part.slice(1)).join("");
+			const safe = /^[A-Za-z_$]/.test(camel) ? camel : `_${camel}`;
+			return RESERVED_IDENTIFIERS.has(safe) ? `_${safe}` : safe;
+		}
+		function buildKeyPropIdentifierMap(keyProps) {
+			const used = new Set(["style"]);
+			const map = /* @__PURE__ */ new Map();
+			if (!keyProps?.length) return map;
+			keyProps.forEach((kp, i) => {
+				if (!kp.targets?.length) return;
+				const base = slugifyIdentifier(kp.label, `keyProp${i}`);
+				let ident = base;
+				let suffix = 1;
+				while (used.has(ident)) {
+					suffix++;
+					ident = `${base}${suffix}`;
+				}
+				used.add(ident);
+				map.set(ident, kp);
+			});
+			return map;
+		}
+		function findInTree(id, list) {
+			for (const c of list) {
+				if (c.id === id) return c;
+				if (c.children?.length) {
+					const hit = findInTree(id, c.children);
+					if (hit) return hit;
+				}
+			}
+			return null;
+		}
+		function applyConfiguration(definition, configuration, keyProps) {
+			if (!configuration || !keyProps?.length) return definition;
+			const entries = Object.entries(configuration);
+			if (entries.length === 0) return definition;
+			const identMap = buildKeyPropIdentifierMap(keyProps);
+			const cloned = JSON.parse(JSON.stringify(definition.components));
+			for (const [ident, value] of entries) {
+				const kp = identMap.get(ident);
+				if (!kp) continue;
+				for (const t of kp.targets ?? []) {
+					const comp = findInTree(t.component_id, cloned);
+					if (comp?.props && t.prop in comp.props) comp.props[t.prop] = value;
+				}
+			}
+			return {
+				...definition,
+				components: cloned
+			};
+		}
 		const props = __props;
 		const fetchedDefinition = ref(null);
+		const fetchedKeyProps = ref(null);
 		const resolvedDefinition = computed(() => {
-			if (fetchedDefinition.value) return fetchedDefinition.value;
-			return null;
+			if (!fetchedDefinition.value) return null;
+			return applyConfiguration(fetchedDefinition.value, props.configuration, fetchedKeyProps.value);
 		});
 		async function fetchAndDecode(url) {
 			try {
@@ -300,7 +391,10 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				if (!response.ok) throw new Error(`Failed to fetch: ${response.status}`);
 				const data = await response.json();
 				const item = data.preset || data.shader;
-				if (item?.definition && typeof item.definition === "string") fetchedDefinition.value = decodePreviewDefinition(item.definition, props.obfuscationKey);
+				if (item?.definition && typeof item.definition === "string") {
+					fetchedDefinition.value = decodePreviewDefinition(item.definition, props.obfuscationKey);
+					fetchedKeyProps.value = Array.isArray(item.key_props) ? item.key_props : null;
+				}
 			} catch (e) {
 				console.error("[Shaders Preview] Failed to fetch preview:", e);
 			}
@@ -308,14 +402,23 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		watch(() => props.shader, (token) => {
 			if (token) {
 				fetchedDefinition.value = null;
+				fetchedKeyProps.value = null;
 				fetchAndDecode(`${props.apiBaseUrl}/api/preview/shader/${token}`);
-			} else if (!props.presetId) fetchedDefinition.value = null;
+			} else if (!props.presetId) {
+				fetchedDefinition.value = null;
+				fetchedKeyProps.value = null;
+			}
 		}, { immediate: true });
-		watch(() => props.presetId, (id) => {
+		watch(() => [props.presetId, props.version], ([id, version]) => {
 			if (id) {
 				fetchedDefinition.value = null;
-				fetchAndDecode(`${props.apiBaseUrl}/api/preview/preset/${id}`);
-			} else if (!props.shader) fetchedDefinition.value = null;
+				fetchedKeyProps.value = null;
+				const versionParam = version ? `?version=${encodeURIComponent(version)}` : "";
+				fetchAndDecode(`${props.apiBaseUrl}/api/preview/preset/${id}${versionParam}`);
+			} else if (!props.shader) {
+				fetchedDefinition.value = null;
+				fetchedKeyProps.value = null;
+			}
 		}, { immediate: true });
 		onMounted(() => {
 			console.warn("[Shaders] Preview component is intended for use with a Shaders license. Visit https://shaders.com for more information.");

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.113", props.disableTelemetry, props.isPreview);
+					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.115", props.disableTelemetry, props.isPreview);
 					if (telemetryCollector) telemetryCollector.start();
 					telemetryStartTimeout = null;
 				} else telemetryStartTimeout = setTimeout(checkRendering, 500);
@@ -112,52 +112,80 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				rendererResetSignal.value++;
 			}
 		});
-		const captureScreenshot = async (maxWidth = 1200) => {
-			if (!canvasRef.value) throw new Error("Canvas not available");
+		const renderForCapture = async () => {
 			try {
 				await rendererInstance.value.renderAndWait();
 			} catch (error) {
-				console.warn("Failed to force render before screenshot:", error);
+				console.warn("[Shaders] Failed to force render before capture:", error);
+				throw error;
 			}
-			return new Promise((resolve, reject) => {
-				const sourceCanvas = canvasRef.value;
-				const sourceWidth = sourceCanvas.width;
-				const sourceHeight = sourceCanvas.height;
-				let targetWidth = sourceWidth;
-				let targetHeight = sourceHeight;
-				if (sourceWidth > maxWidth) {
-					targetWidth = maxWidth;
-					targetHeight = Math.round(sourceHeight / sourceWidth * maxWidth);
-				}
-				const dataUrl = sourceCanvas.toDataURL("image/png");
-				const img = new Image();
-				img.onload = () => {
-					const tempCanvas = document.createElement("canvas");
-					tempCanvas.width = targetWidth;
-					tempCanvas.height = targetHeight;
-					const ctx = tempCanvas.getContext("2d");
-					if (!ctx) {
-						reject(/* @__PURE__ */ new Error("Failed to get canvas context"));
-						return;
-					}
-					ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
-					tempCanvas.toBlob((blob) => {
-						if (blob) resolve(blob);
-						else reject(/* @__PURE__ */ new Error("Failed to capture screenshot"));
-					}, "image/jpeg", .85);
-				};
-				img.onerror = () => {
-					reject(/* @__PURE__ */ new Error("Failed to load canvas image"));
-				};
-				img.src = dataUrl;
-			});
+		};
+		const canvasToBlob = (source, targetWidth, targetHeight, mimeType, quality) => new Promise((resolve, reject) => {
+			const tempCanvas = document.createElement("canvas");
+			tempCanvas.width = targetWidth;
+			tempCanvas.height = targetHeight;
+			const ctx = tempCanvas.getContext("2d");
+			if (!ctx) {
+				reject(/* @__PURE__ */ new Error("Failed to get canvas context"));
+				return;
+			}
+			ctx.imageSmoothingEnabled = true;
+			ctx.imageSmoothingQuality = "high";
+			ctx.drawImage(source, 0, 0, targetWidth, targetHeight);
+			tempCanvas.toBlob((blob) => {
+				if (blob) resolve(blob);
+				else reject(/* @__PURE__ */ new Error("Failed to encode image"));
+			}, mimeType, quality);
+		});
+		const captureImage = async (options = {}) => {
+			if (!canvasRef.value) throw new Error("Canvas not available");
+			await renderForCapture();
+			const source = canvasRef.value;
+			const format = options.format ?? "png";
+			const scale = Math.max(.1, options.scale ?? 1);
+			return canvasToBlob(source, Math.round(source.width * scale), Math.round(source.height * scale), format === "png" ? "image/png" : format === "webp" ? "image/webp" : "image/jpeg", format === "png" ? void 0 : options.quality ?? .95);
+		};
+		const captureScreenshot = async (maxWidth = 1200) => {
+			if (!canvasRef.value) throw new Error("Canvas not available");
+			await renderForCapture();
+			const source = canvasRef.value;
+			const sourceWidth = source.width;
+			const sourceHeight = source.height;
+			let targetWidth = sourceWidth;
+			let targetHeight = sourceHeight;
+			if (sourceWidth > maxWidth) {
+				targetWidth = maxWidth;
+				targetHeight = Math.round(sourceHeight / sourceWidth * maxWidth);
+			}
+			return canvasToBlob(source, targetWidth, targetHeight, "image/jpeg", .85);
 		};
 		const getPerformanceStats = () => {
 			return rendererInstance.value.getPerformanceStats();
 		};
+		const beginRecordingResolution = async (pixelRatio) => {
+			const internal = rendererInstance.value.getInternalRenderer();
+			if (!internal || !canvasRef.value) return async () => {};
+			const previousRatio = typeof internal.getPixelRatio === "function" ? internal.getPixelRatio() : Math.min(window.devicePixelRatio, 2);
+			const cssWidth = canvasRef.value.clientWidth;
+			const cssHeight = canvasRef.value.clientHeight;
+			const applyRatio = async (ratio) => {
+				internal.setPixelRatio(ratio);
+				if (typeof internal.setSize === "function") internal.setSize(cssWidth, cssHeight, false);
+				await renderForCapture();
+			};
+			const previousForce = rendererInstance.value.setForceFullFrameRate?.(true) ?? false;
+			await applyRatio(pixelRatio);
+			return async () => {
+				await applyRatio(previousRatio);
+				rendererInstance.value.setForceFullFrameRate?.(previousForce);
+			};
+		};
 		__expose({
+			captureImage,
 			captureScreenshot,
-			getPerformanceStats
+			getPerformanceStats,
+			beginRecordingResolution,
+			getCanvas: () => canvasRef.value
 		});
 		onBeforeUnmount(() => {
 			if (telemetryCollector) {

package/dist/vue/engine/Shader.vue.d.ts

@@ -4,6 +4,13 @@ interface Props {
     colorSpace?: 'p3-linear' | 'srgb';
     isPreview?: boolean;
 }
+type CaptureFormat = 'png' | 'jpeg' | 'webp';
+interface CaptureImageOptions {
+    format?: CaptureFormat;
+    scale?: number;
+    quality?: number;
+    maxWidth?: number;
+}
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
@@ -13,8 +20,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     colorSpace: string;
     isPreview: boolean;
 }>>, {
+    captureImage: (options?: CaptureImageOptions) => Promise<Blob>;
     captureScreenshot: (maxWidth?: number) => Promise<Blob>;
     getPerformanceStats: () => import('../../core').PerformanceStats;
+    beginRecordingResolution: (pixelRatio: number) => Promise<() => Promise<void>>;
+    getCanvas: () => HTMLCanvasElement | null;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     ready: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {

package/dist/vue/engine/Shader.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shader.vue.d.ts","sourceRoot":"","sources":["../../src/engine/Shader.vue"],"names":[],"mappings":"AAYA,UAAU,KAAK;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAgUD,iBAAS,cAAc;qBAkDO,GAAG;EAKhC;AAWD,QAAA,MAAM,eAAe;;;;;;8CAlL8B,OAAO,CAAC,IAAI,CAAC;;;;;;;;;;;;gBAlNjD,WAAW,GAAG,MAAM;sBAFd,OAAO;+BACE,OAAO;eAEvB,OAAO;4EA2YnB,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":"Shader.vue.d.ts","sourceRoot":"","sources":["../../src/engine/Shader.vue"],"names":[],"mappings":"AAYA,UAAU,KAAK;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAgND,KAAK,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;AAE5C,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAsLD,iBAAS,cAAc;qBAkDO,GAAG;EAKhC;AAWD,QAAA,MAAM,eAAe;;;;;;6BAzMgB,mBAAmB,KAAQ,OAAO,CAAC,IAAI,CAAC;8CAsB1B,OAAO,CAAC,IAAI,CAAC;;2CAkCZ,MAAM,KAAG,OAAO,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;;;;;;;;;;;;gBAhU1E,WAAW,GAAG,MAAM;sBAFd,OAAO;+BACE,OAAO;eAEvB,OAAO;4EAwdnB,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaders",
-  "version": "2.5.113",
+  "version": "2.5.115",
   "description": "Shader magic for modern frontends",
   "author": "Shader Effects Inc.",
   "homepage": "https://shaders.com/",