kmcom-nuxt-layers 2.2.0 → 2.2.1

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

@@ -1,53 +1,53 @@
-<!-- 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, fract, mix, sin, time, uniform, vec2, vec4 } from 'three/tsl'
+  import { clamp, float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
 
   import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
 
   type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Grain intensity — amplitude of the noise effect */
-      intensity?: number
-      /** Blend opacity — how strongly grain mixes into the output */
-      opacity?: number
-      /** UV scale — higher = finer dots, lower = coarser */
-      size?: number
-      fps?: number
-      blendMode?: GrainBlendMode
-      order?: number
-    }>(),
-    { intensity: 0.06, opacity: 1.0, size: 1.0, fps: 24, blendMode: 'sub', order: 0 }
-  )
+  const {
+    intensity = 0.06,
+    opacity = 1.0,
+    size = 1.0,
+    fps = 24,
+    blendMode = 'sub',
+    order = 0,
+  } = defineProps<{
+    /** Grain intensity — amplitude of the noise effect */
+    intensity?: number
+    /** Blend opacity — how strongly grain mixes into the output */
+    opacity?: number
+    /** UV scale — higher = finer dots, lower = coarser */
+    size?: number
+    fps?: number
+    blendMode?: GrainBlendMode
+    order?: number
+  }>()
 
-  const intensityNode = uniform(props.intensity)
-  const opacityNode = uniform(props.opacity)
-  const sizeNode = uniform(props.size)
-  const fpsNode = uniform(props.fps)
+  const intensityNode = uniform(intensity)
+  const opacityNode = uniform(opacity)
+  const sizeNode = uniform(size)
+  const fpsNode = uniform(fps)
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       intensityNode.value = v
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
   )
   watch(
-    () => props.size,
+    () => size,
     (v) => {
       sizeNode.value = v
     }
   )
   watch(
-    () => props.fps,
+    () => fps,
     (v) => {
       fpsNode.value = v
     }
@@ -70,7 +70,7 @@
 
     const mixFactor = intensityNode.mul(opacityNode)
     let blended
-    switch (props.blendMode) {
+    switch (blendMode) {
       case 'add':
         blended = prev.xyz.add(raw.sub(0.5).mul(intensityNode).mul(opacityNode))
         break
@@ -87,5 +87,5 @@
         blended = prev.xyz.sub(raw.mul(intensityNode).mul(opacityNode))
     }
     return vec4(clamp(blended, 0, 1), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,25 +1,18 @@
-<!-- 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 { atan, float, uniform, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /**
-       * Field-of-view in radians for the fisheye projection.
-       * π = 180° hemisphere, π*2 = full sphere.
-       */
-      fov?: number
-      order?: number
-    }>(),
-    { fov: Math.PI, order: 0 }
-  )
+  const { fov = Math.PI, order = 0 } = defineProps<{
+    /**
+     * Field-of-view in radians for the fisheye projection.
+     * π = 180° hemisphere, π*2 = full sphere.
+     */
+    fov?: number
+    order?: number
+  }>()
 
-  const fovNode = uniform(props.fov)
+  const fovNode = uniform(fov)
   watch(
-    () => props.fov,
+    () => fov,
     (v) => {
       fovNode.value = v
     }
@@ -40,7 +33,7 @@
       const sinTheta = theta.sin()
       return vec3(phi.cos().mul(sinTheta), phi.sin().mul(sinTheta), theta.cos()).normalize()
     },
-    props.order,
+    order,
     'ray'
   )
 </script>

package/layers/shader/app/components/Pipeline/Flame.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 { clamp, float, mix, time, uniform, vec3, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Base flame colour (cool, inner) */
-      colorBase?: string
-      /** Tip flame colour (hot, outer) */
-      colorTip?: string
-      /** Flame height scale */
-      scale?: number
-      /** Rise speed */
-      speed?: number
-      order?: number
-    }>(),
-    { colorBase: '#ffcc00', colorTip: '#ff2200', scale: 3, speed: 1.5, order: 0 }
-  )
+  const {
+    colorBase = '#ffcc00',
+    colorTip = '#ff2200',
+    scale = 3,
+    speed = 1.5,
+    order = 0,
+  } = defineProps<{
+    /** Base flame colour (cool, inner) */
+    colorBase?: string
+    /** Tip flame colour (hot, outer) */
+    colorTip?: string
+    /** Flame height scale */
+    scale?: number
+    /** Rise 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 colorBaseNode = toVec3Node(props.colorBase)
-  const colorTipNode = toVec3Node(props.colorTip)
-  const scaleNode = uniform(props.scale)
-  const speedNode = uniform(props.speed)
+  const colorBaseNode = toVec3Node(colorBase)
+  const colorTipNode = toVec3Node(colorTip)
+  const scaleNode = uniform(scale)
+  const speedNode = uniform(speed)
   watch(
-    () => props.colorBase,
+    () => colorBase,
     (v) => {
       const c = new Color(v)
       colorBaseNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.colorTip,
+    () => colorTip,
     (v) => {
       const c = new Color(v)
       colorTipNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -71,5 +70,5 @@
     // Black background → tip colour → base colour
     const fireColor = mix(vec3(0, 0, 0), mix(colorTipNode, colorBaseNode, heat), heat)
     return vec4(fireColor, heat)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/FocalGradient.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, Vector2, Vector3 } from 'three'
   import { float, mix, uniform, vec2, vec4 } from 'three/tsl'
 
   /** Radial gradient with an offset focal point — asymmetric radial. */
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Focal point in UV space [0,1] */
-      focal?: [number, number]
-      /** Radius of full falloff */
-      radius?: number
-      order?: number
-    }>(),
-    { colorA: '#ffffff', colorB: '#000000', focal: () => [0.3, 0.3], radius: 1.2, order: 0 }
-  )
+  const {
+    colorA = '#ffffff',
+    colorB = '#000000',
+    focal = [0.3, 0.3],
+    radius = 1.2,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Focal point in UV space [0,1] */
+    focal?: [number, number]
+    /** Radius of full falloff */
+    radius?: 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 focalNode = uniform(new Vector2(...props.focal))
-  const radiusNode = uniform(props.radius)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const focalNode = uniform(new Vector2(...focal))
+  const radiusNode = uniform(radius)
   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.focal,
+    () => focal,
     ([x, y]) => {
       focalNode.value.set(x, y)
     }
   )
   watch(
-    () => props.radius,
+    () => radius,
     (v) => {
       radiusNode.value = v
     }
@@ -62,5 +61,5 @@
     const uv = pipeline.uvNode.value
     const t = uv.sub(vec2(focalNode.x, focalNode.y)).length().div(radiusNode).min(float(1))
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/Gamma.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, pow, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Gamma value: 1 = unchanged, 2.2 = standard display gamma */
-      gamma?: number
-      order?: number
-    }>(),
-    { gamma: 2.2, order: 0 }
-  )
+  const { gamma = 2.2, order = 0 } = defineProps<{
+    /** Gamma value: 1 = unchanged, 2.2 = standard display gamma */
+    gamma?: number
+    order?: number
+  }>()
 
-  const gammaNode = uniform(props.gamma)
+  const gammaNode = uniform(gamma)
   watch(
-    () => props.gamma,
+    () => gamma,
     (v) => {
       gammaNode.value = v
     }
@@ -24,5 +18,5 @@
   useShaderStage((prev) => {
     const corrected = pow(prev.xyz.max(float(0)), float(1).div(gammaNode))
     return vec4(corrected, prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,76 +1,69 @@
-<!-- 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, Vector2, Vector3 } from 'three'
-  import { cos, float, sin, smoothstep, uniform, vec2, vec3, vec4 } from 'three/tsl'
+  import { cos, float, smoothstep, uniform, vec2, vec4 } from 'three/tsl'
 
   /**
    * Radial god rays — procedural volumetric light shafts emanating from a source point.
    * Uses angular spokes in UV space to approximate crepuscular rays.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Light source UV position */
-      position?: [number, number]
-      /** Ray colour */
-      color?: string
-      /** Ray brightness */
-      intensity?: number
-      /** Number of ray spokes */
-      rayCount?: number
-      /** Radial decay rate */
-      decay?: number
-      order?: number
-    }>(),
-    {
-      position: () => [0.5, 0.9],
-      color: '#fff9e0',
-      intensity: 0.35,
-      rayCount: 12,
-      decay: 2.0,
-      order: 0,
-    }
-  )
+  const {
+    position = [0.5, 0.9],
+    color = '#fff9e0',
+    intensity = 0.35,
+    rayCount = 12,
+    decay = 2.0,
+    order = 0,
+  } = defineProps<{
+    /** Light source UV position */
+    position?: [number, number]
+    /** Ray colour */
+    color?: string
+    /** Ray brightness */
+    intensity?: number
+    /** Number of ray spokes */
+    rayCount?: number
+    /** Radial decay rate */
+    decay?: 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 rayCountNode = uniform(props.rayCount)
-  const decayNode = uniform(props.decay)
+  const posNode = uniform(new Vector2(...position))
+  const colorNode = toVec3Node(color)
+  const intensityNode = uniform(intensity)
+  const rayCountNode = uniform(rayCount)
+  const decayNode = uniform(decay)
   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.rayCount,
+    () => rayCount,
     (v) => {
       rayCountNode.value = v
     }
   )
   watch(
-    () => props.decay,
+    () => decay,
     (v) => {
       decayNode.value = v
     }
@@ -94,5 +87,5 @@
 
     const rays = spoke.pow(3).mul(radialFade).mul(intensityNode)
     return vec4(prev.xyz.add(colorNode.mul(rays)), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,54 +1,54 @@
-<!-- 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, vec3, vec4 } from 'three/tsl'
 
   import { gradientNoise3D } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      scale?: number
-      speed?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', scale: 3, speed: 0.2, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    scale = 3,
+    speed = 0.2,
+    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
     }
@@ -63,5 +63,5 @@
       .mul(0.5)
       .add(0.5)
     return vec4(mix(colorANode, colorBNode, n), float(1))
-  }, props.order)
+  }, order)
 </script>