kmcom-nuxt-layers 2.2.0 → 2.2.1

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

@@ -1,56 +1,58 @@
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color, Vector2, Vector3 } from 'three'
-  import { float, smoothstep, uniform, vec2, vec3, vec4 } from 'three/tsl'
+  import { float, smoothstep, uniform, vec2, vec4 } from 'three/tsl'
 
   /**
    * Procedural lens flare — starburst + ghost circle artefacts along the flare axis.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Light source position in UV space */
-      position?: [number, number]
-      /** Flare colour */
-      color?: string
-      /** Overall brightness */
-      intensity?: number
-      /** How many ghost circles along the axis */
-      ghostCount?: number
-      order?: number
-    }>(),
-    { position: () => [0.7, 0.8], color: '#fffde0', intensity: 0.6, ghostCount: 4, order: 0 }
-  )
+  const {
+    position = [0.7, 0.8],
+    color = '#fffde0',
+    intensity = 0.6,
+    ghostCount = 4,
+    order = 0,
+  } = defineProps<{
+    /** Light source position in UV space */
+    position?: [number, number]
+    /** Flare colour */
+    color?: string
+    /** Overall brightness */
+    intensity?: number
+    /** How many ghost circles along the axis */
+    ghostCount?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const posNode = uniform(new Vector2(...props.position))
-  const colorNode = toVec3Node(props.color)
-  const intensityNode = uniform(props.intensity)
-  const ghostCountNode = uniform(props.ghostCount)
+  const posNode = uniform(new Vector2(...position))
+  const colorNode = toVec3Node(color)
+  const intensityNode = uniform(intensity)
+  const ghostCountNode = uniform(ghostCount)
   watch(
-    () => props.position,
+    () => position,
     ([x, y]) => {
       posNode.value.set(x, y)
     }
   )
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       const c = new Color(v)
       colorNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       intensityNode.value = v
     }
   )
   watch(
-    () => props.ghostCount,
+    () => ghostCount,
     (v) => {
       ghostCountNode.value = v
     }
@@ -82,5 +84,5 @@
     const flare = colorNode.mul(burst.add(ghosts))
 
     return vec4(prev.xyz.add(flare), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,29 +1,30 @@
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color } from 'three'
   import { mix, uniform, vec4 } from 'three/tsl'
 
   import { blendLighten } 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
     }
@@ -31,6 +32,6 @@
 
   useShaderStage(
     (prev) => vec4(mix(prev.xyz, blendLighten(prev.xyz, colorNode), opacityNode), prev.w),
-    props.order
+    order
   )
 </script>

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

@@ -1,35 +1,31 @@
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color } from 'three'
   import { mix, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      axis?: 'x' | 'y'
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      axis: 'y',
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    axis = 'y',
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    axis?: 'x' | 'y'
+    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)
   watch(
-    () => props.colorA,
+    () => colorA,
     (v) => {
       colorANode.value.set(v)
     }
   )
   watch(
-    () => props.colorB,
+    () => colorB,
     (v) => {
       colorBNode.value.set(v)
     }
@@ -38,7 +34,7 @@
   const { uvNode } = useShaderPipelineContext()
 
   useShaderStage((_prev) => {
-    const t = props.axis === 'x' ? uvNode.value.x : uvNode.value.y
+    const t = axis === 'x' ? uvNode.value.x : uvNode.value.y
     return vec4(mix(colorANode, colorBNode, t), 1.0)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,64 +1,60 @@
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color, Vector3 } from 'three'
   import { float, mix, step, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Optional third stop (defaults to colorB when omitted → 2-stop gradient) */
-      colorC?: string
-      /** Optional fourth stop (defaults to colorC when omitted → 3-stop gradient) */
-      colorD?: string
-      axis?: 'x' | 'y'
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      colorC: undefined,
-      colorD: undefined,
-      axis: 'y',
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    colorC,
+    colorD,
+    axis = 'y',
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Optional third stop (defaults to colorB when omitted → 2-stop gradient) */
+    colorC?: string
+    /** Optional fourth stop (defaults to colorC when omitted → 3-stop gradient) */
+    colorD?: string
+    axis?: 'x' | 'y'
+    order?: number
+  }>()
 
   function toVec3U(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const cA = toVec3U(props.colorA)
-  const cB = toVec3U(props.colorB)
-  const cC = toVec3U(props.colorC ?? props.colorB)
-  const cD = toVec3U(props.colorD ?? props.colorC ?? props.colorB)
+  const cA = toVec3U(colorA)
+  const cB = toVec3U(colorB)
+  const cC = toVec3U(colorC ?? colorB)
+  const cD = toVec3U(colorD ?? colorC ?? colorB)
 
   watch(
-    () => props.colorA,
+    () => colorA,
     (v) => {
       const c = new Color(v)
       cA.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorB,
+    () => colorB,
     (v) => {
       const c = new Color(v)
       cB.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorC,
+    () => colorC,
     (v) => {
-      const c = new Color(v ?? props.colorB)
+      const c = new Color(v ?? colorB)
       cC.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorD,
+    () => colorD,
     (v) => {
-      const c = new Color(v ?? props.colorC ?? props.colorB)
+      const c = new Color(v ?? colorC ?? colorB)
       cD.value.set(c.r, c.g, c.b)
     }
   )
@@ -66,7 +62,7 @@
   const pipeline = useShaderPipelineContext()
 
   useShaderStage(() => {
-    const t = props.axis === 'x' ? pipeline.uvNode.value.x : pipeline.uvNode.value.y
+    const t = axis === 'x' ? pipeline.uvNode.value.x : pipeline.uvNode.value.y
 
     // Map t [0,1] to 3 equal segments, clamping so t=1 maps to lt=1 not lt=0
     const tN = t.mul(float(3)).min(float(2.9999))
@@ -85,5 +81,5 @@
     // Cascade: start with c01, replace with c12 at seg>=1, replace with c23 at seg>=2
     const col = mix(mix(c01, c12, inSeg1), c23, inSeg2)
     return vec4(col, float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-  // @ts-nocheck
   import { float, pow, uniform, vec4 } from 'three/tsl'
 
   /**
@@ -7,18 +6,15 @@
    * Use as the last step in HDR pipelines before output.
    * Approximate form: pow(col, 1/2.2).
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Gamma exponent — 2.2 matches sRGB standard */
-      gamma?: number
-      order?: number
-    }>(),
-    { gamma: 2.2, order: 0 }
-  )
+  const { gamma = 2.2, order = 0 } = defineProps<{
+    /** Gamma exponent — 2.2 matches sRGB standard */
+    gamma?: number
+    order?: number
+  }>()
 
-  const gammaNode = uniform(props.gamma)
+  const gammaNode = uniform(gamma)
   watch(
-    () => props.gamma,
+    () => gamma,
     (v) => {
       gammaNode.value = v
     }
@@ -26,6 +22,6 @@
 
   useShaderStage(
     (prev) => vec4(pow(prev.xyz.max(float(0)), float(1).div(gammaNode)), prev.w),
-    props.order
+    order
   )
 </script>

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

@@ -1,94 +1,88 @@
-<!-- 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, sin, time, uniform, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Base (vein background) colour */
-      colorA?: string
-      /** Vein colour */
-      colorB?: string
-      /** Marble vein frequency */
-      frequency?: number
-      /** FBM noise scale for vein turbulence */
-      noiseScale?: number
-      /** Noise strength applied to sine input */
-      noiseStrength?: number
-      /** Vein sharpness — higher = thinner veins */
-      sharpness?: number
-      /** Animation speed */
-      speed?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#f5f0e8',
-      colorB: '#6a5a4a',
-      frequency: 5,
-      noiseScale: 3,
-      noiseStrength: 8,
-      sharpness: 4,
-      speed: 0,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#f5f0e8',
+    colorB = '#6a5a4a',
+    frequency = 5,
+    noiseScale = 3,
+    noiseStrength = 8,
+    sharpness = 4,
+    speed = 0,
+    order = 0,
+  } = defineProps<{
+    /** Base (vein background) colour */
+    colorA?: string
+    /** Vein colour */
+    colorB?: string
+    /** Marble vein frequency */
+    frequency?: number
+    /** FBM noise scale for vein turbulence */
+    noiseScale?: number
+    /** Noise strength applied to sine input */
+    noiseStrength?: number
+    /** Vein sharpness — higher = thinner veins */
+    sharpness?: 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 freqNode = uniform(props.frequency)
-  const noiseScaleNode = uniform(props.noiseScale)
-  const noiseStrNode = uniform(props.noiseStrength)
-  const sharpNode = uniform(props.sharpness)
-  const speedNode = uniform(props.speed)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const freqNode = uniform(frequency)
+  const noiseScaleNode = uniform(noiseScale)
+  const noiseStrNode = uniform(noiseStrength)
+  const sharpNode = uniform(sharpness)
+  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.frequency,
+    () => frequency,
     (v) => {
       freqNode.value = v
     }
   )
   watch(
-    () => props.noiseScale,
+    () => noiseScale,
     (v) => {
       noiseScaleNode.value = v
     }
   )
   watch(
-    () => props.noiseStrength,
+    () => noiseStrength,
     (v) => {
       noiseStrNode.value = v
     }
   )
   watch(
-    () => props.sharpness,
+    () => sharpness,
     (v) => {
       sharpNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -105,5 +99,5 @@
       .abs()
       .pow(sharpNode)
     return vec4(mix(colorANode, colorBNode, vein), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/MixBlend.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 { smoothstep, uniform, vec4 } from 'three/tsl'
 
   /**
@@ -11,34 +8,31 @@
    * Example (Grainient final step):
    *   <MixBlend axis="y" :edge0="0.45" :edge1="0.55" />
    */
-  const props = withDefaults(
-    defineProps<{
-      axis?: 'x' | 'y'
-      edge0?: number
-      edge1?: number
-      /** 0 = fade to transparent, 1 = fade to opaque (keep prev) */
-      invert?: boolean
-      order?: number
-    }>(),
-    {
-      axis: 'y',
-      edge0: 0.45,
-      edge1: 0.55,
-      invert: false,
-      order: 0,
-    }
-  )
+  const {
+    axis = 'y',
+    edge0 = 0.45,
+    edge1 = 0.55,
+    invert = false,
+    order = 0,
+  } = defineProps<{
+    axis?: 'x' | 'y'
+    edge0?: number
+    edge1?: number
+    /** 0 = fade to transparent, 1 = fade to opaque (keep prev) */
+    invert?: boolean
+    order?: number
+  }>()
 
-  const edge0Node = uniform(props.edge0)
-  const edge1Node = uniform(props.edge1)
+  const edge0Node = uniform(edge0)
+  const edge1Node = uniform(edge1)
   watch(
-    () => props.edge0,
+    () => edge0,
     (v) => {
       edge0Node.value = v
     }
   )
   watch(
-    () => props.edge1,
+    () => edge1,
     (v) => {
       edge1Node.value = v
     }
@@ -47,9 +41,9 @@
   const { uvNode } = useShaderPipelineContext()
 
   useShaderStage((prev) => {
-    const coord = props.axis === 'x' ? uvNode.value.x : uvNode.value.y
+    const coord = axis === 'x' ? uvNode.value.x : uvNode.value.y
     const mask = smoothstep(edge0Node, edge1Node, coord)
-    const alpha = props.invert ? mask.oneMinus() : mask
+    const alpha = invert ? mask.oneMinus() : mask
     return vec4(prev.xyz, prev.w.mul(alpha))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,46 +1,41 @@
-<!-- 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 { uniform, vec4 } from 'three/tsl'
 
   import { desaturate } from '../../shaders/common/blend'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Tint colour applied after desaturation */
-      color?: string
-      /** How much to desaturate before tinting: 1 = full greyscale */
-      desaturation?: number
-      order?: number
-    }>(),
-    { color: '#4466aa', desaturation: 1, order: 0 }
-  )
+  const {
+    color = '#4466aa',
+    desaturation = 1,
+    order = 0,
+  } = defineProps<{
+    /** Tint colour applied after desaturation */
+    color?: string
+    /** How much to desaturate before tinting: 1 = full greyscale */
+    desaturation?: 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 desatNode = uniform(props.desaturation)
+  const colorNode = toVec3Node(color)
+  const desatNode = uniform(desaturation)
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       const c = new Color(v)
       colorNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.desaturation,
+    () => desaturation,
     (v) => {
       desatNode.value = v
     }
   )
 
-  useShaderStage(
-    (prev) => vec4(desaturate(prev.xyz, desatNode).mul(colorNode), prev.w),
-    props.order
-  )
+  useShaderStage((prev) => vec4(desaturate(prev.xyz, desatNode).mul(colorNode), prev.w), order)
 </script>