kmcom-nuxt-layers 2.2.0 → 2.2.2

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

@@ -1,27 +1,21 @@
-<!-- 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 { saturate } from '../../shaders/common/blend'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Saturation boost: 0 = unchanged, positive = more saturated */
-      amount?: number
-      order?: number
-    }>(),
-    { amount: 0.5, order: 0 }
-  )
+  const { amount = 0.5, order = 0 } = defineProps<{
+    /** Saturation boost: 0 = unchanged, positive = more saturated */
+    amount?: number
+    order?: number
+  }>()
 
-  const amountNode = uniform(props.amount)
+  const amountNode = uniform(amount)
   watch(
-    () => props.amount,
+    () => amount,
     (v) => {
       amountNode.value = v
     }
   )
 
-  useShaderStage((prev) => vec4(saturate(prev.xyz, amountNode), prev.w), props.order)
+  useShaderStage((prev) => vec4(saturate(prev.xyz, amountNode), prev.w), order)
 </script>

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

@@ -1,41 +1,40 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { time, uniform, vec4 } from 'three/tsl'
 
   import { scanlines } from '../../shaders/common/grain'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Number of scanlines across the screen */
-      density?: number
-      /** Darkness of the lines: 0 = invisible, 1 = full black */
-      intensity?: number
-      /** Animate the lines — speed in lines/second */
-      scrollSpeed?: number
-      order?: number
-    }>(),
-    { density: 400, intensity: 0.25, scrollSpeed: 0, order: 0 }
-  )
+  const {
+    density = 400,
+    intensity = 0.25,
+    scrollSpeed = 0,
+    order = 0,
+  } = defineProps<{
+    /** Number of scanlines across the screen */
+    density?: number
+    /** Darkness of the lines: 0 = invisible, 1 = full black */
+    intensity?: number
+    /** Animate the lines — speed in lines/second */
+    scrollSpeed?: number
+    order?: number
+  }>()
 
-  const densityNode = uniform(props.density)
-  const intensityNode = uniform(props.intensity)
-  const scrollSpeedNode = uniform(props.scrollSpeed)
+  const densityNode = uniform(density)
+  const intensityNode = uniform(intensity)
+  const scrollSpeedNode = uniform(scrollSpeed)
   watch(
-    () => props.density,
+    () => density,
     (v) => {
       densityNode.value = v
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       intensityNode.value = v
     }
   )
   watch(
-    () => props.scrollSpeed,
+    () => scrollSpeed,
     (v) => {
       scrollSpeedNode.value = v
     }
@@ -48,5 +47,5 @@
     const offset = time.mul(scrollSpeedNode)
     const factor = scanlines(uvCurrent, densityNode, intensityNode, offset)
     return vec4(prev.xyz.mul(factor), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

package/layers/shader/app/components/Pipeline/ShaderDebugger.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, fract, uniform, vec3, vec4 } from 'three/tsl'
+  import { float, fract, uniform, vec3, vec4 } from 'three/tsl'
 
   /**
    * ShaderDebugger — dev-only visualization overlay for inspecting pipeline state.
@@ -17,38 +13,41 @@
    * Drop this at any `order` value to inspect that point in the pipeline.
    * Only renders in development — remove from production compositions.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Visualization mode */
-      mode?: 'uv' | 'normal' | 'grid' | 'pass'
-      /** Grid line count (grid mode) */
-      gridLines?: number
-      /** Grid line thickness */
-      gridThickness?: number
-      /** Blend with original output (0 = full debug, 1 = full original) */
-      blend?: number
-      order?: number
-    }>(),
-    { mode: 'uv', gridLines: 10, gridThickness: 0.02, blend: 0, order: 0 }
-  )
+  const {
+    mode = 'uv',
+    gridLines = 10,
+    gridThickness = 0.02,
+    blend = 0,
+    order = 0,
+  } = defineProps<{
+    /** Visualization mode */
+    mode?: 'uv' | 'normal' | 'grid' | 'pass'
+    /** Grid line count (grid mode) */
+    gridLines?: number
+    /** Grid line thickness */
+    gridThickness?: number
+    /** Blend with original output (0 = full debug, 1 = full original) */
+    blend?: number
+    order?: number
+  }>()
 
-  const gridLinesNode = uniform(props.gridLines)
-  const gridThickNode = uniform(props.gridThickness)
-  const blendNode = uniform(props.blend)
+  const gridLinesNode = uniform(gridLines)
+  const gridThickNode = uniform(gridThickness)
+  const blendNode = uniform(blend)
   watch(
-    () => props.gridLines,
+    () => gridLines,
     (v) => {
       gridLinesNode.value = v
     }
   )
   watch(
-    () => props.gridThickness,
+    () => gridThickness,
     (v) => {
       gridThickNode.value = v
     }
   )
   watch(
-    () => props.blend,
+    () => blend,
     (v) => {
       blendNode.value = v
     }
@@ -61,14 +60,14 @@
 
     let debugColour
 
-    if (props.mode === 'uv') {
+    if (mode === 'uv') {
       // Red = U, Green = V, Blue = 0
       debugColour = vec3(uv.x, uv.y, float(0))
-    } else if (props.mode === 'normal') {
+    } else if (mode === 'normal') {
       // Encodes centered UV — negative values become blue tones
       const centered = uv.sub(0.5)
       debugColour = vec3(centered.x.add(0.5), centered.y.add(0.5), float(0.5))
-    } else if (props.mode === 'grid') {
+    } else if (mode === 'grid') {
       // Grid lines via fract — line at every 1/gridLines interval
       const scaled = uv.mul(gridLinesNode)
       const fx = fract(scaled.x)
@@ -83,5 +82,5 @@
     }
 
     return vec4(prev.xyz.mix(debugColour, float(1).sub(blendNode)), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,59 +1,52 @@
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color } from 'three'
   import { float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
 
   import { simplexNoise2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      scale?: number
-      animated?: boolean
-      speed?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      scale: 3,
-      animated: true,
-      speed: 0.3,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    scale = 3,
+    animated = true,
+    speed = 0.3,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    scale?: number
+    animated?: boolean
+    speed?: number
+    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)
-  const scaleNode = uniform(props.scale)
-  const speedNode = uniform(props.speed)
+  const scaleNode = uniform(scale)
+  const speedNode = uniform(speed)
 
   watch(
-    () => props.colorA,
+    () => colorA,
     (v) => {
       colorANode.value.set(v)
     }
   )
   watch(
-    () => props.colorB,
+    () => colorB,
     (v) => {
       colorBNode.value.set(v)
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -63,9 +56,9 @@
 
   useShaderStage((_prev) => {
     // Scroll UV over time to animate noise (cheaper than 3D noise)
-    const offset = props.animated ? time.mul(speedNode) : float(0)
+    const offset = animated ? time.mul(speedNode) : float(0)
     const input = uvNode.value.mul(scaleNode).add(vec2(offset, 0))
     const n = simplexNoise2D(input).mul(0.5).add(0.5)
     return vec4(mix(colorANode, colorBNode, n), 1.0)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,88 +1,81 @@
-<!-- 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, dot, float, mix, pow, uniform, vec3, vec4 } from 'three/tsl'
+  import { clamp, dot, float, mix, pow, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Sky colour at the zenith */
-      zenith?: string
-      /** Sky colour at the horizon */
-      horizon?: string
-      /** Ground colour below horizon */
-      ground?: string
-      /** Sun direction — [x, y, z] world space (will be normalised) */
-      sunDirection?: [number, number, number]
-      /** Sun colour */
-      sunColor?: string
-      /** Sun disk sharpness (higher = smaller disk) */
-      sunPower?: number
-      order?: number
-    }>(),
-    {
-      zenith: '#1a3a8a',
-      horizon: '#7ab0d8',
-      ground: '#5a4a3a',
-      sunDirection: () => [0.3, 0.8, 0.5],
-      sunColor: '#fff8e0',
-      sunPower: 512,
-      order: 0,
-    }
-  )
+  const {
+    zenith = '#1a3a8a',
+    horizon = '#7ab0d8',
+    ground = '#5a4a3a',
+    sunDirection = [0.3, 0.8, 0.5],
+    sunColor = '#fff8e0',
+    sunPower = 512,
+    order = 0,
+  } = defineProps<{
+    /** Sky colour at the zenith */
+    zenith?: string
+    /** Sky colour at the horizon */
+    horizon?: string
+    /** Ground colour below horizon */
+    ground?: string
+    /** Sun direction — [x, y, z] world space (will be normalised) */
+    sunDirection?: [number, number, number]
+    /** Sun colour */
+    sunColor?: string
+    /** Sun disk sharpness (higher = smaller disk) */
+    sunPower?: number
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const zenithNode = toVec3Node(props.zenith)
-  const horizonNode = toVec3Node(props.horizon)
-  const groundNode = toVec3Node(props.ground)
-  const sunColorNode = toVec3Node(props.sunColor)
-  const sunPowerNode = uniform(props.sunPower)
+  const zenithNode = toVec3Node(zenith)
+  const horizonNode = toVec3Node(horizon)
+  const groundNode = toVec3Node(ground)
+  const sunColorNode = toVec3Node(sunColor)
+  const sunPowerNode = uniform(sunPower)
 
-  const sunDir = new Vector3(...props.sunDirection).normalize()
+  const sunDir = new Vector3(...sunDirection).normalize()
   const sunDirNode = uniform(new Vector3(sunDir.x, sunDir.y, sunDir.z))
 
   watch(
-    () => props.zenith,
+    () => zenith,
     (v) => {
       const c = new Color(v)
       zenithNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.horizon,
+    () => horizon,
     (v) => {
       const c = new Color(v)
       horizonNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.ground,
+    () => ground,
     (v) => {
       const c = new Color(v)
       groundNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.sunColor,
+    () => sunColor,
     (v) => {
       const c = new Color(v)
       sunColorNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.sunPower,
+    () => sunPower,
     (v) => {
       sunPowerNode.value = v
     }
   )
   watch(
-    () => props.sunDirection,
+    () => sunDirection,
     ([x, y, z]) => {
       const d = new Vector3(x, y, z).normalize()
       sunDirNode.value.set(d.x, d.y, d.z)
@@ -104,5 +97,5 @@
     const sun = sunColorNode.mul(pow(sunDot, sunPowerNode))
 
     return vec4(colour.add(sun), 1.0)
-  }, props.order)
+  }, order)
 </script>

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

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

@@ -1,29 +1,20 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Color } from 'three'
   import { uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      color?: string
-      order?: number
-    }>(),
-    {
-      color: '#ffffff',
-      order: 0,
-    }
-  )
+  const { color = '#ffffff', order = 0 } = defineProps<{
+    color?: string
+    order?: number
+  }>()
 
-  const colorVal = new Color(props.color)
+  const colorVal = new Color(color)
   const colorNode = uniform(colorVal)
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       colorNode.value.set(v)
     }
   )
 
-  useShaderStage((_prev) => vec4(colorNode, 1.0), props.order)
+  useShaderStage((_prev) => vec4(colorNode, 1.0), order)
 </script>

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

@@ -1,59 +1,58 @@
-<!-- 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, smoothstep, uniform, vec4 } from 'three/tsl'
 
   import { luminance } from '../../shaders/common/blend'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Colour pushed into shadow tones */
-      shadowColor?: string
-      /** Colour pushed into highlight tones */
-      highlightColor?: string
-      /** Balance point: 0.5 = even split, lower = shadows dominate */
-      balance?: number
-      /** Overall blend strength */
-      opacity?: number
-      order?: number
-    }>(),
-    { shadowColor: '#1a2a5a', highlightColor: '#ffeecc', balance: 0.5, opacity: 0.5, order: 0 }
-  )
+  const {
+    shadowColor = '#1a2a5a',
+    highlightColor = '#ffeecc',
+    balance = 0.5,
+    opacity = 0.5,
+    order = 0,
+  } = defineProps<{
+    /** Colour pushed into shadow tones */
+    shadowColor?: string
+    /** Colour pushed into highlight tones */
+    highlightColor?: string
+    /** Balance point: 0.5 = even split, lower = shadows dominate */
+    balance?: number
+    /** Overall blend strength */
+    opacity?: 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 highlightNode = toVec3Node(props.highlightColor)
-  const balanceNode = uniform(props.balance)
-  const opacityNode = uniform(props.opacity)
+  const shadowNode = toVec3Node(shadowColor)
+  const highlightNode = toVec3Node(highlightColor)
+  const balanceNode = uniform(balance)
+  const opacityNode = uniform(opacity)
   watch(
-    () => props.shadowColor,
+    () => shadowColor,
     (v) => {
       const c = new Color(v)
       shadowNode.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.balance,
+    () => balance,
     (v) => {
       balanceNode.value = v
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
@@ -67,5 +66,5 @@
       .add(shadowNode.mul(shadowMask).mul(opacityNode))
       .add(highlightNode.mul(highlightMask).mul(opacityNode))
     return vec4(toned, prev.w)
-  }, props.order)
+  }, order)
 </script>