Metadata refactor

docs/src/app/(shaders)/neuro-noise/page.tsx

@@ -7,7 +7,7 @@ import { usePresetHighlight } from '@/helpers/use-preset-highlight';
 import { cleanUpLevaParams } from '@/helpers/clean-up-leva-params';
 import { toHsla } from '@/helpers/color-utils';
 import { ShaderDetails } from '@/components/shader-details';
-import { neuroNoiseDef } from '@/shader-defs/neuro-noise-def';
+import { animatedCommonParams, commonParams, neuroNoiseDef } from '@paper-design/shaders';
 import { ShaderContainer } from '@/components/shader-container';
 import { useUrlParams } from '@/helpers/use-url-params';
 
@@ -26,11 +26,36 @@ const NeuroNoiseWithControls = () => {
       colorFront: { value: toHsla(defaults.colorFront), order: 100 },
       colorMid: { value: toHsla(defaults.colorMid), order: 101 },
       colorBack: { value: toHsla(defaults.colorBack), order: 102 },
-      brightness: { value: defaults.brightness, min: 0, max: 1, order: 200 },
-      contrast: { value: defaults.contrast, min: 0, max: 1, order: 201 },
-      speed: { value: defaults.speed, min: 0, max: 2, order: 300 },
-      scale: { value: defaults.scale, min: 0.01, max: 4, order: 301 },
-      rotation: { value: defaults.rotation, min: 0, max: 360, order: 302 },
+      brightness: {
+        value: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.defaultValue as number,
+        min: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.min,
+        max: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.max,
+        order: 200,
+      },
+      contrast: {
+        value: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.defaultValue as number,
+        min: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.min,
+        max: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.max,
+        order: 201,
+      },
+      speed: {
+        value: commonParams.speed.defaultValue as number,
+        min: commonParams.speed.min,
+        max: commonParams.speed.max,
+        order: 300,
+      },
+      scale: {
+        value: commonParams.scale.defaultValue as number,
+        min: commonParams.scale.min,
+        max: commonParams.scale.max,
+        order: 301,
+      },
+      rotation: {
+        value: commonParams.rotation.defaultValue as number,
+        min: commonParams.rotation.min,
+        max: commonParams.rotation.max,
+        order: 302,
+      },
       Presets: folder(presets, { order: -1 }),
     };
   });

docs/src/components/shader-container.tsx

@@ -1,9 +1,9 @@
 'use client';
-import { SerializableValue, serializeParams } from '@/helpers/url-serializer';
-import { ShaderDef } from '@/shader-defs/shader-def-types';
+import type { ShaderDef } from '@paper-design/shaders';
+import { type SerializableValue, serializeParams } from '@/helpers/url-serializer';
 import { Leva } from 'leva';
 import { CopyButton } from './copy-button';
-import { useCallback, useEffect, useState } from 'react';
+import { useState } from 'react';
 
 export function ShaderContainer({
   children,

docs/src/components/shader-details.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { ShaderDef, ParamOption, ParamDef } from '../shader-defs/shader-def-types';
+import { ShaderDef, ParamOption, ParamDef } from '@paper-design/shaders';
 import { CopyButton } from './copy-button';
 import { hslToHex } from '@/helpers/color-utils';
-import { commonParams } from '@/shader-defs/common-param-def';
+import { commonParams } from '@paper-design/shaders';
 
 const formatJsxAttribute = (key: string, value: unknown): string => {
   if (value === true) {

docs/src/helpers/url-serializer.ts

@@ -1,5 +1,5 @@
 import { hslToHex, hexToHsl } from './color-utils';
-import type { ParamDef } from '../shader-defs/shader-def-types';
+import type { ParamDef } from '@paper-design/shaders';
 
 export type SerializableValue = string | number | boolean | string[] | number[];
 

docs/src/helpers/use-url-params.ts

@@ -1,9 +1,9 @@
 'use client';
 
+import type { ShaderDef } from '@paper-design/shaders';
 import { useEffect } from 'react';
 import { deserializeParams } from './url-serializer';
 import { setParamsSafe } from './use-reset-leva-params';
-import type { ShaderDef } from '../shader-defs/shader-def-types';
 
 export const useUrlParams = (
   params: any,

docs/src/shader-defs/color-panels-def.ts

@@ -1,6 +1,5 @@
 import { colorPanelsPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = colorPanelsPresets[0].params;
 

docs/src/shader-defs/dithering-def.ts

@@ -1,6 +1,5 @@
 import { ditheringPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = ditheringPresets[0].params;
 

docs/src/shader-defs/dot-grid-def.ts

@@ -1,6 +1,5 @@
 import { dotGridPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { staticCommonParams } from './common-param-def';
+import { staticCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = dotGridPresets[0].params;
 

docs/src/shader-defs/dot-orbit-def.ts

@@ -1,6 +1,5 @@
 import { dotOrbitPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = dotOrbitPresets[0].params;
 

docs/src/shader-defs/fluted-glass-def.ts

@@ -1,6 +1,5 @@
 import { flutedGlassPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { staticCommonParams } from './common-param-def';
+import { staticCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = flutedGlassPresets[0].params;
 

docs/src/shader-defs/god-rays-def.ts

@@ -1,6 +1,5 @@
 import { godRaysPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = godRaysPresets[0].params;
 

docs/src/shader-defs/grain-gradient-def.ts

@@ -1,6 +1,5 @@
 import { grainGradientPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = grainGradientPresets[0].params;
 

docs/src/shader-defs/heatmap-def.ts

@@ -1,6 +1,5 @@
 import { heatmapPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = heatmapPresets[0].params;
 

docs/src/shader-defs/image-dithering-def.ts

@@ -1,6 +1,5 @@
 import { imageDitheringPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { staticCommonParams } from './common-param-def';
+import { staticCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = imageDitheringPresets[0].params;
 

docs/src/shader-defs/liquid-metal-def.ts

@@ -1,6 +1,5 @@
 import { liquidMetalPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = liquidMetalPresets[0].params;
 

docs/src/shader-defs/mesh-gradient-def.ts

@@ -1,6 +1,5 @@
 import { meshGradientPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = meshGradientPresets[0].params;
 

docs/src/shader-defs/metaballs-def.ts

@@ -1,6 +1,5 @@
 import { metaballsPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = metaballsPresets[0].params;
 

docs/src/shader-defs/paper-texture-def.ts

@@ -1,6 +1,5 @@
 import { paperTexturePresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { staticCommonParams } from './common-param-def';
+import { staticCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = paperTexturePresets[0].params;
 

docs/src/shader-defs/perlin-noise-def.ts

@@ -1,6 +1,5 @@
 import { perlinNoisePresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = perlinNoisePresets[0].params;
 

docs/src/shader-defs/pulsing-border-def.ts

@@ -1,6 +1,5 @@
 import { pulsingBorderPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = pulsingBorderPresets[0].params;
 

docs/src/shader-defs/shader-defs.ts

@@ -1,4 +1,4 @@
-import type { ShaderDef } from './shader-def-types';
+import type { ShaderDef } from '@paper-design/shaders';
 
 import { colorPanelsDef } from './color-panels-def';
 import { ditheringDef } from './dithering-def';
@@ -11,7 +11,7 @@ import { imageDitheringDef } from './image-dithering-def';
 import { liquidMetalDef } from './liquid-metal-def';
 import { meshGradientDef } from './mesh-gradient-def';
 import { metaballsDef } from './metaballs-def';
-import { neuroNoiseDef } from './neuro-noise-def';
+import { neuroNoiseDef } from '@paper-design/shaders';
 import { paperTextureDef } from './paper-texture-def';
 import { perlinNoiseDef } from './perlin-noise-def';
 import { pulsingBorderDef } from './pulsing-border-def';

docs/src/shader-defs/simplex-noise-def.ts

@@ -1,6 +1,5 @@
 import { simplexNoisePresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = simplexNoisePresets[0].params;
 

docs/src/shader-defs/smoke-ring-def.ts

@@ -1,6 +1,5 @@
 import { smokeRingPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = smokeRingPresets[0].params;
 

docs/src/shader-defs/spiral-def.ts

@@ -1,6 +1,5 @@
 import { spiralPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = spiralPresets[0].params;
 

docs/src/shader-defs/static-mesh-gradient-def.ts

@@ -1,6 +1,5 @@
 import { staticMeshGradientPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { staticCommonParams } from './common-param-def';
+import { staticCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = staticMeshGradientPresets[0].params;
 

docs/src/shader-defs/static-radial-gradient-def.ts

@@ -1,6 +1,5 @@
 import { staticRadialGradientPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { staticCommonParams } from './common-param-def';
+import { staticCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = staticRadialGradientPresets[0].params;
 

docs/src/shader-defs/swirl-def.ts

@@ -1,6 +1,5 @@
 import { swirlPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = swirlPresets[0].params;
 

docs/src/shader-defs/voronoi-def.ts

@@ -1,6 +1,5 @@
 import { voronoiPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = voronoiPresets[0].params;
 

docs/src/shader-defs/warp-def.ts

@@ -1,6 +1,5 @@
 import { warpPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = warpPresets[0].params;
 

docs/src/shader-defs/water-def.ts

@@ -1,6 +1,5 @@
 import { waterPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { animatedCommonParams } from './common-param-def';
+import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = waterPresets[0].params;
 

docs/src/shader-defs/waves-def.ts

@@ -1,6 +1,5 @@
 import { wavesPresets } from '@paper-design/shaders-react';
-import type { ShaderDef } from './shader-def-types';
-import { staticCommonParams } from './common-param-def';
+import { staticCommonParams, type ShaderDef } from '@paper-design/shaders';
 
 const defaultParams = wavesPresets[0].params;
 

packages/shaders-react/src/shaders/neuro-noise.tsx

@@ -6,9 +6,11 @@ import {
   getShaderColorFromString,
   neuroNoiseFragmentShader,
   ShaderFitOptions,
+  neuroNoiseDef,
   type NeuroNoiseParams,
   type NeuroNoiseUniforms,
   type ShaderPreset,
+  commonParams,
 } from '@paper-design/shaders';
 
 export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {}
@@ -19,13 +21,13 @@ export const defaultPreset: NeuroNoisePreset = {
   name: 'Default',
   params: {
     ...defaultPatternSizing,
-    speed: 1,
-    frame: 0,
-    colorFront: '#ffffff',
-    colorMid: '#47a6ff',
-    colorBack: '#000000',
-    brightness: 0.05,
-    contrast: 0.3,
+    speed: commonParams.speed!.defaultValue as number,
+    frame: commonParams.frame!.defaultValue as number,
+    colorFront: neuroNoiseDef.params.find((p) => p.name === 'colorFront')?.defaultValue as string,
+    colorMid: '#47a6ff', // Can differ from the def default value
+    colorBack: neuroNoiseDef.params.find((p) => p.name === 'colorBack')?.defaultValue as string,
+    brightness: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.defaultValue as number,
+    contrast: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.defaultValue as number,
   },
 };
 
@@ -83,24 +85,24 @@ export const neuroNoisePresets: NeuroNoisePreset[] = [
 
 export const NeuroNoise: React.FC<NeuroNoiseProps> = memo(function NeuroNoiseImpl({
   // Own props
-  speed = defaultPreset.params.speed,
-  frame = defaultPreset.params.frame,
-  colorFront = defaultPreset.params.colorFront,
-  colorMid = defaultPreset.params.colorMid,
-  colorBack = defaultPreset.params.colorBack,
-  brightness = defaultPreset.params.brightness,
-  contrast = defaultPreset.params.contrast,
+  speed = commonParams.speed!.defaultValue as number,
+  frame = commonParams.frame!.defaultValue as number,
+  colorFront = neuroNoiseDef.params.find((p) => p.name === 'colorFront')?.defaultValue as string,
+  colorMid = neuroNoiseDef.params.find((p) => p.name === 'colorMid')?.defaultValue as string,
+  colorBack = neuroNoiseDef.params.find((p) => p.name === 'colorBack')?.defaultValue as string,
+  brightness = neuroNoiseDef.params.find((p) => p.name === 'brightness')?.defaultValue as number,
+  contrast = neuroNoiseDef.params.find((p) => p.name === 'contrast')?.defaultValue as number,
 
   // Sizing props
-  fit = defaultPreset.params.fit,
-  scale = defaultPreset.params.scale,
-  rotation = defaultPreset.params.rotation,
-  originX = defaultPreset.params.originX,
-  originY = defaultPreset.params.originY,
-  offsetX = defaultPreset.params.offsetX,
-  offsetY = defaultPreset.params.offsetY,
-  worldWidth = defaultPreset.params.worldWidth,
-  worldHeight = defaultPreset.params.worldHeight,
+  fit = defaultPatternSizing.fit,
+  scale = defaultPatternSizing.scale,
+  rotation = defaultPatternSizing.rotation,
+  originX = defaultPatternSizing.originX,
+  originY = defaultPatternSizing.originY,
+  offsetX = defaultPatternSizing.offsetX,
+  offsetY = defaultPatternSizing.offsetY,
+  worldWidth = defaultPatternSizing.worldWidth,
+  worldHeight = defaultPatternSizing.worldHeight,
   ...props
 }: NeuroNoiseProps) {
   const uniforms = {