kmcom-nuxt-layers 2.2.0 → 2.2.1

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

@@ -1,31 +1,30 @@
-<!-- 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 { blendMultiply } 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
     }
@@ -33,6 +32,6 @@
 
   useShaderStage(
     (prev) => vec4(mix(prev.xyz, blendMultiply(prev.xyz, colorNode), opacityNode), prev.w),
-    props.order
+    order
   )
 </script>

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

@@ -1,83 +1,77 @@
-<!-- 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 { fbm2D } from '../../shaders/common/noise'
 
   /** Linear gradient with per-pixel FBM noise offset — living, organic gradient. */
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Gradient axis angle in degrees */
-      angle?: number
-      /** Noise displacement strength */
-      noiseStrength?: number
-      /** Noise input scale */
-      noiseScale?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#1a0a5a',
-      colorB: '#ff8866',
-      angle: 0,
-      noiseStrength: 0.3,
-      noiseScale: 2,
-      speed: 0.15,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#1a0a5a',
+    colorB = '#ff8866',
+    angle = 0,
+    noiseStrength = 0.3,
+    noiseScale = 2,
+    speed = 0.15,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Gradient axis angle in degrees */
+    angle?: number
+    /** Noise displacement strength */
+    noiseStrength?: number
+    /** Noise input scale */
+    noiseScale?: 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 colorANode = toVec3Node(props.colorA)
-  const colorBNode = toVec3Node(props.colorB)
-  const angleNode = uniform((props.angle * Math.PI) / 180)
-  const noiseStrNode = uniform(props.noiseStrength)
-  const noiseScaleNode = uniform(props.noiseScale)
-  const speedNode = uniform(props.speed)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const angleNode = uniform((angle * Math.PI) / 180)
+  const noiseStrNode = uniform(noiseStrength)
+  const noiseScaleNode = uniform(noiseScale)
+  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.angle,
+    () => angle,
     (v) => {
       angleNode.value = (v * Math.PI) / 180
     }
   )
   watch(
-    () => props.noiseStrength,
+    () => noiseStrength,
     (v) => {
       noiseStrNode.value = v
     }
   )
   watch(
-    () => props.noiseScale,
+    () => noiseScale,
     (v) => {
       noiseScaleNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -91,5 +85,5 @@
     const base = uv.x.mul(angleNode.cos()).add(uv.y.mul(angleNode.sin()))
     const t = base.add(n.mul(noiseStrNode)).clamp(float(0), float(1))
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/NoisyGradientBlend.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 { Color, Vector3 } from 'three'
   import { cos, float, mix, sin, smoothstep, time, uniform, vec2, vec4 } from 'three/tsl'
 
@@ -15,42 +12,39 @@
    * Exposes all params individually so the pipeline can still intercept at any stage,
    * but provides a convenient self-contained starting point.
    */
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Noise input scale */
-      noiseScale?: number
-      /** Max rotation amount driven by noise (degrees) */
-      rotationAmount?: number
-      /** Sine warp frequency */
-      warpFrequency?: number
-      /** Sine warp amplitude (higher = subtler) */
-      warpAmplitude?: number
-      /** Gradient blend angle (degrees) */
-      blendAngle?: number
-      /** Smoothstep lower edge */
-      edge0?: number
-      /** Smoothstep upper edge */
-      edge1?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#1a0a5a',
-      colorB: '#ff6688',
-      noiseScale: 1,
-      rotationAmount: 720,
-      warpFrequency: 3,
-      warpAmplitude: 3,
-      blendAngle: 45,
-      edge0: 0.2,
-      edge1: 0.8,
-      speed: 0.3,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#1a0a5a',
+    colorB = '#ff6688',
+    noiseScale = 1,
+    rotationAmount = 720,
+    warpFrequency = 3,
+    warpAmplitude = 3,
+    blendAngle = 45,
+    edge0 = 0.2,
+    edge1 = 0.8,
+    speed = 0.3,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Noise input scale */
+    noiseScale?: number
+    /** Max rotation amount driven by noise (degrees) */
+    rotationAmount?: number
+    /** Sine warp frequency */
+    warpFrequency?: number
+    /** Sine warp amplitude (higher = subtler) */
+    warpAmplitude?: number
+    /** Gradient blend angle (degrees) */
+    blendAngle?: number
+    /** Smoothstep lower edge */
+    edge0?: number
+    /** Smoothstep upper edge */
+    edge1?: number
+    /** Animation speed */
+    speed?: number
+    order?: number
+  }>()
 
   const DEG2RAD = Math.PI / 180
 
@@ -59,75 +53,75 @@
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const colorANode = toVec3Node(props.colorA)
-  const colorBNode = toVec3Node(props.colorB)
-  const noiseScaleNode = uniform(props.noiseScale)
-  const rotAmountNode = uniform(props.rotationAmount * DEG2RAD)
-  const warpFreqNode = uniform(props.warpFrequency)
-  const warpAmpNode = uniform(props.warpAmplitude)
-  const blendAngleNode = uniform(props.blendAngle * DEG2RAD)
-  const edge0Node = uniform(props.edge0)
-  const edge1Node = uniform(props.edge1)
-  const speedNode = uniform(props.speed)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const noiseScaleNode = uniform(noiseScale)
+  const rotAmountNode = uniform(rotationAmount * DEG2RAD)
+  const warpFreqNode = uniform(warpFrequency)
+  const warpAmpNode = uniform(warpAmplitude)
+  const blendAngleNode = uniform(blendAngle * DEG2RAD)
+  const edge0Node = uniform(edge0)
+  const edge1Node = uniform(edge1)
+  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.noiseScale,
+    () => noiseScale,
     (v) => {
       noiseScaleNode.value = v
     }
   )
   watch(
-    () => props.rotationAmount,
+    () => rotationAmount,
     (v) => {
       rotAmountNode.value = v * DEG2RAD
     }
   )
   watch(
-    () => props.warpFrequency,
+    () => warpFrequency,
     (v) => {
       warpFreqNode.value = v
     }
   )
   watch(
-    () => props.warpAmplitude,
+    () => warpAmplitude,
     (v) => {
       warpAmpNode.value = v
     }
   )
   watch(
-    () => props.blendAngle,
+    () => blendAngle,
     (v) => {
       blendAngleNode.value = v * DEG2RAD
     }
   )
   watch(
-    () => props.edge0,
+    () => edge0,
     (v) => {
       edge0Node.value = v
     }
   )
   watch(
-    () => props.edge1,
+    () => edge1,
     (v) => {
       edge1Node.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -172,5 +166,5 @@
     const blend = smoothstep(edge0Node, edge1Node, rotX)
 
     return vec4(mix(colorANode, colorBNode, blend), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,31 +1,30 @@
-<!-- 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 { blendOverlay } 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
     }
@@ -33,6 +32,6 @@
 
   useShaderStage(
     (prev) => vec4(mix(prev.xyz, blendOverlay(prev.xyz, colorNode), opacityNode), prev.w),
-    props.order
+    order
   )
 </script>

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

@@ -1,9 +1,5 @@
-<!-- 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, floor, time, uniform, vec4 } from 'three/tsl'
+  import { floor, time, uniform, vec4 } from 'three/tsl'
 
   import { paperTexture } from '../../shaders/common/grain'
 
@@ -11,36 +7,38 @@
    * Paper texture overlay — multi-octave grain that reads like coarse paper or canvas.
    * Adds tactile analogue feel to any underlying image.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Texture scale — higher = finer grain pattern */
-      scale?: number
-      /** Overlay intensity */
-      intensity?: number
-      /** Animate slowly for a living-paper effect (0 = static) */
-      speed?: number
-      order?: number
-    }>(),
-    { scale: 12, intensity: 0.08, speed: 0, order: 0 }
-  )
+  const {
+    scale = 12,
+    intensity = 0.08,
+    speed = 0,
+    order = 0,
+  } = defineProps<{
+    /** Texture scale — higher = finer grain pattern */
+    scale?: number
+    /** Overlay intensity */
+    intensity?: number
+    /** Animate slowly for a living-paper effect (0 = static) */
+    speed?: number
+    order?: number
+  }>()
 
-  const scaleNode = uniform(props.scale)
-  const intensityNode = uniform(props.intensity)
-  const speedNode = uniform(props.speed)
+  const scaleNode = uniform(scale)
+  const intensityNode = uniform(intensity)
+  const speedNode = uniform(speed)
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       intensityNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -54,5 +52,5 @@
 
     const tex = paperTexture(uv, scaleNode, intensityNode, seed)
     return vec4(prev.xyz.add(tex), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,74 +1,67 @@
-<!-- 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 { float, mix, uniform, vec4 } from 'three/tsl'
 
   import { polygon } from '../../shaders/common/shapes'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Number of sides */
-      sides?: number
-      radius?: number
-      softness?: number
-      /** Rotation offset in degrees */
-      rotation?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      sides: 6,
-      radius: 0.35,
-      softness: 0.01,
-      rotation: 0,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    sides = 6,
+    radius = 0.35,
+    softness = 0.01,
+    rotation = 0,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Number of sides */
+    sides?: number
+    radius?: number
+    softness?: number
+    /** 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 radiusNode = uniform(props.radius)
-  const softnessNode = uniform(props.softness)
-  const rotationNode = uniform((props.rotation * Math.PI) / 180)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const radiusNode = uniform(radius)
+  const softnessNode = uniform(softness)
+  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.radius,
+    () => radius,
     (v) => {
       radiusNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
   )
   watch(
-    () => props.rotation,
+    () => rotation,
     (v) => {
       rotationNode.value = (v * Math.PI) / 180
     }
@@ -78,7 +71,7 @@
 
   useShaderStage(() => {
     const uv = pipeline.uvNode.value
-    const mask = polygon(uv, [0.5, 0.5], radiusNode, props.sides, softnessNode)
+    const mask = polygon(uv, [0.5, 0.5], sides, radiusNode, rotationNode, softnessNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,21 +1,15 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { float, floor, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Number of colour steps per channel */
-      steps?: number
-      order?: number
-    }>(),
-    { steps: 6, order: 0 }
-  )
+  const { steps = 6, order = 0 } = defineProps<{
+    /** Number of colour steps per channel */
+    steps?: number
+    order?: number
+  }>()
 
-  const stepsNode = uniform(props.steps)
+  const stepsNode = uniform(steps)
   watch(
-    () => props.steps,
+    () => steps,
     (v) => {
       stepsNode.value = v
     }
@@ -24,5 +18,5 @@
   useShaderStage((prev) => {
     const posterised = floor(prev.xyz.mul(stepsNode)).div(stepsNode.sub(float(1)))
     return vec4(posterised, prev.w)
-  }, props.order)
+  }, order)
 </script>