shaders 2.5.114 → 2.5.115

package/dist/js/createPreview.d.ts

@@ -1,4 +1,4 @@
-import { ShaderInstance, PreviewOptions } from './types';
+import { PreviewInstance, PreviewOptions } from './types';
 
 /**
  * Create a watermarked shader preview from a preview token or preset ID.
@@ -8,12 +8,16 @@ import { ShaderInstance, PreviewOptions } from './types';
  * @example
  * ```ts
  * const preview = await createPreview(canvas, {
- *   presetId: 'abc123'
+ *   presetId: 'abc123',
+ *   configuration: { primaryColor: '#ff0000', intensity: 0.5 }
  * })
  *
+ * // Update configuration at runtime (no refetch)
+ * preview.setConfiguration({ primaryColor: '#00ff00', intensity: 0.8 })
+ *
  * // Cleanup
  * preview.destroy()
  * ```
  */
-export declare function createPreview(canvas: HTMLCanvasElement, options: PreviewOptions): Promise<ShaderInstance>;
+export declare function createPreview(canvas: HTMLCanvasElement, options: PreviewOptions): Promise<PreviewInstance>;
 //# sourceMappingURL=createPreview.d.ts.map

package/dist/js/createPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createPreview.d.ts","sourceRoot":"","sources":["../src/createPreview.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAO7D;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,aAAa,CACjC,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,cAAc,GACtB,OAAO,CAAC,cAAc,CAAC,CAuCzB"}
+{"version":3,"file":"createPreview.d.ts","sourceRoot":"","sources":["../src/createPreview.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAW,MAAM,SAAS,CAAA;AA8EvE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAsB,aAAa,CACjC,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,cAAc,GACtB,OAAO,CAAC,eAAe,CAAC,CA2F1B"}

package/dist/js/createPreview.js

@@ -3,24 +3,130 @@ import { decodePreviewDefinition } from "./decode.js";
 var DEFAULT_API_BASE = "https://shaders.com";
 var WATERMARK_TEXT = "Unlock your Shaders Pro license";
 var WATERMARK_LINK = "https://shaders.com/dashboard?pricing=true";
+var 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;
+		const children = c.children;
+		if (children?.length) {
+			const hit = findInTree(id, children);
+			if (hit) return hit;
+		}
+	}
+	return null;
+}
+function applyConfigurationInPlace(components, configuration, identMap) {
+	if (!configuration) return;
+	for (const [ident, value] of Object.entries(configuration)) {
+		const kp = identMap.get(ident);
+		if (!kp) continue;
+		for (const t of kp.targets ?? []) {
+			const comp = findInTree(t.component_id, components);
+			if (comp?.props && t.prop in comp.props) comp.props[t.prop] = value;
+		}
+	}
+}
 async function createPreview(canvas, options) {
 	if (!options.shader && !options.presetId || options.shader && options.presetId) throw new Error("Exactly one of shader (preview token) or presetId must be provided");
 	const apiBase = options.apiBaseUrl || DEFAULT_API_BASE;
-	const url = options.shader ? `${apiBase}/api/preview/shader/${encodeURIComponent(options.shader)}` : `${apiBase}/api/preview/preset/${encodeURIComponent(options.presetId)}`;
+	const versionParam = options.presetId && options.version ? `?version=${encodeURIComponent(options.version)}` : "";
+	const url = options.shader ? `${apiBase}/api/preview/shader/${encodeURIComponent(options.shader)}` : `${apiBase}/api/preview/preset/${encodeURIComponent(options.presetId)}${versionParam}`;
 	const response = await fetch(url);
 	if (!response.ok) throw new Error(`Failed to fetch preview: ${response.status} ${response.statusText}`);
-	const instance = await createShader(canvas, decodePreviewDefinition(await response.text()), {
+	const payload = await response.json();
+	const item = payload.preset ?? payload.shader;
+	if (!item?.definition || typeof item.definition !== "string") throw new Error("Preview response missing encoded definition");
+	const definition = decodePreviewDefinition(item.definition);
+	const keyProps = Array.isArray(item.key_props) ? item.key_props : null;
+	const identMap = buildKeyPropIdentifierMap(keyProps);
+	const baselineMap = /* @__PURE__ */ new Map();
+	for (const kp of identMap.values()) for (const t of kp.targets ?? []) {
+		const comp = findInTree(t.component_id, definition.components);
+		if (comp?.props && t.prop in comp.props) baselineMap.set(`${t.component_id}:${t.prop}`, comp.props[t.prop]);
+	}
+	applyConfigurationInPlace(definition.components, options.configuration, identMap);
+	const instance = await createShader(canvas, definition, {
 		isPreview: true,
 		enablePerformanceTracking: true
 	});
 	const { overlay, savedPosition, parentEl } = createWatermarkOverlay(canvas);
 	const originalDestroy = instance.destroy.bind(instance);
-	instance.destroy = () => {
+	const previewInstance = instance;
+	previewInstance.destroy = () => {
 		if (parentEl && savedPosition !== void 0) parentEl.style.position = savedPosition;
 		overlay.remove();
 		originalDestroy();
 	};
-	return instance;
+	previewInstance.setConfiguration = (configuration) => {
+		if (!keyProps?.length) return;
+		for (const [ident, kp] of identMap) {
+			const hasNewValue = Object.prototype.hasOwnProperty.call(configuration, ident) && configuration[ident] !== void 0;
+			for (const t of kp.targets ?? []) {
+				const value = hasNewValue ? configuration[ident] : baselineMap.get(`${t.component_id}:${t.prop}`);
+				if (value === void 0) continue;
+				instance.update(t.component_id, { [t.prop]: value });
+			}
+		}
+	};
+	return previewInstance;
 }
 function createWatermarkOverlay(canvas) {
 	const parent = canvas.parentElement;

package/dist/js/createShader.js

@@ -48,7 +48,7 @@ async function createShader(canvas, preset, options) {
 	if (isExternalUser()) {
 		const checkRendering = () => {
 			if (renderer.getPerformanceStats().fps > 0) {
-				telemetryCollector = startTelemetry(renderer, "2.5.114", options?.disableTelemetry || false, false);
+				telemetryCollector = startTelemetry(renderer, "2.5.115", options?.disableTelemetry || false, false);
 				if (telemetryCollector) telemetryCollector.start();
 				telemetryStartTimeout = null;
 			} else telemetryStartTimeout = setTimeout(checkRendering, 500);

package/dist/js/types.d.ts

@@ -40,10 +40,42 @@ export interface ShaderOptions {
         adapter: GPUAdapter;
     };
 }
+export interface KeyPropTarget {
+    component_id: string;
+    prop: string;
+}
+export interface KeyProp {
+    label: string;
+    type: 'color' | 'range' | 'logo' | 'image';
+    category?: string;
+    targets: KeyPropTarget[];
+}
 export interface PreviewOptions {
     shader?: string;
     presetId?: string;
     apiBaseUrl?: string;
+    /**
+     * Map of camelCase key_prop identifier → user value, layered on top of the
+     * preset's authored defaults. Identifiers are derived from `key_prop.label`
+     * via the same slugify rules the Pro Framer exporter uses, so identifiers
+     * generated by codegen and identifiers expected here always match.
+     *
+     * Only applies on the `presetId` path — `shader` token previews don't carry
+     * key_props and silently ignore this option.
+     */
+    configuration?: Record<string, unknown>;
+    /**
+     * Lock the preview to a specific snapshot of the preset, addressed by
+     * content hash. Customized snippets pin a version so subsequent upstream
+     * edits don't silently break the configuration. Server falls back to
+     * latest with the `X-Shaders-Version-Fallback` header when the requested
+     * snapshot is missing. Only meaningful on the `presetId` path.
+     */
+    version?: string;
+}
+export interface PreviewInstance extends ShaderInstance {
+    /** Replace the active configuration. Re-applies values to the live shader without refetching. */
+    setConfiguration(configuration: Record<string, unknown>): void;
 }
 export interface ShaderInstance {
     update(componentId: string, props: Record<string, any>): void;

package/dist/js/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;;kBAKc;IACd,GAAG,CAAC,EAAE;QACJ,MAAM,EAAE,SAAS,CAAA;QACjB,OAAO,EAAE,UAAU,CAAA;KACpB,CAAA;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;IAC7D;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7C,mFAAmF;IACnF,KAAK,IAAI,IAAI,CAAA;IACb,kDAAkD;IAClD,MAAM,IAAI,IAAI,CAAA;IACd,OAAO,IAAI,IAAI,CAAA;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;;kBAKc;IACd,GAAG,CAAC,EAAE;QACJ,MAAM,EAAE,SAAS,CAAA;QACjB,OAAO,EAAE,UAAU,CAAA;KACpB,CAAA;CACF;AAED,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,aAAa,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACvC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,iGAAiG;IACjG,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CAC/D;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;IAC7D;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7C,mFAAmF;IACnF,KAAK,IAAI,IAAI,CAAA;IACb,kDAAkD;IAClD,MAAM,IAAI,IAAI,CAAA;IACd,OAAO,IAAI,IAAI,CAAA;CAChB"}

package/dist/react/Preview.js

@@ -19,6 +19,94 @@ function decodePreviewDefinition(encoded, key) {
 		throw new Error("Failed to decode shader definition: invalid data or incorrect key");
 	}
 }
+var 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
+	};
+}
 var componentMap = {
 	AngularBlur: lazy(() => import("./AngularBlur.js")),
 	Ascii: lazy(() => import("./Ascii.js")),
@@ -158,23 +246,31 @@ function RenderComponent({ component }) {
 		children: children?.map((child, index) => /* @__PURE__ */ jsx(RenderComponent, { component: child }, child.id || index))
 	});
 }
-const Preview = ({ shader, presetId, apiBaseUrl = "https://shaders.com", obfuscationKey = DEFAULT_KEY, watermarkText = "Unlock your Shaders Pro license", watermarkLink = "https://shaders.com/dashboard?pricing=true", style, className,...rest }) => {
+const Preview = ({ shader, presetId, apiBaseUrl = "https://shaders.com", obfuscationKey = DEFAULT_KEY, watermarkText = "Unlock your Shaders Pro license", watermarkLink = "https://shaders.com/dashboard?pricing=true", style, className, configuration, version,...rest }) => {
 	const [fetchedDefinition, setFetchedDefinition] = useState(null);
+	const [fetchedKeyProps, setFetchedKeyProps] = useState(null);
 	const fetchAndDecode = (url) => {
 		setFetchedDefinition(null);
+		setFetchedKeyProps(null);
 		fetch(url).then((res) => {
 			if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
 			return res.json();
 		}).then((data) => {
 			const item = data.preset || data.shader;
-			if (item?.definition && typeof item.definition === "string") setFetchedDefinition(decodePreviewDefinition(item.definition, obfuscationKey));
+			if (item?.definition && typeof item.definition === "string") {
+				setFetchedDefinition(decodePreviewDefinition(item.definition, obfuscationKey));
+				setFetchedKeyProps(Array.isArray(item.key_props) ? item.key_props : null);
+			}
 		}).catch((err) => {
 			console.error("[Shaders Preview] Failed to fetch preview:", err);
 		});
 	};
 	useEffect(() => {
 		if (shader) fetchAndDecode(`${apiBaseUrl}/api/preview/shader/${shader}`);
-		else if (!presetId) setFetchedDefinition(null);
+		else if (!presetId) {
+			setFetchedDefinition(null);
+			setFetchedKeyProps(null);
+		}
 	}, [
 		shader,
 		presetId,
@@ -182,18 +278,26 @@ const Preview = ({ shader, presetId, apiBaseUrl = "https://shaders.com", obfusca
 		obfuscationKey
 	]);
 	useEffect(() => {
-		if (presetId) fetchAndDecode(`${apiBaseUrl}/api/preview/preset/${presetId}`);
-		else if (!shader) setFetchedDefinition(null);
+		if (presetId) fetchAndDecode(`${apiBaseUrl}/api/preview/preset/${presetId}${version ? `?version=${encodeURIComponent(version)}` : ""}`);
+		else if (!shader) {
+			setFetchedDefinition(null);
+			setFetchedKeyProps(null);
+		}
 	}, [
 		presetId,
 		shader,
 		apiBaseUrl,
-		obfuscationKey
+		obfuscationKey,
+		version
 	]);
 	const definition = useMemo(() => {
-		if (fetchedDefinition) return fetchedDefinition;
-		return null;
-	}, [fetchedDefinition]);
+		if (!fetchedDefinition) return null;
+		return applyConfiguration(fetchedDefinition, configuration, fetchedKeyProps);
+	}, [
+		fetchedDefinition,
+		fetchedKeyProps,
+		configuration
+	]);
 	const hasWarnedRef = useRef(false);
 	useEffect(() => {
 		if (!hasWarnedRef.current && definition) {

package/dist/react/Shader.js

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