shaders 2.5.92 → 2.5.93

package/dist/vue/Grid.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Grid/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Grid",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -27,6 +28,12 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		function isPropDriver(value) {
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
@@ -82,6 +89,33 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -96,7 +130,7 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -152,17 +186,30 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });

package/dist/vue/GridDistortion.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/GridDistortion/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "GridDistortion",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -28,6 +29,12 @@ var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		function isPropDriver(value) {
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
@@ -83,6 +90,33 @@ var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -97,7 +131,7 @@ var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -153,17 +187,30 @@ var GridDistortion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });

package/dist/vue/Group.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Group/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Group",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -23,6 +24,12 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		function isPropDriver(value) {
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
@@ -78,6 +85,33 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -92,7 +126,7 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -148,17 +182,30 @@ var Group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });

package/dist/vue/Halftone.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Halftone/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Halftone",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -26,6 +27,12 @@ var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		function isPropDriver(value) {
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
@@ -81,6 +88,33 @@ var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -95,7 +129,7 @@ var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -151,17 +185,30 @@ var Halftone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });

package/dist/vue/HexGrid.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/HexGrid/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var HexGrid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "HexGrid",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -28,6 +29,12 @@ var HexGrid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		function isPropDriver(value) {
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
@@ -83,6 +90,33 @@ var HexGrid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -97,7 +131,7 @@ var HexGrid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -153,17 +187,30 @@ var HexGrid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });

package/dist/vue/HueShift.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/HueShift/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var HueShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "HueShift",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -24,6 +25,12 @@ var HueShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		function isPropDriver(value) {
 			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
 		}
@@ -79,6 +86,33 @@ var HueShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -93,7 +127,7 @@ var HueShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -149,17 +183,30 @@ var HueShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });