kmcom-nuxt-layers 2.2.0 → 2.2.1

package/layers/shader/app/components/Pipeline/RidgedNoise.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, vec4 } from 'three/tsl'
 
   import { ridgedFbm2d } from '../../shaders/common/noise'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      scale?: number
-      speed?: number
-      order?: number
-    }>(),
-    { colorA: '#000000', colorB: '#ffffff', scale: 2, speed: 0.1, order: 0 }
-  )
+  const {
+    colorA = '#000000',
+    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
     }
@@ -60,5 +60,5 @@
     const uv = pipeline.uvNode.value
     const n = ridgedFbm2d(uv.mul(scaleNode).add(time.mul(speedNode)))
     return vec4(mix(colorANode, colorBNode, n), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,69 +1,63 @@
-<!-- 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 { ring } from '../../shaders/common/shapes'
 
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      innerRadius?: number
-      outerRadius?: number
-      softness?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      innerRadius: 0.25,
-      outerRadius: 0.4,
-      softness: 0.01,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    innerRadius = 0.25,
+    outerRadius = 0.4,
+    softness = 0.01,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    innerRadius?: number
+    outerRadius?: 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 innerNode = uniform(props.innerRadius)
-  const outerNode = uniform(props.outerRadius)
-  const softnessNode = uniform(props.softness)
+  const colorANode = toVec3Node(colorA)
+  const colorBNode = toVec3Node(colorB)
+  const innerNode = uniform(innerRadius)
+  const outerNode = uniform(outerRadius)
+  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.innerRadius,
+    () => innerRadius,
     (v) => {
       innerNode.value = v
     }
   )
   watch(
-    () => props.outerRadius,
+    () => outerRadius,
     (v) => {
       outerNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
@@ -75,5 +69,5 @@
     const uv = pipeline.uvNode.value
     const mask = ring(uv, [0.5, 0.5], innerNode, outerNode, softnessNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,9 +1,8 @@
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { abs, float, uniform, vec4 } from 'three/tsl'
 
+  import type { TSLNode } from '../../shaders/types'
+
   /**
    * Accumulates ring-shaped SDF fields into a single float mask.
    * Each ring: abs(length(uv + offset) - radius) * scale, then summed.
@@ -16,47 +15,51 @@
    * <RingField :order="0" :ring-radius="0.3" :ring-count="3" />
    * <CosinePalette :order="1" scalar-source="prev" />
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Radius of the primary ring */
-      ringRadius?: number
-      /** Number of rings (stacked with equidistant offsets) */
-      ringCount?: number
-      /** Spacing between stacked rings */
-      ringSpread?: number
-      /** Sharpness multiplier applied per ring */
-      ringScale?: number
-      /** Vignette: oneMinus(length(uv * vignetteScale)) — 0 = disabled */
-      vignetteScale?: number
-      order?: number
-    }>(),
-    { ringRadius: 0.3, ringCount: 1, ringSpread: 0.15, ringScale: 4, vignetteScale: 0.8, order: 0 }
-  )
+  const {
+    ringRadius = 0.3,
+    ringCount = 1,
+    ringSpread = 0.15,
+    ringScale = 4,
+    vignetteScale = 0.8,
+    order = 0,
+  } = defineProps<{
+    /** Radius of the primary ring */
+    ringRadius?: number
+    /** Number of rings (stacked with equidistant offsets) */
+    ringCount?: number
+    /** Spacing between stacked rings */
+    ringSpread?: number
+    /** Sharpness multiplier applied per ring */
+    ringScale?: number
+    /** Vignette: oneMinus(length(uv * vignetteScale)) — 0 = disabled */
+    vignetteScale?: number
+    order?: number
+  }>()
 
-  const ringRadiusNode = uniform(props.ringRadius)
-  const ringSpreadNode = uniform(props.ringSpread)
-  const ringScaleNode = uniform(props.ringScale)
-  const vignetteScaleNode = uniform(props.vignetteScale)
+  const ringRadiusNode = uniform(ringRadius)
+  const ringSpreadNode = uniform(ringSpread)
+  const ringScaleNode = uniform(ringScale)
+  const vignetteScaleNode = uniform(vignetteScale)
   watch(
-    () => props.ringRadius,
+    () => ringRadius,
     (v) => {
       ringRadiusNode.value = v
     }
   )
   watch(
-    () => props.ringSpread,
+    () => ringSpread,
     (v) => {
       ringSpreadNode.value = v
     }
   )
   watch(
-    () => props.ringScale,
+    () => ringScale,
     (v) => {
       ringScaleNode.value = v
     }
   )
   watch(
-    () => props.vignetteScale,
+    () => vignetteScale,
     (v) => {
       vignetteScaleNode.value = v
     }
@@ -69,21 +72,21 @@
     const centered = uvCurrent.sub(0.5)
 
     // Accumulate rings at evenly-spaced radii
-    let acc = float(0)
-    for (let i = 0; i < props.ringCount; i++) {
-      const offset = ringSpreadNode.mul(float(i - (props.ringCount - 1) / 2))
+    let acc: TSLNode = float(0)
+    for (let i = 0; i < ringCount; i++) {
+      const offset = ringSpreadNode.mul(float(i - (ringCount - 1) / 2))
       const r = ringRadiusNode.add(offset)
       const d = abs(centered.length().sub(r)).mul(ringScaleNode).oneMinus().max(float(0))
       acc = acc.add(d)
     }
 
     // Optional vignette term
-    if (props.vignetteScale > 0) {
+    if (vignetteScale > 0) {
       const vignette = float(1).sub(centered.mul(vignetteScaleNode).length()).max(float(0))
       acc = acc.add(vignette)
     }
 
-    const t = acc.div(float(props.ringCount)).min(float(1))
+    const t = acc.div(float(ringCount)).min(float(1))
     return vec4(t, t, t, float(1))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/RisographGrain.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 { clamp, floor, mix, time, uniform, vec3, vec4 } from 'three/tsl'
 
   import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
@@ -9,58 +6,55 @@
 
   type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
 
-  const props = withDefaults(
-    defineProps<{
-      scale?: number
-      strength?: number
-      opacity?: number
-      misregistration?: number
-      fps?: number
-      blendMode?: GrainBlendMode
-      order?: number
-    }>(),
-    {
-      scale: 0.6,
-      strength: 0.12,
-      opacity: 1.0,
-      misregistration: 0.003,
-      fps: 8,
-      blendMode: 'add',
-      order: 0,
-    }
-  )
+  const {
+    scale = 0.6,
+    strength = 0.12,
+    opacity = 1.0,
+    misregistration = 0.003,
+    fps = 8,
+    blendMode = 'add',
+    order = 0,
+  } = defineProps<{
+    scale?: number
+    strength?: number
+    opacity?: number
+    misregistration?: number
+    fps?: number
+    blendMode?: GrainBlendMode
+    order?: number
+  }>()
 
-  const scaleNode = uniform(props.scale)
-  const strengthNode = uniform(props.strength)
-  const opacityNode = uniform(props.opacity)
-  const misregNode = uniform(props.misregistration)
-  const fpsNode = uniform(props.fps)
+  const scaleNode = uniform(scale)
+  const strengthNode = uniform(strength)
+  const opacityNode = uniform(opacity)
+  const misregNode = uniform(misregistration)
+  const fpsNode = uniform(fps)
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.strength,
+    () => strength,
     (v) => {
       strengthNode.value = v
     }
   )
   watch(
-    () => props.opacity,
+    () => opacity,
     (v) => {
       opacityNode.value = v
     }
   )
   watch(
-    () => props.misregistration,
+    () => misregistration,
     (v) => {
       misregNode.value = v
     }
   )
   watch(
-    () => props.fps,
+    () => fps,
     (v) => {
       fpsNode.value = v
     }
@@ -87,7 +81,7 @@
 
     const mixFactor = strengthNode.mul(opacityNode)
     let blended
-    switch (props.blendMode) {
+    switch (blendMode) {
       case 'sub':
         blended = prev.xyz.sub(grainVec.abs().mul(opacityNode))
         break
@@ -104,5 +98,5 @@
         blended = prev.xyz.add(grainVec.mul(opacityNode))
     }
     return vec4(clamp(blended, 0, 1), prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/RotatedGradientBlend.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 { Color } from 'three'
   import { mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
@@ -12,62 +9,59 @@
    *
    * Stack multiple instances at consecutive orders to layer gradients.
    */
-  const props = withDefaults(
-    defineProps<{
-      colorA?: string
-      colorB?: string
-      /** Rotation angle in degrees */
-      angle?: number
-      /** Smoothstep lower edge (0 = sharp at centre-left) */
-      edge0?: number
-      /** Smoothstep upper edge (1 = sharp at centre-right) */
-      edge1?: number
-      order?: number
-    }>(),
-    {
-      colorA: '#000000',
-      colorB: '#ffffff',
-      angle: -5,
-      edge0: 0.25,
-      edge1: 0.75,
-      order: 0,
-    }
-  )
+  const {
+    colorA = '#000000',
+    colorB = '#ffffff',
+    angle = -5,
+    edge0 = 0.25,
+    edge1 = 0.75,
+    order = 0,
+  } = defineProps<{
+    colorA?: string
+    colorB?: string
+    /** Rotation angle in degrees */
+    angle?: number
+    /** Smoothstep lower edge (0 = sharp at centre-left) */
+    edge0?: number
+    /** Smoothstep upper edge (1 = sharp at centre-right) */
+    edge1?: 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 angleNode = uniform(props.angle * (Math.PI / 180))
-  const edge0Node = uniform(props.edge0)
-  const edge1Node = uniform(props.edge1)
+  const angleNode = uniform(angle * (Math.PI / 180))
+  const edge0Node = uniform(edge0)
+  const edge1Node = uniform(edge1)
 
   watch(
-    () => props.colorA,
+    () => colorA,
     (v) => {
       colorANode.value.set(v)
     }
   )
   watch(
-    () => props.colorB,
+    () => colorB,
     (v) => {
       colorBNode.value.set(v)
     }
   )
   watch(
-    () => props.angle,
+    () => angle,
     (v) => {
       angleNode.value = v * (Math.PI / 180)
     }
   )
   watch(
-    () => props.edge0,
+    () => edge0,
     (v) => {
       edge0Node.value = v
     }
   )
   watch(
-    () => props.edge1,
+    () => edge1,
     (v) => {
       edge1Node.value = v
     }
@@ -82,5 +76,5 @@
     const rotatedX = uvNode.value.x.mul(cosA).sub(uvNode.value.y.mul(sinA)).add(0.5)
     const t = smoothstep(edge0Node, edge1Node, rotatedX)
     return vec4(mix(colorANode, colorBNode, t), 1.0)
-  }, props.order)
+  }, order)
 </script>

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

@@ -1,8 +1,4 @@
-<!-- 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 { clamp, float, uniform, vec4 } from 'three/tsl'
 
   /**
@@ -12,20 +8,21 @@
    *
    * Pipeline: RingField (order 0) → SDFColourMask (order 1) → CosinePalette (order 2, scalarSource: 'prev')
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Raise the mask to a power before applying — values > 1 increase contrast */
-      power?: number
-      /** Clamp the mask to [0, 1] before multiplying */
-      clampMask?: boolean
-      order?: number
-    }>(),
-    { power: 1, clampMask: true, order: 0 }
-  )
+  const {
+    power = 1,
+    clampMask = true,
+    order = 0,
+  } = defineProps<{
+    /** Raise the mask to a power before applying — values > 1 increase contrast */
+    power?: number
+    /** Clamp the mask to [0, 1] before multiplying */
+    clampMask?: boolean
+    order?: number
+  }>()
 
-  const powerNode = uniform(props.power)
+  const powerNode = uniform(power)
   watch(
-    () => props.power,
+    () => power,
     (v) => {
       powerNode.value = v
     }
@@ -33,7 +30,7 @@
 
   useShaderStage((prev) => {
     let mask = prev.x.pow(powerNode)
-    if (props.clampMask) mask = clamp(mask, float(0), float(1))
+    if (clampMask) mask = clamp(mask, float(0), float(1))
     return vec4(prev.xyz.mul(mask), prev.w)
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/SDFRadialMask.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 { float, uniform, vec4 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      /** Scale factor for the radial distance — larger = tighter mask */
-      scale?: number
-      /** Softness of the mask edge */
-      softness?: number
-      order?: number
-    }>(),
-    { scale: 1.5, softness: 0.2, order: 0 }
-  )
+  const {
+    scale = 1.5,
+    softness = 0.2,
+    order = 0,
+  } = defineProps<{
+    /** Scale factor for the radial distance — larger = tighter mask */
+    scale?: number
+    /** Softness of the mask edge */
+    softness?: number
+    order?: number
+  }>()
 
-  const scaleNode = uniform(props.scale)
-  const softnessNode = uniform(props.softness)
+  const scaleNode = uniform(scale)
+  const softnessNode = uniform(softness)
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       scaleNode.value = v
     }
   )
   watch(
-    () => props.softness,
+    () => softness,
     (v) => {
       softnessNode.value = v
     }
@@ -37,5 +35,5 @@
     const dist = uvCurrent.sub(0.5).mul(scaleNode).length()
     const mask = float(1).sub(dist).sub(softnessNode).max(0).div(float(1).sub(softnessNode))
     return vec4(prev.xyz, prev.w.mul(mask))
-  }, props.order)
+  }, order)
 </script>

package/layers/shader/app/components/Pipeline/SRGBToLinear.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, pow, uniform, vec4 } from 'three/tsl'
 
   /**
@@ -9,22 +6,19 @@
    * Apply before any physically-based blending or tonemapping.
    * Approximate form: pow(col, 2.2).
    */
-  const props = withDefaults(
-    defineProps<{
-      /** Gamma exponent — 2.2 matches sRGB standard */
-      gamma?: number
-      order?: number
-    }>(),
-    { gamma: 2.2, order: 0 }
-  )
+  const { gamma = 2.2, order = 0 } = defineProps<{
+    /** Gamma exponent — 2.2 matches sRGB standard */
+    gamma?: number
+    order?: number
+  }>()
 
-  const gammaNode = uniform(props.gamma)
+  const gammaNode = uniform(gamma)
   watch(
-    () => props.gamma,
+    () => gamma,
     (v) => {
       gammaNode.value = v
     }
   )
 
-  useShaderStage((prev) => vec4(pow(prev.xyz.max(float(0)), gammaNode), prev.w), props.order)
+  useShaderStage((prev) => vec4(pow(prev.xyz.max(float(0)), gammaNode), prev.w), order)
 </script>