kmcom-nuxt-layers 2.2.0 → 2.2.1

package/layers/shader/app/composables/useAmbientMaterials.ts

@@ -1,10 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex
 import { DoubleSide } from 'three'
 import {
-  abs,
   add,
   exp,
   float,
@@ -13,7 +8,6 @@ import {
   mix,
   mul,
   pow,
-  sign,
   sin,
   smoothstep,
   sub,
@@ -34,6 +28,7 @@ import {
   voronoi2D,
 } from '../shaders/common/noise'
 import { cosinePalette } from '../shaders/common/palette'
+import type { TSLNode } from '../shaders/types'
 
 // ============================================
 // Types
@@ -600,13 +595,13 @@ export function createThemeWaveColorNode(
 
     // Wave warp (order matters: warped x feeds into y)
     const waveSpeed = mul(time, uSpeed, 2.0)
-    const wx = rx.add(sin(ry.mul(5.0).add(waveSpeed)).div(30.0))
-    const wy = ry.add(sin(wx.mul(7.5).add(waveSpeed)).div(15.0))
+    const wx: TSLNode = rx.add(sin(ry.mul(5.0).add(waveSpeed)).div(30.0))
+    const wy: TSLNode = ry.add(sin(wx.mul(7.5).add(waveSpeed)).div(15.0))
 
     // -5° rotation for layer blend
     const COS5 = Math.cos((-5 * Math.PI) / 180)
     const SIN5 = Math.sin((-5 * Math.PI) / 180)
-    const rotated5x = wx.mul(COS5).sub(wy.mul(SIN5))
+    const rotated5x: TSLNode = wx.mul(COS5).sub(wy.mul(SIN5))
 
     const layer1 = mix(colors.color1, colors.color2, smoothstep(-0.3, 0.2, rotated5x))
     const layer2 = mix(colors.color3, colors.color4, smoothstep(-0.3, 0.2, rotated5x))

package/layers/shader/app/composables/useCSSColourUniform.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { Color, Vector3 } from 'three'
 import { uniform } from 'three/tsl'
 
@@ -12,7 +10,6 @@ import { uniform } from 'three/tsl'
  * // Use primaryNode directly inside useShaderStage closures.
  */
 export function useCSSColourUniform(varName: string) {
-  // @ts-expect-error — TSL uniform types
   const node = uniform(new Vector3(0, 0, 0))
   const c = new Color()
 
@@ -21,7 +18,6 @@ export function useCSSColourUniform(varName: string) {
     if (!raw) return
     try {
       c.set(raw)
-      // @ts-expect-error
       node.value.set(c.r, c.g, c.b)
     } catch {
       /* unsupported format — leave previous value */

package/layers/shader/app/composables/useCSSFloatUniform.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { uniform } from 'three/tsl'
 
 /**
@@ -9,13 +8,11 @@ import { uniform } from 'three/tsl'
  * const spacingNode = useCSSFloatUniform('--spacing-scale')
  */
 export function useCSSFloatUniform(varName: string) {
-  // @ts-expect-error — TSL uniform types
   const node = uniform(0)
 
   function sync() {
     const raw = getComputedStyle(document.documentElement).getPropertyValue(varName).trim()
     const val = parseFloat(raw)
-    // @ts-expect-error
     if (!isNaN(val)) node.value = val
   }
 

package/layers/shader/app/composables/useShader.ts

@@ -1,5 +1,3 @@
-/* eslint-disable complexity */
-/* eslint-disable no-restricted-syntax */
 import { onUnmounted, shallowRef } from 'vue'
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu'
 
@@ -25,10 +23,9 @@ export function useShader(options: UseShaderOptions = {}) {
 
   function createMaterial() {
     try {
+      material.value = new MeshBasicNodeMaterial()
       if (type === 'standard') {
         material.value = new MeshStandardNodeMaterial()
-      } else {
-        material.value = new MeshBasicNodeMaterial()
       }
 
       applyConfig(config)

package/layers/shader/app/composables/useShaderColor.ts

@@ -1,9 +1,7 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex
 import { Color } from 'three'
 import { uniform } from 'three/tsl'
 
+import { oklchToColor } from '../utils/tsl/oklch'
 import type { TweenHandle } from '../utils/tsl/tween'
 
 /**
@@ -74,10 +72,10 @@ export function useShaderColor(initialHex: string) {
 
       if (rawT < 1) {
         requestAnimationFrame(tick)
-      } else {
-        hex.value = targetHex
-        resolvePromise()
+        return
       }
+      hex.value = targetHex
+      resolvePromise()
     }
 
     requestAnimationFrame(tick)

package/layers/shader/app/composables/useShaderFloat.ts

@@ -1,8 +1,6 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex
 import { uniform } from 'three/tsl'
 
-import type { TweenHandle } from '../utils/tsl/tween'
+import { tweenUniform, type TweenHandle } from '../utils/tsl/tween'
 
 export type ShaderFloatOptions = {
   min?: number

package/layers/shader/app/composables/useShaderGraph.ts

@@ -1,6 +1,3 @@
-/* eslint-disable max-params */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex
 import type { InjectionKey } from 'vue'
 import { mix as tslMix } from 'three/tsl'
 
@@ -64,12 +61,14 @@ export function useShaderGraph(): ShaderGraph {
     void version.value
 
     const sorted = [...entries.values()].sort((a, b) => a.order - b.order)
-    if (sorted.length === 0) return null
+    const [first] = sorted
+    if (!first) return null
 
-    let result = sorted[0].node
+    let result = first.node
 
     for (let i = 1; i < sorted.length; i++) {
       const entry = sorted[i]
+      if (!entry) continue
       result = applyBlend(result, entry.node, entry.blend, entry.opacity)
     }
 

package/layers/shader/app/composables/useShaderRuntime.ts

@@ -1,12 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex
 import type { InjectionKey } from 'vue'
 import { Color } from 'three'
 import { uniform } from 'three/tsl'
 
-import type { MousePositionOptions } from './useMousePosition'
-import type { ShaderTimeOptions } from './useShaderTime'
 
 export type ShaderRuntimeOptions = {
   speed?: number

package/layers/shader/app/composables/useShaderVec2.ts

@@ -1,7 +1,3 @@
-/* eslint-disable max-params */
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex
 import { Vector2 } from 'three'
 import { uniform } from 'three/tsl'
 
@@ -66,11 +62,11 @@ export function useShaderVec2(initialX = 0, initialY = 0) {
 
       if (rawT < 1) {
         requestAnimationFrame(tick)
-      } else {
-        x.value = targetX
-        y.value = targetY
-        resolvePromise()
+        return
       }
+      x.value = targetX
+      y.value = targetY
+      resolvePromise()
     }
 
     requestAnimationFrame(tick)

package/layers/shader/app/composables/useSunDirectionUniform.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { Vector2 } from 'three'
 import { float, time, uniform, vec3 } from 'three/tsl'
 
@@ -26,12 +25,10 @@ export function useSunDirectionUniform(options: SunDirectionOptions = {}) {
   const { speed = 0.05, useMouseY = false } = options
 
   if (useMouseY) {
-    // @ts-expect-error
     const mouse = uniform(new Vector2(0.5, 0.5))
 
     onMounted(() => {
       const onMove = (e: MouseEvent) => {
-        // @ts-expect-error
         mouse.value.set(e.clientX / window.innerWidth, e.clientY / window.innerHeight)
       }
       window.addEventListener('mousemove', onMove)
@@ -41,15 +38,12 @@ export function useSunDirectionUniform(options: SunDirectionOptions = {}) {
     // angle = -(mouseY - 0.5) — top of screen = sun high, bottom = sun low
     const angle = mouse.y.oneMinus().sub(0.5)
     const a = angle.mul(5).add(0.5)
-    // @ts-expect-error
     return vec3(float(0), a.sin().negate(), a.cos())
   }
 
   // Animated mode — pure TSL expression, no JS uniform needed
-  // @ts-expect-error
   const speedNode = uniform(speed)
   const angle = time.mul(speedNode).sin().div(8).sub(0.2)
   const a = angle.mul(5).add(0.5)
-  // @ts-expect-error
   return vec3(float(0), a.sin().negate(), a.cos())
 }

package/layers/shader/app/composables/useThemeColors.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-syntax */
 import { oklchToColor, parseOKLCH } from '../utils/tsl/oklch'
 
 export function useThemeColors() {

package/layers/shader/app/composables/useUniforms.ts

@@ -1,23 +1,39 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 
 import { reactive, ref, watch } from 'vue'
-import { Color, Vector2, Vector3 } from 'three'
+import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from 'three'
 import { uniform } from 'three/tsl'
 
-import type { UniformValue, UniformValues } from '../types'
+import type { TSLNode, UniformValue, UniformValues } from '../types'
+
+/**
+ * `uniform()` is typed with per-type overloads, so a `UniformValue` union
+ * needs narrowing before the call resolves.
+ */
+function createUniformNode(value: UniformValue): TSLNode {
+  if (typeof value === 'number') return uniform(value)
+  if (typeof value === 'boolean') return uniform(value)
+  if (value instanceof Vector2) return uniform(value)
+  if (value instanceof Vector3) return uniform(value)
+  if (value instanceof Vector4) return uniform(value)
+  if (value instanceof Matrix3) return uniform(value)
+  if (value instanceof Matrix4) return uniform(value)
+  if (value instanceof Color) return uniform(value)
+  // Strings (node type names) and textures are handled by uniform() at runtime
+  // but aren't covered by its typed overloads
+  const loose = uniform as unknown as (v: UniformValue) => TSLNode
+  return loose(value)
+}
 
 /**
  * Creates reactive uniforms that bridge Vue state to TSL shaders
  */
 export function useUniforms<T extends UniformValues>(initialValues: T) {
   const values = reactive({ ...initialValues }) as T
-  const nodes: Record<string, ReturnType<typeof uniform>> = {}
+  const nodes: Record<string, TSLNode> = {}
 
   // Create uniform nodes for each value
   for (const [key, value] of Object.entries(initialValues)) {
-    nodes[key] = uniform(value)
+    nodes[key] = createUniformNode(value)
   }
 
   // Watch for changes and update uniform nodes
@@ -79,7 +95,7 @@ export function useUniforms<T extends UniformValues>(initialValues: T) {
    * Get all uniform nodes as an object
    */
   function getNodes() {
-    return nodes as Record<keyof T, ReturnType<typeof uniform>>
+    return nodes as Record<keyof T, TSLNode>
   }
 
   return {
@@ -98,7 +114,7 @@ export function useUniforms<T extends UniformValues>(initialValues: T) {
  */
 export function useUniform<T extends UniformValue>(initialValue: T) {
   const value = ref(initialValue) as Ref<T>
-  const node = uniform(initialValue)
+  const node = createUniformNode(initialValue)
 
   watch(value, (newValue) => {
     node.value = newValue

package/layers/shader/app/plugins/shader.client.ts

@@ -1,8 +1,8 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import { checkWebGPUSupport } from '#layers/canvas/app/composables/useRendererCapabilities'
 
-export default defineNuxtPlugin(async () => {
+export default defineNuxtPlugin({
+  name: 'shader:shader',
+  async setup() {
   const config = useAppConfig()
   const shaderConfig = (config.shader || {}) as {
     preferWebGPU?: boolean
@@ -28,4 +28,5 @@ export default defineNuxtPlugin(async () => {
       },
     },
   }
+  },
 })

package/layers/shader/app/shaders/common/blend.ts

@@ -1,6 +1,3 @@
-/* eslint-disable max-params */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Modular TSL Color Blending Utilities
  * Provides composable blend mode functions for shader effects
@@ -194,7 +191,8 @@ export function blendLayers(
   let result = base
 
   for (const layer of layers) {
-    const blendFn = layer.blendMode || blendLinear
+    // Default to normal blending — blendWithOpacity already mixes with base by opacity
+    const blendFn = layer.blendMode ?? ((_base: TSLNode, blend: TSLNode) => blend)
     result = blendWithOpacity(result, layer.color, blendFn, layer.opacity)
   }
 

package/layers/shader/app/shaders/common/complex.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Complex number arithmetic in TSL
  * Both functions operate on vec2 (x = real, y = imaginary).

package/layers/shader/app/shaders/common/effects.ts

@@ -1,7 +1,3 @@
-/* eslint-disable complexity */
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Modular TSL Post-Processing Effects
  * Provides effects that sample and process textures
@@ -237,18 +233,14 @@ export function waveDistortionEffect(
 
   const _uv = inputUV().toVar()
 
-  let distortedUV: TSLNode
+  const _eX = _uv.y.mul(_freq).add(_time).sin().mul(_amp)
+  const _eY = _uv.x.mul(_freq).add(_time.mul(1.3)).sin().mul(_amp)
+  let distortedUV: TSLNode = vec2(_uv.x.add(_eX), _uv.y.add(_eY))
 
   if (direction === 'x') {
-    const offsetX = _uv.y.mul(_freq).add(_time).sin().mul(_amp)
-    distortedUV = vec2(_uv.x.add(offsetX), _uv.y)
+    distortedUV = vec2(_uv.x.add(_eX), _uv.y)
   } else if (direction === 'y') {
-    const offsetY = _uv.x.mul(_freq).add(_time).sin().mul(_amp)
-    distortedUV = vec2(_uv.x, _uv.y.add(offsetY))
-  } else {
-    const offsetX = _uv.y.mul(_freq).add(_time).sin().mul(_amp)
-    const offsetY = _uv.x.mul(_freq).add(_time.mul(1.3)).sin().mul(_amp)
-    distortedUV = vec2(_uv.x.add(offsetX), _uv.y.add(offsetY))
+    distortedUV = vec2(_uv.x, _uv.y.add(_uv.x.mul(_freq).add(_time).sin().mul(_amp)))
   }
 
   return input.sample(distortedUV)

package/layers/shader/app/shaders/common/grain.ts

@@ -1,7 +1,3 @@
-/* eslint-disable max-params */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Modular TSL Grain & Film Effects
  * Provides composable grain and texture overlay functions
@@ -73,7 +69,7 @@ export function coloredGrain(
  */
 export function bayer2x2(uv: TSLNode, scale: TSLNode | number = 1): TSLNode {
   const s = typeof scale === 'number' ? float(scale) : scale
-  const pos = floor(uv.mul(s)).mod(2)
+  const pos: TSLNode = floor(uv.mul(s)).mod(2)
   const matrix = vec2(0.25, 0.75)
   return mix(mix(matrix.x, matrix.y, pos.x), mix(matrix.y, matrix.x, pos.x), pos.y)
 }
@@ -83,7 +79,6 @@ export function bayer2x2(uv: TSLNode, scale: TSLNode | number = 1): TSLNode {
  */
 export function bayer4x4(uv: TSLNode, scale: TSLNode | number = 1): TSLNode {
   const s = typeof scale === 'number' ? float(scale) : scale
-  const pos = floor(uv.mul(s)).mod(4)
 
   // Simplified 4x4 Bayer matrix approximation
   const bayer2 = bayer2x2(uv, s)
@@ -427,7 +422,7 @@ function getBayer8x8Value(x: TSLNode, y: TSLNode): TSLNode {
  */
 export function bayer8x8(uv: TSLNode, scale: TSLNode | number = 1): TSLNode {
   const s = typeof scale === 'number' ? float(scale) : scale
-  const pos = floor(uv.mul(s)).mod(8)
+  const pos: TSLNode = floor(uv.mul(s)).mod(8)
   return getBayer8x8Value(pos.x, pos.y)
 }
 

package/layers/shader/app/shaders/common/lighting.ts

@@ -1,6 +1,3 @@
-/* eslint-disable max-params */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Modular TSL Lighting Utilities
  * Provides common lighting models for shader effects

package/layers/shader/app/shaders/common/math.ts

@@ -1,6 +1,3 @@
-/* eslint-disable max-params */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
 /**
  * Modular TSL Math Utilities
  * Provides hyperbolic functions, complex number operations, and coordinate utilities
@@ -8,13 +5,16 @@
 import {
   abs,
   add,
+  atan,
   clamp,
   cos,
   div,
   exp,
+  float,
   If,
   length,
   log,
+  mix,
   mul,
   PI,
   pow,
@@ -127,7 +127,9 @@ export function complexPow(v: TSLNode, p: TSLNode | number): TSLNode {
  * @returns Sine in complex form
  */
 export function complexSin(a: TSLNode): TSLNode {
-  return vec2(sin(a.x).mul(cosh(a.y)), cos(a.x).mul(sinh(a.y)))
+  const re: TSLNode = sin(a.x).mul(cosh(a.y))
+  const im: TSLNode = cos(a.x).mul(sinh(a.y))
+  return vec2(re, im)
 }
 
 /**
@@ -136,7 +138,9 @@ export function complexSin(a: TSLNode): TSLNode {
  * @returns Cosine in complex form
  */
 export function complexCos(a: TSLNode): TSLNode {
-  return vec2(cos(a.x).mul(cosh(a.y)), sin(a.x).mul(sinh(a.y)).negate())
+  const re: TSLNode = cos(a.x).mul(cosh(a.y))
+  const im: TSLNode = sin(a.x).mul(sinh(a.y)).negate()
+  return vec2(re, im)
 }
 
 /**
@@ -223,10 +227,10 @@ export function grad(
   t.assign(smoothstep(0.0, 1.0, t))
   u.assign(smoothstep(0.0, 1.0, u))
 
-  const colorA = vec4(_color0.xyz.mix(_color1.xyz, u), 1.0).toVar()
-  const colorB = vec4(_color2.xyz.mix(_color3.xyz, u), 1.0).toVar()
+  const colorA: TSLNode = vec4(mix(_color0.xyz, _color1.xyz, u), 1.0).toVar()
+  const colorB: TSLNode = vec4(mix(_color2.xyz, _color3.xyz, u), 1.0).toVar()
 
-  return colorA.xyz.mix(colorB.xyz, t)
+  return mix(colorA.xyz, colorB.xyz, t)
 }
 
 /**