kmcom-nuxt-layers 2.2.0 → 2.2.2

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

@@ -1,79 +1,72 @@
-<!-- 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, time, uniform, vec4 } from 'three/tsl'
 
   import { domainWarp2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      scale?: number
-      warpStrength?: number
-      warpScale?: number
-      speed?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      scale: 2,
-      warpStrength: 0.5,
-      warpScale: 2,
-      speed: 0.1,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    scale = 2,
+    warpStrength = 0.5,
+    warpScale = 2,
+    speed = 0.1,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    scale?: number
+    warpStrength?: number
+    warpScale?: 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 warpStrNode = uniform(props.warpStrength)
-  const warpScaleNode = uniform(props.warpScale)
-  const speedNode = uniform(props.speed)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const scaleNode = uniform(scale)
+  const warpStrNode = uniform(warpStrength)
+  const warpScaleNode = uniform(warpScale)
+  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.warpStrength,
+    () => warpStrength,
     (v) => {
       warpStrNode.value = v
     }
   )
   watch(
-    () => props.warpScale,
+    () => warpScale,
     (v) => {
       warpScaleNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -86,5 +79,5 @@
     const animated = uv.add(time.mul(speedNode))
     const n = domainWarp2D(animated.mul(scaleNode), warpStrNode, warpScaleNode).mul(0.5).add(0.5)
     return vec4(mix(colorANode, colorBNode, n), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,70 +1,63 @@
-<!-- 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, uniform, vec4 } from 'three/tsl'
 
   import { dots } from '../../shaders/common/shapes'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      cellSize?: number
-      dotRadius?: number
-      softness?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      cellSize: 0.08,
-      dotRadius: 0.025,
-      softness: 0.005,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    cellSize = 0.08,
+    dotRadius = 0.025,
+    softness = 0.005,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    cellSize?: number
+    dotRadius?: number
+    softness?: 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 cellNode = uniform(props.cellSize)
-  const dotNode = uniform(props.dotRadius)
-  const softNode = uniform(props.softness)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const cellNode = uniform(cellSize)
+  const dotNode = uniform(dotRadius)
+  const softNode = uniform(softness)
   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.cellSize,
+    () => cellSize,
     (v) => {
       cellNode.value = v
     }
   )
   watch(
-    () => props.dotRadius,
+    () => dotRadius,
     (v) => {
       dotNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softNode.value = v
     }
@@ -76,5 +69,5 @@
     const uv = pipeline.uvNode.value
     const mask = dots(uv, cellNode, dotNode, softNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,40 +1,37 @@
-<!-- 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 { mix, uniform, vec4 } from 'three/tsl'
 
   import { luminance } from '../../shaders/common/blend'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Shadow colour (low luminance) */
-      shadowColor?: string
-      /** Highlight colour (high luminance) */
-      highlightColor?: string
-      order?: number
-    }>(),
-    { shadowColor: '#1a0033', highlightColor: '#ffcc00', order: 0 }
-  )
+  const {
+    shadowColor = '#1a0033',
+    highlightColor = '#ffcc00',
+    order = 0,
+  } = defineProps<{
+    /** Shadow colour (low luminance) */
+    shadowColor?: string
+    /** Highlight colour (high luminance) */
+    highlightColor?: string
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const shadowNode = toVec3Node(props.shadowColor)
-  const highlightNode = toVec3Node(props.highlightColor)
+  const shadowNode = toVec3Node(shadowColor)
+  const highlightNode = toVec3Node(highlightColor)
   watch(
-    () => props.shadowColor,
+    () => shadowColor,
     (v) => {
       const c = new Color(v)
       shadowNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.highlightColor,
+    () => highlightColor,
     (v) => {
       const c = new Color(v)
       highlightNode.value.set(c.r, c.g, c.b)
@@ -44,5 +41,5 @@
   useShaderStage((prev) => {
     const lum = luminance(prev.xyz)
     return vec4(mix(shadowNode, highlightNode, lum), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,36 +1,33 @@
-<!-- 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 { mix, uniform, vec4 } from 'three/tsl'
 
   import { blendExclusion } from '../../shaders/common/blend'
 
-  const props = withDefaults(
-    defineProps<{
-      color?: string
-      opacity?: number
-      order?: number
-    }>(),
-    { color: '#ffffff', opacity: 1, order: 0 }
-  )
+  const {
+    color = '#ffffff',
+    opacity = 1,
+    order = 0,
+  } = defineProps<{
+    color?: string
+    opacity?: number
+    order?: number
+  }>()
 
   const colorNode = (() => {
-    const c = new Color(props.color)
+    const c = new Color(color)
     return uniform(new Vector3(c.r, c.g, c.b))
   })()
-  const opacityNode = uniform(props.opacity)
+  const opacityNode = uniform(opacity)
   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
     }
@@ -38,6 +35,6 @@
 
   useShaderStage(
     (prev) => vec4(mix(prev.xyz, blendExclusion(prev.xyz, colorNode), opacityNode), prev.w),
-    props.order
+    order
   )
 </script>

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

@@ -1,8 +1,4 @@
-<!-- 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 { mix, uniform, vec4 } from 'three/tsl'
 
@@ -11,42 +7,44 @@
    * Blends prev colour toward fogColor as the ray approaches the horizon.
    * Pairs naturally with SkyAtmosphere — place before it so terrain gets fog too.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Fog colour */
-      fogColor?: string
-      /** Controls how quickly fog builds near the horizon — higher = thicker */
-      density?: number
-      /** Clamp the minimum ray Y used for fog (prevents underground fog) */
-      horizonBias?: number
-      order?: number
-    }>(),
-    { fogColor: '#c8d8e8', density: 4, horizonBias: 0, order: 0 }
-  )
+  const {
+    fogColor = '#c8d8e8',
+    density = 4,
+    horizonBias = 0,
+    order = 0,
+  } = defineProps<{
+    /** Fog colour */
+    fogColor?: string
+    /** Controls how quickly fog builds near the horizon — higher = thicker */
+    density?: number
+    /** Clamp the minimum ray Y used for fog (prevents underground fog) */
+    horizonBias?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const fogColorNode = toVec3Node(props.fogColor)
-  const densityNode = uniform(props.density)
-  const horizonBiasNode = uniform(props.horizonBias)
+  const fogColorNode = toVec3Node(fogColor)
+  const densityNode = uniform(density)
+  const horizonBiasNode = uniform(horizonBias)
   watch(
-    () => props.fogColor,
+    () => fogColor,
     (v) => {
       const c = new Color(v)
       fogColorNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.density,
+    () => density,
     (v) => {
       densityNode.value = v
     }
   )
   watch(
-    () => props.horizonBias,
+    () => horizonBias,
     (v) => {
       horizonBiasNode.value = v
     }
@@ -59,5 +57,5 @@
     const h = ray ? ray.y.max(horizonBiasNode) : horizonBiasNode
     const fogFactor = h.mul(densityNode).negate().exp2()
     return vec4(mix(fogColorNode, prev.xyz, fogFactor), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,22 +1,15 @@
-<!-- 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, pow, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Exposure in stops: 0 = unchanged, +1 = 2× brighter, -1 = 2× darker */
-      stops?: number
-      order?: number
-    }>(),
-    { stops: 0, order: 0 }
-  )
+  const { stops = 0, order = 0 } = defineProps<{
+    /** Exposure in stops: 0 = unchanged, +1 = 2× brighter, -1 = 2× darker */
+    stops?: number
+    order?: number
+  }>()
 
-  const stopsNode = uniform(props.stops)
+  const stopsNode = uniform(stops)
   watch(
-    () => props.stops,
+    () => stops,
     (v) => {
       stopsNode.value = v
     }
@@ -25,5 +18,5 @@
   useShaderStage((prev) => {
     const scale = pow(float(2), stopsNode)
     return vec4(prev.xyz.mul(scale), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,62 +1,54 @@
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- 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 } from 'three'
   import { float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      scale?: number
-      octaves?: number
-      animated?: boolean
-      speed?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      scale: 3,
-      octaves: 5,
-      animated: true,
-      speed: 0.15,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    scale = 3,
+    octaves = 5,
+    animated = true,
+    speed = 0.15,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    scale?: number
+    octaves?: number
+    animated?: boolean
+    speed?: number
+    order?: number
+  }>()
 
-  const colorAVal = new Color(props.colorA)
-  const colorBVal = new Color(props.colorB)
+  const colorAVal = new Color(colorA)
+  const colorBVal = new Color(colorB)
   const colorANode = uniform(colorAVal)
   const colorBNode = uniform(colorBVal)
-  const scaleNode = uniform(props.scale)
-  const speedNode = uniform(props.speed)
+  const scaleNode = uniform(scale)
+  const speedNode = uniform(speed)
 
   watch(
-    () => props.colorA,
+    () => colorA,
     (v) => {
       colorANode.value.set(v)
     }
   )
   watch(
-    () => props.colorB,
+    () => colorB,
     (v) => {
       colorBNode.value.set(v)
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -65,9 +57,9 @@
   const { uvNode } = useShaderPipelineContext()
 
   useShaderStage((_prev) => {
-    const offset = props.animated ? time.mul(speedNode) : float(0)
+    const offset = animated ? time.mul(speedNode) : float(0)
     const input = uvNode.value.mul(scaleNode).add(vec2(offset, 0))
-    const n = fbm2D(input, { octaves: props.octaves }).mul(0.5).add(0.5)
+    const n = fbm2D(input, { octaves: octaves }).mul(0.5).add(0.5)
     return vec4(mix(colorANode, colorBNode, n), 1.0)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,60 +1,59 @@
-<!-- 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, Vector2, Vector3 } from 'three'
-  import { float, mix, smoothstep, uniform, vec2, vec4 } from 'three/tsl'
+  import { float, smoothstep, uniform, vec2, vec4 } from 'three/tsl'
 
   /**
    * Orange/warm light leak emanating from a screen corner.
    * Additive over-exposure effect — common in analogue film.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Light leak colour */
-      color?: string
-      /** Corner origin [0,1] — default top-left */
-      origin?: [number, number]
-      /** Reach of the leak */
-      radius?: number
-      /** Peak brightness */
-      intensity?: number
-      order?: number
-    }>(),
-    { color: '#ff8822', origin: () => [0, 1], radius: 0.7, intensity: 0.5, order: 0 }
-  )
+  const {
+    color = '#ff8822',
+    origin = [0, 1],
+    radius = 0.7,
+    intensity = 0.5,
+    order = 0,
+  } = defineProps<{
+    /** Light leak colour */
+    color?: string
+    /** Corner origin [0,1] — default top-left */
+    origin?: [number, number]
+    /** Reach of the leak */
+    radius?: number
+    /** Peak brightness */
+    intensity?: 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 originNode = uniform(new Vector2(...props.origin))
-  const radiusNode = uniform(props.radius)
-  const intensityNode = uniform(props.intensity)
+  const colorNode = toVec3Node(color)
+  const originNode = uniform(new Vector2(...origin))
+  const radiusNode = uniform(radius)
+  const intensityNode = uniform(intensity)
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       const c = new Color(v)
       colorNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.origin,
+    () => origin,
     ([x, y]) => {
       originNode.value.set(x, y)
     }
   )
   watch(
-    () => props.radius,
+    () => radius,
     (v) => {
       radiusNode.value = v
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       intensityNode.value = v
     }
@@ -67,5 +66,5 @@
     const dist = uv.sub(vec2(originNode.x, originNode.y)).length()
     const leak = smoothstep(radiusNode, float(0), dist).mul(intensityNode)
     return vec4(prev.xyz.add(colorNode.mul(leak)), prev.w)
-  }, props.order)
+  }, order)
 </script>