shaders 3.2.464 → 3.2.465

package/dist/solid/components/Irradiance.d.ts

@@ -0,0 +1,42 @@
+import { JSX } from 'solid-js';
+import { BlendMode, PropDriver, TransformConfig, BoundingBoxConfig, LayoutConfig } from '../../core';
+import { ComponentProps } from '../../core/shaders/Irradiance';
+export type { ComponentProps };
+/**
+ * Base props that all shader components have
+ */
+interface BaseShaderProps {
+    children?: JSX.Element;
+    blendMode?: BlendMode;
+    opacity?: number;
+    visible?: boolean;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+    renderOrder?: number;
+    transform?: Partial<TransformConfig>;
+    boundingBox?: Partial<BoundingBoxConfig>;
+    flow?: LayoutConfig;
+    absolute?: boolean;
+}
+/**
+ * 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<Omit<ComponentProps, 'center' | 'lightHeight' | 'lightRange' | 'reach' | 'core' | 'wrap' | 'shadowSoftness' | 'bodyLight' | 'bevelWidth' | 'edgeSoftness'>> & {
+    center?: ComponentProps['center'] | PropDriver;
+    lightHeight?: ComponentProps['lightHeight'] | PropDriver;
+    lightRange?: ComponentProps['lightRange'] | PropDriver;
+    reach?: ComponentProps['reach'] | PropDriver;
+    core?: ComponentProps['core'] | PropDriver;
+    wrap?: ComponentProps['wrap'] | PropDriver;
+    shadowSoftness?: ComponentProps['shadowSoftness'] | PropDriver;
+    bodyLight?: ComponentProps['bodyLight'] | PropDriver;
+    bevelWidth?: ComponentProps['bevelWidth'] | PropDriver;
+    edgeSoftness?: ComponentProps['edgeSoftness'] | PropDriver;
+};
+/**
+ * The main Solid wrapper component for Shader shader nodes
+ */
+export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
+//# sourceMappingURL=Irradiance.d.ts.map

package/dist/solid/components/Irradiance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Irradiance.d.ts","sourceRoot":"","sources":["../../src/components/Irradiance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0F,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAE5H,OAAO,EAIH,KAAK,SAAS,EAId,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACpB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGnF,YAAY,EAAE,cAAc,EAAE,CAAC;AAY/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,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,WAAW,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAOD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC,CAAC,GAAG;IAClN,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;IAC/C,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC;IACzD,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;IACvD,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;IAC7C,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,GAAG,UAAU,CAAC;IAC/D,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;IACvD,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC;CAC5D,CAAC;AAmCF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAyOlE"}

package/dist/solid/components/Irradiance.js

@@ -0,0 +1,232 @@
+import { createComponent, memo, template, setAttribute, insert, Portal, spread, mergeProps, use } from "solid-js/web";
+import { splitProps, createUniqueId, createMemo, createSignal, onMount, onCleanup, createEffect } from "solid-js";
+import { resolveBoundingBox, createGpuUniformsMap } from "../../core/index.js";
+import { setColorSpaceMode } from "../../core/utilities/transformations/index.js";
+import { componentDefinition } from "../../core/shaders/Irradiance/index.js";
+import { useShaderContext, ShaderContext } from "../engine/Shader.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span style=display:contents>`), _tmpl$2 = /* @__PURE__ */ template(`<canvas>`);
+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");
+}
+const DEFAULT_TRANSFORM = {
+  offsetX: 0,
+  offsetY: 0,
+  rotation: 0,
+  scale: 1,
+  anchorX: 0.5,
+  anchorY: 0.5,
+  edges: "transparent"
+};
+const defaultProps = {
+  blendMode: "normal",
+  visible: true
+  // opacity intentionally has no default - handled by renderer
+  // transform intentionally has no default - handled by effectiveTransform
+};
+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);
+}
+function ShaderComponent(props) {
+  const [local, otherProps] = splitProps(props, ["children"]);
+  const context = useShaderContext();
+  const {
+    shaderParentId: parentId,
+    shaderNodeRegister: parentRegister,
+    shaderUniformUpdate: parentUniformUpdate,
+    shaderMetadataUpdate: parentMetadataUpdate,
+    shaderColorSpace
+  } = context;
+  const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || createUniqueId();
+  const effectiveProps = createMemo(() => {
+    let baseProps = {
+      ...defaultProps
+    };
+    for (const [key, value] of Object.entries(otherProps)) {
+      if (value !== void 0 && !isPropDriver(value)) {
+        baseProps[key] = value;
+      }
+    }
+    return baseProps;
+  });
+  const effectiveTransform = createMemo(() => ({
+    ...DEFAULT_TRANSFORM,
+    ...props.transform
+  }));
+  const effectiveBoundingBox = createMemo(() => resolveBoundingBox(props.boundingBox));
+  const mapsFromProps = createMemo(() => {
+    const maps = {};
+    for (const [key, value] of Object.entries(otherProps)) {
+      if (isPropDriver(value)) maps[key] = value;
+    }
+    return Object.keys(maps).length > 0 ? maps : void 0;
+  });
+  let uniformsMap = null;
+  const getUniformsMap = () => {
+    if (!uniformsMap) {
+      setColorSpaceMode(shaderColorSpace);
+      uniformsMap = createGpuUniformsMap(componentDefinition, effectiveProps(), instanceId);
+    }
+    return uniformsMap;
+  };
+  const childContextValue = createMemo(() => ({
+    ...context,
+    shaderParentId: instanceId
+  }));
+  const isCapturesDOM = !!componentDefinition.capturesDOM;
+  let captureCanvasEl;
+  const [captureSize, setCaptureSize] = createSignal({
+    w: typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0,
+    h: typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0
+  });
+  if (isCapturesDOM) {
+    const onWinResize = () => {
+      const d = Math.min(window.devicePixelRatio, 2);
+      setCaptureSize({
+        w: Math.round(window.innerWidth * d),
+        h: Math.round(window.innerHeight * d)
+      });
+    };
+    onMount(() => window.addEventListener("resize", onWinResize));
+    onCleanup(() => window.removeEventListener("resize", onWinResize));
+  }
+  let markerRef;
+  let detectedRenderOrder = void 0;
+  let isRegistered = false;
+  onMount(() => {
+    const uniforms = getUniformsMap();
+    if (!uniforms) 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,
+        maps: mapsFromProps(),
+        renderOrder: props.renderOrder ?? detectedRenderOrder,
+        transform: effectiveTransform(),
+        boundingBox: effectiveBoundingBox(),
+        flow: props.flow,
+        absolute: props.absolute
+      };
+      parentRegister(instanceId, componentDefinition.fragment, parentId, metadata, uniforms, componentDefinition, isCapturesDOM ? captureCanvasEl : void 0);
+      isRegistered = true;
+      if (props.renderOrder === void 0 && markerRef) {
+        const parent = markerRef.parentElement;
+        if (parent) {
+          const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+          const position = Array.from(siblings).indexOf(markerRef);
+          if (position >= 0) {
+            detectedRenderOrder = position;
+            parentMetadataUpdate(instanceId, {
+              renderOrder: position
+            });
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error registering shader node:", error);
+    }
+  });
+  onCleanup(() => {
+    isRegistered = false;
+    parentRegister(instanceId, null, null, null, null);
+  });
+  createEffect(() => {
+    if (!isRegistered) return;
+    const uniforms = getUniformsMap();
+    if (!uniforms) return;
+    try {
+      const props_snapshot = effectiveProps();
+      Object.entries(uniforms).forEach(([propName, uniformData]) => {
+        if (!uniformData || typeof uniformData !== "object") return;
+        if (uniformData.value !== void 0 && propName in props_snapshot) {
+          const newValue = props_snapshot[propName];
+          parentUniformUpdate(instanceId, propName, newValue);
+        }
+      });
+    } catch (error) {
+      console.error("Error updating uniforms:", error);
+    }
+  });
+  createEffect(() => {
+    if (!isRegistered) 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,
+        maps: mapsFromProps(),
+        renderOrder: props.renderOrder ?? detectedRenderOrder,
+        transform: effectiveTransform(),
+        boundingBox: effectiveBoundingBox(),
+        flow: props.flow,
+        absolute: props.absolute
+      };
+      parentMetadataUpdate(instanceId, metadata);
+    } catch (error) {
+      console.error("Error updating metadata:", error);
+    }
+  });
+  const canUseDOM = typeof document !== "undefined" && typeof window !== "undefined";
+  return createComponent(ShaderContext.Provider, {
+    get value() {
+      return childContextValue();
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$();
+        var _ref$ = markerRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : markerRef = _el$;
+        setAttribute(_el$, "data-shader-id", instanceId);
+        insert(_el$, () => (!isCapturesDOM || !canUseDOM) && local.children);
+        return _el$;
+      })(), memo(() => isCapturesDOM && canUseDOM && createComponent(Portal, {
+        get children() {
+          var _el$2 = _tmpl$2();
+          var _ref$2 = captureCanvasEl;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$2) : captureCanvasEl = _el$2;
+          spread(_el$2, mergeProps({
+            "layoutsubtree": ""
+          }, {
+            get width() {
+              return captureSize().w;
+            },
+            get height() {
+              return captureSize().h;
+            },
+            "style": "position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"
+          }), false, true);
+          insert(_el$2, () => local.children);
+          return _el$2;
+        }
+      }))];
+    }
+  });
+}
+export {
+  ShaderComponent as default
+};

package/dist/solid/components/Obsidian.d.ts

@@ -0,0 +1,41 @@
+import { JSX } from 'solid-js';
+import { BlendMode, PropDriver, TransformConfig, BoundingBoxConfig, LayoutConfig } from '../../core';
+import { ComponentProps } from '../../core/shaders/Obsidian';
+export type { ComponentProps };
+/**
+ * Base props that all shader components have
+ */
+interface BaseShaderProps {
+    children?: JSX.Element;
+    blendMode?: BlendMode;
+    opacity?: number;
+    visible?: boolean;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+    renderOrder?: number;
+    transform?: Partial<TransformConfig>;
+    boundingBox?: Partial<BoundingBoxConfig>;
+    flow?: LayoutConfig;
+    absolute?: boolean;
+}
+/**
+ * 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<Omit<ComponentProps, 'center' | 'iridescence' | 'rimWidth' | 'rimSoftness' | 'flowScale' | 'gloss' | 'bevelWidth' | 'bevelShape' | 'edgeSoftness'>> & {
+    center?: ComponentProps['center'] | PropDriver;
+    iridescence?: ComponentProps['iridescence'] | PropDriver;
+    rimWidth?: ComponentProps['rimWidth'] | PropDriver;
+    rimSoftness?: ComponentProps['rimSoftness'] | PropDriver;
+    flowScale?: ComponentProps['flowScale'] | PropDriver;
+    gloss?: ComponentProps['gloss'] | PropDriver;
+    bevelWidth?: ComponentProps['bevelWidth'] | PropDriver;
+    bevelShape?: ComponentProps['bevelShape'] | PropDriver;
+    edgeSoftness?: ComponentProps['edgeSoftness'] | PropDriver;
+};
+/**
+ * The main Solid wrapper component for Shader shader nodes
+ */
+export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
+//# sourceMappingURL=Obsidian.d.ts.map

package/dist/solid/components/Obsidian.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Obsidian.d.ts","sourceRoot":"","sources":["../../src/components/Obsidian.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0F,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAE5H,OAAO,EAIH,KAAK,SAAS,EAId,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACpB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGjF,YAAY,EAAE,cAAc,EAAE,CAAC;AAY/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,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,WAAW,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAOD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,cAAc,CAAC,CAAC,GAAG;IAC1M,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;IAC/C,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC;IACzD,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;IACnD,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC;IACzD,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;IACvD,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;IACvD,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC;CAC5D,CAAC;AAmCF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAyOlE"}

package/dist/solid/components/Obsidian.js

@@ -0,0 +1,232 @@
+import { createComponent, memo, template, setAttribute, insert, Portal, spread, mergeProps, use } from "solid-js/web";
+import { splitProps, createUniqueId, createMemo, createSignal, onMount, onCleanup, createEffect } from "solid-js";
+import { resolveBoundingBox, createGpuUniformsMap } from "../../core/index.js";
+import { setColorSpaceMode } from "../../core/utilities/transformations/index.js";
+import { componentDefinition } from "../../core/shaders/Obsidian/index.js";
+import { useShaderContext, ShaderContext } from "../engine/Shader.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span style=display:contents>`), _tmpl$2 = /* @__PURE__ */ template(`<canvas>`);
+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");
+}
+const DEFAULT_TRANSFORM = {
+  offsetX: 0,
+  offsetY: 0,
+  rotation: 0,
+  scale: 1,
+  anchorX: 0.5,
+  anchorY: 0.5,
+  edges: "transparent"
+};
+const defaultProps = {
+  blendMode: "normal",
+  visible: true
+  // opacity intentionally has no default - handled by renderer
+  // transform intentionally has no default - handled by effectiveTransform
+};
+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);
+}
+function ShaderComponent(props) {
+  const [local, otherProps] = splitProps(props, ["children"]);
+  const context = useShaderContext();
+  const {
+    shaderParentId: parentId,
+    shaderNodeRegister: parentRegister,
+    shaderUniformUpdate: parentUniformUpdate,
+    shaderMetadataUpdate: parentMetadataUpdate,
+    shaderColorSpace
+  } = context;
+  const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || createUniqueId();
+  const effectiveProps = createMemo(() => {
+    let baseProps = {
+      ...defaultProps
+    };
+    for (const [key, value] of Object.entries(otherProps)) {
+      if (value !== void 0 && !isPropDriver(value)) {
+        baseProps[key] = value;
+      }
+    }
+    return baseProps;
+  });
+  const effectiveTransform = createMemo(() => ({
+    ...DEFAULT_TRANSFORM,
+    ...props.transform
+  }));
+  const effectiveBoundingBox = createMemo(() => resolveBoundingBox(props.boundingBox));
+  const mapsFromProps = createMemo(() => {
+    const maps = {};
+    for (const [key, value] of Object.entries(otherProps)) {
+      if (isPropDriver(value)) maps[key] = value;
+    }
+    return Object.keys(maps).length > 0 ? maps : void 0;
+  });
+  let uniformsMap = null;
+  const getUniformsMap = () => {
+    if (!uniformsMap) {
+      setColorSpaceMode(shaderColorSpace);
+      uniformsMap = createGpuUniformsMap(componentDefinition, effectiveProps(), instanceId);
+    }
+    return uniformsMap;
+  };
+  const childContextValue = createMemo(() => ({
+    ...context,
+    shaderParentId: instanceId
+  }));
+  const isCapturesDOM = !!componentDefinition.capturesDOM;
+  let captureCanvasEl;
+  const [captureSize, setCaptureSize] = createSignal({
+    w: typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0,
+    h: typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0
+  });
+  if (isCapturesDOM) {
+    const onWinResize = () => {
+      const d = Math.min(window.devicePixelRatio, 2);
+      setCaptureSize({
+        w: Math.round(window.innerWidth * d),
+        h: Math.round(window.innerHeight * d)
+      });
+    };
+    onMount(() => window.addEventListener("resize", onWinResize));
+    onCleanup(() => window.removeEventListener("resize", onWinResize));
+  }
+  let markerRef;
+  let detectedRenderOrder = void 0;
+  let isRegistered = false;
+  onMount(() => {
+    const uniforms = getUniformsMap();
+    if (!uniforms) 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,
+        maps: mapsFromProps(),
+        renderOrder: props.renderOrder ?? detectedRenderOrder,
+        transform: effectiveTransform(),
+        boundingBox: effectiveBoundingBox(),
+        flow: props.flow,
+        absolute: props.absolute
+      };
+      parentRegister(instanceId, componentDefinition.fragment, parentId, metadata, uniforms, componentDefinition, isCapturesDOM ? captureCanvasEl : void 0);
+      isRegistered = true;
+      if (props.renderOrder === void 0 && markerRef) {
+        const parent = markerRef.parentElement;
+        if (parent) {
+          const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+          const position = Array.from(siblings).indexOf(markerRef);
+          if (position >= 0) {
+            detectedRenderOrder = position;
+            parentMetadataUpdate(instanceId, {
+              renderOrder: position
+            });
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error registering shader node:", error);
+    }
+  });
+  onCleanup(() => {
+    isRegistered = false;
+    parentRegister(instanceId, null, null, null, null);
+  });
+  createEffect(() => {
+    if (!isRegistered) return;
+    const uniforms = getUniformsMap();
+    if (!uniforms) return;
+    try {
+      const props_snapshot = effectiveProps();
+      Object.entries(uniforms).forEach(([propName, uniformData]) => {
+        if (!uniformData || typeof uniformData !== "object") return;
+        if (uniformData.value !== void 0 && propName in props_snapshot) {
+          const newValue = props_snapshot[propName];
+          parentUniformUpdate(instanceId, propName, newValue);
+        }
+      });
+    } catch (error) {
+      console.error("Error updating uniforms:", error);
+    }
+  });
+  createEffect(() => {
+    if (!isRegistered) 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,
+        maps: mapsFromProps(),
+        renderOrder: props.renderOrder ?? detectedRenderOrder,
+        transform: effectiveTransform(),
+        boundingBox: effectiveBoundingBox(),
+        flow: props.flow,
+        absolute: props.absolute
+      };
+      parentMetadataUpdate(instanceId, metadata);
+    } catch (error) {
+      console.error("Error updating metadata:", error);
+    }
+  });
+  const canUseDOM = typeof document !== "undefined" && typeof window !== "undefined";
+  return createComponent(ShaderContext.Provider, {
+    get value() {
+      return childContextValue();
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$();
+        var _ref$ = markerRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : markerRef = _el$;
+        setAttribute(_el$, "data-shader-id", instanceId);
+        insert(_el$, () => (!isCapturesDOM || !canUseDOM) && local.children);
+        return _el$;
+      })(), memo(() => isCapturesDOM && canUseDOM && createComponent(Portal, {
+        get children() {
+          var _el$2 = _tmpl$2();
+          var _ref$2 = captureCanvasEl;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$2) : captureCanvasEl = _el$2;
+          spread(_el$2, mergeProps({
+            "layoutsubtree": ""
+          }, {
+            get width() {
+              return captureSize().w;
+            },
+            get height() {
+              return captureSize().h;
+            },
+            "style": "position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"
+          }), false, true);
+          insert(_el$2, () => local.children);
+          return _el$2;
+        }
+      }))];
+    }
+  });
+}
+export {
+  ShaderComponent as default
+};

package/dist/solid/components/Waveform.d.ts

@@ -0,0 +1,43 @@
+import { JSX } from 'solid-js';
+import { BlendMode, PropDriver, TransformConfig, BoundingBoxConfig, LayoutConfig } from '../../core';
+import { ComponentProps } from '../../core/shaders/Waveform';
+export type { ComponentProps };
+/**
+ * Base props that all shader components have
+ */
+interface BaseShaderProps {
+    children?: JSX.Element;
+    blendMode?: BlendMode;
+    opacity?: number;
+    visible?: boolean;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+    renderOrder?: number;
+    transform?: Partial<TransformConfig>;
+    boundingBox?: Partial<BoundingBoxConfig>;
+    flow?: LayoutConfig;
+    absolute?: boolean;
+}
+/**
+ * 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<Omit<ComponentProps, 'from' | 'to' | 'amplitude' | 'frequency' | 'height' | 'count' | 'barWidth' | 'rounding' | 'dotSize' | 'lineWidth' | 'softness'>> & {
+    from?: ComponentProps['from'] | PropDriver;
+    to?: ComponentProps['to'] | PropDriver;
+    amplitude?: ComponentProps['amplitude'] | PropDriver;
+    frequency?: ComponentProps['frequency'] | PropDriver;
+    height?: ComponentProps['height'] | PropDriver;
+    count?: ComponentProps['count'] | PropDriver;
+    barWidth?: ComponentProps['barWidth'] | PropDriver;
+    rounding?: ComponentProps['rounding'] | PropDriver;
+    dotSize?: ComponentProps['dotSize'] | PropDriver;
+    lineWidth?: ComponentProps['lineWidth'] | PropDriver;
+    softness?: ComponentProps['softness'] | PropDriver;
+};
+/**
+ * The main Solid wrapper component for Shader shader nodes
+ */
+export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
+//# sourceMappingURL=Waveform.d.ts.map

package/dist/solid/components/Waveform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Waveform.d.ts","sourceRoot":"","sources":["../../src/components/Waveform.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0F,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAE5H,OAAO,EAIH,KAAK,SAAS,EAId,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACpB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGjF,YAAY,EAAE,cAAc,EAAE,CAAC;AAY/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,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,WAAW,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAOD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,GAAG,WAAW,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC,GAAG;IAC7M,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;IAC3C,EAAE,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC;IACvC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;IAC/C,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;IAC7C,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;IACnD,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC;IACjD,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;CACpD,CAAC;AAmCF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAyOlE"}