kmcom-nuxt-layers 2.1.6 → 2.2.1

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

@@ -1,34 +1,30 @@
-<!-- eslint-disable vue/no-dupe-keys -->
-<!-- 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 { uniform, vec4 } from 'three/tsl'
 
   import { brightness, contrast } from '../../shaders/common/blend'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Additive brightness offset: 0 = unchanged, positive = brighter */
-      brightness?: number
-      /** Contrast multiplier: 1 = unchanged, >1 = more contrast */
-      contrast?: number
-      order?: number
-    }>(),
-    { brightness: 0, contrast: 1, order: 0 }
-  )
+  const {
+    brightness: brightnessProp = 0,
+    contrast: contrastProp = 1,
+    order = 0,
+  } = defineProps<{
+    /** Additive brightness offset: 0 = unchanged, positive = brighter */
+    brightness?: number
+    /** Contrast multiplier: 1 = unchanged, >1 = more contrast */
+    contrast?: number
+    order?: number
+  }>()
 
-  const brightnessNode = uniform(props.brightness)
-  const contrastNode = uniform(props.contrast)
+  const brightnessNode = uniform(brightnessProp)
+  const contrastNode = uniform(contrastProp)
   watch(
-    () => props.brightness,
+    () => brightnessProp,
     (v) => {
       brightnessNode.value = v
     }
   )
   watch(
-    () => props.contrast,
+    () => contrastProp,
     (v) => {
       contrastNode.value = v
     }
@@ -36,6 +32,6 @@
 
   useShaderStage(
     (prev) => vec4(brightness(contrast(prev.xyz, contrastNode), brightnessNode), prev.w),
-    props.order
+    order
   )
 </script>

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

@@ -1,55 +1,54 @@
-<!-- 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 { voronoi2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      scale?: number
-      speed?: number
-      order?: number
-    }>(),
-    { colorA: '#000033', colorB: '#ffffff', scale: 8, speed: 0.1, order: 0 }
-  )
+  const {
+    colorA = '#000033',
+    colorB = '#ffffff',
+    scale = 8,
+    speed = 0.1,
+    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
     }
@@ -61,5 +60,5 @@
     const uv = pipeline.uvNode.value
     const { distance } = voronoi2D(uv.add(time.mul(speedNode)), scaleNode)
     return vec4(mix(colorANode, colorBNode, distance.min(float(1))), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,45 +1,38 @@
-<!-- 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, uniform, vec3, vec4 } from 'three/tsl'
+  import { uniform, vec3, vec4 } from 'three/tsl'
 
   /**
    * Arbitrary RGB channel mixing matrix.
    * Each output channel is a weighted sum of all three input channels.
    * Identity: rr=1 gg=1 bb=1, all cross-terms = 0.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** R channel: [R contribution, G contribution, B contribution] */
-      rRow?: [number, number, number]
-      /** G channel: [R contribution, G contribution, B contribution] */
-      gRow?: [number, number, number]
-      /** B channel: [R contribution, G contribution, B contribution] */
-      bRow?: [number, number, number]
-      order?: number
-    }>(),
-    {
-      rRow: () => [1, 0, 0],
-      gRow: () => [0, 1, 0],
-      bRow: () => [0, 0, 1],
-      order: 0,
-    }
-  )
+  const {
+    rRow = [1, 0, 0],
+    gRow = [0, 1, 0],
+    bRow = [0, 0, 1],
+    order = 0,
+  } = defineProps<{
+    /** R channel: [R contribution, G contribution, B contribution] */
+    rRow?: [number, number, number]
+    /** G channel: [R contribution, G contribution, B contribution] */
+    gRow?: [number, number, number]
+    /** B channel: [R contribution, G contribution, B contribution] */
+    bRow?: [number, number, number]
+    order?: number
+  }>()
 
-  const rrNode = uniform(props.rRow[0])
-  const rgNode = uniform(props.rRow[1])
-  const rbNode = uniform(props.rRow[2])
-  const grNode = uniform(props.gRow[0])
-  const ggNode = uniform(props.gRow[1])
-  const gbNode = uniform(props.gRow[2])
-  const brNode = uniform(props.bRow[0])
-  const bgNode = uniform(props.bRow[1])
-  const bbNode = uniform(props.bRow[2])
+  const rrNode = uniform(rRow[0])
+  const rgNode = uniform(rRow[1])
+  const rbNode = uniform(rRow[2])
+  const grNode = uniform(gRow[0])
+  const ggNode = uniform(gRow[1])
+  const gbNode = uniform(gRow[2])
+  const brNode = uniform(bRow[0])
+  const bgNode = uniform(bRow[1])
+  const bbNode = uniform(bRow[2])
 
   watch(
-    () => props.rRow,
+    () => rRow,
     ([r, g, b]) => {
       rrNode.value = r
       rgNode.value = g
@@ -47,7 +40,7 @@
     }
   )
   watch(
-    () => props.gRow,
+    () => gRow,
     ([r, g, b]) => {
       grNode.value = r
       ggNode.value = g
@@ -55,7 +48,7 @@
     }
   )
   watch(
-    () => props.bRow,
+    () => bRow,
     ([r, g, b]) => {
       brNode.value = r
       bgNode.value = g
@@ -68,5 +61,5 @@
     const g = prev.r.mul(grNode).add(prev.g.mul(ggNode)).add(prev.b.mul(gbNode))
     const b = prev.r.mul(brNode).add(prev.g.mul(bgNode)).add(prev.b.mul(bbNode))
     return vec4(vec3(r, g, b), prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/ChebyshevNoiseField.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 { float, time, uniform, vec4 } from 'three/tsl'
 
   import { simplexNoise2D } from '../../shaders/common/noise'
@@ -13,54 +9,58 @@
    * where n, n2 are two simplex noise octaves at different frequencies.
    * Produces a noise-eroded cross/box silhouette. Outputs a float mask for CosinePalette.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Horizontal scale of the box */
-      scaleX?: number
-      /** Vertical scale of the box */
-      scaleY?: number
-      /** Noise frequency for the first octave (X distortion) */
-      noiseFreq1?: number
-      /** Noise frequency for the second octave (Y distortion) */
-      noiseFreq2?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    { scaleX: 2, scaleY: 2, noiseFreq1: 1.5, noiseFreq2: 2.3, speed: 0.2, order: 0 }
-  )
+  const {
+    scaleX = 2,
+    scaleY = 2,
+    noiseFreq1 = 1.5,
+    noiseFreq2 = 2.3,
+    speed = 0.2,
+    order = 0,
+  } = defineProps<{
+    /** Horizontal scale of the box */
+    scaleX?: number
+    /** Vertical scale of the box */
+    scaleY?: number
+    /** Noise frequency for the first octave (X distortion) */
+    noiseFreq1?: number
+    /** Noise frequency for the second octave (Y distortion) */
+    noiseFreq2?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
-  const scaleXNode = uniform(props.scaleX)
-  const scaleYNode = uniform(props.scaleY)
-  const freq1Node = uniform(props.noiseFreq1)
-  const freq2Node = uniform(props.noiseFreq2)
-  const speedNode = uniform(props.speed)
+  const scaleXNode = uniform(scaleX)
+  const scaleYNode = uniform(scaleY)
+  const freq1Node = uniform(noiseFreq1)
+  const freq2Node = uniform(noiseFreq2)
+  const speedNode = uniform(speed)
   watch(
-    () => props.scaleX,
+    () => scaleX,
     (v) => {
       scaleXNode.value = v
     }
   )
   watch(
-    () => props.scaleY,
+    () => scaleY,
     (v) => {
       scaleYNode.value = v
     }
   )
   watch(
-    () => props.noiseFreq1,
+    () => noiseFreq1,
     (v) => {
       freq1Node.value = v
     }
   )
   watch(
-    () => props.noiseFreq2,
+    () => noiseFreq2,
     (v) => {
       freq2Node.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -83,5 +83,5 @@
       .max(float(0))
 
     return vec4(box, box, box, float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,50 +1,48 @@
-<!-- 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 { checker } from '../../shaders/common/shapes'
 
-  const props = withDefaults(
-    defineProps<{
-      /** First checker colour */
-      colorA?: string
-      /** Second checker colour */
-      colorB?: string
-      /** Number of checker tiles across each axis */
-      scale?: number
-      order?: number
-    }>(),
-    { colorA: '#ffffff', colorB: '#000000', scale: 10, order: 0 }
-  )
+  const {
+    colorA = '#ffffff',
+    colorB = '#000000',
+    scale = 10,
+    order = 0,
+  } = defineProps<{
+    /** First checker colour */
+    colorA?: string
+    /** Second checker colour */
+    colorB?: string
+    /** Number of checker tiles across each axis */
+    scale?: 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 colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const scaleNode = uniform(scale)
   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
     }
@@ -56,5 +54,5 @@
     const uvCurrent = pipeline.uvNode.value
     const t = checker(uvCurrent, scaleNode)
     return vec4(mix(colorANode, colorBNode, t), 1.0)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,44 +1,42 @@
-<!-- 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, sin, time, uniform, vec3, vec4 } from 'three/tsl'
 
   /**
    * Chromatic aberration — RGB channel offset approximated without texture sampling.
    * Shifts colour contribution along each channel using screen-position phase offsets.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** How far channels separate */
-      strength?: number
-      /** Boost aberration at screen edges */
-      edgeFalloff?: number
-      /** Animation speed for subtle drift */
-      speed?: number
-      order?: number
-    }>(),
-    { strength: 0.008, edgeFalloff: 1.5, speed: 0.2, order: 0 }
-  )
+  const {
+    strength = 0.008,
+    edgeFalloff = 1.5,
+    speed = 0.2,
+    order = 0,
+  } = defineProps<{
+    /** How far channels separate */
+    strength?: number
+    /** Boost aberration at screen edges */
+    edgeFalloff?: number
+    /** Animation speed for subtle drift */
+    speed?: number
+    order?: number
+  }>()
 
-  const strengthNode = uniform(props.strength)
-  const edgeNode = uniform(props.edgeFalloff)
-  const speedNode = uniform(props.speed)
+  const strengthNode = uniform(strength)
+  const edgeNode = uniform(edgeFalloff)
+  const speedNode = uniform(speed)
   watch(
-    () => props.strength,
+    () => strength,
     (v) => {
       strengthNode.value = v
     }
   )
   watch(
-    () => props.edgeFalloff,
+    () => edgeFalloff,
     (v) => {
       edgeNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -64,5 +62,5 @@
     const bContrib = prev.z.mul(float(1).add(bShift.mul(fromCenter)))
 
     return vec4(vec3(rContrib, gContrib, bContrib), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,54 +1,55 @@
-<!-- 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, sin, time, uniform, vec3, vec4 } from 'three/tsl'
 
+  import type { TSLNode } from '../../shaders/types'
+
   /**
    * Per-channel animated sine waves along the Y axis — the CRT chromatic oscillation effect.
    * Each RGB channel gets its own phase offset, producing subtle chromatic breathing.
    * Pattern: R: sin(freq/res * uv.y + (-time*speed - phaseOffset))
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Wave amplitude (fraction of screen) */
-      amplitude?: number
-      /** Number of wave cycles across the screen height */
-      frequency?: number
-      /** Wave scroll speed */
-      speed?: number
-      /** Phase separation between RGB channels (radians) */
-      phaseOffset?: number
-      order?: number
-    }>(),
-    { amplitude: 0.075, frequency: 20, speed: 2, phaseOffset: 0.4, order: 0 }
-  )
+  const {
+    amplitude = 0.075,
+    frequency = 20,
+    speed = 2,
+    phaseOffset = 0.4,
+    order = 0,
+  } = defineProps<{
+    /** Wave amplitude (fraction of screen) */
+    amplitude?: number
+    /** Number of wave cycles across the screen height */
+    frequency?: number
+    /** Wave scroll speed */
+    speed?: number
+    /** Phase separation between RGB channels (radians) */
+    phaseOffset?: number
+    order?: number
+  }>()
 
-  const ampNode = uniform(props.amplitude)
-  const freqNode = uniform(props.frequency)
-  const speedNode = uniform(props.speed)
-  const phaseNode = uniform(props.phaseOffset)
+  const ampNode = uniform(amplitude)
+  const freqNode = uniform(frequency)
+  const speedNode = uniform(speed)
+  const phaseNode = uniform(phaseOffset)
   watch(
-    () => props.amplitude,
+    () => amplitude,
     (v) => {
       ampNode.value = v
     }
   )
   watch(
-    () => props.frequency,
+    () => frequency,
     (v) => {
       freqNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
   watch(
-    () => props.phaseOffset,
+    () => phaseOffset,
     (v) => {
       phaseNode.value = v
     }
@@ -61,14 +62,14 @@
     const t = time.mul(speedNode).negate()
 
     const base = freqNode.mul(uvCurrent.y)
-    const r = sin(base.add(t.sub(phaseNode)))
+    const r: TSLNode = sin(base.add(t.sub(phaseNode)))
       .mul(ampNode)
       .add(float(1).sub(ampNode))
-    const g = sin(base.add(t)).mul(ampNode).add(float(1).sub(ampNode))
-    const b = sin(base.add(t.add(phaseNode)))
+    const g: TSLNode = sin(base.add(t)).mul(ampNode).add(float(1).sub(ampNode))
+    const b: TSLNode = sin(base.add(t.add(phaseNode)))
       .mul(ampNode)
       .add(float(1).sub(ampNode))
 
     return vec4(prev.xyz.mul(vec3(r, g, b)), prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/Circle.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 { Color, Vector3 } from 'three'
   import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      radius?: number
-      softness?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', radius: 0.35, softness: 0.01, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    radius = 0.35,
+    softness = 0.01,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    radius?: 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 radiusNode = uniform(props.radius)
-  const softnessNode = uniform(props.softness)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const radiusNode = uniform(radius)
+  const softnessNode = 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.radius,
+    () => radius,
     (v) => {
       radiusNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
@@ -60,5 +59,5 @@
     const d = uv.sub(0.5).length()
     const mask = smoothstep(radiusNode.add(softnessNode), radiusNode.sub(softnessNode), d)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>