shaders 2.3.49 → 2.3.51

package/dist/core/shaders/SimplexNoise/index.js

@@ -1,5 +1,5 @@
 import "../../transformations-CC_c-QAT.js";
 import "../../time-BZqyVJXt.js";
 import "../../colorMixing-Ehw-Hfs_.js";
-import { n as componentDefinition, t as SimplexNoise_default } from "../../SimplexNoise-B-tDGmzX.js";
+import { n as componentDefinition, t as SimplexNoise_default } from "../../SimplexNoise-DKov4Yho.js";
 export { componentDefinition, SimplexNoise_default as default };

package/dist/core/shaders/SineWave/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-CC_c-QAT.js";
 import "../../time-BZqyVJXt.js";
-import { n as componentDefinition, t as SineWave_default } from "../../SineWave-C6MpmU6E.js";
+import { n as componentDefinition, t as SineWave_default } from "../../SineWave-Cy0wWKUU.js";
 export { componentDefinition, SineWave_default as default };

package/dist/core/shaders/SolidColor/index.js

@@ -1,3 +1,3 @@
 import "../../transformations-CC_c-QAT.js";
-import { n as componentDefinition, t as SolidColor_default } from "../../SolidColor-BjLy2eJx.js";
+import { n as componentDefinition, t as SolidColor_default } from "../../SolidColor-P4OKglCC.js";
 export { componentDefinition, SolidColor_default as default };

package/dist/core/shaders/Spherize/index.js

@@ -1,3 +1,3 @@
 import "../../transformations-CC_c-QAT.js";
-import { n as componentDefinition, t as Spherize_default } from "../../Spherize-Mtl4w0Lc.js";
+import { n as componentDefinition, t as Spherize_default } from "../../Spherize-BLEvqakM.js";
 export { componentDefinition, Spherize_default as default };

package/dist/core/shaders/Spiral/index.js

@@ -1,5 +1,5 @@
 import "../../transformations-CC_c-QAT.js";
 import "../../time-BZqyVJXt.js";
 import "../../colorMixing-Ehw-Hfs_.js";
-import { n as componentDefinition, t as Spiral_default } from "../../Spiral-Bl67ud0b.js";
+import { n as componentDefinition, t as Spiral_default } from "../../Spiral-DXuKs26n.js";
 export { componentDefinition, Spiral_default as default };

package/dist/core/shaders/Strands/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-CC_c-QAT.js";
 import "../../time-BZqyVJXt.js";
-import { n as componentDefinition, t as Strands_default } from "../../Strands-BNxk94tR.js";
+import { n as componentDefinition, t as Strands_default } from "../../Strands-DsdASoV4.js";
 export { componentDefinition, Strands_default as default };

package/dist/core/shaders/Stretch/index.js

@@ -1,4 +1,4 @@
 import "../../edges-Bd7GP4s2.js";
 import "../../transformations-CC_c-QAT.js";
-import { n as componentDefinition, t as Stretch_default } from "../../Stretch-DROTOuvH.js";
+import { n as componentDefinition, t as Stretch_default } from "../../Stretch-By8f2wmJ.js";
 export { componentDefinition, Stretch_default as default };

package/dist/core/shaders/Stripes/index.js

@@ -1,5 +1,5 @@
 import "../../transformations-CC_c-QAT.js";
 import "../../time-BZqyVJXt.js";
 import "../../colorMixing-Ehw-Hfs_.js";
-import { n as componentDefinition, t as Stripes_default } from "../../Stripes-IMsC1G-g.js";
+import { n as componentDefinition, t as Stripes_default } from "../../Stripes-D8HSlP1H.js";
 export { componentDefinition, Stripes_default as default };

package/dist/core/shaders/StudioBackground/index.d.ts

@@ -0,0 +1,141 @@
+import { ComponentDefinition } from '../../types';
+import { transformColor, transformPosition } from '../../utilities/transformations';
+
+export interface ComponentProps {
+    /**
+     * Base studio surface color
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#d8dbec"
+     */
+    color: Parameters<typeof transformColor>[0];
+    /**
+     * Overall ambient light level
+     *
+     * Accepts a number between 0 and 100.
+     * @default 20
+     */
+    brightness: number;
+    /**
+     * Color of the overhead key light
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#d5e4ea"
+     */
+    keyColor: Parameters<typeof transformColor>[0];
+    /**
+     * Intensity of the key light
+     *
+     * Accepts a number between 0 and 100.
+     * @default 40
+     */
+    keyIntensity: number;
+    /**
+     * How diffuse the key light is
+     *
+     * Accepts a number between 0 and 100.
+     * @default 50
+     */
+    keySoftness: number;
+    /**
+     * Color of the side fill lights
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#d5e4ea"
+     */
+    fillColor: Parameters<typeof transformColor>[0];
+    /**
+     * Intensity of the fill lights
+     *
+     * Accepts a number between 0 and 100.
+     * @default 10
+     */
+    fillIntensity: number;
+    /**
+     * How diffuse the fill lights are
+     *
+     * Accepts a number between 0 and 100.
+     * @default 70
+     */
+    fillSoftness: number;
+    /**
+     * How far apart the fill lights are from center
+     *
+     * Accepts a number between 0 and 100.
+     * @default 70
+     */
+    fillAngle: number;
+    /**
+     * Color of the upward back wash
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#c8d4e8"
+     */
+    backColor: Parameters<typeof transformColor>[0];
+    /**
+     * Intensity of the back wash
+     *
+     * Accepts a number between 0 and 100.
+     * @default 20
+     */
+    backIntensity: number;
+    /**
+     * How diffuse the back wash is
+     *
+     * Accepts a number between 0 and 100.
+     * @default 80
+     */
+    backSoftness: number;
+    /**
+     * Where the spotlight meets the floor
+     *
+     * Accepts `{ x, y }` objects with values from 0 to 1, or CSS positions like `top center`.
+     * @default {"x":0.5,"y":0.8}
+     */
+    center: Parameters<typeof transformPosition>[0];
+    /**
+     * How far toward the floor vs wall the spotlights aim
+     *
+     * Accepts a number between 0 and 100.
+     * @default 100
+     */
+    lightTarget: number;
+    /**
+     * How rounded the cove is
+     *
+     * Accepts a number between 0 and 100.
+     * @default 10
+     */
+    wallCurvature: number;
+    /**
+     * Edge darkening
+     *
+     * Accepts a number between 0 and 100.
+     * @default 0
+     */
+    vignette: number;
+    /**
+     * Intensity of drifting ambient lights
+     *
+     * Accepts a number between 0 and 100.
+     * @default 50
+     */
+    ambientIntensity: number;
+    /**
+     * Drift speed
+     *
+     * Accepts a number between -5 and 5.
+     * @default 2
+     */
+    ambientSpeed: number;
+    /**
+     * Seed for ambient pattern
+     *
+     * Accepts a number between 0 and 100.
+     * @default 0
+     */
+    seed: number;
+}
+export declare const componentDefinition: ComponentDefinition<ComponentProps>;
+export default componentDefinition;
+//# sourceMappingURL=index.d.ts.map

package/dist/core/shaders/StudioBackground/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/StudioBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAIvE,OAAO,EAAC,cAAc,EAAE,iBAAiB,EAAC,MAAM,qCAAqC,CAAA;AAGrF,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3C,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC9C,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC/C,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC/C,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAA;IAC/C,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CA0QnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/core/shaders/StudioBackground/index.js

@@ -0,0 +1,4 @@
+import "../../transformations-CC_c-QAT.js";
+import "../../time-BZqyVJXt.js";
+import { n as componentDefinition, t as StudioBackground_default } from "../../StudioBackground-CFjfBnWp.js";
+export { componentDefinition, StudioBackground_default as default };

package/dist/core/shaders/Swirl/index.js

@@ -1,5 +1,5 @@
 import "../../transformations-CC_c-QAT.js";
 import "../../time-BZqyVJXt.js";
 import "../../colorMixing-Ehw-Hfs_.js";
-import { n as componentDefinition, t as Swirl_default } from "../../Swirl-C9xCY4TA.js";
+import { n as componentDefinition, t as Swirl_default } from "../../Swirl-BIFGxHL0.js";
 export { componentDefinition, Swirl_default as default };

package/dist/core/shaders/TiltShift/index.js

@@ -1,3 +1,3 @@
 import "../../transformations-CC_c-QAT.js";
-import { n as componentDefinition, t as TiltShift_default } from "../../TiltShift-CFhc4M-Z.js";
+import { n as componentDefinition, t as TiltShift_default } from "../../TiltShift-CLMFkzBs.js";
 export { componentDefinition, TiltShift_default as default };

package/dist/core/shaders/Tint/index.js

@@ -1,3 +1,3 @@
 import "../../transformations-CC_c-QAT.js";
-import { n as componentDefinition, t as Tint_default } from "../../Tint-DS1FvtQc.js";
+import { n as componentDefinition, t as Tint_default } from "../../Tint-NQjiXLGu.js";
 export { componentDefinition, Tint_default as default };

package/dist/core/shaders/Tritone/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-CC_c-QAT.js";
 import "../../colorMixing-Ehw-Hfs_.js";
-import { n as componentDefinition, t as Tritone_default } from "../../Tritone-CesYYNTz.js";
+import { n as componentDefinition, t as Tritone_default } from "../../Tritone-67eoddBF.js";
 export { componentDefinition, Tritone_default as default };

package/dist/core/shaders/Twirl/index.js

@@ -1,4 +1,4 @@
 import "../../edges-Bd7GP4s2.js";
 import "../../transformations-CC_c-QAT.js";
-import { n as componentDefinition, t as Twirl_default } from "../../Twirl-8C-m04yw.js";
+import { n as componentDefinition, t as Twirl_default } from "../../Twirl-ZaYAMqmq.js";
 export { componentDefinition, Twirl_default as default };

package/dist/core/shaders/Vibrance/index.js

@@ -1,2 +1,2 @@
-import { n as componentDefinition, t as Vibrance_default } from "../../Vibrance-Cbr-9ds2.js";
+import { n as componentDefinition, t as Vibrance_default } from "../../Vibrance-DbSUuK_4.js";
 export { componentDefinition, Vibrance_default as default };

package/dist/core/shaders/VideoTexture/index.js

@@ -1,2 +1,2 @@
-import { n as componentDefinition, t as VideoTexture_default } from "../../VideoTexture-DKnQrDkq.js";
+import { n as componentDefinition, t as VideoTexture_default } from "../../VideoTexture-lHzoN3G9.js";
 export { componentDefinition, VideoTexture_default as default };

package/dist/core/shaders/WaveDistortion/index.js

@@ -1,5 +1,5 @@
 import "../../edges-Bd7GP4s2.js";
 import "../../transformations-CC_c-QAT.js";
 import "../../time-BZqyVJXt.js";
-import { n as componentDefinition, t as WaveDistortion_default } from "../../WaveDistortion-D-TGqE0a.js";
+import { n as componentDefinition, t as WaveDistortion_default } from "../../WaveDistortion-CB6xTndT.js";
 export { componentDefinition, WaveDistortion_default as default };

package/dist/core/shaders/WebcamTexture/index.js

@@ -1,2 +1,2 @@
-import { n as componentDefinition, t as WebcamTexture_default } from "../../WebcamTexture-C3EtpWf2.js";
+import { n as componentDefinition, t as WebcamTexture_default } from "../../WebcamTexture-BJUvpMmV.js";
 export { componentDefinition, WebcamTexture_default as default };

package/dist/core/shaders/ZoomBlur/index.js

@@ -1,3 +1,3 @@
 import "../../transformations-CC_c-QAT.js";
-import { n as componentDefinition, t as ZoomBlur_default } from "../../ZoomBlur-DmMiy4FJ.js";
+import { n as componentDefinition, t as ZoomBlur_default } from "../../ZoomBlur-BCClC8fw.js";
 export { componentDefinition, ZoomBlur_default as default };

package/dist/react/ConcentricSpin.js

@@ -0,0 +1,164 @@
+import { ShaderContext } from "./Shader.js";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { createUniformsMap } from "../core/index.js";
+import { jsx } from "react/jsx-runtime";
+import { componentDefinition } from "../core/shaders/ConcentricSpin/index.js";
+function computeEffectiveProps(props, defaultProps$1) {
+	let baseProps = { ...defaultProps$1 };
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	return baseProps;
+}
+var MARKER_STYLE = { display: "contents" };
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+var defaultProps = {
+	blendMode: "normal",
+	visible: true
+};
+try {
+	if (componentDefinition && componentDefinition.props) Object.entries(componentDefinition.props).forEach(([key, config]) => {
+		const propConfig = config;
+		if (propConfig && typeof propConfig === "object" && "default" in propConfig) defaultProps[key] = propConfig.default;
+	});
+} catch (e) {
+	console.warn("Error extracting default props:", e);
+}
+const ShaderComponent = (props) => {
+	const context = useContext(ShaderContext);
+	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate } = context;
+	const instanceId = useMemo(() => {
+		return props.id || Math.random().toString(36).substring(2, 10);
+	}, [props.id]);
+	const effectiveProps = useMemo(() => {
+		return computeEffectiveProps(props, defaultProps);
+	}, [props]);
+	const effectiveTransform = useMemo(() => ({
+		...DEFAULT_TRANSFORM,
+		...props.transform
+	}), [props.transform]);
+	const markerRef = useRef(null);
+	const detectedOrderRef = useRef(void 0);
+	const uniformsRef = useRef(null);
+	if (uniformsRef.current === null) uniformsRef.current = createUniformsMap(componentDefinition, effectiveProps, instanceId);
+	const childContextValue = useMemo(() => {
+		return {
+			...context,
+			shaderParentId: instanceId
+		};
+	}, [context, instanceId]);
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			const metadata = {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder ?? detectedOrderRef.current,
+				transform: effectiveTransform
+			};
+			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniformsRef.current, componentDefinition);
+			return () => {
+				parentRegister(instanceId, null, null, null, null);
+			};
+		} catch (error) {
+			console.error("Error registering shader node:", error);
+			return () => {};
+		}
+	}, [
+		instanceId,
+		parentId,
+		parentRegister
+	]);
+	useEffect(() => {
+		if (props.renderOrder === void 0 && markerRef.current) {
+			const parent = markerRef.current.parentElement;
+			if (parent) {
+				const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+				const position = Array.from(siblings).indexOf(markerRef.current);
+				if (position >= 0) {
+					detectedOrderRef.current = position;
+					parentMetadataUpdate(instanceId, { renderOrder: position });
+				}
+			}
+		}
+	}, []);
+	const prevPropsRef = useRef({});
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
+				if (!uniformData || typeof uniformData !== "object") return;
+				const { uniform, transform } = uniformData;
+				if (uniform?.value !== void 0 && propName in effectiveProps) {
+					const newValue = effectiveProps[propName];
+					if (newValue !== prevPropsRef.current[propName]) {
+						parentUniformUpdate(instanceId, propName, newValue);
+						prevPropsRef.current[propName] = newValue;
+					}
+				}
+			});
+		} catch (error) {
+			console.error("Error updating uniforms:", error);
+		}
+	}, [
+		effectiveProps,
+		instanceId,
+		parentUniformUpdate
+	]);
+	useEffect(() => {
+		try {
+			parentMetadataUpdate(instanceId, {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder ?? detectedOrderRef.current,
+				transform: effectiveTransform
+			});
+		} catch (error) {
+			console.error("Error updating metadata:", error);
+		}
+	}, [
+		props.blendMode,
+		props.opacity,
+		props.visible,
+		props.maskSource,
+		props.maskType,
+		props.renderOrder,
+		props.id,
+		effectiveTransform,
+		instanceId,
+		parentMetadataUpdate
+	]);
+	if (props.ref && typeof props.ref === "function") try {
+		props.ref(null);
+	} catch (e) {}
+	return /* @__PURE__ */ jsx(ShaderContext.Provider, {
+		value: childContextValue,
+		children: /* @__PURE__ */ jsx("span", {
+			ref: markerRef,
+			style: MARKER_STYLE,
+			"data-shader-id": instanceId,
+			children: props.children
+		})
+	});
+};
+var ConcentricSpin_default = ShaderComponent;
+export { ConcentricSpin_default as default };

package/dist/react/StudioBackground.js

@@ -0,0 +1,164 @@
+import { ShaderContext } from "./Shader.js";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { createUniformsMap } from "../core/index.js";
+import { jsx } from "react/jsx-runtime";
+import { componentDefinition } from "../core/shaders/StudioBackground/index.js";
+function computeEffectiveProps(props, defaultProps$1) {
+	let baseProps = { ...defaultProps$1 };
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	return baseProps;
+}
+var MARKER_STYLE = { display: "contents" };
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+var defaultProps = {
+	blendMode: "normal",
+	visible: true
+};
+try {
+	if (componentDefinition && componentDefinition.props) Object.entries(componentDefinition.props).forEach(([key, config]) => {
+		const propConfig = config;
+		if (propConfig && typeof propConfig === "object" && "default" in propConfig) defaultProps[key] = propConfig.default;
+	});
+} catch (e) {
+	console.warn("Error extracting default props:", e);
+}
+const ShaderComponent = (props) => {
+	const context = useContext(ShaderContext);
+	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate } = context;
+	const instanceId = useMemo(() => {
+		return props.id || Math.random().toString(36).substring(2, 10);
+	}, [props.id]);
+	const effectiveProps = useMemo(() => {
+		return computeEffectiveProps(props, defaultProps);
+	}, [props]);
+	const effectiveTransform = useMemo(() => ({
+		...DEFAULT_TRANSFORM,
+		...props.transform
+	}), [props.transform]);
+	const markerRef = useRef(null);
+	const detectedOrderRef = useRef(void 0);
+	const uniformsRef = useRef(null);
+	if (uniformsRef.current === null) uniformsRef.current = createUniformsMap(componentDefinition, effectiveProps, instanceId);
+	const childContextValue = useMemo(() => {
+		return {
+			...context,
+			shaderParentId: instanceId
+		};
+	}, [context, instanceId]);
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			const metadata = {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder ?? detectedOrderRef.current,
+				transform: effectiveTransform
+			};
+			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniformsRef.current, componentDefinition);
+			return () => {
+				parentRegister(instanceId, null, null, null, null);
+			};
+		} catch (error) {
+			console.error("Error registering shader node:", error);
+			return () => {};
+		}
+	}, [
+		instanceId,
+		parentId,
+		parentRegister
+	]);
+	useEffect(() => {
+		if (props.renderOrder === void 0 && markerRef.current) {
+			const parent = markerRef.current.parentElement;
+			if (parent) {
+				const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+				const position = Array.from(siblings).indexOf(markerRef.current);
+				if (position >= 0) {
+					detectedOrderRef.current = position;
+					parentMetadataUpdate(instanceId, { renderOrder: position });
+				}
+			}
+		}
+	}, []);
+	const prevPropsRef = useRef({});
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
+				if (!uniformData || typeof uniformData !== "object") return;
+				const { uniform, transform } = uniformData;
+				if (uniform?.value !== void 0 && propName in effectiveProps) {
+					const newValue = effectiveProps[propName];
+					if (newValue !== prevPropsRef.current[propName]) {
+						parentUniformUpdate(instanceId, propName, newValue);
+						prevPropsRef.current[propName] = newValue;
+					}
+				}
+			});
+		} catch (error) {
+			console.error("Error updating uniforms:", error);
+		}
+	}, [
+		effectiveProps,
+		instanceId,
+		parentUniformUpdate
+	]);
+	useEffect(() => {
+		try {
+			parentMetadataUpdate(instanceId, {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder ?? detectedOrderRef.current,
+				transform: effectiveTransform
+			});
+		} catch (error) {
+			console.error("Error updating metadata:", error);
+		}
+	}, [
+		props.blendMode,
+		props.opacity,
+		props.visible,
+		props.maskSource,
+		props.maskType,
+		props.renderOrder,
+		props.id,
+		effectiveTransform,
+		instanceId,
+		parentMetadataUpdate
+	]);
+	if (props.ref && typeof props.ref === "function") try {
+		props.ref(null);
+	} catch (e) {}
+	return /* @__PURE__ */ jsx(ShaderContext.Provider, {
+		value: childContextValue,
+		children: /* @__PURE__ */ jsx("span", {
+			ref: markerRef,
+			style: MARKER_STYLE,
+			"data-shader-id": instanceId,
+			children: props.children
+		})
+	});
+};
+var StudioBackground_default = ShaderComponent;
+export { StudioBackground_default as default };

package/dist/react/components/ConcentricSpin.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { BlendMode, TransformConfig } from '../../core';
+import { ComponentProps } from '../../core/shaders/ConcentricSpin';
+
+export type { ComponentProps };
+/**
+ * Base props that all shader components have
+ */
+interface BaseShaderProps {
+    children?: React.ReactNode;
+    blendMode?: BlendMode;
+    opacity?: number;
+    visible?: boolean;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+    renderOrder?: number;
+    transform?: Partial<TransformConfig>;
+    ref?: React.Ref<any>;
+}
+/**
+ * Component-specific props that merge base props with shader-specific props
+ * Note: ComponentProps are made optional since they have defaults from the shader definition
+ */
+type ShaderComponentProps = BaseShaderProps & Partial<ComponentProps>;
+/**
+ * The main React wrapper component for Shader shader nodes
+ */
+export declare const ShaderComponent: React.FC<ShaderComponentProps>;
+export default ShaderComponent;
+//# sourceMappingURL=ConcentricSpin.d.ts.map

package/dist/react/components/ConcentricSpin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConcentricSpin.d.ts","sourceRoot":"","sources":["../../src/components/ConcentricSpin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAGH,KAAK,SAAS,EAId,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAGvF,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,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;IACrC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxB;AAED;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;AAwDtE;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgL1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/react/components/StudioBackground.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { BlendMode, TransformConfig } from '../../core';
+import { ComponentProps } from '../../core/shaders/StudioBackground';
+
+export type { ComponentProps };
+/**
+ * Base props that all shader components have
+ */
+interface BaseShaderProps {
+    children?: React.ReactNode;
+    blendMode?: BlendMode;
+    opacity?: number;
+    visible?: boolean;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+    renderOrder?: number;
+    transform?: Partial<TransformConfig>;
+    ref?: React.Ref<any>;
+}
+/**
+ * Component-specific props that merge base props with shader-specific props
+ * Note: ComponentProps are made optional since they have defaults from the shader definition
+ */
+type ShaderComponentProps = BaseShaderProps & Partial<ComponentProps>;
+/**
+ * The main React wrapper component for Shader shader nodes
+ */
+export declare const ShaderComponent: React.FC<ShaderComponentProps>;
+export default ShaderComponent;
+//# sourceMappingURL=StudioBackground.d.ts.map