kmcom-nuxt-layers 2.2.0 → 2.2.2

package/layers/shader/app/components/Pipeline/RadialGradient.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
   import { Color } from 'three'
   import { clamp, mix, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      colorCenter?: string
-      colorEdge?: string
-      radius?: number
-      order?: number
-    }>(),
-    {
-      colorCenter: '#ffffff',
-      colorEdge: '#000000',
-      radius: 0.7,
-      order: 0,
-    }
-  )
+  const {
+    colorCenter = '#ffffff',
+    colorEdge = '#000000',
+    radius = 0.7,
+    order = 0,
+  } = defineProps<{
+    colorCenter?: string
+    colorEdge?: string
+    radius?: number
+    order?: number
+  }>()
 
-  const colorCenterVal = new Color(props.colorCenter)
-  const colorEdgeVal = new Color(props.colorEdge)
+  const colorCenterVal = new Color(colorCenter)
+  const colorEdgeVal = new Color(colorEdge)
   const colorCenterNode = uniform(colorCenterVal)
   const colorEdgeNode = uniform(colorEdgeVal)
-  const radiusNode = uniform(props.radius)
+  const radiusNode = uniform(radius)
 
   watch(
-    () => props.colorCenter,
+    () => colorCenter,
     (v) => {
       colorCenterNode.value.set(v)
     }
   )
   watch(
-    () => props.colorEdge,
+    () => colorEdge,
     (v) => {
       colorEdgeNode.value.set(v)
     }
   )
   watch(
-    () => props.radius,
+    () => radius,
     (v) => {
       radiusNode.value = v
     }
@@ -50,5 +44,5 @@
   useShaderStage((_prev) => {
     const t = clamp(uvNode.value.sub(0.5).length().div(radiusNode), 0, 1)
     return vec4(mix(colorCenterNode, colorEdgeNode, t), 1.0)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,30 +1,28 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { cos, sin, time, uniform, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Orbit speed in radians per second (Y axis) */
-      speed?: number
-      /** Additional fixed pitch in radians (X axis) */
-      pitch?: number
-      order?: number
-    }>(),
-    { speed: 0.5, pitch: 0, order: 0 }
-  )
+  const {
+    speed = 0.5,
+    pitch = 0,
+    order = 0,
+  } = defineProps<{
+    /** Orbit speed in radians per second (Y axis) */
+    speed?: number
+    /** Additional fixed pitch in radians (X axis) */
+    pitch?: number
+    order?: number
+  }>()
 
-  const speedNode = uniform(props.speed)
-  const pitchNode = uniform(props.pitch)
+  const speedNode = uniform(speed)
+  const pitchNode = uniform(pitch)
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
   watch(
-    () => props.pitch,
+    () => pitch,
     (v) => {
       pitchNode.value = v
     }
@@ -44,7 +42,7 @@
       const sp = sin(pitchNode)
       return vec3(rayY.x, rayY.y.mul(cp).sub(rayY.z.mul(sp)), rayY.y.mul(sp).add(rayY.z.mul(cp)))
     },
-    props.order,
+    order,
     'ray'
   )
 </script>

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

@@ -1,20 +1,18 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { Vector2 } from 'three'
   import { cos, sin, uniform, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Multiplier for horizontal mouse sweep → yaw range (radians) */
-      yawRange?: number
-      /** Multiplier for vertical mouse sweep → pitch range (radians) */
-      pitchRange?: number
-      order?: number
-    }>(),
-    { yawRange: Math.PI, pitchRange: Math.PI / 3, order: 0 }
-  )
+  const {
+    yawRange = Math.PI,
+    pitchRange = Math.PI / 3,
+    order = 0,
+  } = defineProps<{
+    /** Multiplier for horizontal mouse sweep → yaw range (radians) */
+    yawRange?: number
+    /** Multiplier for vertical mouse sweep → pitch range (radians) */
+    pitchRange?: number
+    order?: number
+  }>()
 
   const mouse = uniform(new Vector2(0.5, 0.5))
 
@@ -26,16 +24,16 @@
     onUnmounted(() => window.removeEventListener('mousemove', onMove))
   })
 
-  const yawRangeNode = uniform(props.yawRange)
-  const pitchRangeNode = uniform(props.pitchRange)
+  const yawRangeNode = uniform(yawRange)
+  const pitchRangeNode = uniform(pitchRange)
   watch(
-    () => props.yawRange,
+    () => yawRange,
     (v) => {
       yawRangeNode.value = v
     }
   )
   watch(
-    () => props.pitchRange,
+    () => pitchRange,
     (v) => {
       pitchRangeNode.value = v
     }
@@ -56,7 +54,7 @@
       const sp = sin(pitch)
       return vec3(rayY.x, rayY.y.mul(cp).sub(rayY.z.mul(sp)), rayY.y.mul(sp).add(rayY.z.mul(cp)))
     },
-    props.order,
+    order,
     'ray'
   )
 </script>

package/layers/shader/app/components/Pipeline/RayRotateX.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 { cos, sin, uniform, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Rotation angle in radians */
-      angle?: number
-      order?: number
-    }>(),
-    { angle: 0, order: 0 }
-  )
+  const { angle = 0, order = 0 } = defineProps<{
+    /** Rotation angle in radians */
+    angle?: number
+    order?: number
+  }>()
 
-  const angleNode = uniform(props.angle)
+  const angleNode = uniform(angle)
   watch(
-    () => props.angle,
+    () => angle,
     (v) => {
       angleNode.value = v
     }
@@ -27,7 +21,7 @@
       const s = sin(angleNode)
       return vec3(ray.x, ray.y.mul(c).sub(ray.z.mul(s)), ray.y.mul(s).add(ray.z.mul(c)))
     },
-    props.order,
+    order,
     'ray'
   )
 </script>

package/layers/shader/app/components/Pipeline/RayRotateY.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 { cos, sin, uniform, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Rotation angle in radians */
-      angle?: number
-      order?: number
-    }>(),
-    { angle: 0, order: 0 }
-  )
+  const { angle = 0, order = 0 } = defineProps<{
+    /** Rotation angle in radians */
+    angle?: number
+    order?: number
+  }>()
 
-  const angleNode = uniform(props.angle)
+  const angleNode = uniform(angle)
   watch(
-    () => props.angle,
+    () => angle,
     (v) => {
       angleNode.value = v
     }
@@ -27,7 +21,7 @@
       const s = sin(angleNode)
       return vec3(ray.x.mul(c).add(ray.z.mul(s)), ray.y, ray.z.mul(c).sub(ray.x.mul(s)))
     },
-    props.order,
+    order,
     'ray'
   )
 </script>

package/layers/shader/app/components/Pipeline/RayRotateZ.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 { cos, sin, uniform, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Rotation angle in radians */
-      angle?: number
-      order?: number
-    }>(),
-    { angle: 0, order: 0 }
-  )
+  const { angle = 0, order = 0 } = defineProps<{
+    /** Rotation angle in radians */
+    angle?: number
+    order?: number
+  }>()
 
-  const angleNode = uniform(props.angle)
+  const angleNode = uniform(angle)
   watch(
-    () => props.angle,
+    () => angle,
     (v) => {
       angleNode.value = v
     }
@@ -27,7 +21,7 @@
       const s = sin(angleNode)
       return vec3(ray.x.mul(c).sub(ray.y.mul(s)), ray.x.mul(s).add(ray.y.mul(c)), ray.z)
     },
-    props.order,
+    order,
     'ray'
   )
 </script>

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

@@ -1,39 +1,38 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { cos, sin, uniform, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Yaw offset in radians (horizontal look) */
-      yaw?: number
-      /** Pitch offset in radians (vertical tilt) */
-      pitch?: number
-      /** Roll offset in radians */
-      roll?: number
-      order?: number
-    }>(),
-    { yaw: 0, pitch: 0, roll: 0, order: 0 }
-  )
+  const {
+    yaw = 0,
+    pitch = 0,
+    roll = 0,
+    order = 0,
+  } = defineProps<{
+    /** Yaw offset in radians (horizontal look) */
+    yaw?: number
+    /** Pitch offset in radians (vertical tilt) */
+    pitch?: number
+    /** Roll offset in radians */
+    roll?: number
+    order?: number
+  }>()
 
-  const yawNode = uniform(props.yaw)
-  const pitchNode = uniform(props.pitch)
-  const rollNode = uniform(props.roll)
+  const yawNode = uniform(yaw)
+  const pitchNode = uniform(pitch)
+  const rollNode = uniform(roll)
   watch(
-    () => props.yaw,
+    () => yaw,
     (v) => {
       yawNode.value = v
     }
   )
   watch(
-    () => props.pitch,
+    () => pitch,
     (v) => {
       pitchNode.value = v
     }
   )
   watch(
-    () => props.roll,
+    () => roll,
     (v) => {
       rollNode.value = v
     }
@@ -56,7 +55,7 @@
       const sr = sin(rollNode)
       return vec3(r2.x.mul(cr).sub(r2.y.mul(sr)), r2.x.mul(sr).add(r2.y.mul(cr)), r2.z)
     },
-    props.order,
+    order,
     'ray'
   )
 </script>

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

@@ -1,14 +1,9 @@
-<!-- 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 {
     abs,
     Break,
     clamp,
-    cos,
     float,
     Fn,
     If,
@@ -21,61 +16,60 @@
     vec4,
   } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Tunnel inner radius */
-      radius?: number
-      /** How fast the camera flies forward */
-      speed?: number
-      /** Wall colour A */
-      colorA?: string
-      /** Wall colour B */
-      colorB?: string
-      /** Number of march steps (fixed at shader compile) */
-      steps?: number
-      order?: number
-    }>(),
-    {
-      radius: 0.8,
-      speed: 1,
-      colorA: '#1a0a3a',
-      colorB: '#ff4488',
-      steps: 64,
-      order: 0,
-    }
-  )
-
-  const radiusNode = uniform(props.radius)
-  const speedNode = uniform(props.speed)
+  import type { TSLNode } from '../../shaders/types'
+
+  const {
+    radius = 0.8,
+    speed = 1,
+    colorA = '#1a0a3a',
+    colorB = '#ff4488',
+    steps = 64,
+    order = 0,
+  } = defineProps<{
+    /** Tunnel inner radius */
+    radius?: number
+    /** How fast the camera flies forward */
+    speed?: number
+    /** Wall colour A */
+    colorA?: string
+    /** Wall colour B */
+    colorB?: string
+    /** Number of march steps (fixed at shader compile) */
+    steps?: number
+    order?: number
+  }>()
+
+  const radiusNode = uniform(radius)
+  const speedNode = uniform(speed)
 
   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 colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
 
   watch(
-    () => props.radius,
+    () => radius,
     (v) => {
       radiusNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
   )
   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)
@@ -85,7 +79,7 @@
   const pipeline = useShaderPipelineContext()
 
   // Fn defined once at setup — Loop/If/Break/toVar/addAssign require a Fn() stack at compile time
-  const raymarchFn = Fn(([ray]) => {
+  const raymarchFn = Fn(([ray]: [TSLNode]) => {
     // Three.js calls Fn bodies with null args during type-inference — bail out safely
     if (!ray) return vec4(0, 0, 0, 0)
 
@@ -98,7 +92,7 @@
     const colour = vec3(0, 0, 0).toVar()
     const hit = float(0).toVar()
 
-    Loop(props.steps, () => {
+    Loop(steps, () => {
       const p = ro.add(rd.mul(t))
 
       // Tunnel SDF: cylinder with twisted walls
@@ -141,5 +135,5 @@
       provided ?? (uvc ? vec3(uvc.sub(0.5).mul(2).x, uvc.sub(0.5).mul(2).y, float(1)) : null)
     if (!ray) return vec4(0, 0, 0, 0)
     return raymarchFn([ray])
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,78 +1,72 @@
-<!-- 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, uniform, vec4 } from 'three/tsl'
 
   import { roundedRect } from '../../shaders/common/shapes'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      width?: number
-      height?: number
-      cornerRadius?: number
-      softness?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      width: 0.6,
-      height: 0.4,
-      cornerRadius: 0.05,
-      softness: 0.01,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    width = 0.6,
+    height = 0.4,
+    cornerRadius = 0.05,
+    softness = 0.01,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    width?: number
+    height?: number
+    cornerRadius?: number
+    softness?: 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 widthNode = uniform(props.width)
-  const heightNode = uniform(props.height)
-  const cornerNode = uniform(props.cornerRadius)
-  const softnessNode = uniform(props.softness)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const widthNode = uniform(width)
+  const heightNode = uniform(height)
+  const cornerNode = uniform(cornerRadius)
+  const softnessNode = uniform(softness)
   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.width,
+    () => width,
     (v) => {
       widthNode.value = v
     }
   )
   watch(
-    () => props.height,
+    () => height,
     (v) => {
       heightNode.value = v
     }
   )
   watch(
-    () => props.cornerRadius,
+    () => cornerRadius,
     (v) => {
       cornerNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
@@ -84,5 +78,5 @@
     const uv = pipeline.uvNode.value
     const mask = roundedRect(uv, [0.5, 0.5], widthNode, cornerNode, softnessNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/ReinhardTonemap.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 { vec4 } from 'three/tsl'
 
   import { reinhardTonemap } from '../../shaders/common/tonemapping'