kmcom-nuxt-layers 2.2.0 → 2.2.1

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

@@ -1,73 +1,67 @@
-<!-- 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 { star } from '../../shaders/common/shapes'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      radius?: number
-      /** Number of points */
-      points?: number
-      /** Inner radius ratio (0–1) */
-      innerRatio?: number
-      softness?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffcc00',
-      radius: 0.35,
-      points: 5,
-      innerRatio: 0.45,
-      softness: 0.01,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffcc00',
+    radius = 0.35,
+    points = 5,
+    innerRatio = 0.45,
+    softness = 0.01,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    radius?: number
+    /** Number of points */
+    points?: number
+    /** Inner radius ratio (0–1) */
+    innerRatio?: 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 radiusNode = uniform(props.radius)
-  const innerNode = uniform(props.innerRatio)
-  const softnessNode = uniform(props.softness)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const radiusNode = uniform(radius)
+  const innerNode = uniform(innerRatio)
+  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.radius,
+    () => radius,
     (v) => {
       radiusNode.value = v
     }
   )
   watch(
-    () => props.innerRatio,
+    () => innerRatio,
     (v) => {
       innerNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
@@ -77,7 +71,7 @@
 
   useShaderStage(() => {
     const uv = pipeline.uvNode.value
-    const mask = star(uv, [0.5, 0.5], radiusNode, props.points, innerNode, softnessNode)
+    const mask = star(uv, [0.5, 0.5], points, innerNode, radiusNode, softnessNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/Starfield.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 {
     dot,
     float,
@@ -16,49 +13,54 @@
     vec4,
   } from 'three/tsl'
 
+  import type { TSLNode } from '../../shaders/types'
+
   /**
    * Hash-based procedural starfield.
    * Each cell on a grid may contain a star whose brightness twinkles over time.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Grid density — higher = more stars */
-      density?: number
-      /** Star brightness */
-      brightness?: number
-      /** Twinkle animation speed */
-      twinkleSpeed?: number
-      /** Star size (sharpness) */
-      size?: number
-      order?: number
-    }>(),
-    { density: 80, brightness: 1.0, twinkleSpeed: 1.0, size: 0.4, order: 0 }
-  )
+  const {
+    density = 80,
+    brightness = 1.0,
+    twinkleSpeed = 1.0,
+    size = 0.4,
+    order = 0,
+  } = defineProps<{
+    /** Grid density — higher = more stars */
+    density?: number
+    /** Star brightness */
+    brightness?: number
+    /** Twinkle animation speed */
+    twinkleSpeed?: number
+    /** Star size (sharpness) */
+    size?: number
+    order?: number
+  }>()
 
-  const densityNode = uniform(props.density)
-  const brightnessNode = uniform(props.brightness)
-  const twinkleNode = uniform(props.twinkleSpeed)
-  const sizeNode = uniform(props.size)
+  const densityNode = uniform(density)
+  const brightnessNode = uniform(brightness)
+  const twinkleNode = uniform(twinkleSpeed)
+  const sizeNode = uniform(size)
   watch(
-    () => props.density,
+    () => density,
     (v) => {
       densityNode.value = v
     }
   )
   watch(
-    () => props.brightness,
+    () => brightness,
     (v) => {
       brightnessNode.value = v
     }
   )
   watch(
-    () => props.twinkleSpeed,
+    () => twinkleSpeed,
     (v) => {
       twinkleNode.value = v
     }
   )
   watch(
-    () => props.size,
+    () => size,
     (v) => {
       sizeNode.value = v
     }
@@ -72,7 +74,7 @@
 
     // Scale UV into grid cells
     const scaled = uv.mul(densityNode)
-    const cell = floor(scaled)
+    const cell: TSLNode = floor(scaled)
     const local = fract(scaled).sub(0.5)
 
     // Hash per cell → star position offset and brightness
@@ -95,5 +97,5 @@
 
     const colour = vec3(star.mul(brightnessNode))
     return vec4(prev.xyz.add(colour), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,64 +1,65 @@
-<!-- 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 { stripes } from '../../shaders/common/shapes'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      frequency?: number
-      /** Fraction of each stripe that is colorB (0–1) */
-      thickness?: number
-      /** Angle in degrees */
-      angle?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', frequency: 10, thickness: 0.5, angle: 0, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    frequency = 10,
+    thickness = 0.5,
+    angle = 0,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    frequency?: number
+    /** Fraction of each stripe that is colorB (0–1) */
+    thickness?: number
+    /** Angle in degrees */
+    angle?: 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 thickNode = uniform(props.thickness)
-  const angleNode = uniform((props.angle * Math.PI) / 180)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const freqNode = uniform(frequency)
+  const thickNode = uniform(thickness)
+  const angleNode = uniform((angle * Math.PI) / 180)
   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.thickness,
+    () => thickness,
     (v) => {
       thickNode.value = v
     }
   )
   watch(
-    () => props.angle,
+    () => angle,
     (v) => {
       angleNode.value = (v * Math.PI) / 180
     }
@@ -70,5 +71,5 @@
     const uv = pipeline.uvNode.value
     const mask = stripes(uv, freqNode, thickNode, angleNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>

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

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

@@ -1,30 +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 { tanhTonemap } from '../../shaders/common/tonemapping'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Controls how aggressively values above 1 are compressed. dawn5 uses 2.5. */
-      exposure?: number
-      order?: number
-    }>(),
-    {
-      exposure: 1.0,
-      order: 0,
-    }
-  )
+  const { exposure = 1.0, order = 0 } = defineProps<{
+    /** Controls how aggressively values above 1 are compressed. dawn5 uses 2.5. */
+    exposure?: number
+    order?: number
+  }>()
 
-  const exposureNode = uniform(props.exposure)
+  const exposureNode = uniform(exposure)
   watch(
-    () => props.exposure,
+    () => exposure,
     (v) => {
       exposureNode.value = v
     }
   )
 
-  useShaderStage((prev) => vec4(tanhTonemap(prev.xyz.mul(exposureNode)), prev.w), props.order)
+  useShaderStage((prev) => vec4(tanhTonemap(prev.xyz.mul(exposureNode)), prev.w), order)
 </script>

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

@@ -1,23 +1,17 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { float, step, uniform, vec4 } from 'three/tsl'
 
   import { luminance } from '../../shaders/common/blend'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Luminance threshold 0–1: below = black, above = white */
-      threshold?: number
-      order?: number
-    }>(),
-    { threshold: 0.5, order: 0 }
-  )
+  const { threshold = 0.5, order = 0 } = defineProps<{
+    /** Luminance threshold 0–1: below = black, above = white */
+    threshold?: number
+    order?: number
+  }>()
 
-  const thresholdNode = uniform(props.threshold)
+  const thresholdNode = uniform(threshold)
   watch(
-    () => props.threshold,
+    () => threshold,
     (v) => {
       thresholdNode.value = v
     }
@@ -27,5 +21,5 @@
     const lum = luminance(prev.xyz)
     const t = step(thresholdNode, lum)
     return vec4(float(t), float(t), float(t), prev.w)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,37 +1,35 @@
-<!-- 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'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Tint colour — multiplied against the existing colour */
-      color?: string
-      /** Blend between original (0) and fully tinted (1) */
-      opacity?: number
-      order?: number
-    }>(),
-    { color: '#ff8844', opacity: 1, order: 0 }
-  )
+  const {
+    color = '#ff8844',
+    opacity = 1,
+    order = 0,
+  } = defineProps<{
+    /** Tint colour — multiplied against the existing colour */
+    color?: string
+    /** Blend between original (0) and fully tinted (1) */
+    opacity?: 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 opacityNode = uniform(props.opacity)
+  const colorNode = toVec3Node(color)
+  const opacityNode = uniform(opacity)
   watch(
-    () => props.color,
+    () => color,
     (v) => {
       const c = new Color(v)
       colorNode.value.set(c.r, c.g, c.b)
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
@@ -40,5 +38,5 @@
   useShaderStage((prev) => {
     const tinted = prev.xyz.mul(colorNode)
     return vec4(prev.xyz.mix(tinted, opacityNode), prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/Triangle.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, smoothstep, uniform, vec4 } from 'three/tsl'
 
   import { sdEquilateralTriangle } from '../../shaders/common/sdf'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      size?: number
-      softness?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', size: 0.35, softness: 0.01, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    size = 0.35,
+    softness = 0.01,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    size?: 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 sizeNode = uniform(props.size)
-  const softnessNode = uniform(props.softness)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const sizeNode = uniform(size)
+  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.size,
+    () => size,
     (v) => {
       sizeNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
@@ -61,5 +61,5 @@
     const d = sdEquilateralTriangle(uv.sub(0.5), sizeNode)
     const mask = smoothstep(softnessNode, softnessNode.negate(), d)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,6 +1,4 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { screenSize, vec2 } from 'three/tsl'
 
   const { order = 0 } = defineProps<{ order?: number }>()

package/layers/shader/app/components/Pipeline/UVBreath.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 { float, sin, smoothstep, time, uniform, vec2 } from 'three/tsl'
 
   /**
@@ -9,27 +6,28 @@
    * Uses a smoothstepped sine so the scale dwells at min/max rather than
    * passing through them instantly.
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Max scale deviation from 1.0 */
-      amount?: number
-      /** Breath cycle speed in radians per second */
-      speed?: number
-      order?: number
-    }>(),
-    { amount: 0.05, speed: 0.8, order: 0 }
-  )
+  const {
+    amount = 0.05,
+    speed = 0.8,
+    order = 0,
+  } = defineProps<{
+    /** Max scale deviation from 1.0 */
+    amount?: number
+    /** Breath cycle speed in radians per second */
+    speed?: number
+    order?: number
+  }>()
 
-  const amountNode = uniform(props.amount)
-  const speedNode = uniform(props.speed)
+  const amountNode = uniform(amount)
+  const speedNode = uniform(speed)
   watch(
-    () => props.amount,
+    () => amount,
     (v) => {
       amountNode.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       speedNode.value = v
     }
@@ -43,7 +41,7 @@
       const centered = uvIn.sub(0.5).div(scale).add(0.5)
       return vec2(centered.x, centered.y)
     },
-    props.order,
+    order,
     'uv'
   )
 </script>