kmcom-nuxt-layers 2.1.6 → 2.2.1

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

@@ -1,8 +1,4 @@
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck - TSL types are complex
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -20,82 +16,80 @@
   } from 'three/tsl'
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
-  import { fbm3D, ridgedFbm2d, voronoi2D } from '../../shaders/common/noise'
+  import { fbm3D, hash21, ridgedFbm2d, voronoi2D } from '../../shaders/common/noise'
   import { cosinePalette } from '../../shaders/common/palette'
-
-  const props = withDefaults(
-    defineProps<{
-      speed?: number
-      intensity?: number
-      color1?: string
-      color2?: string
-      color3?: string
-      color4?: string
-      mouseX?: number
-      mouseY?: number
-      mouseInteraction?: boolean
-      mouseStrength?: number
-    }>(),
-    {
-      speed: 1.0,
-      intensity: 1.0,
-      color1: '#1a0a2e',
-      color2: '#ff6b6b',
-      color3: '#4ecdc4',
-      color4: '#ffe66d',
-      mouseX: 0.5,
-      mouseY: 0.5,
-      mouseInteraction: true,
-      mouseStrength: 0.3,
-    }
-  )
+  import type { TSLNode } from '../../shaders/types'
+
+  const {
+    speed = 1.0,
+    intensity = 1.0,
+    color1 = '#1a0a2e',
+    color2 = '#ff6b6b',
+    color3 = '#4ecdc4',
+    color4 = '#ffe66d',
+    mouseX = 0.5,
+    mouseY = 0.5,
+    mouseInteraction = true,
+    mouseStrength = 0.3,
+  } = defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>()
 
   // Create reactive uniforms
-  const speedUniform = uniform(props.speed)
-  const intensityUniform = uniform(props.intensity)
-  const mouseXUniform = uniform(props.mouseX)
-  const mouseYUniform = uniform(props.mouseY)
-  const mouseStrengthUniform = uniform(props.mouseStrength)
-  const color1Uniform = uniform(new Color(props.color1))
-  const color2Uniform = uniform(new Color(props.color2))
-  const color3Uniform = uniform(new Color(props.color3))
-  const color4Uniform = uniform(new Color(props.color4))
+  const speedUniform = uniform(speed)
+  const intensityUniform = uniform(intensity)
+  const mouseXUniform = uniform(mouseX)
+  const mouseYUniform = uniform(mouseY)
+  const mouseStrengthUniform = uniform(mouseStrength)
+  const color1Uniform: TSLNode = uniform(new Color(color1))
+  const color2Uniform: TSLNode = uniform(new Color(color2))
+  const color3Uniform: TSLNode = uniform(new Color(color3))
+  const color4Uniform: TSLNode = uniform(new Color(color4))
 
   // Watch prop changes
   watch(
-    () => props.speed,
+    () => speed,
     (val) => (speedUniform.value = val)
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (val) => (intensityUniform.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.color1,
+    () => color1,
     (val) => (color1Uniform.value = new Color(val))
   )
   watch(
-    () => props.color2,
+    () => color2,
     (val) => (color2Uniform.value = new Color(val))
   )
   watch(
-    () => props.color3,
+    () => color3,
     (val) => (color3Uniform.value = new Color(val))
   )
   watch(
-    () => props.color4,
+    () => color4,
     (val) => (color4Uniform.value = new Color(val))
   )
 
@@ -110,8 +104,8 @@
 
     // Mouse offset
     const mouseOffset = vec2(
-      sub(mouseXUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0),
-      sub(mouseYUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+      sub(mouseXUniform, 0.5).mul(mouseInteraction ? mouseStrengthUniform : 0),
+      sub(mouseYUniform, 0.5).mul(mouseInteraction ? mouseStrengthUniform : 0)
     )
     const adjustedUV = add(uvCoord, mouseOffset)
 
@@ -140,7 +134,7 @@
 
     // Voronoi for stars/clusters
     const vor = voronoi2D(add(mul(adjustedUV, 8.0), mul(time, 0.1)), 1.0)
-    const stars = mul(smoothstep(0.1, 0.0, vor.x), vor.y)
+    const stars = mul(smoothstep(0.1, 0.0, vor.distance), hash21(vor.cellId))
 
     // Color layers
     const layer1 = mix(vec3(color1Uniform), vec3(color2Uniform), n1)

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

@@ -1,8 +1,4 @@
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck - TSL types are complex
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -23,73 +19,71 @@
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
   import { simplexNoise2D } from '../../shaders/common/noise'
-
-  const props = withDefaults(
-    defineProps<{
-      speed?: number
-      intensity?: number
-      color1?: string
-      color2?: string
-      color3?: string
-      mouseX?: number
-      mouseY?: number
-      mouseInteraction?: boolean
-      mouseStrength?: number
-    }>(),
-    {
-      speed: 1.0,
-      intensity: 1.0,
-      color1: '#0a1628',
-      color2: '#1e3a5f',
-      color3: '#7ec8e3',
-      mouseX: 0.5,
-      mouseY: 0.5,
-      mouseInteraction: true,
-      mouseStrength: 0.5,
-    }
-  )
+  import type { TSLNode } from '../../shaders/types'
+
+  const {
+    speed = 1.0,
+    intensity = 1.0,
+    color1 = '#0a1628',
+    color2 = '#1e3a5f',
+    color3 = '#7ec8e3',
+    mouseX = 0.5,
+    mouseY = 0.5,
+    mouseInteraction = true,
+    mouseStrength = 0.5,
+  } = defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>()
 
   // Create reactive uniforms
-  const speedUniform = uniform(props.speed)
-  const intensityUniform = uniform(props.intensity)
-  const mouseXUniform = uniform(props.mouseX)
-  const mouseYUniform = uniform(props.mouseY)
-  const mouseStrengthUniform = uniform(props.mouseStrength)
-  const color1Uniform = uniform(new Color(props.color1))
-  const color2Uniform = uniform(new Color(props.color2))
-  const color3Uniform = uniform(new Color(props.color3))
+  const speedUniform = uniform(speed)
+  const intensityUniform = uniform(intensity)
+  const mouseXUniform = uniform(mouseX)
+  const mouseYUniform = uniform(mouseY)
+  const mouseStrengthUniform = uniform(mouseStrength)
+  const color1Uniform: TSLNode = uniform(new Color(color1))
+  const color2Uniform: TSLNode = uniform(new Color(color2))
+  const color3Uniform: TSLNode = uniform(new Color(color3))
 
   // Watch prop changes
   watch(
-    () => props.speed,
+    () => speed,
     (val) => (speedUniform.value = val)
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (val) => (intensityUniform.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.color1,
+    () => color1,
     (val) => (color1Uniform.value = new Color(val))
   )
   watch(
-    () => props.color2,
+    () => color2,
     (val) => (color2Uniform.value = new Color(val))
   )
   watch(
-    () => props.color3,
+    () => color3,
     (val) => (color3Uniform.value = new Color(val))
   )
 
@@ -110,7 +104,7 @@
     const ripple = mul(
       sin(sub(mul(mouseDist, 30.0), mul(time, 5.0))),
       exp(mul(mouseDist, -5.0)),
-      props.mouseInteraction ? mouseStrengthUniform : 0
+      mouseInteraction ? mouseStrengthUniform : 0
     )
 
     // Wave layers

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

@@ -1,8 +1,4 @@
-<!-- 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 {
     dot,
@@ -17,50 +13,49 @@
   } from 'three/tsl'
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
-  const props = withDefaults(
-    defineProps<{
-      baseColor?: string
-      fresnelColor?: string
-      power?: number
-      intensity?: number
-      transparent?: boolean
-    }>(),
-    {
-      baseColor: '#1e1b4b',
-      fresnelColor: '#22d3ee',
-      power: 2,
-      intensity: 1,
-      transparent: false,
-    }
-  )
+  import type { TSLNode } from '../../shaders/types'
+
+  const {
+    baseColor = '#1e1b4b',
+    fresnelColor = '#22d3ee',
+    power = 2,
+    intensity = 1,
+    transparent = false,
+  } = defineProps<{
+    baseColor?: string
+    fresnelColor?: string
+    power?: number
+    intensity?: number
+    transparent?: boolean
+  }>()
 
   // Create reactive uniforms
-  const baseColorUniform = uniform(new Color(props.baseColor))
-  const fresnelColorUniform = uniform(new Color(props.fresnelColor))
-  const powerUniform = uniform(props.power)
-  const intensityUniform = uniform(props.intensity)
+  const baseColorUniform: TSLNode = uniform(new Color(baseColor))
+  const fresnelColorUniform: TSLNode = uniform(new Color(fresnelColor))
+  const powerUniform = uniform(power)
+  const intensityUniform = uniform(intensity)
 
   // Watch prop changes
   watch(
-    () => props.baseColor,
+    () => baseColor,
     (val) => {
       baseColorUniform.value = new Color(val)
     }
   )
   watch(
-    () => props.fresnelColor,
+    () => fresnelColor,
     (val) => {
       fresnelColorUniform.value = new Color(val)
     }
   )
   watch(
-    () => props.power,
+    () => power,
     (val) => {
       powerUniform.value = val
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (val) => {
       intensityUniform.value = val
     }
@@ -79,7 +74,7 @@
     const colorNode = mix(vec3(baseColorUniform), vec3(fresnelColorUniform), fresnelFactor)
 
     mat.colorNode = colorNode as any
-    mat.transparent = props.transparent
+    mat.transparent = transparent
     mat.side = DoubleSide
 
     return mat

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

@@ -1,94 +1,88 @@
-<!-- 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, sin, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
-  import { MeshBasicNodeMaterial, type UniformNode } from 'three/webgpu'
+  import { MeshBasicNodeMaterial } from 'three/webgpu'
 
   import type { TSLNode } from '../../types'
 
-  const props = withDefaults(
-    defineProps<{
-      colors?: string[]
-      angle?: number
-      type?: 'linear' | 'radial'
-      animated?: boolean
-      speed?: number
-      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
-    }>(),
-    {
-      colors: () => ['#4f46e5', '#7c3aed', '#ec4899'],
-      angle: 0,
-      type: 'linear',
-      animated: false,
-      speed: 1,
-      transparent: false,
-      mouseX: 0.5,
-      mouseY: 0.5,
-      mouseInteraction: false,
-      mouseStrength: 0.3,
-    }
-  )
+  const {
+    colors = ['#4f46e5', '#7c3aed', '#ec4899'],
+    angle = 0,
+    type = 'linear',
+    animated = false,
+    speed = 1,
+    transparent = false,
+    mouseX = 0.5,
+    mouseY = 0.5,
+    mouseInteraction = false,
+    mouseStrength = 0.3,
+  } = defineProps<{
+    colors?: string[]
+    angle?: number
+    type?: 'linear' | 'radial'
+    animated?: boolean
+    speed?: number
+    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 for all animatable properties
-  const angleUniform = uniform(props.angle)
-  const speedUniform = uniform(props.speed)
-  const mouseXUniform = uniform(props.mouseX)
-  const mouseYUniform = uniform(props.mouseY)
-  const mouseStrengthUniform = uniform(props.mouseStrength)
+  const angleUniform = uniform(angle)
+  const speedUniform = uniform(speed)
+  const mouseXUniform = uniform(mouseX)
+  const mouseYUniform = uniform(mouseY)
+  const mouseStrengthUniform = uniform(mouseStrength)
 
   // Create color uniforms (up to 5 colors supported) - stored as typed array
-  const colorUniforms: UniformNode<Color>[] = [
-    uniform(new Color(props.colors[0] || '#4f46e5')),
-    uniform(new Color(props.colors[1] || '#7c3aed')),
-    uniform(new Color(props.colors[2] || '#ec4899')),
-    uniform(new Color(props.colors[3] || '#ec4899')),
-    uniform(new Color(props.colors[4] || '#ec4899')),
+  const colorUniforms: TSLNode[] = [
+    uniform(new Color(colors[0] || '#4f46e5')),
+    uniform(new Color(colors[1] || '#7c3aed')),
+    uniform(new Color(colors[2] || '#ec4899')),
+    uniform(new Color(colors[3] || '#ec4899')),
+    uniform(new Color(colors[4] || '#ec4899')),
   ]
 
   // Watch prop changes and update uniforms
   watch(
-    () => props.angle,
+    () => angle,
     (val) => {
       angleUniform.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.colors,
+    () => colors,
     (colors) => {
       colors.forEach((c, i) => {
         if (i < colorUniforms.length) {
@@ -101,13 +95,13 @@
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()
-    const colorCount = props.colors.length
+    const colorCount = colors.length
 
     // Get UV coordinates
     let t: TSLNode = uv().y
 
     // Apply angle rotation for linear gradient (using uniform for reactivity)
-    if (props.type === 'linear') {
+    if (type === 'linear') {
       const rad = angleUniform.mul(Math.PI / 180)
       const cosVal = rad.cos()
       const sinVal = rad.sin()
@@ -115,10 +109,10 @@
     }
 
     // Radial gradient uses distance from center
-    if (props.type === 'radial') {
+    if (type === 'radial') {
       let center = uv().sub(0.5)
       // Add mouse interaction offset
-      if (props.mouseInteraction) {
+      if (mouseInteraction) {
         const mouseOffset = vec3(
           mouseXUniform.sub(0.5).mul(mouseStrengthUniform),
           mouseYUniform.sub(0.5).mul(mouseStrengthUniform),
@@ -130,27 +124,27 @@
     }
 
     // Add mouse interaction for linear gradients
-    if (props.type === 'linear' && props.mouseInteraction) {
+    if (type === 'linear' && mouseInteraction) {
       t = t.add(mouseXUniform.sub(0.5).mul(mouseStrengthUniform))
     }
 
     // Add animation
-    if (props.animated) {
+    if (animated) {
       t = t.add(sin(tslTime.mul(speedUniform)).mul(0.2))
     }
 
     // Build gradient from colors using uniforms
     // Use type assertion since we know the array is initialized
-    const c0 = colorUniforms[0] as UniformNode<Color>
-    const c1 = colorUniforms[1] as UniformNode<Color>
-    const c2 = colorUniforms[2] as UniformNode<Color>
-    const c3 = colorUniforms[3] as UniformNode<Color>
-    const c4 = colorUniforms[4] as UniformNode<Color>
+    const c0 = colorUniforms[0]
+    const c1 = colorUniforms[1]
+    const c2 = colorUniforms[2]
+    const c3 = colorUniforms[3]
+    const c4 = colorUniforms[4]
 
-    let colorNode: TSLNode = vec3(c0 as unknown as TSLNode)
+    let colorNode: TSLNode = vec3(c0)
 
     if (colorCount === 2) {
-      colorNode = mix(vec3(c0 as unknown as TSLNode), vec3(c1 as unknown as TSLNode), t)
+      colorNode = mix(vec3(c0), vec3(c1), t)
     } else if (colorCount >= 3) {
       // Multi-stop gradient using pre-extracted uniforms
       const uniforms = [c0, c1, c2, c3, c4]
@@ -158,8 +152,8 @@
 
       for (let i = 0; i < segments && i < 4; i++) {
         const localT = t.mul(segments).sub(i).clamp(0, 1)
-        const currColor = uniforms[i] as unknown as TSLNode
-        const nextColor = uniforms[i + 1] as unknown as TSLNode
+        const currColor = uniforms[i]
+        const nextColor = uniforms[i + 1]
 
         if (i === 0) {
           colorNode = mix(vec3(currColor), vec3(nextColor), localT)
@@ -174,7 +168,7 @@
     }
 
     mat.colorNode = colorNode
-    mat.transparent = props.transparent
+    mat.transparent = transparent
     mat.side = DoubleSide
 
     return mat