kmcom-nuxt-layers 2.2.0 → 2.2.2

package/layers/shader/app/components/Node/Gradient.client.vue

@@ -1,45 +1,39 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck - TSL types
   import { cosinePalette } from '#layers/shader/app/shaders/common/palette'
   import { add, mul, time, uniform, uv } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      id?: string
-      /** Cosine palette type or 'linear' for UV-based gradient */
-      type?: 'rainbow' | 'sunset' | 'ocean' | 'fire' | 'ice' | 'neon' | 'pastel' | 'custom'
-      speed?: number
-      /** Custom brightness for cosine palette [r,g,b] */
-      brightness?: [number, number, number]
-      /** Custom contrast for cosine palette [r,g,b] */
-      contrast?: [number, number, number]
-      /** Custom frequency for cosine palette [r,g,b] */
-      frequency?: [number, number, number]
-      /** Custom phase for cosine palette [r,g,b] */
-      phase?: [number, number, number]
-      order?: number
-      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-      opacity?: number
-    }>(),
-    {
-      id: 'gradient',
-      type: 'rainbow',
-      speed: 0.1,
-      brightness: () => [0.5, 0.5, 0.5],
-      contrast: () => [0.5, 0.5, 0.5],
-      frequency: () => [1.0, 1.0, 1.0],
-      phase: () => [0.0, 0.33, 0.67],
-      order: 0,
-      blend: 'normal',
-      opacity: 1.0,
-    }
-  )
+  const {
+    id = 'gradient',
+    type = 'rainbow',
+    speed = 0.1,
+    brightness = [0.5, 0.5, 0.5],
+    contrast = [0.5, 0.5, 0.5],
+    frequency = [1.0, 1.0, 1.0],
+    phase = [0.0, 0.33, 0.67],
+    order = 0,
+    blend = 'normal',
+    opacity = 1.0,
+  } = defineProps<{
+    id?: string
+    /** Cosine palette type or 'linear' for UV-based gradient */
+    type?: 'rainbow' | 'sunset' | 'ocean' | 'fire' | 'ice' | 'neon' | 'pastel' | 'custom'
+    speed?: number
+    /** Custom brightness for cosine palette [r,g,b] */
+    brightness?: [number, number, number]
+    /** Custom contrast for cosine palette [r,g,b] */
+    contrast?: [number, number, number]
+    /** Custom frequency for cosine palette [r,g,b] */
+    frequency?: [number, number, number]
+    /** Custom phase for cosine palette [r,g,b] */
+    phase?: [number, number, number]
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>()
 
   const graph = useShaderGraphContext()
 
-  const uSpeed = uniform(props.speed)
+  const uSpeed = uniform(speed)
 
   // Palette presets
   const palettePresets: Record<
@@ -99,20 +93,20 @@
     const uvCoord = uv()
     const t = add(uvCoord.x, mul(time, uSpeed))
 
-    const preset = palettePresets[props.type]
+    const preset = palettePresets[type]
     if (preset) {
       return cosinePalette(t, preset[0], preset[1], preset[2], preset[3])
     }
 
     // Custom
-    return cosinePalette(t, props.brightness, props.contrast, props.frequency, props.phase)
+    return cosinePalette(t, brightness, contrast, frequency, phase)
   }
 
   let node = buildNode()
-  graph.register(props.id, node, props.order, props.blend, props.opacity)
+  graph.register(id, node, order, blend, opacity)
 
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       uSpeed.value = v
     }
@@ -120,15 +114,15 @@
 
   // Rebuild on type or custom param changes
   watch(
-    () => [props.type, props.brightness, props.contrast, props.frequency, props.phase] as const,
+    () => [type, brightness, contrast, frequency, phase] as const,
     () => {
       node = buildNode()
-      graph.update(props.id, node)
+      graph.update(id, node)
     }
   )
 
   onUnmounted(() => {
-    graph.unregister(props.id)
+    graph.unregister(id)
   })
 </script>
 

package/layers/shader/app/components/Node/Mix.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 - TSL types
   /**
    * Mix node -- combines child nodes registered in a nested shader graph.
    * Children register into this component's own sub-graph, which is then
@@ -9,20 +6,17 @@
    */
   import { vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      id?: string
-      order?: number
-      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-      opacity?: number
-    }>(),
-    {
-      id: 'mix',
-      order: 0,
-      blend: 'normal',
-      opacity: 1.0,
-    }
-  )
+  const {
+    id = 'mix',
+    order = 0,
+    blend = 'normal',
+    opacity = 1.0,
+  } = defineProps<{
+    id?: string
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>()
 
   const parentGraph = useShaderGraphContext()
 
@@ -36,14 +30,14 @@
       const node = subGraph.finalNode.value || vec3(0, 0, 0)
       if (parentGraph) {
         // Re-register with updated composite node
-        parentGraph.register(props.id, node, props.order, props.blend, props.opacity)
+        parentGraph.register(id, node, order, blend, opacity)
       }
     },
     { immediate: true }
   )
 
   onUnmounted(() => {
-    parentGraph.unregister(props.id)
+    parentGraph.unregister(id)
   })
 </script>
 

package/layers/shader/app/components/Node/Noise.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 - TSL types
   import {
     fbm2D,
     fbm3dSimplex,

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

@@ -1,6 +1,4 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { vec4 } from 'three/tsl'
 
   import { acesTonemap } from '../../shaders/common/tonemapping'

package/layers/shader/app/components/Pipeline/AddBlend.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 { clamp, uniform, vec4 } from 'three/tsl'
 
   import { blendAdd } 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) => clamp(vec4(blendAdd(prev.xyz, colorNode, opacityNode), prev.w), 0, 1),
-    props.order
+    order
   )
 </script>

package/layers/shader/app/components/Pipeline/AgedFilm.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 { clamp, float, floor, fract, sin, time, uniform, vec3, vec4 } from 'three/tsl'
+  import { clamp, float, floor, time, uniform, vec3, vec4 } from 'three/tsl'
 
   import { luminance } from '../../shaders/common/blend'
   import { grain, vignette } from '../../shaders/common/grain'
@@ -12,45 +8,48 @@
    * Preset: combines grain + warm tone shift + vignette + slight fade.
    * A convenient one-stop aged film look.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Overall intensity: 0 = no effect, 1 = full aged look */
-      intensity?: number
-      /** Grain strength */
-      grainStrength?: number
-      /** Vignette darkness */
-      vignetteStrength?: number
-      /** Warm shadow tint amount */
-      warmth?: number
-      order?: number
-    }>(),
-    { intensity: 1, grainStrength: 0.04, vignetteStrength: 0.5, warmth: 0.15, order: 0 }
-  )
+  const {
+    intensity = 1,
+    grainStrength = 0.04,
+    vignetteStrength = 0.5,
+    warmth = 0.15,
+    order = 0,
+  } = defineProps<{
+    /** Overall intensity: 0 = no effect, 1 = full aged look */
+    intensity?: number
+    /** Grain strength */
+    grainStrength?: number
+    /** Vignette darkness */
+    vignetteStrength?: number
+    /** Warm shadow tint amount */
+    warmth?: number
+    order?: number
+  }>()
 
-  const intensityNode = uniform(props.intensity)
-  const grainNode = uniform(props.grainStrength)
-  const vigNode = uniform(props.vignetteStrength)
-  const warmthNode = uniform(props.warmth)
+  const intensityNode = uniform(intensity)
+  const grainNode = uniform(grainStrength)
+  const vigNode = uniform(vignetteStrength)
+  const warmthNode = uniform(warmth)
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       intensityNode.value = v
     }
   )
   watch(
-    () => props.grainStrength,
+    () => grainStrength,
     (v) => {
       grainNode.value = v
     }
   )
   watch(
-    () => props.vignetteStrength,
+    () => vignetteStrength,
     (v) => {
       vigNode.value = v
     }
   )
   watch(
-    () => props.warmth,
+    () => warmth,
     (v) => {
       warmthNode.value = v
     }
@@ -79,5 +78,5 @@
 
     const result = clamp(faded.mul(vig).add(g), 0, 1)
     return vec4(result.mix(prev.xyz, float(1).sub(intensityNode)), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,10 +1,6 @@
-<!-- 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, sin, time, uniform, vec2, vec3, vec4 } from 'three/tsl'
+  import { clamp, float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
 
@@ -12,78 +8,75 @@
    * Aurora borealis — layered animated colour bands across the upper screen.
    * Uses FBM noise to create organic ribbon-like curtains of light.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Primary aurora colour */
-      colorA?: string
-      /** Secondary aurora colour */
-      colorB?: string
-      /** Vertical position of aurora band centre */
-      bandY?: number
-      /** Vertical band height */
-      bandHeight?: number
-      /** Animation speed */
-      speed?: number
-      /** Effect intensity */
-      intensity?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#00ff88',
-      colorB: '#8844ff',
-      bandY: 0.7,
-      bandHeight: 0.3,
-      speed: 0.3,
-      intensity: 0.7,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#00ff88',
+    colorB = '#8844ff',
+    bandY = 0.7,
+    bandHeight = 0.3,
+    speed = 0.3,
+    intensity = 0.7,
+    order = 0,
+  } = defineProps<{
+    /** Primary aurora colour */
+    colorA?: string
+    /** Secondary aurora colour */
+    colorB?: string
+    /** Vertical position of aurora band centre */
+    bandY?: number
+    /** Vertical band height */
+    bandHeight?: number
+    /** Animation speed */
+    speed?: number
+    /** Effect intensity */
+    intensity?: 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 bandYNode = uniform(props.bandY)
-  const bandHNode = uniform(props.bandHeight)
-  const speedNode = uniform(props.speed)
-  const intensityNode = uniform(props.intensity)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const bandYNode = uniform(bandY)
+  const bandHNode = uniform(bandHeight)
+  const speedNode = uniform(speed)
+  const intensityNode = uniform(intensity)
   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.bandY,
+    () => bandY,
     (v) => {
       bandYNode.value = v
     }
   )
   watch(
-    () => props.bandHeight,
+    () => bandHeight,
     (v) => {
       bandHNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       intensityNode.value = v
     }
@@ -113,5 +106,5 @@
 
     const contribution = aurora.mul(bandMask.pow(2)).mul(intensityNode)
     return vec4(prev.xyz.add(contribution), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,64 +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, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Bottom-left corner colour */
-      bottomLeft?: string
-      /** Bottom-right corner colour */
-      bottomRight?: string
-      /** Top-left corner colour */
-      topLeft?: string
-      /** Top-right corner colour */
-      topRight?: string
-      order?: number
-    }>(),
-    {
-      bottomLeft: '#000000',
-      bottomRight: '#ff0000',
-      topLeft: '#0000ff',
-      topRight: '#ffffff',
-      order: 0,
-    }
-  )
+  const {
+    bottomLeft = '#000000',
+    bottomRight = '#ff0000',
+    topLeft = '#0000ff',
+    topRight = '#ffffff',
+    order = 0,
+  } = defineProps<{
+    /** Bottom-left corner colour */
+    bottomLeft?: string
+    /** Bottom-right corner colour */
+    bottomRight?: string
+    /** Top-left corner colour */
+    topLeft?: string
+    /** Top-right corner colour */
+    topRight?: string
+    order?: number
+  }>()
 
   function toVec3Node(hex: string) {
     const c = new Color(hex)
     return uniform(new Vector3(c.r, c.g, c.b))
   }
 
-  const blNode = toVec3Node(props.bottomLeft)
-  const brNode = toVec3Node(props.bottomRight)
-  const tlNode = toVec3Node(props.topLeft)
-  const trNode = toVec3Node(props.topRight)
+  const blNode = toVec3Node(bottomLeft)
+  const brNode = toVec3Node(bottomRight)
+  const tlNode = toVec3Node(topLeft)
+  const trNode = toVec3Node(topRight)
   watch(
-    () => props.bottomLeft,
+    () => bottomLeft,
     (v) => {
       const c = new Color(v)
       blNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.bottomRight,
+    () => bottomRight,
     (v) => {
       const c = new Color(v)
       brNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.topLeft,
+    () => topLeft,
     (v) => {
       const c = new Color(v)
       tlNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.topRight,
+    () => topRight,
     (v) => {
       const c = new Color(v)
       trNode.value.set(c.r, c.g, c.b)
@@ -73,5 +66,5 @@
     const top = mix(tlNode, trNode, uvCurrent.x)
     const colour = mix(bottom, top, uvCurrent.y)
     return vec4(colour, 1.0)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,56 +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 { Color, Vector3 } from 'three'
   import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
   import { turbulence2D } from '../../shaders/common/noise'
 
   /** Billow/turbulence noise — folded abs() of FBM, producing cloud-like forms. */
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      scale?: number
-      speed?: number
-      order?: number
-    }>(),
-    { colorA: '#1a3a8a', colorB: '#ffffff', scale: 2, speed: 0.1, order: 0 }
-  )
+  const {
+    colorA = '#1a3a8a',
+    colorB = '#ffffff',
+    scale = 2,
+    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
     }
@@ -62,5 +61,5 @@
     const uv = pipeline.uvNode.value
     const n = turbulence2D(uv.mul(scaleNode).add(time.mul(speedNode)))
     return vec4(mix(colorANode, colorBNode, n), float(1))
-  }, props.order)
+  }, order)
 </script>