shaders 2.4.78 → 2.5.81

package/dist/js/createPreview.js

@@ -0,0 +1,64 @@
+import { createShader } from "./createShader.js";
+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";
+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 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()), {
+		isPreview: true,
+		enablePerformanceTracking: true
+	});
+	const { overlay, savedPosition, parentEl } = createWatermarkOverlay(canvas);
+	const originalDestroy = instance.destroy.bind(instance);
+	instance.destroy = () => {
+		if (parentEl && savedPosition !== void 0) parentEl.style.position = savedPosition;
+		overlay.remove();
+		originalDestroy();
+	};
+	return instance;
+}
+function createWatermarkOverlay(canvas) {
+	const parent = canvas.parentElement;
+	let savedPosition;
+	if (parent) {
+		if (getComputedStyle(parent).position === "static") {
+			savedPosition = parent.style.position;
+			parent.style.position = "relative";
+		}
+	}
+	const link = document.createElement("a");
+	link.href = WATERMARK_LINK;
+	link.target = "_blank";
+	link.rel = "noopener noreferrer";
+	link.textContent = WATERMARK_TEXT;
+	Object.assign(link.style, {
+		position: "absolute",
+		bottom: "8px",
+		right: "12px",
+		fontSize: "11px",
+		fontFamily: "system-ui, -apple-system, sans-serif",
+		color: "rgba(255, 255, 255, 0.5)",
+		textDecoration: "none",
+		zIndex: "10",
+		pointerEvents: "auto",
+		transition: "color 0.2s ease"
+	});
+	link.addEventListener("mouseenter", () => {
+		link.style.color = "rgba(255, 255, 255, 0.8)";
+	});
+	link.addEventListener("mouseleave", () => {
+		link.style.color = "rgba(255, 255, 255, 0.5)";
+	});
+	if (parent) parent.appendChild(link);
+	return {
+		overlay: link,
+		savedPosition,
+		parentEl: parent
+	};
+}
+export { createPreview };

package/dist/js/createShader.d.ts

@@ -0,0 +1,24 @@
+import { PresetConfig } from '../core';
+import { ShaderOptions, ShaderInstance } from './types';
+
+/**
+ * Create a shader instance from preset JSON.
+ * Auto-starts animation loop — no manual render needed.
+ *
+ * @example
+ * ```ts
+ * const shader = await createShader(canvas, {
+ *   components: [
+ *     { type: 'Circle', id: 'c1', props: { color: '#ff0000', radius: 0.5 } }
+ *   ]
+ * })
+ *
+ * // Update at runtime
+ * shader.update('c1', { radius: 0.8 })
+ *
+ * // Cleanup
+ * shader.destroy()
+ * ```
+ */
+export declare function createShader(canvas: HTMLCanvasElement, preset: PresetConfig, options?: ShaderOptions): Promise<ShaderInstance>;
+//# sourceMappingURL=createShader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createShader.d.ts","sourceRoot":"","sources":["../src/createShader.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAmB,MAAM,cAAc,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAa5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAsB,YAAY,CAChC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,cAAc,CAAC,CAqOzB"}

package/dist/js/createShader.js

@@ -0,0 +1,132 @@
+import { createUniformsMap, shaderRenderer } from "../core/index.js";
+import { getAllShaders } from "../core/registry.js";
+import { isExternalUser, shouldCollectTelemetry, startTelemetry } from "../core/telemetry/index.js";
+import { vec4 } from "three/tsl";
+var METADATA_PROPS = new Set([
+	"opacity",
+	"blendMode",
+	"visible",
+	"transform",
+	"maskSource",
+	"maskType"
+]);
+async function createShader(canvas, preset, options) {
+	const renderer = shaderRenderer();
+	const componentRegistry = /* @__PURE__ */ new Map();
+	getAllShaders().forEach((shader) => {
+		componentRegistry.set(shader.definition.name, shader.definition);
+	});
+	const nodeEntryMap = /* @__PURE__ */ new Map();
+	if (!canvas.style.width || !canvas.style.height) {
+		const rect = canvas.getBoundingClientRect();
+		const w = rect.width > 0 ? rect.width : canvas.width;
+		const h = rect.height > 0 ? rect.height : canvas.height;
+		if (w > 0 && !canvas.style.width) canvas.style.width = `${w}px`;
+		if (h > 0 && !canvas.style.height) canvas.style.height = `${h}px`;
+	}
+	await renderer.initialize({
+		canvas,
+		resizeTarget: canvas,
+		enablePerformanceTracking: options?.enablePerformanceTracking || false,
+		colorSpace: options?.colorSpace
+	});
+	const rootId = "shader-root";
+	renderer.registerNode(rootId, ({ childNode }) => childNode || vec4(0, 0, 0, 0), null, null, {}, void 0);
+	preset.components.forEach((component, index) => {
+		registerComponent(component, rootId, index);
+	});
+	let telemetryCollector = null;
+	let telemetryStartTimeout = null;
+	if (isExternalUser() && shouldCollectTelemetry(options?.disableTelemetry || false, options?.isPreview || false)) {
+		const checkRendering = () => {
+			if (renderer.getPerformanceStats().fps > 0) {
+				telemetryCollector = startTelemetry(renderer, "2.5.81", options?.disableTelemetry || false, false);
+				if (telemetryCollector) telemetryCollector.start();
+				telemetryStartTimeout = null;
+			} else telemetryStartTimeout = setTimeout(checkRendering, 500);
+		};
+		telemetryStartTimeout = setTimeout(checkRendering, 500);
+	}
+	function registerComponent(component, parentId, renderOrder) {
+		const componentDef = componentRegistry.get(component.type);
+		if (!componentDef) {
+			console.warn(`[createShader] Unknown component type: ${component.type}`);
+			return;
+		}
+		const nodeId = component.id || `${component.type}_${Date.now()}_${Math.random()}`;
+		const uniforms = createUniformsMap(componentDef, Object.fromEntries(Object.entries(componentDef.props).map(([key, propConfig]) => [key, component.props?.[key] !== void 0 ? component.props[key] : propConfig.default])), nodeId);
+		const metadata = {
+			blendMode: component.props?.blendMode || "normal",
+			opacity: component.props?.opacity,
+			visible: component.props?.visible,
+			renderOrder,
+			id: component.id,
+			mask: component.props?.maskSource ? {
+				source: component.props.maskSource,
+				type: component.props.maskType || "alpha"
+			} : void 0,
+			transform: component.props?.transform ? {
+				offsetX: 0,
+				offsetY: 0,
+				rotation: 0,
+				scale: 1,
+				anchorX: .5,
+				anchorY: .5,
+				edges: "transparent",
+				...component.props.transform
+			} : void 0
+		};
+		renderer.registerNode(nodeId, componentDef.fragmentNode, parentId, metadata, uniforms, componentDef);
+		nodeEntryMap.set(nodeId, {
+			componentDef,
+			uniforms,
+			nodeId,
+			component
+		});
+		component.children?.forEach((child, index) => {
+			registerComponent(child, nodeId, index);
+		});
+	}
+	function update(componentId, props) {
+		const entry = nodeEntryMap.get(componentId);
+		if (!entry) {
+			console.warn(`[createShader] Component ID not found: ${componentId}`);
+			return;
+		}
+		for (const [key, value] of Object.entries(props)) if (METADATA_PROPS.has(key)) if (key === "maskSource") renderer.updateNodeMetadata(entry.nodeId, { mask: value ? {
+			source: value,
+			type: props.maskType || entry.component.props?.maskType || "alpha"
+		} : void 0 });
+		else if (key === "maskType") continue;
+		else if (key === "transform") renderer.updateNodeMetadata(entry.nodeId, { transform: value });
+		else renderer.updateNodeMetadata(entry.nodeId, { [key]: value });
+		else renderer.updateUniformValue(entry.nodeId, key, value);
+	}
+	function resize(width, height) {
+		const rect = canvas.getBoundingClientRect();
+		const w = width ?? (rect.width > 0 ? rect.width : canvas.width);
+		const h = height ?? (rect.height > 0 ? rect.height : canvas.height);
+		if (w > 0 && h > 0) {
+			canvas.style.width = `${w}px`;
+			canvas.style.height = `${h}px`;
+			renderer.resize(w, h);
+		}
+	}
+	function destroy() {
+		if (telemetryCollector) {
+			telemetryCollector.stop();
+			telemetryCollector = null;
+		}
+		if (telemetryStartTimeout !== null) {
+			clearTimeout(telemetryStartTimeout);
+			telemetryStartTimeout = null;
+		}
+		renderer.cleanup();
+	}
+	return {
+		update,
+		resize,
+		destroy
+	};
+}
+export { createShader };

package/dist/js/decode.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Decode a preview definition (simple XOR + Base64, no name mapping).
+ * Preview definitions are version-proof — they use readable JSON
+ * instead of index-based name mapping.
+ */
+export declare function decodePreviewDefinition(encoded: string): Record<string, unknown>;
+//# sourceMappingURL=decode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"decode.d.ts","sourceRoot":"","sources":["../src/decode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAiBhF"}

package/dist/js/decode.js

@@ -0,0 +1,22 @@
+var PREVIEW_KEY = "shaders-preview-key";
+function xorCrypt(data, key) {
+	const keyBytes = new TextEncoder().encode(key);
+	const result = new Uint8Array(data.length);
+	for (let i = 0; i < data.length; i++) result[i] = data[i] ^ keyBytes[i % keyBytes.length];
+	return result;
+}
+function decodePreviewDefinition(encoded) {
+	try {
+		const binaryString = atob(encoded);
+		const encrypted = new Uint8Array(binaryString.length);
+		for (let i = 0; i < binaryString.length; i++) encrypted[i] = binaryString.charCodeAt(i);
+		const decrypted = xorCrypt(encrypted, PREVIEW_KEY);
+		const json = new TextDecoder().decode(decrypted);
+		const result = JSON.parse(json);
+		if (typeof result !== "object" || result === null || Array.isArray(result)) throw new Error("unexpected shape");
+		return result;
+	} catch {
+		throw new Error("Failed to decode preview definition: invalid data");
+	}
+}
+export { decodePreviewDefinition };

package/dist/js/index.d.ts

@@ -0,0 +1,6 @@
+export { createShader } from './createShader';
+export { createPreview } from './createPreview';
+export type { ShaderInstance, ShaderOptions, PreviewOptions } from './types';
+export type { PresetConfig, ComponentConfig } from '../core';
+export { generatePresetCode } from './utils/generatePresetCode';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC5E,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA"}

package/dist/js/index.js

@@ -0,0 +1,4 @@
+import { createShader } from "./createShader.js";
+import { createPreview } from "./createPreview.js";
+import { generatePresetCode } from "./utils/generatePresetCode.js";
+export { createPreview, createShader, generatePresetCode };

package/dist/js/types.d.ts

@@ -0,0 +1,23 @@
+export type { PresetConfig, ComponentConfig } from '../core';
+export interface ShaderOptions {
+    colorSpace?: 'p3-linear' | 'srgb';
+    disableTelemetry?: boolean;
+    enablePerformanceTracking?: boolean;
+    isPreview?: boolean;
+}
+export interface PreviewOptions {
+    shader?: string;
+    presetId?: string;
+    apiBaseUrl?: string;
+}
+export interface ShaderInstance {
+    update(componentId: string, props: Record<string, any>): void;
+    /**
+     * Sync the renderer to the canvas's current dimensions.
+     * Call this after changing canvas.style.width/height or the width/height attributes.
+     * Optionally pass explicit pixel dimensions to force a specific size.
+     */
+    resize(width?: number, height?: number): void;
+    destroy(): void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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;CACpB;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,OAAO,IAAI,IAAI,CAAA;CAChB"}

package/dist/js/utils/generatePresetCode.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: string[];
+export {};
+//# sourceMappingURL=generatePresetCode.d.ts.map

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

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