kmcom-nuxt-layers 2.1.6 → 2.2.1

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

@@ -1,85 +1,78 @@
-<!-- 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 { fbm2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Sky colour */
-      colorSky?: string
-      /** Cloud colour */
-      colorCloud?: string
-      /** FBM noise input scale */
-      scale?: number
-      /** Cloud coverage: lower = fewer clouds, higher = overcast */
-      coverage?: number
-      /** Cloud softness */
-      softness?: number
-      /** Wind speed */
-      speed?: number
-      order?: number
-    }>(),
-    {
-      colorSky: '#5588cc',
-      colorCloud: '#ffffff',
-      scale: 2,
-      coverage: 0.5,
-      softness: 0.15,
-      speed: 0.05,
-      order: 0,
-    }
-  )
+  const {
+    colorSky = '#5588cc',
+    colorCloud = '#ffffff',
+    scale = 2,
+    coverage = 0.5,
+    softness = 0.15,
+    speed = 0.05,
+    order = 0,
+  } = defineProps<{
+    /** Sky colour */
+    colorSky?: string
+    /** Cloud colour */
+    colorCloud?: string
+    /** FBM noise input scale */
+    scale?: number
+    /** Cloud coverage: lower = fewer clouds, higher = overcast */
+    coverage?: number
+    /** Cloud softness */
+    softness?: number
+    /** Wind 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 colorSkyNode = toVec3Node(props.colorSky)
-  const colorCloudNode = toVec3Node(props.colorCloud)
-  const scaleNode = uniform(props.scale)
-  const coverageNode = uniform(props.coverage)
-  const softnessNode = uniform(props.softness)
-  const speedNode = uniform(props.speed)
+  const colorSkyNode = toVec3Node(colorSky)
+  const colorCloudNode = toVec3Node(colorCloud)
+  const scaleNode = uniform(scale)
+  const coverageNode = uniform(coverage)
+  const softnessNode = uniform(softness)
+  const speedNode = uniform(speed)
   watch(
-    () => props.colorSky,
+    () => colorSky,
     (v) => {
       const c = new Color(v)
       colorSkyNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorCloud,
+    () => colorCloud,
     (v) => {
       const c = new Color(v)
       colorCloudNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.coverage,
+    () => coverage,
     (v) => {
       coverageNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -94,5 +87,5 @@
     // Remap to cloud mask using coverage + softness
     const cloud = smoothstep(coverageNode.sub(softnessNode), coverageNode.add(softnessNode), n)
     return vec4(mix(colorSkyNode, colorCloudNode, cloud), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,32 +1,30 @@
-<!-- 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 { mix, uniform, vec4 } from 'three/tsl'
 
   import { blendColorBurn } from '../../shaders/common/blend'
+  import type { TSLNode } from '../../shaders/types'
 
-  const props = withDefaults(
-    defineProps<{
-      color?: string
-      opacity?: number
-      order?: number
-    }>(),
-    { color: '#808080', opacity: 1, order: 0 }
-  )
+  const {
+    color = '#808080',
+    opacity = 1,
+    order = 0,
+  } = defineProps<{
+    color?: string
+    opacity?: number
+    order?: number
+  }>()
 
-  const colorNode = uniform(new Color(props.color))
-  const opacityNode = uniform(props.opacity)
+  const colorNode: TSLNode = uniform(new Color(color))
+  const opacityNode = uniform(opacity)
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       colorNode.value.set(v)
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
@@ -34,6 +32,6 @@
 
   useShaderStage(
     (prev) => vec4(mix(prev.xyz, blendColorBurn(prev.xyz, colorNode), opacityNode), prev.w),
-    props.order
+    order
   )
 </script>

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

@@ -1,32 +1,30 @@
-<!-- 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 { mix, uniform, vec4 } from 'three/tsl'
 
   import { blendColorDodge } from '../../shaders/common/blend'
+  import type { TSLNode } from '../../shaders/types'
 
-  const props = withDefaults(
-    defineProps<{
-      color?: string
-      opacity?: number
-      order?: number
-    }>(),
-    { color: '#808080', opacity: 1, order: 0 }
-  )
+  const {
+    color = '#808080',
+    opacity = 1,
+    order = 0,
+  } = defineProps<{
+    color?: string
+    opacity?: number
+    order?: number
+  }>()
 
-  const colorNode = uniform(new Color(props.color))
-  const opacityNode = uniform(props.opacity)
+  const colorNode: TSLNode = uniform(new Color(color))
+  const opacityNode = uniform(opacity)
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       colorNode.value.set(v)
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
@@ -34,6 +32,6 @@
 
   useShaderStage(
     (prev) => vec4(mix(prev.xyz, blendColorDodge(prev.xyz, colorNode), opacityNode), prev.w),
-    props.order
+    order
   )
 </script>

package/layers/shader/app/components/Pipeline/ColourRamp.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 { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
@@ -12,66 +8,63 @@
    * Maps input luminance to a three-stop colour ramp: shadow → midtone → highlight.
    * For a simple two-stop ramp use DuoTone instead.
    */
-  const props = withDefaults(
-    defineProps<{
-      shadowColor?: string
-      midtoneColor?: string
-      highlightColor?: string
-      /** Luminance threshold between shadow and midtone */
-      shadowPoint?: number
-      /** Luminance threshold between midtone and highlight */
-      highlightPoint?: number
-      order?: number
-    }>(),
-    {
-      shadowColor: '#000033',
-      midtoneColor: '#660066',
-      highlightColor: '#ffcc88',
-      shadowPoint: 0.33,
-      highlightPoint: 0.67,
-      order: 0,
-    }
-  )
+  const {
+    shadowColor = '#000033',
+    midtoneColor = '#660066',
+    highlightColor = '#ffcc88',
+    shadowPoint = 0.33,
+    highlightPoint = 0.67,
+    order = 0,
+  } = defineProps<{
+    shadowColor?: string
+    midtoneColor?: string
+    highlightColor?: string
+    /** Luminance threshold between shadow and midtone */
+    shadowPoint?: number
+    /** Luminance threshold between midtone and highlight */
+    highlightPoint?: number
+    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 midNode = toVec3Node(props.midtoneColor)
-  const highlightNode = toVec3Node(props.highlightColor)
-  const shadowPtNode = uniform(props.shadowPoint)
-  const highlightPtNode = uniform(props.highlightPoint)
+  const shadowNode = toVec3Node(shadowColor)
+  const midNode = toVec3Node(midtoneColor)
+  const highlightNode = toVec3Node(highlightColor)
+  const shadowPtNode = uniform(shadowPoint)
+  const highlightPtNode = uniform(highlightPoint)
   watch(
-    () => props.shadowColor,
+    () => shadowColor,
     (v) => {
       const c = new Color(v)
       shadowNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.midtoneColor,
+    () => midtoneColor,
     (v) => {
       const c = new Color(v)
       midNode.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)
     }
   )
   watch(
-    () => props.shadowPoint,
+    () => shadowPoint,
     (v) => {
       shadowPtNode.value = v
     }
   )
   watch(
-    () => props.highlightPoint,
+    () => highlightPoint,
     (v) => {
       highlightPtNode.value = v
     }
@@ -83,5 +76,5 @@
     const t2 = smoothstep(shadowPtNode, highlightPtNode, lum)
     const colour = mix(mix(shadowNode, midNode, t1), mix(midNode, highlightNode, t2), t2)
     return vec4(colour, prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/ComplexPlaneField.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 { cos, float, sin, time, uniform, vec2, vec4 } from 'three/tsl'
 
   import { complexDiv, complexLog } from '../../shaders/common/complex'
@@ -14,61 +10,58 @@
    * and extracts the imaginary component (winding angle) as a scalar float.
    * Outputs grayscale for CosinePalette (scalarSource: 'prev').
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Angle between the two poles in radians */
-      poleAngle?: number
-      /** Distance of poles from origin */
-      poleDistance?: number
-      /** Weight of the imaginary (winding) component */
-      imaginaryWeight?: number
-      /** Weight of the radial (exp) component */
-      radialWeight?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    {
-      poleAngle: Math.PI / 3,
-      poleDistance: 0.4,
-      imaginaryWeight: 0.6,
-      radialWeight: 0.4,
-      speed: 0.05,
-      order: 0,
-    }
-  )
+  const {
+    poleAngle = Math.PI / 3,
+    poleDistance = 0.4,
+    imaginaryWeight = 0.6,
+    radialWeight = 0.4,
+    speed = 0.05,
+    order = 0,
+  } = defineProps<{
+    /** Angle between the two poles in radians */
+    poleAngle?: number
+    /** Distance of poles from origin */
+    poleDistance?: number
+    /** Weight of the imaginary (winding) component */
+    imaginaryWeight?: number
+    /** Weight of the radial (exp) component */
+    radialWeight?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
-  const poleAngleNode = uniform(props.poleAngle)
-  const poleDistNode = uniform(props.poleDistance)
-  const imagWeightNode = uniform(props.imaginaryWeight)
-  const radWeightNode = uniform(props.radialWeight)
-  const speedNode = uniform(props.speed)
+  const poleAngleNode = uniform(poleAngle)
+  const poleDistNode = uniform(poleDistance)
+  const imagWeightNode = uniform(imaginaryWeight)
+  const radWeightNode = uniform(radialWeight)
+  const speedNode = uniform(speed)
   watch(
-    () => props.poleAngle,
+    () => poleAngle,
     (v) => {
       poleAngleNode.value = v
     }
   )
   watch(
-    () => props.poleDistance,
+    () => poleDistance,
     (v) => {
       poleDistNode.value = v
     }
   )
   watch(
-    () => props.imaginaryWeight,
+    () => imaginaryWeight,
     (v) => {
       imagWeightNode.value = v
     }
   )
   watch(
-    () => props.radialWeight,
+    () => radialWeight,
     (v) => {
       radWeightNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -103,5 +96,5 @@
     const scalar = imagPart.add(radPart).mul(0.5).add(0.5)
 
     return vec4(scalar, scalar, scalar, float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,46 +1,44 @@
-<!-- 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'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Rotation offset in degrees */
-      rotation?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', rotation: 0, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    rotation = 0,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Rotation offset in degrees */
+    rotation?: 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 rotationNode = uniform((props.rotation * Math.PI) / 180)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const rotationNode = uniform((rotation * Math.PI) / 180)
   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.rotation,
+    () => rotation,
     (v) => {
       rotationNode.value = (v * Math.PI) / 180
     }
@@ -54,5 +52,5 @@
     const angle = centered.y.atan(centered.x).add(rotationNode)
     const t = angle.div(Math.PI * 2).fract()
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/CosinePalette.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 { Vector3 } from 'three'
   import { time, uniform, vec4 } from 'three/tsl'
 
@@ -14,69 +10,66 @@
    * Formula: a + b * cos(2π * (c*t + d))
    * Scalar input t comes from uvNode via scalarSource.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Colour offset (brightness centre) */
-      a?: [number, number, number]
-      /** Colour amplitude (contrast) */
-      b?: [number, number, number]
-      /** Frequency per channel */
-      c?: [number, number, number]
-      /** Phase offset per channel (colour shift) */
-      d?: [number, number, number]
-      /** How fast the palette cycles over time */
-      timeScale?: number
-      /**
-       * What value to feed as the scalar input `t`.
-       * `'prev'` reads luminance of the previous pipeline stage — use after RingField,
-       * ChebyshevNoiseField, or any block that outputs a grayscale scalar as its colour.
-       */
-      scalarSource?: 'uv.y' | 'uv.x' | 'length' | 'time' | 'prev'
-      order?: number
-    }>(),
-    {
-      a: () => [0.5, 0.5, 0.5],
-      b: () => [0.5, 0.5, 0.5],
-      c: () => [1.0, 1.0, 1.0],
-      d: () => [0.0, 0.33, 0.67],
-      timeScale: 0.1,
-      scalarSource: 'uv.y',
-      order: 0,
-    }
-  )
+  const {
+    a = [0.5, 0.5, 0.5],
+    b = [0.5, 0.5, 0.5],
+    c = [1.0, 1.0, 1.0],
+    d = [0.0, 0.33, 0.67],
+    timeScale = 0.1,
+    scalarSource = 'uv.y',
+    order = 0,
+  } = defineProps<{
+    /** Colour offset (brightness centre) */
+    a?: [number, number, number]
+    /** Colour amplitude (contrast) */
+    b?: [number, number, number]
+    /** Frequency per channel */
+    c?: [number, number, number]
+    /** Phase offset per channel (colour shift) */
+    d?: [number, number, number]
+    /** How fast the palette cycles over time */
+    timeScale?: number
+    /**
+     * What value to feed as the scalar input `t`.
+     * `'prev'` reads luminance of the previous pipeline stage — use after RingField,
+     * ChebyshevNoiseField, or any block that outputs a grayscale scalar as its colour.
+     */
+    scalarSource?: 'uv.y' | 'uv.x' | 'length' | 'time' | 'prev'
+    order?: number
+  }>()
 
-  const aNode = uniform(new Vector3(...props.a))
-  const bNode = uniform(new Vector3(...props.b))
-  const cNode = uniform(new Vector3(...props.c))
-  const dNode = uniform(new Vector3(...props.d))
-  const timeScaleNode = uniform(props.timeScale)
+  const aNode = uniform(new Vector3(...a))
+  const bNode = uniform(new Vector3(...b))
+  const cNode = uniform(new Vector3(...c))
+  const dNode = uniform(new Vector3(...d))
+  const timeScaleNode = uniform(timeScale)
 
   watch(
-    () => props.a,
+    () => a,
     (v) => {
       aNode.value.set(...v)
     }
   )
   watch(
-    () => props.b,
+    () => b,
     (v) => {
       bNode.value.set(...v)
     }
   )
   watch(
-    () => props.c,
+    () => c,
     (v) => {
       cNode.value.set(...v)
     }
   )
   watch(
-    () => props.d,
+    () => d,
     (v) => {
       dNode.value.set(...v)
     }
   )
   watch(
-    () => props.timeScale,
+    () => timeScale,
     (v) => {
       timeScaleNode.value = v
     }
@@ -86,13 +79,13 @@
 
   useShaderStage((prev) => {
     let scalar
-    if (props.scalarSource === 'uv.x') scalar = uvNode.value.x
-    else if (props.scalarSource === 'length') scalar = uvNode.value.sub(0.5).length()
-    else if (props.scalarSource === 'time') scalar = time
-    else if (props.scalarSource === 'prev') scalar = luminance(prev.xyz)
+    if (scalarSource === 'uv.x') scalar = uvNode.value.x
+    else if (scalarSource === 'length') scalar = uvNode.value.sub(0.5).length()
+    else if (scalarSource === 'time') scalar = time
+    else if (scalarSource === 'prev') scalar = luminance(prev.xyz)
     else scalar = uvNode.value.y
 
     const t = scalar.add(time.mul(timeScaleNode))
     return vec4(cosinePalette(t, aNode, bNode, cNode, dNode), 1.0)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/CoverageAlpha.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 { vec4 } from 'three/tsl'
 
   /**