kmcom-nuxt-layers 2.2.0 → 2.2.1

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

@@ -1,65 +1,65 @@
-<!-- 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'
 
   import { sdBox2d } from '../../shaders/common/sdf'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Length of each arm */
-      size?: number
-      /** Width of each arm */
-      thickness?: number
-      softness?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', size: 0.4, thickness: 0.1, softness: 0.01, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    size = 0.4,
+    thickness = 0.1,
+    softness = 0.01,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Length of each arm */
+    size?: number
+    /** Width of each arm */
+    thickness?: 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 sizeNode = uniform(props.size)
-  const thickNode = uniform(props.thickness)
-  const softnessNode = uniform(props.softness)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const sizeNode = uniform(size)
+  const thickNode = uniform(thickness)
+  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.size,
+    () => size,
     (v) => {
       sizeNode.value = v
     }
   )
   watch(
-    () => props.thickness,
+    () => thickness,
     (v) => {
       thickNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
@@ -76,5 +76,5 @@
     const d = dH.min(dV)
     const mask = smoothstep(softnessNode, softnessNode.negate(), d)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,58 +1,57 @@
-<!-- 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, time, uniform, vec3, vec4 } from 'three/tsl'
 
   import { curlNoise3d } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Colour to mix in at curl peak */
-      color?: string
-      /** Blend opacity */
-      opacity?: number
-      /** Input scale for the curl noise */
-      scale?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    { color: '#ffffff', opacity: 1, scale: 1.5, speed: 0.2, order: 0 }
-  )
+  const {
+    color = '#ffffff',
+    opacity = 1,
+    scale = 1.5,
+    speed = 0.2,
+    order = 0,
+  } = defineProps<{
+    /** Colour to mix in at curl peak */
+    color?: string
+    /** Blend opacity */
+    opacity?: number
+    /** Input scale for the curl noise */
+    scale?: number
+    /** Animation 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 colorNode = toVec3Node(props.color)
-  const opacityNode = uniform(props.opacity)
-  const scaleNode = uniform(props.scale)
-  const speedNode = uniform(props.speed)
+  const colorNode = toVec3Node(color)
+  const opacityNode = uniform(opacity)
+  const scaleNode = uniform(scale)
+  const speedNode = uniform(speed)
   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
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -67,5 +66,5 @@
     const curl = curlNoise3d(p).x.mul(0.5).add(0.5)
     const blended = mix(prev.xyz, colorNode, curl.mul(opacityNode))
     return vec4(blended, prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/DarkenBlend.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 { blendDarken } 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, blendDarken(prev.xyz, colorNode), opacityNode), prev.w),
-    props.order
+    order
   )
 </script>

package/layers/shader/app/components/Pipeline/DayNightCycle.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 { abs, float, mix, pow, sign, time, uniform, vec4 } from 'three/tsl'
 
@@ -11,52 +7,55 @@
    * The phobon easing: t = (sign(cycle) * pow(abs(cycle), 0.6) + 1) / 2
    * where cycle = sin(time * speed).
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Colour during the light phase */
-      colorLight?: string
-      /** Colour during the dark phase */
-      colorDark?: string
-      /** Cycle speed in radians per second */
-      speed?: number
-      /** Mix opacity over prev colour */
-      opacity?: number
-      order?: number
-    }>(),
-    { colorLight: '#ffffff', colorDark: '#000033', speed: 0.3, opacity: 1, order: 0 }
-  )
+  const {
+    colorLight = '#ffffff',
+    colorDark = '#000033',
+    speed = 0.3,
+    opacity = 1,
+    order = 0,
+  } = defineProps<{
+    /** Colour during the light phase */
+    colorLight?: string
+    /** Colour during the dark phase */
+    colorDark?: string
+    /** Cycle speed in radians per second */
+    speed?: number
+    /** Mix opacity over prev colour */
+    opacity?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const lightNode = toVec3Node(props.colorLight)
-  const darkNode = toVec3Node(props.colorDark)
-  const speedNode = uniform(props.speed)
-  const opacityNode = uniform(props.opacity)
+  const lightNode = toVec3Node(colorLight)
+  const darkNode = toVec3Node(colorDark)
+  const speedNode = uniform(speed)
+  const opacityNode = uniform(opacity)
   watch(
-    () => props.colorLight,
+    () => colorLight,
     (v) => {
       const c = new Color(v)
       lightNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorDark,
+    () => colorDark,
     (v) => {
       const c = new Color(v)
       darkNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
@@ -70,5 +69,5 @@
       .div(2)
     const colour = mix(darkNode, lightNode, t)
     return vec4(mix(prev.xyz, colour, opacityNode), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,28 +1,21 @@
-<!-- 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 { desaturate } from '../../shaders/common/blend'
 
-  const props = withDefaults(
-    defineProps<{
-      /** 0 = original colour, 1 = full greyscale */
-      amount?: number
-      order?: number
-    }>(),
-    { amount: 1, order: 0 }
-  )
+  const { amount = 1, order = 0 } = defineProps<{
+    /** 0 = original colour, 1 = full greyscale */
+    amount?: number
+    order?: number
+  }>()
 
-  const amountNode = uniform(props.amount)
+  const amountNode = uniform(amount)
   watch(
-    () => props.amount,
+    () => amount,
     (v) => {
       amountNode.value = v
     }
   )
 
-  useShaderStage((prev) => vec4(desaturate(prev.xyz, amountNode), prev.w), props.order)
+  useShaderStage((prev) => vec4(desaturate(prev.xyz, amountNode), prev.w), order)
 </script>

package/layers/shader/app/components/Pipeline/DiagonalGradient.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 { cos, float, mix, sin, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Gradient angle in degrees (0 = left→right, 90 = bottom→top) */
-      angle?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', angle: 45, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    angle = 45,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Gradient angle in degrees (0 = left→right, 90 = bottom→top) */
+    angle?: 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 angleNode = uniform((props.angle * Math.PI) / 180)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const angleNode = uniform((angle * 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.angle,
+    () => angle,
     (v) => {
       angleNode.value = (v * Math.PI) / 180
     }
@@ -55,5 +53,5 @@
       .add(uv.y.mul(sin(angleNode)))
       .clamp(float(0), float(1))
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,47 +1,45 @@
-<!-- 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'
 
   /** Chebyshev-distance diamond gradient: max(|x|, |y|) from centre. */
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Scale — higher = faster falloff */
-      scale?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', scale: 1, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    scale = 1,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Scale — higher = faster falloff */
+    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
     }
@@ -54,5 +52,5 @@
     const centered = uv.sub(0.5).abs()
     const t = centered.x.max(centered.y).mul(scaleNode).mul(2).min(float(1))
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/DifferenceBlend.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 { blendDifference } 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, blendDifference(prev.xyz, colorNode), opacityNode), prev.w),
-    props.order
+    order
   )
 </script>

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

@@ -1,34 +1,31 @@
-<!-- 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 { clamp, float, mix, uniform, vec4 } from 'three/tsl'
 
-  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 = (() => {
-    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
     }
@@ -37,5 +34,5 @@
   useShaderStage((prev) => {
     const divided = clamp(prev.xyz.div(colorNode.max(float(0.001))), float(0), float(1))
     return vec4(mix(prev.xyz, divided, opacityNode), prev.w)
-  }, props.order)
+  }, order)
 </script>