kmcom-nuxt-layers 2.2.0 → 2.2.2

package/layers/shader/app/components/Material/Image.client.vue

@@ -1,8 +1,4 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable no-console -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { DoubleSide, type Texture } from 'three'
   import {
     float,
@@ -22,117 +18,115 @@
   import type { TSLNode } from '../../types'
   import { simplexNoise2D } from '../../utils/tsl/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Image source URL or path */
-      src: string
-      /** Distortion effect strength (0 = none) */
-      distortion?: number
-      /** Distortion speed */
-      distortionSpeed?: number
-      /** Enable mouse-reactive ripple effect */
-      mouseRipple?: boolean
-      /** Ripple strength */
-      rippleStrength?: number
-      /** Zoom level (1 = normal) */
-      zoom?: number
-      /** Grayscale amount (0-1) */
-      grayscale?: number
-      /** RGB shift/chromatic aberration amount */
-      rgbShift?: number
-      /** Enable vignette effect */
-      vignette?: boolean
-      /** Vignette intensity */
-      vignetteIntensity?: number
-      /** Transparent background */
-      transparent?: boolean
-      /** Mouse X position (0-1) for external control */
-      mouseX?: number
-      /** Mouse Y position (0-1) for external control */
-      mouseY?: number
-    }>(),
-    {
-      distortion: 0,
-      distortionSpeed: 1,
-      mouseRipple: false,
-      rippleStrength: 0.02,
-      zoom: 1,
-      grayscale: 0,
-      rgbShift: 0,
-      vignette: false,
-      vignetteIntensity: 0.5,
-      transparent: false,
-      mouseX: 0.5,
-      mouseY: 0.5,
-    }
-  )
+  const {
+    src,
+    distortion = 0,
+    distortionSpeed = 1,
+    mouseRipple = false,
+    rippleStrength = 0.02,
+    zoom = 1,
+    grayscale = 0,
+    rgbShift = 0,
+    vignette = false,
+    vignetteIntensity = 0.5,
+    transparent = false,
+    mouseX = 0.5,
+    mouseY = 0.5,
+  } = defineProps<{
+    /** Image source URL or path */
+    src: string
+    /** Distortion effect strength (0 = none) */
+    distortion?: number
+    /** Distortion speed */
+    distortionSpeed?: number
+    /** Enable mouse-reactive ripple effect */
+    mouseRipple?: boolean
+    /** Ripple strength */
+    rippleStrength?: number
+    /** Zoom level (1 = normal) */
+    zoom?: number
+    /** Grayscale amount (0-1) */
+    grayscale?: number
+    /** RGB shift/chromatic aberration amount */
+    rgbShift?: number
+    /** Enable vignette effect */
+    vignette?: boolean
+    /** Vignette intensity */
+    vignetteIntensity?: number
+    /** Transparent background */
+    transparent?: boolean
+    /** Mouse X position (0-1) for external control */
+    mouseX?: number
+    /** Mouse Y position (0-1) for external control */
+    mouseY?: number
+  }>()
 
   const loadedTexture = ref<Texture | null>(null)
   const isLoading = ref(true)
   const error = ref<Error | null>(null)
 
   // Reactive uniforms
-  const mouseXUniform = uniform(props.mouseX)
-  const mouseYUniform = uniform(props.mouseY)
-  const distortionUniform = uniform(props.distortion)
-  const distortionSpeedUniform = uniform(props.distortionSpeed)
-  const rippleStrengthUniform = uniform(props.rippleStrength)
-  const zoomUniform = uniform(props.zoom)
-  const grayscaleUniform = uniform(props.grayscale)
-  const rgbShiftUniform = uniform(props.rgbShift)
-  const vignetteIntensityUniform = uniform(props.vignetteIntensity)
+  const mouseXUniform = uniform(mouseX)
+  const mouseYUniform = uniform(mouseY)
+  const distortionUniform = uniform(distortion)
+  const distortionSpeedUniform = uniform(distortionSpeed)
+  const rippleStrengthUniform = uniform(rippleStrength)
+  const zoomUniform = uniform(zoom)
+  const grayscaleUniform = uniform(grayscale)
+  const rgbShiftUniform = uniform(rgbShift)
+  const vignetteIntensityUniform = uniform(vignetteIntensity)
 
   // Watch all prop changes for reactivity
   watch(
-    () => props.mouseX,
+    () => mouseX,
     (val) => {
       mouseXUniform.value = val
     }
   )
   watch(
-    () => props.mouseY,
+    () => mouseY,
     (val) => {
       mouseYUniform.value = val
     }
   )
   watch(
-    () => props.distortion,
+    () => distortion,
     (val) => {
       distortionUniform.value = val
     }
   )
   watch(
-    () => props.distortionSpeed,
+    () => distortionSpeed,
     (val) => {
       distortionSpeedUniform.value = val
     }
   )
   watch(
-    () => props.rippleStrength,
+    () => rippleStrength,
     (val) => {
       rippleStrengthUniform.value = val
     }
   )
   watch(
-    () => props.zoom,
+    () => zoom,
     (val) => {
       zoomUniform.value = val
     }
   )
   watch(
-    () => props.grayscale,
+    () => grayscale,
     (val) => {
       grayscaleUniform.value = val
     }
   )
   watch(
-    () => props.rgbShift,
+    () => rgbShift,
     (val) => {
       rgbShiftUniform.value = val
     }
   )
   watch(
-    () => props.vignetteIntensity,
+    () => vignetteIntensity,
     (val) => {
       vignetteIntensityUniform.value = val
     }
@@ -140,7 +134,7 @@
 
   // Load texture
   watch(
-    () => props.src,
+    () => src,
     async (src) => {
       if (!src) return
 
@@ -180,10 +174,10 @@
     const distortedUV = uvCoord.add(noiseVal.mul(distortionUniform).mul(0.1))
     // Use step to conditionally apply distortion
     const hasDistortion = distortionUniform.greaterThan(0.001)
-    uvCoord = mix(uvCoord, distortedUV, hasDistortion) as TSLNode
+    uvCoord = hasDistortion.select(distortedUV, uvCoord)
 
     // Apply mouse ripple effect
-    if (props.mouseRipple) {
+    if (mouseRipple) {
       const mousePos = vec2(mouseXUniform, mouseYUniform)
       const diff = uvCoord.sub(mousePos)
       const dist = diff.length()
@@ -209,7 +203,7 @@
     colorNode = vec4(blendedRgb.x, blendedRgb.y, blendedRgb.z, colorNode.w)
 
     // Apply vignette
-    if (props.vignette) {
+    if (vignette) {
       const center = vec2(0.5, 0.5)
       const dist = uv().sub(center).length()
       const vignetteAmount = smoothstep(0.2, 0.8, dist).mul(vignetteIntensityUniform)
@@ -217,7 +211,7 @@
     }
 
     mat.colorNode = colorNode
-    mat.transparent = props.transparent
+    mat.transparent = transparent
     mat.side = DoubleSide
 
     return mat

package/layers/shader/app/components/Material/Node.client.vue

@@ -1,39 +1,40 @@
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   import { BackSide, DoubleSide, FrontSide } from 'three'
   import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu'
 
   import type { TSLNode } from '../../types'
 
-  const props = withDefaults(
-    defineProps<{
-      type?: 'basic' | 'standard'
-      colorNode?: TSLNode
-      opacityNode?: TSLNode
-      normalNode?: TSLNode
-      emissiveNode?: TSLNode
-      metalnessNode?: TSLNode
-      roughnessNode?: TSLNode
-      positionNode?: TSLNode
-      transparent?: boolean
-      side?: 'front' | 'back' | 'double'
-      wireframe?: boolean
-      flatShading?: boolean
-      depthTest?: boolean
-      depthWrite?: boolean
-    }>(),
-    {
-      type: 'basic',
-      transparent: false,
-      side: 'front',
-      wireframe: false,
-      flatShading: false,
-      depthTest: true,
-      depthWrite: true,
-    }
-  )
+  const {
+    type = 'basic',
+    colorNode,
+    opacityNode,
+    normalNode,
+    emissiveNode,
+    metalnessNode,
+    roughnessNode,
+    positionNode,
+    transparent = false,
+    side = 'front',
+    wireframe = false,
+    flatShading = false,
+    depthTest = true,
+    depthWrite = true,
+  } = defineProps<{
+    type?: 'basic' | 'standard'
+    colorNode?: TSLNode
+    opacityNode?: TSLNode
+    normalNode?: TSLNode
+    emissiveNode?: TSLNode
+    metalnessNode?: TSLNode
+    roughnessNode?: TSLNode
+    positionNode?: TSLNode
+    transparent?: boolean
+    side?: 'front' | 'back' | 'double'
+    wireframe?: boolean
+    flatShading?: boolean
+    depthTest?: boolean
+    depthWrite?: boolean
+  }>()
 
   const sideMap = {
     front: FrontSide,
@@ -42,32 +43,31 @@
   }
 
   const material = computed(() => {
-    const mat =
-      props.type === 'standard' ? new MeshStandardNodeMaterial() : new MeshBasicNodeMaterial()
+    const mat = type === 'standard' ? new MeshStandardNodeMaterial() : new MeshBasicNodeMaterial()
 
     // Apply node properties
-    if (props.colorNode) mat.colorNode = props.colorNode
-    if (props.opacityNode) {
-      mat.opacityNode = props.opacityNode
+    if (colorNode) mat.colorNode = colorNode
+    if (opacityNode) {
+      mat.opacityNode = opacityNode
       mat.transparent = true
     }
-    if (props.normalNode) mat.normalNode = props.normalNode
-    if (props.positionNode) mat.positionNode = props.positionNode
+    if (normalNode) mat.normalNode = normalNode
+    if (positionNode) mat.positionNode = positionNode
 
     // Standard material specific
     if (mat instanceof MeshStandardNodeMaterial) {
-      if (props.emissiveNode) mat.emissiveNode = props.emissiveNode
-      if (props.metalnessNode) mat.metalnessNode = props.metalnessNode
-      if (props.roughnessNode) mat.roughnessNode = props.roughnessNode
-      mat.flatShading = props.flatShading
+      if (emissiveNode) mat.emissiveNode = emissiveNode
+      if (metalnessNode) mat.metalnessNode = metalnessNode
+      if (roughnessNode) mat.roughnessNode = roughnessNode
+      mat.flatShading = flatShading
     }
 
     // Standard properties
-    mat.transparent = props.transparent || !!props.opacityNode
-    mat.side = sideMap[props.side]
-    mat.wireframe = props.wireframe
-    mat.depthTest = props.depthTest
-    mat.depthWrite = props.depthWrite
+    mat.transparent = transparent || !!opacityNode
+    mat.side = sideMap[side]
+    mat.wireframe = wireframe
+    mat.depthTest = depthTest
+    mat.depthWrite = depthWrite
 
     return mat
   })

package/layers/shader/app/components/Material/Noise.client.vue

@@ -1,95 +1,89 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color, DoubleSide } from 'three'
   import { mix, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
+  import type { TSLNode } from '../../shaders/types'
   import { fbm, simplexNoise2D } from '../../utils/tsl/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      scale?: number
-      speed?: number
-      octaves?: number
-      baseColor?: string
-      peakColor?: string
-      type?: 'simplex' | 'fbm'
-      transparent?: boolean
-      /** Mouse X position (0-1) for interaction */
-      mouseX?: number
-      /** Mouse Y position (0-1) for interaction */
-      mouseY?: number
-      /** Enable mouse interaction */
-      mouseInteraction?: boolean
-      /** Mouse interaction strength */
-      mouseStrength?: number
-    }>(),
-    {
-      scale: 3,
-      speed: 0.5,
-      octaves: 4,
-      baseColor: '#1e1b4b',
-      peakColor: '#c084fc',
-      type: 'simplex',
-      transparent: false,
-      mouseX: 0.5,
-      mouseY: 0.5,
-      mouseInteraction: false,
-      mouseStrength: 0.5,
-    }
-  )
+  const {
+    scale = 3,
+    speed = 0.5,
+    octaves = 4,
+    baseColor = '#1e1b4b',
+    peakColor = '#c084fc',
+    type = 'simplex',
+    transparent = false,
+    mouseX = 0.5,
+    mouseY = 0.5,
+    mouseInteraction = false,
+    mouseStrength = 0.5,
+  } = defineProps<{
+    scale?: number
+    speed?: number
+    octaves?: number
+    baseColor?: string
+    peakColor?: string
+    type?: 'simplex' | 'fbm'
+    transparent?: boolean
+    /** Mouse X position (0-1) for interaction */
+    mouseX?: number
+    /** Mouse Y position (0-1) for interaction */
+    mouseY?: number
+    /** Enable mouse interaction */
+    mouseInteraction?: boolean
+    /** Mouse interaction strength */
+    mouseStrength?: number
+  }>()
 
   // Create reactive uniforms
-  const scaleUniform = uniform(props.scale)
-  const speedUniform = uniform(props.speed)
-  const mouseXUniform = uniform(props.mouseX)
-  const mouseYUniform = uniform(props.mouseY)
-  const mouseStrengthUniform = uniform(props.mouseStrength)
-  const baseColorUniform = uniform(new Color(props.baseColor))
-  const peakColorUniform = uniform(new Color(props.peakColor))
+  const scaleUniform = uniform(scale)
+  const speedUniform = uniform(speed)
+  const mouseXUniform = uniform(mouseX)
+  const mouseYUniform = uniform(mouseY)
+  const mouseStrengthUniform = uniform(mouseStrength)
+  const baseColorUniform: TSLNode = uniform(new Color(baseColor))
+  const peakColorUniform: TSLNode = uniform(new Color(peakColor))
 
   // Watch prop changes
   watch(
-    () => props.scale,
+    () => scale,
     (val) => {
       scaleUniform.value = val
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (val) => {
       speedUniform.value = val
     }
   )
   watch(
-    () => props.mouseX,
+    () => mouseX,
     (val) => {
       mouseXUniform.value = val
     }
   )
   watch(
-    () => props.mouseY,
+    () => mouseY,
     (val) => {
       mouseYUniform.value = val
     }
   )
   watch(
-    () => props.mouseStrength,
+    () => mouseStrength,
     (val) => {
       mouseStrengthUniform.value = val
     }
   )
   watch(
-    () => props.baseColor,
+    () => baseColor,
     (val) => {
       baseColorUniform.value = new Color(val)
     }
   )
   watch(
-    () => props.peakColor,
+    () => peakColor,
     (val) => {
       peakColorUniform.value = new Color(val)
     }
@@ -102,7 +96,7 @@
     let animatedUV = uv().mul(scaleUniform).add(tslTime.mul(speedUniform))
 
     // Add mouse interaction
-    if (props.mouseInteraction) {
+    if (mouseInteraction) {
       const mouseOffset = vec3(
         mouseXUniform.sub(0.5).mul(mouseStrengthUniform),
         mouseYUniform.sub(0.5).mul(mouseStrengthUniform),
@@ -113,9 +107,9 @@
 
     // Generate noise based on type
     let noiseValue
-    if (props.type === 'fbm') {
+    if (type === 'fbm') {
       noiseValue = fbm(vec3(animatedUV.x, animatedUV.y, tslTime.mul(speedUniform.mul(0.1))), {
-        octaves: props.octaves,
+        octaves: octaves,
         lacunarity: 2.0,
         gain: 0.5,
         amplitude: 0.5,
@@ -132,7 +126,7 @@
     const colorNode = mix(vec3(baseColorUniform), vec3(peakColorUniform), normalizedNoise)
 
     mat.colorNode = colorNode as any
-    mat.transparent = props.transparent
+    mat.transparent = transparent
     mat.side = DoubleSide
 
     return mat

package/layers/shader/app/components/Mesh/Plane.vue

@@ -1,24 +1,19 @@
-<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
-  const props = withDefaults(
-    defineProps<{
-      width?: number
-      height?: number
-      widthSegments?: number
-      heightSegments?: number
-      position?: [number, number, number]
-      rotation?: [number, number, number]
-    }>(),
-    {
-      width: 2,
-      height: 2,
-      widthSegments: 1,
-      heightSegments: 1,
-      position: () => [0, 0, 0],
-      rotation: () => [0, 0, 0],
-    }
-  )
+  const {
+    width = 2,
+    height = 2,
+    widthSegments = 1,
+    heightSegments = 1,
+    position = [0, 0, 0],
+    rotation = [0, 0, 0],
+  } = defineProps<{
+    width?: number
+    height?: number
+    widthSegments?: number
+    heightSegments?: number
+    position?: [number, number, number]
+    rotation?: [number, number, number]
+  }>()
 </script>
 
 <template>

package/layers/shader/app/components/Node/Color.client.vue

@@ -1,10 +1,9 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck - TSL types
   import { Color } from 'three'
   import { uniform, vec3 } from 'three/tsl'
 
+  import type { TSLNode } from '../../shaders/types'
+
   const props = withDefaults(
     defineProps<{
       id?: string
@@ -26,7 +25,7 @@
 
   // Create uniform once
   const colorValue = new Color(props.color)
-  const colorNode = uniform(colorValue)
+  const colorNode: TSLNode = uniform(colorValue)
 
   // Build TSL node once (references uniform by pointer)
   const node = vec3(colorNode)

package/layers/shader/app/components/Node/Fresnel.client.vue

@@ -1,50 +1,41 @@
-<!-- eslint-disable vue/no-unused-properties -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck - TSL types
   import { cameraPosition, normalView, positionWorld, pow, sub, uniform, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      id?: string
-      power?: number
-      color?: string
-      order?: number
-      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-      opacity?: number
-    }>(),
-    {
-      id: 'fresnel',
-      power: 2.0,
-      color: '#ffffff',
-      order: 0,
-      blend: 'add',
-      opacity: 1.0,
-    }
-  )
+  const {
+    id = 'fresnel',
+    power = 2.0,
+    order = 0,
+    blend = 'add',
+    opacity = 1.0,
+  } = defineProps<{
+    id?: string
+    power?: number
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>()
 
   const graph = useShaderGraphContext()
 
   // Create uniforms once
-  const uPower = uniform(props.power)
+  const uPower = uniform(power)
 
   // Build fresnel node
   const viewDirection = positionWorld.sub(cameraPosition).normalize()
   const fresnelFactor = pow(sub(1.0, normalView.dot(viewDirection.negate()).abs()), uPower)
   const node = vec3(fresnelFactor, fresnelFactor, fresnelFactor)
 
-  graph.register(props.id, node, props.order, props.blend, props.opacity)
+  graph.register(id, node, order, blend, opacity)
 
   watch(
-    () => props.power,
+    () => power,
     (v) => {
       uPower.value = v
     }
   )
 
   onUnmounted(() => {
-    graph.unregister(props.id)
+    graph.unregister(id)
   })
 </script>