kmcom-nuxt-layers 2.2.0 → 2.2.2

package/layers/shader/app/components/Pipeline/ValueNoise.client.vue

@@ -1,54 +1,54 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color, Vector3 } from 'three'
   import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
   import { valueNoise2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      scale?: number
-      speed?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', scale: 4, speed: 0.2, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    scale = 4,
+    speed = 0.2,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    scale?: number
+    speed?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const colorANode = toVec3Node(props.colorA)
-  const colorBNode = toVec3Node(props.colorB)
-  const scaleNode = uniform(props.scale)
-  const speedNode = uniform(props.speed)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const scaleNode = uniform(scale)
+  const speedNode = uniform(speed)
   watch(
-    () => props.colorA,
+    () => colorA,
     (v) => {
       const c = new Color(v)
       colorANode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorB,
+    () => colorB,
     (v) => {
       const c = new Color(v)
       colorBNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -62,5 +62,5 @@
       .mul(0.5)
       .add(0.5)
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/Vibrance.client.vue

@@ -1,30 +1,24 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { uniform, vec4 } from 'three/tsl'
 
   import { vibrance } from '../../shaders/common/palette'
 
-  const props = withDefaults(
-    defineProps<{
-      /**
-       * Saturation boost that protects already-saturated colours.
-       * 0 = unchanged, positive = more vivid, negative = less.
-       */
-      amount?: number
-      order?: number
-    }>(),
-    { amount: 0.5, order: 0 }
-  )
+  const { amount = 0.5, order = 0 } = defineProps<{
+    /**
+     * Saturation boost that protects already-saturated colours.
+     * 0 = unchanged, positive = more vivid, negative = less.
+     */
+    amount?: number
+    order?: number
+  }>()
 
-  const amountNode = uniform(props.amount)
+  const amountNode = uniform(amount)
   watch(
-    () => props.amount,
+    () => amount,
     (v) => {
       amountNode.value = v
     }
   )
 
-  useShaderStage((prev) => vec4(vibrance(prev.xyz, amountNode), prev.w), props.order)
+  useShaderStage((prev) => vec4(vibrance(prev.xyz, amountNode), prev.w), order)
 </script>

package/layers/shader/app/components/Pipeline/Vignette.client.vue

@@ -1,34 +1,28 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { uniform, vec4 } from 'three/tsl'
 
   import { vignette } from '../../shaders/common/grain'
 
-  const props = withDefaults(
-    defineProps<{
-      intensity?: number
-      smoothness?: number
-      order?: number
-    }>(),
-    {
-      intensity: 0.5,
-      smoothness: 0.5,
-      order: 0,
-    }
-  )
+  const {
+    intensity = 0.5,
+    smoothness = 0.5,
+    order = 0,
+  } = defineProps<{
+    intensity?: number
+    smoothness?: number
+    order?: number
+  }>()
 
-  const intensityNode = uniform(props.intensity)
-  const smoothnessNode = uniform(props.smoothness)
+  const intensityNode = uniform(intensity)
+  const smoothnessNode = uniform(smoothness)
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       intensityNode.value = v
     }
   )
   watch(
-    () => props.smoothness,
+    () => smoothness,
     (v) => {
       smoothnessNode.value = v
     }
@@ -39,5 +33,5 @@
   useShaderStage((prev) => {
     const v = vignette(uvNode.value, intensityNode, smoothnessNode)
     return vec4(prev.xyz.mul(v), prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/VoronoiEdges.client.vue

@@ -1,66 +1,67 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color, Vector3 } from 'three'
   import { float, mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
 
   import { voronoi2D } from '../../shaders/common/noise'
 
   /** Voronoi cell edge lines only — the cell boundaries as thin lines. */
-  const props = withDefaults(
-    defineProps<{
-      /** Cell background colour */
-      colorA?: string
-      /** Edge line colour */
-      colorB?: string
-      scale?: number
-      /** Edge line thickness */
-      edgeWidth?: number
-      speed?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', scale: 8, edgeWidth: 0.05, speed: 0.1, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    scale = 8,
+    edgeWidth = 0.05,
+    speed = 0.1,
+    order = 0,
+  } = defineProps<{
+    /** Cell background colour */
+    colorA?: string
+    /** Edge line colour */
+    colorB?: string
+    scale?: number
+    /** Edge line thickness */
+    edgeWidth?: number
+    speed?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const colorANode = toVec3Node(props.colorA)
-  const colorBNode = toVec3Node(props.colorB)
-  const scaleNode = uniform(props.scale)
-  const edgeNode = uniform(props.edgeWidth)
-  const speedNode = uniform(props.speed)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const scaleNode = uniform(scale)
+  const edgeNode = uniform(edgeWidth)
+  const speedNode = uniform(speed)
   watch(
-    () => props.colorA,
+    () => colorA,
     (v) => {
       const c = new Color(v)
       colorANode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorB,
+    () => colorB,
     (v) => {
       const c = new Color(v)
       colorBNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.edgeWidth,
+    () => edgeWidth,
     (v) => {
       edgeNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -74,5 +75,5 @@
     // Edge = near-zero distance → smooth threshold
     const edge = smoothstep(edgeNode, edgeNode.mul(0.1), distance)
     return vec4(mix(colorANode, colorBNode, edge), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/Water.client.vue

@@ -1,72 +1,66 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color, Vector3 } from 'three'
   import { float, mix, sin, time, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Deep water colour */
-      colorDeep?: string
-      /** Shallow/crest colour */
-      colorShallow?: string
-      /** Wave frequency */
-      frequency?: number
-      /** Wave height */
-      amplitude?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    {
-      colorDeep: '#003366',
-      colorShallow: '#66ccff',
-      frequency: 8,
-      amplitude: 0.5,
-      speed: 1,
-      order: 0,
-    }
-  )
+  const {
+    colorDeep = '#003366',
+    colorShallow = '#66ccff',
+    frequency = 8,
+    amplitude = 0.5,
+    speed = 1,
+    order = 0,
+  } = defineProps<{
+    /** Deep water colour */
+    colorDeep?: string
+    /** Shallow/crest colour */
+    colorShallow?: string
+    /** Wave frequency */
+    frequency?: number
+    /** Wave height */
+    amplitude?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const colorDeepNode = toVec3Node(props.colorDeep)
-  const colorShallowNode = toVec3Node(props.colorShallow)
-  const freqNode = uniform(props.frequency)
-  const ampNode = uniform(props.amplitude)
-  const speedNode = uniform(props.speed)
+  const colorDeepNode = toVec3Node(colorDeep)
+  const colorShallowNode = toVec3Node(colorShallow)
+  const freqNode = uniform(frequency)
+  const ampNode = uniform(amplitude)
+  const speedNode = uniform(speed)
   watch(
-    () => props.colorDeep,
+    () => colorDeep,
     (v) => {
       const c = new Color(v)
       colorDeepNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorShallow,
+    () => colorShallow,
     (v) => {
       const c = new Color(v)
       colorShallowNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.frequency,
+    () => frequency,
     (v) => {
       freqNode.value = v
     }
   )
   watch(
-    () => props.amplitude,
+    () => amplitude,
     (v) => {
       ampNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -88,5 +82,5 @@
     const w3 = sin(uv.y.mul(freqNode.mul(1.3)).add(t.mul(1.1)))
     const wave = w1.add(w2).add(w3).div(3).mul(ampNode).mul(0.5).add(0.5)
     return vec4(mix(colorDeepNode, colorShallowNode, wave), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/WaveBendLayer.client.vue

@@ -1,66 +1,60 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color, Vector3 } from 'three'
   import { mix, sin, time, uniform, vec2, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      color?: string
-      opacity?: number
-      frequency?: number
-      speed?: number
-      warpStrength?: number
-      order?: number
-    }>(),
-    {
-      color: '#4488ff',
-      opacity: 0.8,
-      frequency: 3,
-      speed: 0.5,
-      warpStrength: 0.15,
-      order: 0,
-    }
-  )
+  const {
+    color = '#4488ff',
+    opacity = 0.8,
+    frequency = 3,
+    speed = 0.5,
+    warpStrength = 0.15,
+    order = 0,
+  } = defineProps<{
+    color?: string
+    opacity?: number
+    frequency?: number
+    speed?: number
+    warpStrength?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const colorNode = toVec3Node(props.color)
-  const opacityNode = uniform(props.opacity)
-  const freqNode = uniform(props.frequency)
-  const speedNode = uniform(props.speed)
-  const warpNode = uniform(props.warpStrength)
+  const colorNode = toVec3Node(color)
+  const opacityNode = uniform(opacity)
+  const freqNode = uniform(frequency)
+  const speedNode = uniform(speed)
+  const warpNode = uniform(warpStrength)
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       const c = new Color(v)
       colorNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
   )
   watch(
-    () => props.frequency,
+    () => frequency,
     (v) => {
       freqNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
   watch(
-    () => props.warpStrength,
+    () => warpStrength,
     (v) => {
       warpNode.value = v
     }
@@ -85,5 +79,5 @@
     const alpha = band.mul(opacityNode)
 
     return vec4(mix(prev.xyz, colorNode, alpha), prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/WaveColourLayer.client.vue

@@ -1,76 +1,77 @@
-<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color, Vector3 } from 'three'
-  import { float, mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
+  import { mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
 
   import { simplexNoise2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Band fill colour */
-      color?: string
-      /** Opacity of the band layer */
-      opacity?: number
-      /** Noise input scale */
-      scale?: number
-      /** Smoothstep lower edge for band threshold */
-      edge0?: number
-      /** Smoothstep upper edge for band threshold */
-      edge1?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    { color: '#ffffff', opacity: 1, scale: 2, edge0: 0.3, edge1: 0.7, speed: 0.3, order: 0 }
-  )
+  const {
+    color = '#ffffff',
+    opacity = 1,
+    scale = 2,
+    edge0 = 0.3,
+    edge1 = 0.7,
+    speed = 0.3,
+    order = 0,
+  } = defineProps<{
+    /** Band fill colour */
+    color?: string
+    /** Opacity of the band layer */
+    opacity?: number
+    /** Noise input scale */
+    scale?: number
+    /** Smoothstep lower edge for band threshold */
+    edge0?: number
+    /** Smoothstep upper edge for band threshold */
+    edge1?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const colorNode = toVec3Node(props.color)
-  const opacityNode = uniform(props.opacity)
-  const scaleNode = uniform(props.scale)
-  const edge0Node = uniform(props.edge0)
-  const edge1Node = uniform(props.edge1)
-  const speedNode = uniform(props.speed)
+  const colorNode = toVec3Node(color)
+  const opacityNode = uniform(opacity)
+  const scaleNode = uniform(scale)
+  const edge0Node = uniform(edge0)
+  const edge1Node = uniform(edge1)
+  const speedNode = uniform(speed)
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       const c = new Color(v)
       colorNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.edge0,
+    () => edge0,
     (v) => {
       edge0Node.value = v
     }
   )
   watch(
-    () => props.edge1,
+    () => edge1,
     (v) => {
       edge1Node.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -85,5 +86,5 @@
     const n = simplexNoise2D(uvCurrent.mul(scaleNode).add(t)).mul(0.5).add(0.5)
     const band = smoothstep(edge0Node, edge1Node, n).mul(opacityNode)
     return vec4(mix(prev.xyz, colorNode, band), prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/WhiteBalance.client.vue

@@ -1,37 +1,34 @@
-<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
-  import { float, mix, uniform, vec3, vec4 } from 'three/tsl'
+  import { float, uniform, vec3, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /**
-       * Colour temperature shift:
-       * positive → warmer (orange), negative → cooler (blue). Range: -1 to 1.
-       */
-      temperature?: number
-      /**
-       * Tint shift:
-       * positive → green, negative → magenta. Range: -1 to 1.
-       */
-      tint?: number
-      order?: number
-    }>(),
-    { temperature: 0, tint: 0, order: 0 }
-  )
+  const {
+    temperature = 0,
+    tint = 0,
+    order = 0,
+  } = defineProps<{
+    /**
+     * Colour temperature shift:
+     * positive → warmer (orange), negative → cooler (blue). Range: -1 to 1.
+     */
+    temperature?: number
+    /**
+     * Tint shift:
+     * positive → green, negative → magenta. Range: -1 to 1.
+     */
+    tint?: number
+    order?: number
+  }>()
 
-  const tempNode = uniform(props.temperature)
-  const tintNode = uniform(props.tint)
+  const tempNode = uniform(temperature)
+  const tintNode = uniform(tint)
   watch(
-    () => props.temperature,
+    () => temperature,
     (v) => {
       tempNode.value = v
     }
   )
   watch(
-    () => props.tint,
+    () => tint,
     (v) => {
       tintNode.value = v
     }
@@ -47,5 +44,5 @@
       float(1).sub(tintNode.max(float(0)).mul(0.1))
     )
     return vec4(prev.xyz.mul(warm).mul(tinted), prev.w)
-  }, props.order)
+  }, order)
 </script>