kmcom-nuxt-layers 2.2.0 → 2.2.1

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

@@ -1,28 +1,22 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { uniform, vec2 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Rotation in degrees */
-      angle?: number
-      pivotX?: number
-      pivotY?: number
-      order?: number
-    }>(),
-    {
-      angle: 0,
-      pivotX: 0.5,
-      pivotY: 0.5,
-      order: 0,
-    }
-  )
+  const {
+    angle = 0,
+    pivotX = 0.5,
+    pivotY = 0.5,
+    order = 0,
+  } = defineProps<{
+    /** Rotation in degrees */
+    angle?: number
+    pivotX?: number
+    pivotY?: number
+    order?: number
+  }>()
 
-  const angleNode = uniform(props.angle * (Math.PI / 180))
+  const angleNode = uniform(angle * (Math.PI / 180))
   watch(
-    () => props.angle,
+    () => angle,
     (v) => {
       angleNode.value = v * (Math.PI / 180)
     }
@@ -30,7 +24,7 @@
 
   useShaderStage(
     (uvIn) => {
-      const pivot = vec2(props.pivotX, props.pivotY)
+      const pivot = vec2(pivotX, pivotY)
       const cosA = angleNode.cos()
       const sinA = angleNode.sin()
       const centered = uvIn.sub(pivot)
@@ -39,7 +33,7 @@
         centered.x.mul(sinA).add(centered.y.mul(cosA))
       ).add(pivot)
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

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

@@ -1,27 +1,21 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
-  import { uniform } from 'three/tsl'
+  import { uniform, vec2 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      scale?: number
-      pivotX?: number
-      pivotY?: number
-      order?: number
-    }>(),
-    {
-      scale: 1,
-      pivotX: 0.5,
-      pivotY: 0.5,
-      order: 0,
-    }
-  )
+  const {
+    scale = 1,
+    pivotX = 0.5,
+    pivotY = 0.5,
+    order = 0,
+  } = defineProps<{
+    scale?: number
+    pivotX?: number
+    pivotY?: number
+    order?: number
+  }>()
 
-  const scaleNode = uniform(props.scale)
+  const scaleNode = uniform(scale)
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
@@ -29,10 +23,10 @@
 
   useShaderStage(
     (uvIn) => {
-      const pivot = vec2(props.pivotX, props.pivotY)
+      const pivot = vec2(pivotX, pivotY)
       return uvIn.sub(pivot).div(scaleNode).add(pivot)
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

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

@@ -1,31 +1,25 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Vector2 } from 'three'
   import { time, uniform } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      speedX?: number
-      speedY?: number
-      order?: number
-    }>(),
-    {
-      speedX: 0,
-      speedY: 0.1,
-      order: 0,
-    }
-  )
+  const {
+    speedX = 0,
+    speedY = 0.1,
+    order = 0,
+  } = defineProps<{
+    speedX?: number
+    speedY?: number
+    order?: number
+  }>()
 
-  const speedVal = new Vector2(props.speedX, props.speedY)
+  const speedVal = new Vector2(speedX, speedY)
   const speedNode = uniform(speedVal)
   watch(
-    () => [props.speedX, props.speedY],
+    () => [speedX, speedY] as const,
     ([x, y]) => {
       speedNode.value.set(x, y)
     }
   )
 
-  useShaderStage((uvIn) => uvIn.add(speedNode.mul(time)).fract(), props.order, 'uv')
+  useShaderStage((uvIn) => uvIn.add(speedNode.mul(time)).fract(), order, 'uv')
 </script>

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

@@ -1,25 +1,19 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { fract, time, uniform, vec2 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Scroll speed (UV units per second, positive = right) */
-      speed?: number
-      order?: number
-    }>(),
-    { speed: 0.1, order: 0 }
-  )
+  const { speed = 0.1, order = 0 } = defineProps<{
+    /** Scroll speed (UV units per second, positive = right) */
+    speed?: number
+    order?: number
+  }>()
 
-  const speedNode = uniform(props.speed)
+  const speedNode = uniform(speed)
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
 
-  useShaderStage((uvIn) => vec2(fract(uvIn.x.add(time.mul(speedNode))), uvIn.y), props.order, 'uv')
+  useShaderStage((uvIn) => vec2(fract(uvIn.x.add(time.mul(speedNode))), uvIn.y), order, 'uv')
 </script>

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

@@ -1,25 +1,19 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { fract, time, uniform, vec2 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Scroll speed (UV units per second, positive = up) */
-      speed?: number
-      order?: number
-    }>(),
-    { speed: 0.1, order: 0 }
-  )
+  const { speed = 0.1, order = 0 } = defineProps<{
+    /** Scroll speed (UV units per second, positive = up) */
+    speed?: number
+    order?: number
+  }>()
 
-  const speedNode = uniform(props.speed)
+  const speedNode = uniform(speed)
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
 
-  useShaderStage((uvIn) => vec2(uvIn.x, fract(uvIn.y.add(time.mul(speedNode)))), props.order, 'uv')
+  useShaderStage((uvIn) => vec2(uvIn.x, fract(uvIn.y.add(time.mul(speedNode)))), order, 'uv')
 </script>

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

@@ -1,30 +1,28 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { uniform, vec2 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Horizontal shear: shifts X by Y * shearX */
-      shearX?: number
-      /** Vertical shear: shifts Y by X * shearY */
-      shearY?: number
-      order?: number
-    }>(),
-    { shearX: 0.2, shearY: 0, order: 0 }
-  )
+  const {
+    shearX = 0.2,
+    shearY = 0,
+    order = 0,
+  } = defineProps<{
+    /** Horizontal shear: shifts X by Y * shearX */
+    shearX?: number
+    /** Vertical shear: shifts Y by X * shearY */
+    shearY?: number
+    order?: number
+  }>()
 
-  const shearXNode = uniform(props.shearX)
-  const shearYNode = uniform(props.shearY)
+  const shearXNode = uniform(shearX)
+  const shearYNode = uniform(shearY)
   watch(
-    () => props.shearX,
+    () => shearX,
     (v) => {
       shearXNode.value = v
     }
   )
   watch(
-    () => props.shearY,
+    () => shearY,
     (v) => {
       shearYNode.value = v
     }
@@ -32,7 +30,7 @@
 
   useShaderStage(
     (uvIn) => vec2(uvIn.x.add(uvIn.y.mul(shearXNode)), uvIn.y.add(uvIn.x.mul(shearYNode))),
-    props.order,
+    order,
     'uv'
   )
 </script>

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

@@ -1,7 +1,4 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { time, uniform, vec2 } from 'three/tsl'
 
   /**
@@ -11,39 +8,36 @@
    * The 1.5× frequency on Y and halved amplitude on Y are intentional — they give
    * the characteristic flowing, non-repeating Grainient look.
    */
-  const props = withDefaults(
-    defineProps<{
-      frequency?: number
-      amplitude?: number
-      speed?: number
-      order?: number
-    }>(),
-    {
-      frequency: 5,
-      amplitude: 30,
-      speed: 2,
-      order: 0,
-    }
-  )
+  const {
+    frequency = 5,
+    amplitude = 30,
+    speed = 2,
+    order = 0,
+  } = defineProps<{
+    frequency?: number
+    amplitude?: number
+    speed?: number
+    order?: number
+  }>()
 
-  const freqNode = uniform(props.frequency)
-  const ampNode = uniform(props.amplitude)
-  const speedNode = uniform(props.speed)
+  const freqNode = uniform(frequency)
+  const ampNode = uniform(amplitude)
+  const speedNode = uniform(speed)
 
   watch(
-    () => props.frequency,
+    () => frequency,
     (v) => {
       freqNode.value = v
     }
   )
   watch(
-    () => props.amplitude,
+    () => amplitude,
     (v) => {
       ampNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -58,7 +52,7 @@
       const warpedY = uvIn.y.add(warpedX.mul(freqNode).mul(1.5).add(t).sin().div(ampNode.mul(0.5)))
       return vec2(warpedX, warpedY)
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

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

@@ -1,7 +1,4 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { vec2 } from 'three/tsl'
 
   const { order = 0 } = defineProps<{ order?: number }>()

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

@@ -1,31 +1,25 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Vector2 } from 'three'
   import { uniform } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      repeatX?: number
-      repeatY?: number
-      order?: number
-    }>(),
-    {
-      repeatX: 2,
-      repeatY: 2,
-      order: 0,
-    }
-  )
+  const {
+    repeatX = 2,
+    repeatY = 2,
+    order = 0,
+  } = defineProps<{
+    repeatX?: number
+    repeatY?: number
+    order?: number
+  }>()
 
-  const repeatVal = new Vector2(props.repeatX, props.repeatY)
+  const repeatVal = new Vector2(repeatX, repeatY)
   const repeatNode = uniform(repeatVal)
   watch(
-    () => [props.repeatX, props.repeatY],
+    () => [repeatX, repeatY] as const,
     ([x, y]) => {
       repeatNode.value.set(x, y)
     }
   )
 
-  useShaderStage((uvIn) => uvIn.mul(repeatNode).fract(), props.order, 'uv')
+  useShaderStage((uvIn) => uvIn.mul(repeatNode).fract(), order, 'uv')
 </script>

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

@@ -1,36 +1,34 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { uniform } from 'three/tsl'
 
   import { swirlUV } from '../../shaders/common/uv'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Swirl strength in radians */
-      strength?: number
-      /** Effective radius of the swirl */
-      radius?: number
-      order?: number
-    }>(),
-    { strength: 3, radius: 0.5, order: 0 }
-  )
+  const {
+    strength = 3,
+    radius = 0.5,
+    order = 0,
+  } = defineProps<{
+    /** Swirl strength in radians */
+    strength?: number
+    /** Effective radius of the swirl */
+    radius?: number
+    order?: number
+  }>()
 
-  const strengthNode = uniform(props.strength)
-  const radiusNode = uniform(props.radius)
+  const strengthNode = uniform(strength)
+  const radiusNode = uniform(radius)
   watch(
-    () => props.strength,
+    () => strength,
     (v) => {
       strengthNode.value = v
     }
   )
   watch(
-    () => props.radius,
+    () => radius,
     (v) => {
       radiusNode.value = v
     }
   )
 
-  useShaderStage((uvIn) => swirlUV(uvIn, [0.5, 0.5], strengthNode, radiusNode), props.order, 'uv')
+  useShaderStage((uvIn) => swirlUV(uvIn, [0.5, 0.5], strengthNode, radiusNode), order, 'uv')
 </script>

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

@@ -1,41 +1,40 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { time, uniform } from 'three/tsl'
 
   import { waveUV } from '../../shaders/common/uv'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Wave frequency */
-      frequency?: number
-      /** Warp amplitude */
-      amplitude?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    { frequency: 10, amplitude: 0.05, speed: 1, order: 0 }
-  )
+  const {
+    frequency = 10,
+    amplitude = 0.05,
+    speed = 1,
+    order = 0,
+  } = defineProps<{
+    /** Wave frequency */
+    frequency?: number
+    /** Warp amplitude */
+    amplitude?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
-  const freqNode = uniform(props.frequency)
-  const ampNode = uniform(props.amplitude)
-  const speedNode = uniform(props.speed)
+  const freqNode = uniform(frequency)
+  const ampNode = uniform(amplitude)
+  const speedNode = uniform(speed)
   watch(
-    () => props.frequency,
+    () => frequency,
     (v) => {
       freqNode.value = v
     }
   )
   watch(
-    () => props.amplitude,
+    () => amplitude,
     (v) => {
       ampNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -43,7 +42,7 @@
 
   useShaderStage(
     (uvIn) => waveUV(uvIn, freqNode, ampNode, time.mul(speedNode), 'both'),
-    props.order,
+    order,
     'uv'
   )
 </script>

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

@@ -1,53 +1,52 @@
-<!-- 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, floor, fract, sin, time, uniform, vec3, vec4 } from 'three/tsl'
+  import { floor, fract, sin, time, uniform, vec3, vec4 } from 'three/tsl'
 
   /**
    * VHS colour bleed + horizontal noise drift.
    * Shifts R/B channels horizontally by a noise-driven amount and adds scanline banding.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Channel bleed strength */
-      bleedStrength?: number
-      /** Horizontal noise frequency */
-      noiseFreq?: number
-      /** Tracking error intensity */
-      trackingNoise?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    { bleedStrength: 0.015, noiseFreq: 8, trackingNoise: 0.3, speed: 1, order: 0 }
-  )
+  const {
+    bleedStrength = 0.015,
+    noiseFreq = 8,
+    trackingNoise = 0.3,
+    speed = 1,
+    order = 0,
+  } = defineProps<{
+    /** Channel bleed strength */
+    bleedStrength?: number
+    /** Horizontal noise frequency */
+    noiseFreq?: number
+    /** Tracking error intensity */
+    trackingNoise?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
-  const bleedNode = uniform(props.bleedStrength)
-  const noiseFreqNode = uniform(props.noiseFreq)
-  const trackingNode = uniform(props.trackingNoise)
-  const speedNode = uniform(props.speed)
+  const bleedNode = uniform(bleedStrength)
+  const noiseFreqNode = uniform(noiseFreq)
+  const trackingNode = uniform(trackingNoise)
+  const speedNode = uniform(speed)
   watch(
-    () => props.bleedStrength,
+    () => bleedStrength,
     (v) => {
       bleedNode.value = v
     }
   )
   watch(
-    () => props.noiseFreq,
+    () => noiseFreq,
     (v) => {
       noiseFreqNode.value = v
     }
   )
   watch(
-    () => props.trackingNoise,
+    () => trackingNoise,
     (v) => {
       trackingNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -74,5 +73,5 @@
       .add(1)
 
     return vec4(vec3(rBleed, prev.g, bBleed).mul(scanBrightness), prev.w)
-  }, props.order)
+  }, order)
 </script>