kmcom-nuxt-layers 2.2.0 → 2.2.2

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

@@ -1,32 +1,30 @@
-<!-- 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 { bulgeUV } from '../../shaders/common/uv'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Positive = bulge outward, negative = pinch inward */
-      strength?: number
-      /** Effective radius of the distortion */
-      radius?: number
-      order?: number
-    }>(),
-    { strength: 0.5, radius: 0.5, order: 0 }
-  )
+  const {
+    strength = 0.5,
+    radius = 0.5,
+    order = 0,
+  } = defineProps<{
+    /** Positive = bulge outward, negative = pinch inward */
+    strength?: number
+    /** Effective radius of the distortion */
+    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
     }
@@ -34,7 +32,7 @@
 
   useShaderStage(
     (uvIn) => bulgeUV(uvIn, { strength: strengthNode, radius: radiusNode }),
-    props.order,
+    order,
     'uv'
   )
 </script>

package/layers/shader/app/components/Pipeline/UVClamp.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 { clamp, float, vec2 } from 'three/tsl'
 
   /**

package/layers/shader/app/components/Pipeline/UVColumnOffset.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<{
-      /** Number of columns to divide into */
-      columns?: number
-      /** Vertical offset multiplied by column index */
-      factor?: number
-      order?: number
-    }>(),
-    { columns: 6, factor: 0.15, order: 0 }
-  )
+  const {
+    columns = 6,
+    factor = 0.15,
+    order = 0,
+  } = defineProps<{
+    /** Number of columns to divide into */
+    columns?: number
+    /** Vertical offset multiplied by column index */
+    factor?: number
+    order?: number
+  }>()
 
-  const columnsNode = uniform(props.columns)
-  const factorNode = uniform(props.factor)
+  const columnsNode = uniform(columns)
+  const factorNode = uniform(factor)
   watch(
-    () => props.columns,
+    () => columns,
     (v) => {
       columnsNode.value = v
     }
   )
   watch(
-    () => props.factor,
+    () => factor,
     (v) => {
       factorNode.value = v
     }
@@ -35,7 +33,7 @@
       const col = uvIn.x.mul(columnsNode).floor()
       return vec2(uvIn.x, uvIn.y.add(col.mul(factorNode)))
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

package/layers/shader/app/components/Pipeline/UVFlipX.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 { float, vec2 } from 'three/tsl'
 
   const { order = 0 } = defineProps<{ order?: number }>()

package/layers/shader/app/components/Pipeline/UVFlipXY.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 { float, vec2 } from 'three/tsl'
 
   const { order = 0 } = defineProps<{ order?: number }>()

package/layers/shader/app/components/Pipeline/UVFlipY.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 { float, vec2 } from 'three/tsl'
 
   const { order = 0 } = defineProps<{ order?: number }>()

package/layers/shader/app/components/Pipeline/UVFractBand.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 { clamp, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Number of bands across the UV Y axis */
-      frequency?: number
-      /** Brightness addend at band peaks */
-      scale?: number
-      order?: number
-    }>(),
-    { frequency: 8, scale: 0.15, order: 0 }
-  )
+  const {
+    frequency = 8,
+    scale = 0.15,
+    order = 0,
+  } = defineProps<{
+    /** Number of bands across the UV Y axis */
+    frequency?: number
+    /** Brightness addend at band peaks */
+    scale?: number
+    order?: number
+  }>()
 
-  const freqNode = uniform(props.frequency)
-  const scaleNode = uniform(props.scale)
+  const freqNode = uniform(frequency)
+  const scaleNode = uniform(scale)
   watch(
-    () => props.frequency,
+    () => frequency,
     (v) => {
       freqNode.value = v
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
@@ -37,5 +35,5 @@
     const band = uvCurrent.y.mul(freqNode).fract().mul(scaleNode)
     const rgb = clamp(prev.xyz.add(band), 0, 1)
     return vec4(rgb, prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/UVMousePull.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 { Vector2 } from 'three'
   import { uniform, vec2 } from 'three/tsl'
 
@@ -10,19 +7,16 @@
    * the whole field. This pulls individual UV coords toward the pointer position.
    * q += (pointer - uv) * influence * 0.2
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Pull strength toward the cursor */
-      influence?: number
-      order?: number
-    }>(),
-    { influence: 0.5, order: 0 }
-  )
+  const { influence = 0.5, order = 0 } = defineProps<{
+    /** Pull strength toward the cursor */
+    influence?: number
+    order?: number
+  }>()
 
   const mouse = uniform(new Vector2(0.5, 0.5))
-  const influenceNode = uniform(props.influence)
+  const influenceNode = uniform(influence)
   watch(
-    () => props.influence,
+    () => influence,
     (v) => {
       influenceNode.value = v
     }
@@ -41,7 +35,7 @@
       const pointer = vec2(mouse.x, mouse.y)
       return uvIn.add(pointer.sub(uvIn).mul(influenceNode).mul(0.2))
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

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

@@ -1,47 +1,41 @@
-<!-- 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'
 
   import { simplexNoise2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Max rotation in degrees (default 720 = 2 full turns) */
-      rotationAmount?: number
-      /** Noise animation speed */
-      speed?: number
-      /** Noise spatial frequency */
-      noiseScale?: number
-      order?: number
-    }>(),
-    {
-      rotationAmount: 720,
-      speed: 0.1,
-      noiseScale: 1,
-      order: 0,
-    }
-  )
+  const {
+    rotationAmount = 720,
+    speed = 0.1,
+    noiseScale = 1,
+    order = 0,
+  } = defineProps<{
+    /** Max rotation in degrees (default 720 = 2 full turns) */
+    rotationAmount?: number
+    /** Noise animation speed */
+    speed?: number
+    /** Noise spatial frequency */
+    noiseScale?: number
+    order?: number
+  }>()
 
-  const rotAmountNode = uniform(props.rotationAmount)
-  const speedNode = uniform(props.speed)
-  const noiseScaleNode = uniform(props.noiseScale)
+  const rotAmountNode = uniform(rotationAmount)
+  const speedNode = uniform(speed)
+  const noiseScaleNode = uniform(noiseScale)
 
   watch(
-    () => props.rotationAmount,
+    () => rotationAmount,
     (v) => {
       rotAmountNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
   watch(
-    () => props.noiseScale,
+    () => noiseScale,
     (v) => {
       noiseScaleNode.value = v
     }
@@ -67,7 +61,7 @@
         centered.x.mul(sinA).add(centered.y.mul(cosA))
       ).add(pivot)
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

package/layers/shader/app/components/Pipeline/UVNoiseWarp.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, vec2 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Warp strength in UV units */
-      strength?: number
-      /** Noise input scale */
-      scale?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    { strength: 0.3, scale: 2, speed: 0.2, order: 0 }
-  )
+  const {
+    strength = 0.3,
+    scale = 2,
+    speed = 0.2,
+    order = 0,
+  } = defineProps<{
+    /** Warp strength in UV units */
+    strength?: number
+    /** Noise input scale */
+    scale?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
-  const strengthNode = uniform(props.strength)
-  const scaleNode = uniform(props.scale)
-  const speedNode = uniform(props.speed)
+  const strengthNode = uniform(strength)
+  const scaleNode = uniform(scale)
+  const speedNode = uniform(speed)
   watch(
-    () => props.strength,
+    () => strength,
     (v) => {
       strengthNode.value = v
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -48,7 +47,7 @@
       const warpY = fbm2D(uvIn.mul(scaleNode).add(vec2(5.2, 1.3)).add(t))
       return uvIn.add(vec2(warpX, warpY).mul(strengthNode))
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

package/layers/shader/app/components/Pipeline/UVOrbit.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 { cos, sin, time, uniform, vec2 } from 'three/tsl'
 
   /**
    * Rotates UV around a centre point continuously over time.
    * Distinct from UVRotate (static angle) — this is always animated.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Orbit speed in radians per second */
-      speed?: number
-      order?: number
-    }>(),
-    { speed: 0.5, order: 0 }
-  )
+  const { speed = 0.5, order = 0 } = defineProps<{
+    /** Orbit speed in radians per second */
+    speed?: number
+    order?: number
+  }>()
 
-  const speedNode = uniform(props.speed)
+  const speedNode = uniform(speed)
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -36,7 +30,7 @@
         centered.x.mul(s).add(centered.y.mul(c))
       ).add(0.5)
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

package/layers/shader/app/components/Pipeline/UVParallax.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 { Vector2 } from 'three'
   import { uniform, vec2 } from 'three/tsl'
 
@@ -10,19 +7,16 @@
    * Creates the illusion of depth as the mouse moves — the ColorBends pattern.
    * p += pointer * parallax * 0.1
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Parallax strength: 0 = no movement, 1 = full NDC range */
-      parallax?: number
-      order?: number
-    }>(),
-    { parallax: 0.5, order: 0 }
-  )
+  const { parallax = 0.5, order = 0 } = defineProps<{
+    /** Parallax strength: 0 = no movement, 1 = full NDC range */
+    parallax?: number
+    order?: number
+  }>()
 
   const mouse = uniform(new Vector2(0, 0))
-  const parallaxNode = uniform(props.parallax)
+  const parallaxNode = uniform(parallax)
   watch(
-    () => props.parallax,
+    () => parallax,
     (v) => {
       parallaxNode.value = v
     }
@@ -39,9 +33,5 @@
     onUnmounted(() => window.removeEventListener('mousemove', onMove))
   })
 
-  useShaderStage(
-    (uvIn) => uvIn.add(vec2(mouse.x, mouse.y).mul(parallaxNode).mul(0.1)),
-    props.order,
-    'uv'
-  )
+  useShaderStage((uvIn) => uvIn.add(vec2(mouse.x, mouse.y).mul(parallaxNode).mul(0.1)), order, 'uv')
 </script>

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

@@ -1,22 +1,15 @@
-<!-- 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
   import { uniform } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Number of pixel columns/rows — lower = chunkier pixels */
-      gridSize?: number
-      order?: number
-    }>(),
-    { gridSize: 64, order: 0 }
-  )
+  const { gridSize = 64, order = 0 } = defineProps<{
+    /** Number of pixel columns/rows — lower = chunkier pixels */
+    gridSize?: number
+    order?: number
+  }>()
 
-  const gridSizeNode = uniform(props.gridSize)
+  const gridSizeNode = uniform(gridSize)
   watch(
-    () => props.gridSize,
+    () => gridSize,
     (v) => {
       gridSizeNode.value = v
     }

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

@@ -1,34 +1,32 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { float, sin, time, uniform, vec2 } from 'three/tsl'
 
   /**
    * Oscillating UV scale over time — the UV breathes in and out.
    * scale = 1 + sin(time * speed) * amount
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Pulse amplitude (fraction of UV range) */
-      amount?: number
-      /** Pulse speed in radians per second */
-      speed?: number
-      order?: number
-    }>(),
-    { amount: 0.1, speed: 2, order: 0 }
-  )
+  const {
+    amount = 0.1,
+    speed = 2,
+    order = 0,
+  } = defineProps<{
+    /** Pulse amplitude (fraction of UV range) */
+    amount?: number
+    /** Pulse speed in radians per second */
+    speed?: number
+    order?: number
+  }>()
 
-  const amountNode = uniform(props.amount)
-  const speedNode = uniform(props.speed)
+  const amountNode = uniform(amount)
+  const speedNode = uniform(speed)
   watch(
-    () => props.amount,
+    () => amount,
     (v) => {
       amountNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -40,7 +38,7 @@
       const centered = uvIn.sub(0.5).div(scale).add(0.5)
       return vec2(centered.x, centered.y)
     },
-    props.order,
+    order,
     'uv'
   )
 </script>

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

@@ -1,50 +1,50 @@
-<!-- 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 { rippleUV } from '../../shaders/common/uv'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Ripple frequency */
-      frequency?: number
-      /** Ripple amplitude */
-      amplitude?: number
-      /** Falloff rate from center */
-      falloff?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    { frequency: 10, amplitude: 0.05, falloff: 1, speed: 1, order: 0 }
-  )
+  const {
+    frequency = 10,
+    amplitude = 0.05,
+    falloff = 1,
+    speed = 1,
+    order = 0,
+  } = defineProps<{
+    /** Ripple frequency */
+    frequency?: number
+    /** Ripple amplitude */
+    amplitude?: number
+    /** Falloff rate from center */
+    falloff?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
-  const freqNode = uniform(props.frequency)
-  const ampNode = uniform(props.amplitude)
-  const falloffNode = uniform(props.falloff)
-  const speedNode = uniform(props.speed)
+  const freqNode = uniform(frequency)
+  const ampNode = uniform(amplitude)
+  const falloffNode = uniform(falloff)
+  const speedNode = uniform(speed)
   watch(
-    () => props.frequency,
+    () => frequency,
     (v) => {
       freqNode.value = v
     }
   )
   watch(
-    () => props.amplitude,
+    () => amplitude,
     (v) => {
       ampNode.value = v
     }
   )
   watch(
-    () => props.falloff,
+    () => falloff,
     (v) => {
       falloffNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -52,7 +52,7 @@
 
   useShaderStage(
     (uvIn) => rippleUV(uvIn, [0.5, 0.5], freqNode, ampNode, time.mul(speedNode), falloffNode),
-    props.order,
+    order,
     'uv'
   )
 </script>