shaders 2.2.24 → 2.2.25

package/dist/solid/utils/generatePresetCode.js

@@ -1,595 +1,624 @@
-const d = {
-  AngularBlur: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 20,
-    center: {
-      x: 0.5,
-      y: 0.5
+const shaderMetadata = {
+  "AngularBlur": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 20,
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     }
   },
-  Ascii: {
-    opacity: 1,
-    blendMode: "normal",
-    characters: "@%#*+=-:.",
-    cellSize: 30,
-    fontFamily: "JetBrains Mono",
-    spacing: 1
-  },
-  Beam: {
-    opacity: 1,
-    blendMode: "normal",
-    startPosition: {
-      x: 0.2,
-      y: 0.5
+  "Ascii": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "characters": "@%#*+=-:.",
+    "cellSize": 30,
+    "fontFamily": "JetBrains Mono",
+    "spacing": 1
+  },
+  "Beam": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "startPosition": {
+      "x": 0.2,
+      "y": 0.5
     },
-    endPosition: {
-      x: 0.8,
-      y: 0.5
+    "endPosition": {
+      "x": 0.8,
+      "y": 0.5
     },
-    startThickness: 0.2,
-    endThickness: 0.2,
-    startSoftness: 0.5,
-    endSoftness: 0.5,
-    insideColor: "#FF0000",
-    outsideColor: "#0000FF",
-    colorSpace: "linear"
-  },
-  Blob: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#ff6b35",
-    colorB: "#e91e63",
-    size: 0.5,
-    deformation: 0.5,
-    softness: 0.5,
-    highlightIntensity: 0.5,
-    highlightX: 0.3,
-    highlightY: -0.3,
-    highlightZ: 0.4,
-    highlightColor: "#ffe11a",
-    speed: 0.5,
-    seed: 1,
-    center: {
-      x: 0.5,
-      y: 0.5
+    "startThickness": 0.2,
+    "endThickness": 0.2,
+    "startSoftness": 0.5,
+    "endSoftness": 0.5,
+    "insideColor": "#FF0000",
+    "outsideColor": "#0000FF",
+    "colorSpace": "linear"
+  },
+  "Blob": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#ff6b35",
+    "colorB": "#e91e63",
+    "size": 0.5,
+    "deformation": 0.5,
+    "softness": 0.5,
+    "highlightIntensity": 0.5,
+    "highlightX": 0.3,
+    "highlightY": -0.3,
+    "highlightZ": 0.4,
+    "highlightColor": "#ffe11a",
+    "speed": 0.5,
+    "seed": 1,
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    colorSpace: "linear"
-  },
-  Blur: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 50
-  },
-  Bulge: {
-    opacity: 1,
-    blendMode: "normal",
-    center: {
-      x: 0.5,
-      y: 0.5
+    "colorSpace": "linear"
+  },
+  "Blur": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 50
+  },
+  "Bulge": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    strength: 1,
-    radius: 1,
-    falloff: 0.5,
-    edges: "stretch"
-  },
-  ChannelBlur: {
-    opacity: 1,
-    blendMode: "normal",
-    redIntensity: 0,
-    greenIntensity: 20,
-    blueIntensity: 40
-  },
-  Checkerboard: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#cccccc",
-    colorB: "#999999",
-    cells: 8,
-    softness: 0,
-    colorSpace: "linear"
-  },
-  ChromaFlow: {
-    opacity: 1,
-    blendMode: "normal",
-    baseColor: "#0066ff",
-    upColor: "#00ff00",
-    downColor: "#ff0000",
-    leftColor: "#0000ff",
-    rightColor: "#ffff00",
-    intensity: 1,
-    radius: 2,
-    momentum: 30
-  },
-  ChromaticAberration: {
-    opacity: 1,
-    blendMode: "normal",
-    strength: 0.2,
-    angle: 0,
-    redOffset: -1,
-    greenOffset: 0,
-    blueOffset: 1
-  },
-  Circle: {
-    opacity: 1,
-    blendMode: "normal",
-    color: "#ffffff",
-    radius: 1,
-    softness: 0,
-    center: {
-      x: 0.5,
-      y: 0.5
+    "strength": 1,
+    "radius": 1,
+    "falloff": 0.5,
+    "edges": "stretch"
+  },
+  "ChannelBlur": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "redIntensity": 0,
+    "greenIntensity": 20,
+    "blueIntensity": 40
+  },
+  "Checkerboard": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#cccccc",
+    "colorB": "#999999",
+    "cells": 8,
+    "softness": 0,
+    "colorSpace": "linear"
+  },
+  "ChromaFlow": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "baseColor": "#0066ff",
+    "upColor": "#00ff00",
+    "downColor": "#ff0000",
+    "leftColor": "#0000ff",
+    "rightColor": "#ffff00",
+    "intensity": 1,
+    "radius": 2,
+    "momentum": 30
+  },
+  "ChromaticAberration": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "strength": 0.2,
+    "angle": 0,
+    "redOffset": -1,
+    "greenOffset": 0,
+    "blueOffset": 1
+  },
+  "Circle": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "color": "#ffffff",
+    "radius": 1,
+    "softness": 0,
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     }
   },
-  CRTScreen: {
-    opacity: 1,
-    blendMode: "normal",
-    pixelSize: 128,
-    colorShift: 1,
-    scanlineIntensity: 0.3,
-    scanlineFrequency: 200,
-    brightness: 1.1,
-    contrast: 1.2
-  },
-  CursorTrail: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#00aaff",
-    colorB: "#ff00aa",
-    radius: 0.5,
-    length: 0.5,
-    shrink: 1,
-    colorSpace: "linear"
-  },
-  DiffuseBlur: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 30,
-    edges: "stretch"
-  },
-  Dither: {
-    opacity: 1,
-    blendMode: "normal",
-    pixelSize: 4,
-    threshold: 0.5,
-    colorA: "transparent",
-    colorB: "#ffffff"
-  },
-  DotGrid: {
-    opacity: 1,
-    blendMode: "normal",
-    color: "#ffffff",
-    density: 100,
-    dotSize: 0.3,
-    twinkle: 0
-  },
-  Duotone: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#ff0000",
-    colorB: "#023af4",
-    blend: 0.5,
-    colorSpace: "linear"
-  },
-  FilmGrain: {
-    opacity: 1,
-    blendMode: "normal",
-    strength: 0.5
-  },
-  FloatingParticles: {
-    opacity: 1,
-    blendMode: "normal",
-    randomness: 0.25,
-    speed: 0.25,
-    angle: 90,
-    particleSize: 1,
-    particleSoftness: 0,
-    twinkle: 0.5,
-    count: 5,
-    particleColor: "#ffffff",
-    speedVariance: 0.3,
-    angleVariance: 30,
-    particleDensity: 3
-  },
-  GlassTiles: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 1,
-    tileCount: 100
-  },
-  Glow: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 1,
-    threshold: 0.5,
-    size: 10
-  },
-  Godrays: {
-    opacity: 1,
-    blendMode: "normal",
-    center: {
-      x: 0,
-      y: 0
+  "CRTScreen": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "pixelSize": 128,
+    "colorShift": 1,
+    "scanlineIntensity": 0.3,
+    "scanlineFrequency": 200,
+    "brightness": 1.1,
+    "contrast": 1.2
+  },
+  "CursorTrail": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#00aaff",
+    "colorB": "#ff00aa",
+    "radius": 0.5,
+    "length": 0.5,
+    "shrink": 1,
+    "colorSpace": "linear"
+  },
+  "DiffuseBlur": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 30,
+    "edges": "stretch"
+  },
+  "Dither": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "pixelSize": 4,
+    "threshold": 0.5,
+    "colorA": "transparent",
+    "colorB": "#ffffff"
+  },
+  "DotGrid": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "color": "#ffffff",
+    "density": 100,
+    "dotSize": 0.3,
+    "twinkle": 0
+  },
+  "Duotone": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#ff0000",
+    "colorB": "#023af4",
+    "blend": 0.5,
+    "colorSpace": "linear"
+  },
+  "FilmGrain": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "strength": 0.5
+  },
+  "FloatingParticles": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "randomness": 0.25,
+    "speed": 0.25,
+    "angle": 90,
+    "particleSize": 1,
+    "particleSoftness": 0,
+    "twinkle": 0.5,
+    "count": 5,
+    "particleColor": "#ffffff",
+    "speedVariance": 0.3,
+    "angleVariance": 30,
+    "particleDensity": 3
+  },
+  "GlassTiles": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 1,
+    "tileCount": 100
+  },
+  "Glow": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 1,
+    "threshold": 0.5,
+    "size": 10
+  },
+  "Godrays": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "center": {
+      "x": 0,
+      "y": 0
     },
-    density: 0.3,
-    intensity: 0.8,
-    spotty: 1,
-    speed: 0.5,
-    rayColor: "#4283fb",
-    backgroundColor: "transparent"
-  },
-  Grayscale: {
-    opacity: 1,
-    blendMode: "normal"
-  },
-  Grid: {
-    opacity: 1,
-    blendMode: "normal",
-    color: "#ffffff",
-    cells: 10,
-    thickness: 1
-  },
-  GridDistortion: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 1,
-    swirl: 0,
-    decay: 3,
-    radius: 1,
-    gridSize: 20,
-    edges: "stretch"
-  },
-  Group: {
-    opacity: 1,
-    blendMode: "normal"
-  },
-  Halftone: {
-    opacity: 1,
-    blendMode: "normal",
-    frequency: 100,
-    angle: 45,
-    smoothness: 0.1
-  },
-  HueShift: {
-    opacity: 1,
-    blendMode: "normal",
-    shift: 0
-  },
-  ImageTexture: {
-    opacity: 1,
-    blendMode: "normal",
-    url: "https://shaders.com/sample.jpg",
-    objectFit: "cover"
-  },
-  Invert: {
-    opacity: 1,
-    blendMode: "normal"
-  },
-  LinearBlur: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 30,
-    angle: 0
-  },
-  LinearGradient: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#1aff00",
-    colorB: "#0000ff",
-    start: {
-      x: 0,
-      y: 0.5
+    "density": 0.3,
+    "intensity": 0.8,
+    "spotty": 1,
+    "speed": 0.5,
+    "rayColor": "#4283fb",
+    "backgroundColor": "transparent"
+  },
+  "Grayscale": {
+    "opacity": 1,
+    "blendMode": "normal"
+  },
+  "Grid": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "color": "#ffffff",
+    "cells": 10,
+    "thickness": 1
+  },
+  "GridDistortion": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 1,
+    "swirl": 0,
+    "decay": 3,
+    "radius": 1,
+    "gridSize": 20,
+    "edges": "stretch"
+  },
+  "Group": {
+    "opacity": 1,
+    "blendMode": "normal"
+  },
+  "Halftone": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "frequency": 100,
+    "angle": 45,
+    "smoothness": 0.1
+  },
+  "HueShift": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "shift": 0
+  },
+  "ImageTexture": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "url": "https://shaders.com/sample.jpg",
+    "objectFit": "cover"
+  },
+  "Invert": {
+    "opacity": 1,
+    "blendMode": "normal"
+  },
+  "LinearBlur": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 30,
+    "angle": 0
+  },
+  "LinearGradient": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#1aff00",
+    "colorB": "#0000ff",
+    "start": {
+      "x": 0,
+      "y": 0.5
     },
-    end: {
-      x: 1,
-      y: 0.5
+    "end": {
+      "x": 1,
+      "y": 0.5
     },
-    angle: 0,
-    edges: "stretch",
-    colorSpace: "linear"
-  },
-  Liquify: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 1,
-    swirl: 0,
-    decay: 3,
-    radius: 1,
-    edges: "stretch"
-  },
-  Pixelate: {
-    opacity: 1,
-    blendMode: "normal",
-    scale: 50
-  },
-  PolarCoordinates: {
-    opacity: 1,
-    blendMode: "normal",
-    center: {
-      x: 0.5,
-      y: 0.5
+    "angle": 0,
+    "edges": "stretch",
+    "colorSpace": "linear"
+  },
+  "Liquify": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 1,
+    "swirl": 0,
+    "decay": 3,
+    "radius": 1,
+    "edges": "stretch"
+  },
+  "Pixelate": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "scale": 50
+  },
+  "PolarCoordinates": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    wrap: 1,
-    radius: 1,
-    intensity: 1,
-    edges: "transparent"
-  },
-  Posterize: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 5
-  },
-  ProgressiveBlur: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 50,
-    angle: 0,
-    center: {
-      x: 0,
-      y: 0.5
+    "wrap": 1,
+    "radius": 1,
+    "intensity": 1,
+    "edges": "transparent"
+  },
+  "Posterize": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 5
+  },
+  "ProgressiveBlur": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 50,
+    "angle": 0,
+    "center": {
+      "x": 0,
+      "y": 0.5
     },
-    falloff: 1
-  },
-  RadialGradient: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#ff0000",
-    colorB: "#0000ff",
-    center: {
-      x: 0.5,
-      y: 0.5
+    "falloff": 1
+  },
+  "RadialGradient": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#ff0000",
+    "colorB": "#0000ff",
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    radius: 1,
-    colorSpace: "linear"
-  },
-  RectangularCoordinates: {
-    opacity: 1,
-    blendMode: "normal",
-    center: {
-      x: 0.5,
-      y: 0.5
+    "radius": 1,
+    "colorSpace": "linear"
+  },
+  "RectangularCoordinates": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    scale: 1,
-    intensity: 1,
-    edges: "transparent"
-  },
-  Ripples: {
-    opacity: 1,
-    blendMode: "normal",
-    center: {
-      x: 0.5,
-      y: 0.5
+    "scale": 1,
+    "intensity": 1,
+    "edges": "transparent"
+  },
+  "Ripples": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    colorA: "#ffffff",
-    colorB: "#000000",
-    speed: 1,
-    frequency: 20,
-    softness: 0,
-    thickness: 0.5,
-    phase: 0
-  },
-  Saturation: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 1
-  },
-  SimplexNoise: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#ffffff",
-    colorB: "#000000",
-    scale: 2,
-    balance: 0,
-    contrast: 0,
-    seed: 0,
-    speed: 1
-  },
-  SineWave: {
-    opacity: 1,
-    blendMode: "normal",
-    color: "#ffffff",
-    amplitude: 0.15,
-    frequency: 1,
-    speed: 1,
-    angle: 0,
-    position: {
-      x: 0.5,
-      y: 0.5
+    "colorA": "#ffffff",
+    "colorB": "#000000",
+    "speed": 1,
+    "frequency": 20,
+    "softness": 0,
+    "thickness": 0.5,
+    "phase": 0
+  },
+  "Saturation": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 1
+  },
+  "SimplexNoise": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#ffffff",
+    "colorB": "#000000",
+    "scale": 2,
+    "balance": 0,
+    "contrast": 0,
+    "seed": 0,
+    "speed": 1
+  },
+  "SineWave": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "color": "#ffffff",
+    "amplitude": 0.15,
+    "frequency": 1,
+    "speed": 1,
+    "angle": 0,
+    "position": {
+      "x": 0.5,
+      "y": 0.5
     },
-    thickness: 0.2,
-    softness: 0.4
-  },
-  SolidColor: {
-    opacity: 1,
-    blendMode: "normal",
-    color: "#5b18ca"
-  },
-  Spherize: {
-    opacity: 1,
-    blendMode: "normal",
-    radius: 1,
-    depth: 1,
-    center: {
-      x: 0.5,
-      y: 0.5
+    "thickness": 0.2,
+    "softness": 0.4
+  },
+  "SolidColor": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "color": "#5b18ca"
+  },
+  "Spherize": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "radius": 1,
+    "depth": 1,
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    lightPosition: {
-      x: 0.3,
-      y: 0.3
+    "lightPosition": {
+      "x": 0.3,
+      "y": 0.3
     },
-    lightIntensity: 0.5,
-    lightSoftness: 0.5,
-    lightColor: "#ffffff"
-  },
-  Spiral: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#000000",
-    colorB: "#ffffff",
-    strokeWidth: 0.5,
-    strokeFalloff: 0,
-    softness: 0,
-    speed: 1,
-    center: {
-      x: 0.5,
-      y: 0.5
+    "lightIntensity": 0.5,
+    "lightSoftness": 0.5,
+    "lightColor": "#ffffff"
+  },
+  "Spiral": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#000000",
+    "colorB": "#ffffff",
+    "strokeWidth": 0.5,
+    "strokeFalloff": 0,
+    "softness": 0,
+    "speed": 1,
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    scale: 1,
-    colorSpace: "linear"
-  },
-  Strands: {
-    opacity: 1,
-    blendMode: "normal",
-    speed: 0.5,
-    amplitude: 1,
-    frequency: 1,
-    lineCount: 12,
-    lineWidth: 0.1,
-    waveColor: "#f1c907",
-    pinEdges: !0,
-    start: {
-      x: 0,
-      y: 0.5
+    "scale": 1,
+    "colorSpace": "linear"
+  },
+  "Strands": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "speed": 0.5,
+    "amplitude": 1,
+    "frequency": 1,
+    "lineCount": 12,
+    "lineWidth": 0.1,
+    "waveColor": "#f1c907",
+    "pinEdges": true,
+    "start": {
+      "x": 0,
+      "y": 0.5
     },
-    end: {
-      x: 1,
-      y: 0.5
+    "end": {
+      "x": 1,
+      "y": 0.5
     }
   },
-  Stretch: {
-    opacity: 1,
-    blendMode: "normal",
-    center: {
-      x: 0.5,
-      y: 0.5
+  "Stretch": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    strength: 1,
-    angle: 0,
-    falloff: 0,
-    edges: "stretch"
-  },
-  Swirl: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#1275d8",
-    colorB: "#e19136",
-    speed: 1,
-    detail: 1,
-    blend: 50,
-    coarseX: 50,
-    coarseY: 50,
-    mediumX: 50,
-    mediumY: 50,
-    fineX: 50,
-    fineY: 50,
-    colorSpace: "linear"
-  },
-  TiltShift: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 50,
-    width: 0.3,
-    falloff: 0.3,
-    angle: 0,
-    center: {
-      x: 0.5,
-      y: 0.5
+    "strength": 1,
+    "angle": 0,
+    "falloff": 0,
+    "edges": "stretch"
+  },
+  "Swirl": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#1275d8",
+    "colorB": "#e19136",
+    "speed": 1,
+    "detail": 1,
+    "blend": 50,
+    "coarseX": 50,
+    "coarseY": 50,
+    "mediumX": 50,
+    "mediumY": 50,
+    "fineX": 50,
+    "fineY": 50,
+    "colorSpace": "linear"
+  },
+  "TiltShift": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 50,
+    "width": 0.3,
+    "falloff": 0.3,
+    "angle": 0,
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     }
   },
-  Tritone: {
-    opacity: 1,
-    blendMode: "normal",
-    colorA: "#ce1bea",
-    colorB: "#2fff00",
-    colorC: "#ffff00",
-    blendMid: 0.5,
-    colorSpace: "linear"
-  },
-  Twirl: {
-    opacity: 1,
-    blendMode: "normal",
-    center: {
-      x: 0.5,
-      y: 0.5
+  "Tritone": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "colorA": "#ce1bea",
+    "colorB": "#2fff00",
+    "colorC": "#ffff00",
+    "blendMid": 0.5,
+    "colorSpace": "linear"
+  },
+  "Twirl": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     },
-    intensity: 1,
-    edges: "stretch"
-  },
-  Vibrance: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 0
-  },
-  WaveDistortion: {
-    opacity: 1,
-    blendMode: "normal",
-    strength: 0.3,
-    frequency: 1,
-    speed: 1,
-    angle: 0,
-    waveType: "sine",
-    edges: "stretch"
-  },
-  ZoomBlur: {
-    opacity: 1,
-    blendMode: "normal",
-    intensity: 30,
-    center: {
-      x: 0.5,
-      y: 0.5
+    "intensity": 1,
+    "edges": "stretch"
+  },
+  "Vibrance": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 0
+  },
+  "WaveDistortion": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "strength": 0.3,
+    "frequency": 1,
+    "speed": 1,
+    "angle": 0,
+    "waveType": "sine",
+    "edges": "stretch"
+  },
+  "ZoomBlur": {
+    "opacity": 1,
+    "blendMode": "normal",
+    "intensity": 30,
+    "center": {
+      "x": 0.5,
+      "y": 0.5
     }
   }
 };
-function f(t, l, i = "  ") {
-  return Object.entries(t).filter(([e, o]) => {
-    const n = d[l] || {};
-    if (n.hasOwnProperty(e)) {
-      const r = n[e];
-      return o !== null && r !== null && typeof o == "object" && typeof r == "object" ? JSON.stringify(o) !== JSON.stringify(r) : o !== r;
+function generatePropString(props, componentType, indent = "  ") {
+  return Object.entries(props).filter(([key, value]) => {
+    const componentDefaults = shaderMetadata[componentType] || {};
+    if (componentDefaults.hasOwnProperty(key)) {
+      const defaultValue = componentDefaults[key];
+      if (value !== null && defaultValue !== null && typeof value === "object" && typeof defaultValue === "object") {
+        return JSON.stringify(value) !== JSON.stringify(defaultValue);
+      }
+      return value !== defaultValue;
     }
-    return !(e === "opacity" && o === 1 || e === "blendMode" && o === "normal");
-  }).map(([e, o]) => typeof o == "string" ? `${e}=${JSON.stringify(o)}` : o !== null && typeof o == "object" ? `${e}={${JSON.stringify(o)}}` : `${e}={${o}}`).join(`
-` + i + "  ");
+    if (key === "opacity" && value === 1) return false;
+    if (key === "blendMode" && value === "normal") return false;
+    return true;
+  }).map(([key, value]) => {
+    if (typeof value === "string") {
+      return `${key}=${JSON.stringify(value)}`;
+    } else if (value !== null && typeof value === "object") {
+      return `${key}={${JSON.stringify(value)}}`;
+    } else {
+      return `${key}={${value}}`;
+    }
+  }).join("\n" + indent + "  ");
 }
-function p(t, l) {
-  const i = [];
-  function e(o) {
-    for (const n of o)
-      i.push(n), n.children && e(n.children);
+function isIdUsedAsMaskSource(id, allComponents) {
+  const flatComponents = [];
+  function flattenComponents(components) {
+    for (const component of components) {
+      flatComponents.push(component);
+      if (component.children) {
+        flattenComponents(component.children);
+      }
+    }
   }
-  return e(l), i.some(
-    (o) => {
-      var n;
-      return ((n = o.props) == null ? void 0 : n.maskSource) === t;
+  flattenComponents(allComponents);
+  return flatComponents.some(
+    (component) => {
+      var _a;
+      return ((_a = component.props) == null ? void 0 : _a.maskSource) === id;
     }
   );
 }
-function y(t) {
-  const l = (e, o = "  ") => {
-    const n = e.props ? f(e.props, e.type, o) : "";
-    let r = "";
-    e.id && p(e.id, t.components) && (r = `id="${e.id}"`);
-    const a = [r, n].filter(Boolean).join(`
-` + o + "  ");
-    if (e.children && e.children.length > 0) {
-      const s = e.children.map((c) => l(c, o + "  ")).join(`
-`);
-      return a ? `${o}<${e.type}
-${o}  ${a}>
-${s}
-${o}</${e.type}>` : `${o}<${e.type}>
-${s}
-${o}</${e.type}>`;
-    } else
-      return a ? `${o}<${e.type}
-${o}  ${a} />` : `${o}<${e.type} />`;
+function generatePresetCode(preset) {
+  const generateComponentString = (config, indent = "  ") => {
+    const propString = config.props ? generatePropString(config.props, config.type, indent) : "";
+    let idString = "";
+    if (config.id) {
+      const isUsedAsMask = isIdUsedAsMaskSource(config.id, preset.components);
+      if (isUsedAsMask) {
+        idString = `id="${config.id}"`;
+      }
+    }
+    const attributes = [idString, propString].filter(Boolean).join("\n" + indent + "  ");
+    if (config.children && config.children.length > 0) {
+      const childrenString = config.children.map((child) => generateComponentString(child, indent + "  ")).join("\n");
+      if (attributes) {
+        return `${indent}<${config.type}
+${indent}  ${attributes}>
+${childrenString}
+${indent}</${config.type}>`;
+      } else {
+        return `${indent}<${config.type}>
+${childrenString}
+${indent}</${config.type}>`;
+      }
+    } else {
+      if (attributes) {
+        return `${indent}<${config.type}
+${indent}  ${attributes} />`;
+      } else {
+        return `${indent}<${config.type} />`;
+      }
+    }
   };
+  const componentStrings = preset.components.map((config) => generateComponentString(config)).join("\n");
   return `<Shader>
-${t.components.map((e) => l(e)).join(`
-`)}
+${componentStrings}
 </Shader>`;
 }
-const m = [
+const availableComponents = [
   // @ts-ignore - replaced at build time
   "AngularBlur",
   "Ascii",
@@ -648,6 +677,6 @@ const m = [
   "ZoomBlur"
 ];
 export {
-  m as availableComponents,
-  y as generatePresetCode
+  availableComponents,
+  generatePresetCode
 };