kmcom-nuxt-layers 2.2.0 → 2.2.1

package/layers/shader/app/shaders/layers/aurora.ts

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Aurora Shader Layer
  * Northern lights / aurora borealis effect
@@ -9,7 +6,7 @@ import { Color } from 'three'
 import { float, mix, pow, smoothstep, time as tslTime, uniform, uv, vec2, vec3 } from 'three/tsl'
 
 import { simplexNoise2D } from '../common/noise'
-import type { TSLNode } from '../types'
+import type { FloatUniform, TSLNode } from '../types'
 
 export type AuroraOptions = {
   /** Array of colors (3 recommended) */
@@ -31,14 +28,14 @@ export type AuroraOptions = {
 }
 
 export type AuroraUniforms = {
-  speed: ReturnType<typeof uniform>
-  density: ReturnType<typeof uniform>
-  fadePower: ReturnType<typeof uniform>
-  glowIntensity: ReturnType<typeof uniform>
-  mouseX: ReturnType<typeof uniform>
-  mouseStrength: ReturnType<typeof uniform>
-  skyColor: ReturnType<typeof uniform>
-  colors: Array<ReturnType<typeof uniform>>
+  speed: FloatUniform
+  density: FloatUniform
+  fadePower: FloatUniform
+  glowIntensity: FloatUniform
+  mouseX: FloatUniform
+  mouseStrength: FloatUniform
+  skyColor: TSLNode
+  colors: TSLNode[]
 }
 
 /**
@@ -106,13 +103,13 @@ export function aurora(uniforms: AuroraUniforms, uvNode?: TSLNode): TSLNode {
   const auroraSmooth = smoothstep(-0.2, 0.8, auroraValue)
 
   // Get colors
-  const col1 = vec3(uniforms.colors[0] as unknown as TSLNode)
-  const col2 = vec3(uniforms.colors[1] as unknown as TSLNode)
-  const col3 = vec3(uniforms.colors[2] as unknown as TSLNode)
-  const sky = vec3(uniforms.skyColor as unknown as TSLNode)
+  const col1 = vec3(uniforms.colors[0])
+  const col2 = vec3(uniforms.colors[1])
+  const col3 = vec3(uniforms.colors[2])
+  const sky = vec3(uniforms.skyColor)
 
   // Color mixing
-  let color = mix(col1, col2, auroraSmooth)
+  let color: TSLNode = mix(col1, col2, auroraSmooth)
   color = mix(color, col3, curtain2.mul(fade).mul(0.5))
 
   // Add glow

package/layers/shader/app/shaders/layers/meshGradient.ts

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Mesh Gradient Shader Layer
  * Organic blob-based gradient effect
@@ -9,7 +6,7 @@ import { Color } from 'three'
 import { cos, float, mix, sin, time as tslTime, uniform, uv, vec2, vec3 } from 'three/tsl'
 
 import { blob } from '../common/shapes'
-import type { TSLNode } from '../types'
+import type { FloatUniform, TSLNode } from '../types'
 
 export type MeshGradientOptions = {
   /** Array of colors (4 recommended) */
@@ -29,13 +26,13 @@ export type MeshGradientOptions = {
 }
 
 export type MeshGradientUniforms = {
-  speed: ReturnType<typeof uniform>
-  blobScale: ReturnType<typeof uniform>
-  softness: ReturnType<typeof uniform>
-  mouseX: ReturnType<typeof uniform>
-  mouseY: ReturnType<typeof uniform>
-  mouseStrength: ReturnType<typeof uniform>
-  colors: Array<ReturnType<typeof uniform>>
+  speed: FloatUniform
+  blobScale: FloatUniform
+  softness: FloatUniform
+  mouseX: FloatUniform
+  mouseY: FloatUniform
+  mouseStrength: FloatUniform
+  colors: TSLNode[]
 }
 
 /**
@@ -117,13 +114,13 @@ export function meshGradient(uniforms: MeshGradientUniforms, uvNode?: TSLNode):
   const b4 = blob(uvCoord, c4, uniforms.blobScale.mul(0.25), uniforms.softness.mul(0.72))
 
   // Get colors from uniforms
-  const col1 = vec3(uniforms.colors[0] as unknown as TSLNode)
-  const col2 = vec3(uniforms.colors[1] as unknown as TSLNode)
-  const col3 = vec3(uniforms.colors[2] as unknown as TSLNode)
-  const col4 = vec3(uniforms.colors[3] as unknown as TSLNode)
+  const col1 = vec3(uniforms.colors[0])
+  const col2 = vec3(uniforms.colors[1])
+  const col3 = vec3(uniforms.colors[2])
+  const col4 = vec3(uniforms.colors[3])
 
   // Mix colors based on blob influence
-  let color = col1
+  let color: TSLNode = col1
   color = mix(color, col2, b1)
   color = mix(color, col3, b2.mul(0.8))
   color = mix(color, col4, b3.mul(0.7))

package/layers/shader/app/shaders/layers/paperShading.ts

@@ -1,7 +1,3 @@
-/* eslint-disable complexity */
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Paper Shading Shader Layer
  * Inspired by Paper Shaders - organic, hand-drawn aesthetic
@@ -11,7 +7,7 @@ import { abs, float, mix, smoothstep, time as tslTime, uniform, uv, vec3 } from
 
 import { grain as grainFn, paperTexture } from '../common/grain'
 import { fbm2D, simplexNoise2D } from '../common/noise'
-import type { TSLNode } from '../types'
+import type { FloatUniform, TSLNode } from '../types'
 
 export type PaperShadingOptions = {
   /** Base paper color */
@@ -35,15 +31,15 @@ export type PaperShadingOptions = {
 }
 
 export type PaperShadingUniforms = {
-  paperColor: ReturnType<typeof uniform>
-  inkColor: ReturnType<typeof uniform>
-  inkColor2: ReturnType<typeof uniform>
-  speed: ReturnType<typeof uniform>
-  textureIntensity: ReturnType<typeof uniform>
-  flowIntensity: ReturnType<typeof uniform>
-  grainIntensity: ReturnType<typeof uniform>
-  bleed: ReturnType<typeof uniform>
-  edgeDarkness: ReturnType<typeof uniform>
+  paperColor: TSLNode
+  inkColor: TSLNode
+  inkColor2: TSLNode
+  speed: FloatUniform
+  textureIntensity: FloatUniform
+  flowIntensity: FloatUniform
+  grainIntensity: FloatUniform
+  bleed: FloatUniform
+  edgeDarkness: FloatUniform
 }
 
 /**
@@ -85,13 +81,13 @@ export function paperShading(uniforms: PaperShadingUniforms, uvNode?: TSLNode):
   const time = tslTime.mul(uniforms.speed)
 
   // Paper texture base
-  const paper = vec3(uniforms.paperColor as unknown as TSLNode)
-  const ink1 = vec3(uniforms.inkColor as unknown as TSLNode)
-  const ink2 = vec3(uniforms.inkColor2 as unknown as TSLNode)
+  const paper = vec3(uniforms.paperColor)
+  const ink1 = vec3(uniforms.inkColor)
+  const ink2 = vec3(uniforms.inkColor2)
 
   // Paper fiber texture
   const fiberNoise = paperTexture(uvCoord, 20, uniforms.textureIntensity, time)
-  let color = paper.add(fiberNoise)
+  let color: TSLNode = paper.add(fiberNoise)
 
   // Ink flow simulation
   const flowNoise1 = fbm2D(uvCoord.mul(3).add(time.mul(0.5)), { octaves: 4 })
@@ -118,7 +114,7 @@ export function paperShading(uniforms: PaperShadingUniforms, uvNode?: TSLNode):
   color = mix(color, ink2, inkShape2.mul(0.5))
 
   // Edge darkening (vignette-like)
-  const edgeDist = abs(uvCoord.sub(0.5)).mul(2)
+  const edgeDist: TSLNode = abs(uvCoord.sub(0.5)).mul(2)
   const edgeFactor = smoothstep(0.5, 1.2, edgeDist.x.add(edgeDist.y))
   color = color.mul(float(1).sub(edgeFactor.mul(uniforms.edgeDarkness)))
 

package/layers/shader/app/shaders/layers/shaderGradient.ts

@@ -1,19 +1,14 @@
-/* eslint-disable complexity */
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
-/* eslint-disable @typescript-eslint/consistent-type-definitions */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * ShaderGradient-inspired Shader Layer
  * 3D morphing gradient effect similar to shadergradient.co
  */
 import { Color } from 'three'
-import { cos, mix, pow, smoothstep, time as tslTime, uniform, uv, vec2, vec3 } from 'three/tsl'
+import { cos, mix, pow, sin, smoothstep, time as tslTime, uniform, uv, vec2, vec3 } from 'three/tsl'
 
 import { fbm2D, simplexNoise2D } from '../common/noise'
-import type { TSLNode } from '../types'
+import type { FloatUniform, TSLNode } from '../types'
 
-export interface ShaderGradientOptions {
+export type ShaderGradientOptions = {
   /** Primary color */
   color1?: string
   /** Secondary color */
@@ -36,17 +31,17 @@ export interface ShaderGradientOptions {
   zoom?: number
 }
 
-export interface ShaderGradientUniforms {
-  color1: ReturnType<typeof uniform>
-  color2: ReturnType<typeof uniform>
-  color3: ReturnType<typeof uniform>
-  speed: ReturnType<typeof uniform>
-  morphIntensity: ReturnType<typeof uniform>
-  grain: ReturnType<typeof uniform>
-  lightX: ReturnType<typeof uniform>
-  lightY: ReturnType<typeof uniform>
-  brightness: ReturnType<typeof uniform>
-  zoom: ReturnType<typeof uniform>
+export type ShaderGradientUniforms = {
+  color1: TSLNode
+  color2: TSLNode
+  color3: TSLNode
+  speed: FloatUniform
+  morphIntensity: FloatUniform
+  grain: FloatUniform
+  lightX: FloatUniform
+  lightY: FloatUniform
+  brightness: FloatUniform
+  zoom: FloatUniform
 }
 
 /**
@@ -114,12 +109,12 @@ export function shaderGradient(uniforms: ShaderGradientUniforms, uvNode?: TSLNod
   const lightFalloff = smoothstep(1.5, 0, lightDist)
 
   // Color blending with noise
-  const col1 = vec3(uniforms.color1 as unknown as TSLNode)
-  const col2 = vec3(uniforms.color2 as unknown as TSLNode)
-  const col3 = vec3(uniforms.color3 as unknown as TSLNode)
+  const col1 = vec3(uniforms.color1)
+  const col2 = vec3(uniforms.color2)
+  const col3 = vec3(uniforms.color3)
 
   // Complex color mixing
-  let color = mix(col1, col2, noise1)
+  let color: TSLNode = mix(col1, col2, noise1)
   color = mix(color, col3, noise2.mul(0.7))
   color = mix(color, col1, noise3.mul(0.3).mul(lightFalloff))
 

package/layers/shader/app/shaders/layers/stripe.ts

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Stripe Gradient Shader Layer
  * Flowing gradient effect inspired by Stripe.com
@@ -9,7 +6,7 @@ import { Color } from 'three'
 import { float, mix, smoothstep, time as tslTime, uniform, uv, vec2, vec3 } from 'three/tsl'
 
 import { simplexNoise2D } from '../common/noise'
-import type { TSLNode } from '../types'
+import type { FloatUniform, TSLNode } from '../types'
 
 export type StripeGradientOptions = {
   /** Array of colors (3-5 recommended) */
@@ -29,13 +26,13 @@ export type StripeGradientOptions = {
 }
 
 export type StripeGradientUniforms = {
-  speed: ReturnType<typeof uniform>
-  noiseScale: ReturnType<typeof uniform>
-  flowAngle: ReturnType<typeof uniform>
-  mouseX: ReturnType<typeof uniform>
-  mouseY: ReturnType<typeof uniform>
-  mouseStrength: ReturnType<typeof uniform>
-  colors: Array<ReturnType<typeof uniform>>
+  speed: FloatUniform
+  noiseScale: FloatUniform
+  flowAngle: FloatUniform
+  mouseX: FloatUniform
+  mouseY: FloatUniform
+  mouseStrength: FloatUniform
+  colors: TSLNode[]
 }
 
 /**
@@ -97,14 +94,14 @@ export function stripeGradient(uniforms: StripeGradientUniforms, uvNode?: TSLNod
     .add(0.5)
 
   // Get colors from uniforms
-  const c0 = vec3(uniforms.colors[0] as unknown as TSLNode)
-  const c1 = vec3(uniforms.colors[1] as unknown as TSLNode)
-  const c2 = vec3(uniforms.colors[2] as unknown as TSLNode)
-  const c3 = vec3(uniforms.colors[3] as unknown as TSLNode)
-  const c4 = vec3(uniforms.colors[4] as unknown as TSLNode)
+  const c0 = vec3(uniforms.colors[0])
+  const c1 = vec3(uniforms.colors[1])
+  const c2 = vec3(uniforms.colors[2])
+  const c3 = vec3(uniforms.colors[3])
+  const c4 = vec3(uniforms.colors[4])
 
   // Blend multiple colors based on noise
-  let color = c0
+  let color: TSLNode = c0
   color = mix(color, c1, smoothstep(0, 0.5, n1))
   color = mix(color, c2, smoothstep(0.3, 0.7, n2))
   color = mix(color, c3, smoothstep(0.4, 0.8, n3))

package/layers/shader/app/shaders/types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * TSL Type Definitions
  * Simplified types for Three.js TSL nodes
@@ -7,7 +6,16 @@
 // TSL nodes are complex internally, so we use a simple type alias
 // This provides flexibility while maintaining code readability
 
+import type { UniformNode } from 'three/webgpu'
+
 export type TSLNode = any
 
+/**
+ * Float uniform with full TSL operator support.
+ * `ReturnType<typeof uniform>` collapses to `UniformNode<unknown, unknown>`,
+ * which has no operator methods — use this concrete type instead.
+ */
+export type FloatUniform = UniformNode<'float', number>
+
 // Re-export common Three types
 export type { Color, Texture, Vector2, Vector3, Vector4 } from 'three'

package/layers/shader/app/types/app-config.d.ts

@@ -1,5 +1,5 @@
 declare module '@nuxt/schema' {
-  type AppConfigInput = {
+  interface AppConfigInput {
     shaderLayer?: {
       name?: string
     }

package/layers/shader/app/types/tsl.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * TSL Node types
  * Using generic types for flexibility across Three.js versions

package/layers/shader/app/types/uniforms.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-imports */
 import type { Color, Matrix3, Matrix4, Texture, Vector2, Vector3, Vector4 } from 'three'
 
 export type UniformPrimitive = number | boolean | string

package/layers/shader/app/utils/tsl/animation.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import { abs, cos, float, Fn, mod, pow, sin } from 'three/tsl'
 
 import type { TSLNode } from '../../types'
@@ -28,6 +26,48 @@ export const loopTime = Fn(([time, duration]: [TSLNode, TSLNode]) => {
   return mod(time, duration)
 })
 
+/**
+ * Bounce easing (standalone so `easing` does not reference itself)
+ */
+const easeOutBounceFn = Fn(([t]: [TSLNode]) => {
+    const n1 = 7.5625
+    const d1 = 2.75
+
+    const c1 = t.lessThan(1.0 / d1).select(t.mul(t).mul(n1), float(0.0))
+    const c2 = t
+      .greaterThanEqual(1.0 / d1)
+      .mul(t.lessThan(2.0 / d1))
+      .select(
+        t
+          .sub(1.5 / d1)
+          .mul(t.sub(1.5 / d1))
+          .mul(n1)
+          .add(0.75),
+        float(0.0)
+      )
+    const c3 = t
+      .greaterThanEqual(2.0 / d1)
+      .mul(t.lessThan(2.5 / d1))
+      .select(
+        t
+          .sub(2.25 / d1)
+          .mul(t.sub(2.25 / d1))
+          .mul(n1)
+          .add(0.9375),
+        float(0.0)
+      )
+    const c4 = t.greaterThanEqual(2.5 / d1).select(
+      t
+        .sub(2.625 / d1)
+        .mul(t.sub(2.625 / d1))
+        .mul(n1)
+        .add(0.984375),
+      float(0.0)
+    )
+
+    return c1.add(c2).add(c3).add(c4)
+  })
+
 /**
  * Easing functions
  */
@@ -36,33 +76,28 @@ export const easing = {
   easeInQuad: Fn(([t]: [TSLNode]) => t.mul(t)),
   easeOutQuad: Fn(([t]: [TSLNode]) => t.mul(float(2.0).sub(t))),
   easeInOutQuad: Fn(([t]: [TSLNode]) => {
-    return t
-      .lessThan(0.5)
-      .select(t.mul(t).mul(2.0), float(1.0).sub(float(-2.0).mul(t).add(2.0).pow(2.0).div(2.0)))
+    const inv: TSLNode = float(-2.0).mul(t).add(2.0)
+    return t.lessThan(0.5).select(t.mul(t).mul(2.0), float(1.0).sub(inv.pow(2.0).div(2.0)))
   }),
 
   // Cubic
   easeInCubic: Fn(([t]: [TSLNode]) => t.mul(t).mul(t)),
   easeOutCubic: Fn(([t]: [TSLNode]) => float(1.0).sub(pow(float(1.0).sub(t), 3.0))),
   easeInOutCubic: Fn(([t]: [TSLNode]) => {
+    const inv: TSLNode = float(-2.0).mul(t).add(2.0)
     return t
       .lessThan(0.5)
-      .select(
-        t.mul(t).mul(t).mul(4.0),
-        float(1.0).sub(pow(float(-2.0).mul(t).add(2.0), 3.0).div(2.0))
-      )
+      .select(t.mul(t).mul(t).mul(4.0), float(1.0).sub(inv.pow(3.0).div(2.0)))
   }),
 
   // Quartic
   easeInQuart: Fn(([t]: [TSLNode]) => t.mul(t).mul(t).mul(t)),
   easeOutQuart: Fn(([t]: [TSLNode]) => float(1.0).sub(pow(float(1.0).sub(t), 4.0))),
   easeInOutQuart: Fn(([t]: [TSLNode]) => {
+    const inv: TSLNode = float(-2.0).mul(t).add(2.0)
     return t
       .lessThan(0.5)
-      .select(
-        t.mul(t).mul(t).mul(t).mul(8.0),
-        float(1.0).sub(pow(float(-2.0).mul(t).add(2.0), 4.0).div(2.0))
-      )
+      .select(t.mul(t).mul(t).mul(t).mul(8.0), float(1.0).sub(inv.pow(4.0).div(2.0)))
   }),
 
   // Exponential
@@ -175,46 +210,9 @@ export const easing = {
   }),
 
   // Bounce
-  easeOutBounce: Fn(([t]: [TSLNode]) => {
-    const n1 = 7.5625
-    const d1 = 2.75
-
-    const c1 = t.lessThan(1.0 / d1).select(t.mul(t).mul(n1), float(0.0))
-    const c2 = t
-      .greaterThanEqual(1.0 / d1)
-      .mul(t.lessThan(2.0 / d1))
-      .select(
-        t
-          .sub(1.5 / d1)
-          .mul(t.sub(1.5 / d1))
-          .mul(n1)
-          .add(0.75),
-        float(0.0)
-      )
-    const c3 = t
-      .greaterThanEqual(2.0 / d1)
-      .mul(t.lessThan(2.5 / d1))
-      .select(
-        t
-          .sub(2.25 / d1)
-          .mul(t.sub(2.25 / d1))
-          .mul(n1)
-          .add(0.9375),
-        float(0.0)
-      )
-    const c4 = t.greaterThanEqual(2.5 / d1).select(
-      t
-        .sub(2.625 / d1)
-        .mul(t.sub(2.625 / d1))
-        .mul(n1)
-        .add(0.984375),
-      float(0.0)
-    )
-
-    return c1.add(c2).add(c3).add(c4)
-  }),
+  easeOutBounce: easeOutBounceFn,
   easeInBounce: Fn(([t]: [TSLNode]) => {
-    return float(1.0).sub(easing.easeOutBounce(float(1.0).sub(t)))
+    return float(1.0).sub(easeOutBounceFn(float(1.0).sub(t)))
   }),
 }
 

package/layers/shader/app/utils/tsl/color.ts

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import { abs, clamp, float, Fn, max, min, mix, mod, vec3 } from 'three/tsl'
 
 import type { GradientStop, TSLNode } from '../../types'
@@ -10,15 +7,17 @@ import { circularDistance } from './math'
  * Linear gradient with multiple color stops
  */
 export const gradientLinear = Fn(([t, stops]: [TSLNode, GradientStop[]]) => {
-  if (stops.length === 0) return vec3(0.0)
-  if (stops.length === 1) return stops[0]?.color
+  const [firstStop] = stops
+  if (!firstStop) return vec3(0.0)
+  if (stops.length === 1) return firstStop.color
 
-  let result: TSLNode = stops[0]?.color
+  let result: TSLNode = firstStop.color
 
   for (let i = 1; i < stops.length; i++) {
-    const prevStop = stops[i - 1]!
-    const currStop = stops[i]!
-    const localT = clamp(
+    const prevStop = stops[i - 1]
+    const currStop = stops[i]
+    if (!prevStop || !currStop) continue
+    const localT: TSLNode = clamp(
       t.sub(prevStop.position).div(currStop.position - prevStop.position),
       0.0,
       1.0
@@ -31,8 +30,10 @@ export const gradientLinear = Fn(([t, stops]: [TSLNode, GradientStop[]]) => {
   }
 
   // Handle end
-  const lastStop = stops[stops.length - 1]!
-  result = mix(result, lastStop.color, t.greaterThanEqual(lastStop.position))
+  const lastStop = stops[stops.length - 1]
+  if (lastStop) {
+    result = mix(result, lastStop.color, t.greaterThanEqual(lastStop.position))
+  }
 
   return result
 })
@@ -118,13 +119,13 @@ export const hslToRgb = Fn(([hsl]: [TSLNode]) => {
   const s = hsl.y
   const l = hsl.z
 
-  const c = float(1.0)
+  const c: TSLNode = float(1.0)
     .sub(abs(l.mul(2.0).sub(1.0)))
     .mul(s)
-  const x = c.mul(float(1.0).sub(abs(mod(h.mul(6.0), 2.0).sub(1.0))))
+  const x: TSLNode = c.mul(float(1.0).sub(abs(mod(h.mul(6.0), 2.0).sub(1.0))))
   const m = l.sub(c.mul(0.5))
 
-  const h6 = h.mul(6.0)
+  const h6: TSLNode = h.mul(6.0)
 
   const rgb0 = h6.lessThan(1.0).select(vec3(c, x, 0.0), vec3(0.0))
   const rgb1 = h6
@@ -152,7 +153,7 @@ export const hslToRgb = Fn(([hsl]: [TSLNode]) => {
  * Shift hue by an amount (0-1)
  */
 export const hueShift = Fn(([rgb, shift]: [TSLNode, TSLNode]) => {
-  const hsl = rgbToHsl(rgb)
+  const hsl: TSLNode = rgbToHsl(rgb)
   const newH = mod(hsl.x.add(shift), 1.0)
   return hslToRgb(vec3(newH, hsl.y, hsl.z))
 })
@@ -161,8 +162,8 @@ export const hueShift = Fn(([rgb, shift]: [TSLNode, TSLNode]) => {
  * Adjust saturation
  */
 export const adjustSaturation = Fn(([rgb, amount]: [TSLNode, TSLNode]) => {
-  const hsl = rgbToHsl(rgb)
-  const newS = clamp(hsl.y.mul(amount), 0.0, 1.0)
+  const hsl: TSLNode = rgbToHsl(rgb)
+  const newS: TSLNode = clamp(hsl.y.mul(amount), 0.0, 1.0)
   return hslToRgb(vec3(hsl.x, newS, hsl.z))
 })
 
@@ -187,7 +188,7 @@ export const adjustVibrance = Fn(([rgb, vibrance]: [TSLNode, TSLNode]) => {
   const maxC = max(max(rgb.x, rgb.y), rgb.z)
   const minC = min(min(rgb.x, rgb.y), rgb.z)
   const sat = maxC.sub(minC)
-  const satFactor = float(1.0).sub(sat).mul(vibrance)
-  const gray = rgb.x.mul(0.299).add(rgb.y.mul(0.587)).add(rgb.z.mul(0.114))
+  const satFactor: TSLNode = float(1.0).sub(sat).mul(vibrance)
+  const gray: TSLNode = rgb.x.mul(0.299).add(rgb.y.mul(0.587)).add(rgb.z.mul(0.114))
   return mix(vec3(gray), rgb, float(1.0).add(satFactor))
 })

package/layers/shader/app/utils/tsl/noise.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import { abs, dot, float, floor, Fn, fract, max, mix, mod, vec2, vec3, vec4 } from 'three/tsl'
 
 import type { FBMOptions, TSLNode } from '../../types'
@@ -9,14 +7,14 @@ import type { FBMOptions, TSLNode } from '../../types'
  */
 
 const hash22 = Fn(([p]: [TSLNode]) => {
-  const p3 = fract(p.mul(vec2(443.8975, 397.2973)))
-  const shifted = p3.add(dot(p3, p3.yx.add(19.19)))
+  const p3: TSLNode = fract(p.mul(vec2(443.8975, 397.2973)))
+  const shifted: TSLNode = p3.add(dot(p3, p3.yx.add(19.19)))
   return fract(vec2(shifted.x.mul(shifted.y), shifted.y.mul(shifted.x)))
 })
 
 const hash31 = Fn(([p]: [TSLNode]) => {
-  const p3 = fract(p.mul(vec3(443.8975, 397.2973, 491.1871)))
-  const shifted = p3.add(dot(p3, p3.yzx.add(19.19)))
+  const p3: TSLNode = fract(p.mul(vec3(443.8975, 397.2973, 491.1871)))
+  const shifted: TSLNode = p3.add(dot(p3, p3.yzx.add(19.19)))
   return fract(shifted.x.mul(shifted.y).mul(shifted.z))
 })
 
@@ -32,7 +30,7 @@ export const simplexNoise2D = Fn(([uv]: [TSLNode]) => {
   )
 
   // First corner
-  const i = floor(uv.add(dot(uv, C.yy)))
+  const i: TSLNode = floor(uv.add(dot(uv, C.yy)))
   const x0 = uv.sub(i).add(dot(i, C.xx))
 
   // Other corners
@@ -41,7 +39,7 @@ export const simplexNoise2D = Fn(([uv]: [TSLNode]) => {
   const x2 = x0.add(C.zz)
 
   // Permutations
-  const iMod = mod(i, 289.0)
+  const iMod: TSLNode = mod(i, 289.0)
   const p = mod(
     mod(iMod.y.add(vec3(0.0, i1.y, 1.0)), 289.0)
       .mul(34.0)
@@ -95,7 +93,7 @@ export const perlinNoise3D = Fn(([position]: [TSLNode]) => {
   const Pf = fract(position)
 
   // Quintic interpolation
-  const u = Pf.mul(Pf)
+  const u: TSLNode = Pf.mul(Pf)
     .mul(Pf)
     .mul(Pf.mul(Pf.mul(6.0).sub(15.0)).add(10.0))
 
@@ -180,9 +178,9 @@ export const curlNoise3D = Fn(([position]: [TSLNode]) => {
   const dz = vec3(0, 0, eps)
 
   // Compute derivatives
-  const px = perlinNoise3D(position.add(dx)).sub(perlinNoise3D(position.sub(dx)))
-  const py = perlinNoise3D(position.add(dy)).sub(perlinNoise3D(position.sub(dy)))
-  const pz = perlinNoise3D(position.add(dz)).sub(perlinNoise3D(position.sub(dz)))
+  const px: TSLNode = perlinNoise3D(position.add(dx)).sub(perlinNoise3D(position.sub(dx)))
+  const py: TSLNode = perlinNoise3D(position.add(dy)).sub(perlinNoise3D(position.sub(dy)))
+  const pz: TSLNode = perlinNoise3D(position.add(dz)).sub(perlinNoise3D(position.sub(dz)))
 
   // Curl = nabla x F
   const curlX = py.sub(pz)

package/layers/shader/app/utils/tsl/oklch.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex
 /**
  * OKLCH color space utilities for both TSL (GPU) and JS (CPU) use.
  */
@@ -53,15 +51,16 @@ export function oklchToLinearSRGB(l: TSLNode, c: TSLNode, h: TSLNode): TSLNode {
  */
 export function parseOKLCH(str: string): [number, number, number] {
   const match = str.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)\s*\)/)
-  if (!match) {
+  const [, lRaw, cRaw, hRaw] = match ?? []
+  if (!lRaw || !cRaw || !hRaw) {
     throw new Error(`Invalid OKLCH string: ${str}`)
   }
 
-  let l = parseFloat(match[1])
-  if (match[1].endsWith('%')) l /= 100
+  let l = parseFloat(lRaw)
+  if (lRaw.endsWith('%')) l /= 100
 
-  const c = parseFloat(match[2])
-  const h = parseFloat(match[3])
+  const c = parseFloat(cRaw)
+  const h = parseFloat(hRaw)
 
   return [l, c, h]
 }