shaders 2.2.46 → 2.2.48

package/dist/registry.js

@@ -2672,6 +2672,142 @@ export const shaderRegistry = [
       }
     }
   },
+  {
+    "name": "FlowField",
+    "category": "Distortions",
+    "description": "Fluid-like distortion with constant smooth motion",
+    "fileName": "FlowField",
+    "requiresChild": true,
+    "definition": {
+      "name": "FlowField",
+      "category": "Distortions",
+      "description": "Fluid-like distortion with constant smooth motion",
+      "requiresRTT": true,
+      "requiresChild": true,
+      "props": {
+        "strength": {
+          "default": 0.15,
+          "description": "Intensity of the flow distortion",
+          "ui": {
+            "type": "range",
+            "min": 0,
+            "max": 0.5,
+            "step": 0.05,
+            "label": "Strength"
+          }
+        },
+        "detail": {
+          "default": 2,
+          "description": "Scale of the flow patterns",
+          "ui": {
+            "type": "range",
+            "min": 0.5,
+            "max": 5,
+            "step": 0.1,
+            "label": "Detail"
+          }
+        },
+        "speed": {
+          "default": 1,
+          "description": "Speed of the flow",
+          "ui": {
+            "type": "range",
+            "min": 0,
+            "max": 5,
+            "step": 0.1,
+            "label": "Speed"
+          }
+        },
+        "edges": {
+          "default": "mirror",
+          "description": "How to handle edges when distortion pushes content out of bounds",
+          "ui": {
+            "type": "select",
+            "options": [
+              {
+                "label": "Stretch",
+                "value": "stretch"
+              },
+              {
+                "label": "Transparent",
+                "value": "transparent"
+              },
+              {
+                "label": "Mirror",
+                "value": "mirror"
+              },
+              {
+                "label": "Wrap",
+                "value": "wrap"
+              }
+            ],
+            "label": "Edges"
+          }
+        }
+      }
+    },
+    "propsMetadata": {
+      "strength": {
+        "ui": {
+          "type": "range",
+          "min": 0,
+          "max": 0.5,
+          "step": 0.05,
+          "label": "Strength"
+        },
+        "default": 0.15,
+        "description": "Intensity of the flow distortion"
+      },
+      "detail": {
+        "ui": {
+          "type": "range",
+          "min": 0.5,
+          "max": 5,
+          "step": 0.1,
+          "label": "Detail"
+        },
+        "default": 2,
+        "description": "Scale of the flow patterns"
+      },
+      "speed": {
+        "ui": {
+          "type": "range",
+          "min": 0,
+          "max": 5,
+          "step": 0.1,
+          "label": "Speed"
+        },
+        "default": 1,
+        "description": "Speed of the flow"
+      },
+      "edges": {
+        "ui": {
+          "type": "select",
+          "options": [
+            {
+              "label": "Stretch",
+              "value": "stretch"
+            },
+            {
+              "label": "Transparent",
+              "value": "transparent"
+            },
+            {
+              "label": "Mirror",
+              "value": "mirror"
+            },
+            {
+              "label": "Wrap",
+              "value": "wrap"
+            }
+          ],
+          "label": "Edges"
+        },
+        "default": "mirror",
+        "description": "How to handle edges when distortion pushes content out of bounds"
+      }
+    }
+  },
   {
     "name": "GlassTiles",
     "category": "Distortions",
@@ -3511,6 +3647,142 @@ export const shaderRegistry = [
     },
     "propsMetadata": {}
   },
+  {
+    "name": "Kaleidoscope",
+    "category": "Distortions",
+    "description": "Create a kaleidoscope effect with radial mirrored segments",
+    "fileName": "Kaleidoscope",
+    "requiresChild": true,
+    "definition": {
+      "name": "Kaleidoscope",
+      "category": "Distortions",
+      "description": "Create a kaleidoscope effect with radial mirrored segments",
+      "requiresRTT": true,
+      "requiresChild": true,
+      "props": {
+        "center": {
+          "default": {
+            "x": 0.5,
+            "y": 0.5
+          },
+          "description": "The center point of the kaleidoscope effect",
+          "ui": {
+            "type": "position",
+            "label": "Center"
+          }
+        },
+        "segments": {
+          "default": 6,
+          "description": "Number of radial segments in the kaleidoscope",
+          "ui": {
+            "type": "range",
+            "min": 2,
+            "max": 24,
+            "step": 1,
+            "label": "Segments"
+          }
+        },
+        "angle": {
+          "default": 0,
+          "description": "Rotation offset for the entire kaleidoscope pattern",
+          "ui": {
+            "type": "range",
+            "min": 0,
+            "max": 360,
+            "step": 1,
+            "label": "Angle"
+          }
+        },
+        "edges": {
+          "default": "mirror",
+          "description": "How to handle edges when distortion pushes content out of bounds",
+          "ui": {
+            "type": "select",
+            "options": [
+              {
+                "label": "Stretch",
+                "value": "stretch"
+              },
+              {
+                "label": "Transparent",
+                "value": "transparent"
+              },
+              {
+                "label": "Mirror",
+                "value": "mirror"
+              },
+              {
+                "label": "Wrap",
+                "value": "wrap"
+              }
+            ],
+            "label": "Edges"
+          }
+        }
+      }
+    },
+    "propsMetadata": {
+      "center": {
+        "ui": {
+          "type": "position",
+          "label": "Center"
+        },
+        "default": {
+          "x": 0.5,
+          "y": 0.5
+        },
+        "description": "The center point of the kaleidoscope effect"
+      },
+      "segments": {
+        "ui": {
+          "type": "range",
+          "min": 2,
+          "max": 24,
+          "step": 1,
+          "label": "Segments"
+        },
+        "default": 6,
+        "description": "Number of radial segments in the kaleidoscope"
+      },
+      "angle": {
+        "ui": {
+          "type": "range",
+          "min": 0,
+          "max": 360,
+          "step": 1,
+          "label": "Angle"
+        },
+        "default": 0,
+        "description": "Rotation offset for the entire kaleidoscope pattern"
+      },
+      "edges": {
+        "ui": {
+          "type": "select",
+          "options": [
+            {
+              "label": "Stretch",
+              "value": "stretch"
+            },
+            {
+              "label": "Transparent",
+              "value": "transparent"
+            },
+            {
+              "label": "Mirror",
+              "value": "mirror"
+            },
+            {
+              "label": "Wrap",
+              "value": "wrap"
+            }
+          ],
+          "label": "Edges"
+        },
+        "default": "mirror",
+        "description": "How to handle edges when distortion pushes content out of bounds"
+      }
+    }
+  },
   {
     "name": "LinearBlur",
     "category": "Blurs",
@@ -3918,6 +4190,120 @@ export const shaderRegistry = [
       }
     }
   },
+  {
+    "name": "Mirror",
+    "category": "Distortions",
+    "description": "Mirror content across a line defined by center point and angle",
+    "fileName": "Mirror",
+    "requiresChild": true,
+    "definition": {
+      "name": "Mirror",
+      "category": "Distortions",
+      "description": "Mirror content across a line defined by center point and angle",
+      "requiresRTT": true,
+      "requiresChild": true,
+      "props": {
+        "center": {
+          "default": {
+            "x": 0.5,
+            "y": 0.5
+          },
+          "description": "The point the mirror line passes through",
+          "ui": {
+            "type": "position",
+            "label": "Center"
+          }
+        },
+        "angle": {
+          "default": 0,
+          "description": "The angle of the mirror line in degrees",
+          "ui": {
+            "type": "range",
+            "min": 0,
+            "max": 360,
+            "step": 1,
+            "label": "Angle"
+          }
+        },
+        "edges": {
+          "default": "mirror",
+          "description": "How to handle edges when distortion pushes content out of bounds",
+          "ui": {
+            "type": "select",
+            "options": [
+              {
+                "label": "Stretch",
+                "value": "stretch"
+              },
+              {
+                "label": "Transparent",
+                "value": "transparent"
+              },
+              {
+                "label": "Mirror",
+                "value": "mirror"
+              },
+              {
+                "label": "Wrap",
+                "value": "wrap"
+              }
+            ],
+            "label": "Edges"
+          }
+        }
+      }
+    },
+    "propsMetadata": {
+      "center": {
+        "ui": {
+          "type": "position",
+          "label": "Center"
+        },
+        "default": {
+          "x": 0.5,
+          "y": 0.5
+        },
+        "description": "The point the mirror line passes through"
+      },
+      "angle": {
+        "ui": {
+          "type": "range",
+          "min": 0,
+          "max": 360,
+          "step": 1,
+          "label": "Angle"
+        },
+        "default": 0,
+        "description": "The angle of the mirror line in degrees"
+      },
+      "edges": {
+        "ui": {
+          "type": "select",
+          "options": [
+            {
+              "label": "Stretch",
+              "value": "stretch"
+            },
+            {
+              "label": "Transparent",
+              "value": "transparent"
+            },
+            {
+              "label": "Mirror",
+              "value": "mirror"
+            },
+            {
+              "label": "Wrap",
+              "value": "wrap"
+            }
+          ],
+          "label": "Edges"
+        },
+        "default": "mirror",
+        "description": "How to handle edges when distortion pushes content out of bounds"
+      }
+    }
+  },
   {
     "name": "Perspective",
     "category": "Distortions",

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

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+import { BlendMode, TransformConfig } from '../../core';
+import { ComponentProps } from '../../core/shaders/FlowField';
+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>;
+}
+/**
+ * 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 Solid wrapper component for Shader shader nodes
+ */
+export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
+//# sourceMappingURL=FlowField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowField.d.ts","sourceRoot":"","sources":["../../src/components/FlowField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4D,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAC9F,OAAO,EAGH,KAAK,SAAS,EAId,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGlF,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/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;CACxC;AAED;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;AAoCtE;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA4JlE"}

package/dist/solid/components/FlowField.js

@@ -0,0 +1,148 @@
+import { createComponent } from "solid-js/web";
+import { splitProps, createMemo, onMount, onCleanup, createEffect } from "solid-js";
+import { createUniformsMap } from "../../core/index.js";
+import { componentDefinition } from "../../core/shaders/FlowField/index.js";
+import { useShaderContext, ShaderContext } from "../engine/Shader.js";
+const DEFAULT_TRANSFORM = {
+  offsetX: 0,
+  offsetY: 0,
+  rotation: 0,
+  scale: 1,
+  anchorX: 0.5,
+  anchorY: 0.5,
+  edges: "transparent"
+};
+const defaultProps = {
+  blendMode: "normal",
+  renderOrder: 0,
+  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
+  } = context;
+  const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+  const effectiveProps = createMemo(() => {
+    let baseProps = {
+      ...defaultProps
+    };
+    for (const [key, value] of Object.entries(otherProps)) {
+      if (value !== void 0) {
+        baseProps[key] = value;
+      }
+    }
+    return baseProps;
+  });
+  const effectiveTransform = createMemo(() => ({
+    ...DEFAULT_TRANSFORM,
+    ...props.transform
+  }));
+  let uniformsMap = null;
+  const getUniformsMap = () => {
+    if (!uniformsMap) {
+      uniformsMap = createUniformsMap(componentDefinition, effectiveProps(), instanceId);
+    }
+    return uniformsMap;
+  };
+  const childContextValue = createMemo(() => ({
+    ...context,
+    shaderParentId: instanceId
+  }));
+  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,
+        renderOrder: props.renderOrder || 0,
+        transform: effectiveTransform()
+      };
+      parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniforms, componentDefinition);
+      isRegistered = true;
+    } 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;
+        const {
+          uniform
+        } = uniformData;
+        if ((uniform == null ? void 0 : uniform.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,
+        renderOrder: props.renderOrder || 0,
+        transform: effectiveTransform()
+      };
+      parentMetadataUpdate(instanceId, metadata);
+    } catch (error) {
+      console.error("Error updating metadata:", error);
+    }
+  });
+  return createComponent(ShaderContext.Provider, {
+    get value() {
+      return childContextValue();
+    },
+    get children() {
+      return local.children;
+    }
+  });
+}
+export {
+  ShaderComponent as default
+};

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

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+import { BlendMode, TransformConfig } from '../../core';
+import { ComponentProps } from '../../core/shaders/Kaleidoscope';
+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>;
+}
+/**
+ * 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 Solid wrapper component for Shader shader nodes
+ */
+export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
+//# sourceMappingURL=Kaleidoscope.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kaleidoscope.d.ts","sourceRoot":"","sources":["../../src/components/Kaleidoscope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4D,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAC9F,OAAO,EAGH,KAAK,SAAS,EAId,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGrF,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/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;CACxC;AAED;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;AAoCtE;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA4JlE"}