kmcom-nuxt-layers 2.2.0 → 2.2.1

package/layers/shader/app/components/Preset/ThemePlasma.client.vue

@@ -1,55 +1,46 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- 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 - TSL types
   import {
     createAmbientUniforms,
     createThemePlasmaColorNode,
   } from '#layers/shader/app/composables/useAmbientMaterials'
 
-  const props = withDefaults(
-    defineProps<{
-      speed?: number
-      intensity?: number
-      mouseInteraction?: boolean
-      mouseStrength?: number
-      color1?: string
-      color2?: string
-      color3?: string
-      color4?: string
-    }>(),
-    {
-      speed: 1.0,
-      intensity: 1.0,
-      mouseInteraction: true,
-      mouseStrength: 0.3,
-      color1: '#8b5cf6',
-      color2: '#6366f1',
-      color3: '#a78bfa',
-      color4: '#38bdf8',
-    }
-  )
+  const {
+    speed = 1.0,
+    intensity = 1.0,
+    mouseInteraction = true,
+    mouseStrength = 0.3,
+    color1 = '#8b5cf6',
+    color2 = '#6366f1',
+    color3 = '#a78bfa',
+    color4 = '#38bdf8',
+  } = defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>()
 
   const emit = defineEmits<{
     node: [colorNode: any]
   }>()
 
   const uniforms = createAmbientUniforms({
-    speed: props.speed,
-    intensity: props.intensity,
-    mouseInteraction: props.mouseInteraction,
+    speed: speed,
+    intensity: intensity,
+    mouseInteraction: mouseInteraction,
   })
-  if (props.mouseInteraction) {
-    uniforms.mouseStrength.value = props.mouseStrength
+  if (mouseInteraction) {
+    uniforms.mouseStrength.value = mouseStrength
   }
 
-  const c1 = useShaderColor(props.color1)
-  const c2 = useShaderColor(props.color2)
-  const c3 = useShaderColor(props.color3)
-  const c4 = useShaderColor(props.color4)
+  const c1 = useShaderColor(color1)
+  const c2 = useShaderColor(color2)
+  const c3 = useShaderColor(color3)
+  const c4 = useShaderColor(color4)
 
   const colorNode = createThemePlasmaColorNode(uniforms, {
     color1: c1.node,
@@ -59,19 +50,19 @@
   })
 
   watch(
-    () => props.color1,
+    () => color1,
     (hex) => c1.tweenTo(hex, 0.8)
   )
   watch(
-    () => props.color2,
+    () => color2,
     (hex) => c2.tweenTo(hex, 0.8)
   )
   watch(
-    () => props.color3,
+    () => color3,
     (hex) => c3.tweenTo(hex, 0.8)
   )
   watch(
-    () => props.color4,
+    () => color4,
     (hex) => c4.tweenTo(hex, 0.8)
   )
 
@@ -90,27 +81,27 @@
   }
 
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       uniforms.speed.value = v
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       uniforms.intensity.value = v
     }
   )
   watch(
-    () => props.mouseInteraction,
+    () => mouseInteraction,
     (v) => {
-      uniforms.mouseStrength.value = v ? props.mouseStrength : 0
+      uniforms.mouseStrength.value = v ? mouseStrength : 0
     }
   )
   watch(
-    () => props.mouseStrength,
+    () => mouseStrength,
     (v) => {
-      if (props.mouseInteraction) uniforms.mouseStrength.value = v
+      if (mouseInteraction) uniforms.mouseStrength.value = v
     }
   )
 

package/layers/shader/app/components/Preset/ThemeWave.client.vue

@@ -1,55 +1,46 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- 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 - TSL types
   import {
     createAmbientUniforms,
     createThemeWaveColorNode,
   } from '#layers/shader/app/composables/useAmbientMaterials'
 
-  const props = withDefaults(
-    defineProps<{
-      speed?: number
-      intensity?: number
-      mouseInteraction?: boolean
-      mouseStrength?: number
-      color1?: string
-      color2?: string
-      color3?: string
-      color4?: string
-    }>(),
-    {
-      speed: 1.0,
-      intensity: 1.0,
-      mouseInteraction: true,
-      mouseStrength: 0.3,
-      color1: '#8b5cf6',
-      color2: '#6366f1',
-      color3: '#a78bfa',
-      color4: '#38bdf8',
-    }
-  )
+  const {
+    speed = 1.0,
+    intensity = 1.0,
+    mouseInteraction = true,
+    mouseStrength = 0.3,
+    color1 = '#8b5cf6',
+    color2 = '#6366f1',
+    color3 = '#a78bfa',
+    color4 = '#38bdf8',
+  } = defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>()
 
   const emit = defineEmits<{
     node: [colorNode: any]
   }>()
 
   const uniforms = createAmbientUniforms({
-    speed: props.speed,
-    intensity: props.intensity,
-    mouseInteraction: props.mouseInteraction,
+    speed: speed,
+    intensity: intensity,
+    mouseInteraction: mouseInteraction,
   })
-  if (props.mouseInteraction) {
-    uniforms.mouseStrength.value = props.mouseStrength
+  if (mouseInteraction) {
+    uniforms.mouseStrength.value = mouseStrength
   }
 
-  const c1 = useShaderColor(props.color1)
-  const c2 = useShaderColor(props.color2)
-  const c3 = useShaderColor(props.color3)
-  const c4 = useShaderColor(props.color4)
+  const c1 = useShaderColor(color1)
+  const c2 = useShaderColor(color2)
+  const c3 = useShaderColor(color3)
+  const c4 = useShaderColor(color4)
 
   const colorNode = createThemeWaveColorNode(uniforms, {
     color1: c1.node,
@@ -59,19 +50,19 @@
   })
 
   watch(
-    () => props.color1,
+    () => color1,
     (hex) => c1.tweenTo(hex, 0.8)
   )
   watch(
-    () => props.color2,
+    () => color2,
     (hex) => c2.tweenTo(hex, 0.8)
   )
   watch(
-    () => props.color3,
+    () => color3,
     (hex) => c3.tweenTo(hex, 0.8)
   )
   watch(
-    () => props.color4,
+    () => color4,
     (hex) => c4.tweenTo(hex, 0.8)
   )
 
@@ -90,27 +81,27 @@
   }
 
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       uniforms.speed.value = v
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       uniforms.intensity.value = v
     }
   )
   watch(
-    () => props.mouseInteraction,
+    () => mouseInteraction,
     (v) => {
-      uniforms.mouseStrength.value = v ? props.mouseStrength : 0
+      uniforms.mouseStrength.value = v ? mouseStrength : 0
     }
   )
   watch(
-    () => props.mouseStrength,
+    () => mouseStrength,
     (v) => {
-      if (props.mouseInteraction) uniforms.mouseStrength.value = v
+      if (mouseInteraction) uniforms.mouseStrength.value = v
     }
   )
 

package/layers/shader/app/components/Shader/Background.client.vue

@@ -1,11 +1,4 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- 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 - Three.js WebGPU types
   import { useWindowSize } from '@vueuse/core'
   import {
     ACESFilmicToneMapping,
@@ -22,33 +15,30 @@
   } from 'three'
   import { WebGPURenderer } from 'three/webgpu'
 
-  const props = withDefaults(
-    defineProps<{
-      /** The TSL node material to render */
-      material?: any
-      /** Background clear color */
-      clearColor?: string
-      /** Tone mapping algorithm */
-      toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
-      /** Enable antialiasing */
-      antialias?: boolean
-      /** Fixed position (covers viewport) */
-      fixed?: boolean
-      /** Z-index for the background */
-      zIndex?: number
-      /** Pointer events on the canvas */
-      pointerEvents?: 'none' | 'auto'
-    }>(),
-    {
-      material: null,
-      clearColor: '#000000',
-      toneMapping: 'aces',
-      antialias: true,
-      fixed: true,
-      zIndex: -1,
-      pointerEvents: 'none',
-    }
-  )
+  const {
+    material = null,
+    clearColor = '#000000',
+    toneMapping = 'aces',
+    antialias = true,
+    fixed = true,
+    zIndex = -1,
+    pointerEvents = 'none',
+  } = defineProps<{
+    /** The TSL node material to render */
+    material?: any
+    /** Background clear color */
+    clearColor?: string
+    /** Tone mapping algorithm */
+    toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
+    /** Enable antialiasing */
+    antialias?: boolean
+    /** Fixed position (covers viewport) */
+    fixed?: boolean
+    /** Z-index for the background */
+    zIndex?: number
+    /** Pointer events on the canvas */
+    pointerEvents?: 'none' | 'auto'
+  }>()
 
   const emit = defineEmits<{
     ready: [renderer: any]
@@ -63,6 +53,8 @@
   let planeMesh: Mesh
   let animationId: number
   let initialized = false
+  let initStarted = false
+  let disposed = false
 
   const toneMappingMap: Record<string, number> = {
     aces: ACESFilmicToneMapping,
@@ -72,13 +64,13 @@
   }
 
   const containerStyle = computed<Record<string, string | number>>(() => ({
-    position: props.fixed ? 'fixed' : 'absolute',
+    position: fixed ? 'fixed' : 'absolute',
     top: 0,
     left: 0,
-    width: props.fixed ? '100vw' : '100%',
-    height: props.fixed ? '100vh' : '100%',
-    zIndex: props.zIndex,
-    pointerEvents: props.pointerEvents,
+    width: fixed ? '100vw' : '100%',
+    height: fixed ? '100vh' : '100%',
+    zIndex: zIndex,
+    pointerEvents: pointerEvents,
     overflow: 'hidden',
   }))
 
@@ -94,6 +86,9 @@
   }
 
   function animate() {
+    // Bail if the component unmounted — guards against a frame scheduled just
+    // before teardown rendering on a disposed renderer.
+    if (disposed) return
     animationId = requestAnimationFrame(animate)
     if (renderer && scene && camera) {
       renderer.render(scene, camera)
@@ -102,41 +97,67 @@
 
   async function init() {
     const canvas = canvasRef.value
-    if (!canvas) return
-
-    // WebGPURenderer falls back to WebGL2 if WebGPU is unavailable
-    renderer = new WebGPURenderer({ canvas, antialias: props.antialias })
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-    renderer.setSize(width.value, height.value)
-    renderer.setClearColor(new Color(props.clearColor))
-    renderer.toneMapping = toneMappingMap[props.toneMapping] ?? ACESFilmicToneMapping
-    renderer.outputColorSpace = SRGBColorSpace
-
-    // Required async init for WebGPU context setup
-    await renderer.init()
-
-    scene = new Scene()
-    camera = new PerspectiveCamera(75, width.value / (height.value || 1), 0.1, 100)
-    camera.position.set(0, 0, 1)
-
-    const { width: pw, height: ph } = getPlaneSize(width.value, height.value)
-    const geometry = new PlaneGeometry(pw, ph)
-    planeMesh = new Mesh(geometry, props.material ?? new MeshBasicMaterial({ color: 0x000000 }))
-    scene.add(planeMesh)
-
-    // Pre-compile the shader pipeline asynchronously before starting the render loop.
-    // Without this, the first render() call uses device.createRenderPipeline() which
-    // blocks the main thread for 1-5s on first visit (cold WebGPU pipeline cache).
-    // compileAsync() uses device.createRenderPipelineAsync() instead, which is non-blocking.
-    await renderer.compileAsync(scene, camera)
-
-    initialized = true
-    emit('ready', renderer)
-    animate()
+    if (!canvas || disposed) return
+
+    try {
+      // WebGPURenderer falls back to WebGL2 if WebGPU is unavailable
+      renderer = new WebGPURenderer({ canvas, antialias: antialias })
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+      renderer.setSize(width.value, height.value)
+      renderer.setClearColor(new Color(clearColor))
+      renderer.toneMapping = toneMappingMap[toneMapping] ?? ACESFilmicToneMapping
+      renderer.outputColorSpace = SRGBColorSpace
+
+      // Required async init for WebGPU context setup
+      await renderer.init()
+
+      // The component can unmount while the await above is pending (navigating
+      // away before WebGPU finishes initializing). onUnmounted already ran and
+      // disposed the renderer, so abort before starting the animation loop —
+      // otherwise we leak a throwing rAF loop rendering on a disposed renderer.
+      if (disposed) {
+        renderer.dispose()
+        return
+      }
+
+      scene = new Scene()
+      camera = new PerspectiveCamera(75, width.value / (height.value || 1), 0.1, 100)
+      camera.position.set(0, 0, 1)
+
+      const { width: pw, height: ph } = getPlaneSize(width.value, height.value)
+      const geometry = new PlaneGeometry(pw, ph)
+      planeMesh = new Mesh(geometry, material ?? new MeshBasicMaterial({ color: 0x000000 }))
+      scene.add(planeMesh)
+
+      // Pre-compile the shader pipeline only when the material's colorNode is already
+      // set (i.e. the preset component mounted and emitted @node before us). Without
+      // a colorNode the compilation produces a black fallback and a later needsUpdate
+      // won't reliably trigger a GPU pipeline rebuild in all drivers.
+      // When colorNode is absent we skip pre-compilation and let the first render()
+      // call compile lazily — the browser may stutter once, but the output is correct.
+      if (material?.colorNode) {
+        await renderer.compileAsync(scene, camera)
+        if (disposed) {
+          renderer.dispose()
+          return
+        }
+      }
+
+      initialized = true
+      emit('ready', renderer)
+    } catch (e) {
+      console.error('[ShaderBackground] init() failed:', e)
+    }
+
+    // Always start the animation loop even if pre-compilation failed — Three.js
+    // will compile lazily on the first render() call.
+    if (scene && camera) {
+      animate()
+    }
   }
 
   watch(
-    () => props.material,
+    () => material,
     (mat) => {
       if (planeMesh && mat) {
         planeMesh.material = mat
@@ -145,7 +166,7 @@
   )
 
   watch(
-    () => props.clearColor,
+    () => clearColor,
     (color) => {
       if (renderer && initialized) {
         renderer.setClearColor(new Color(color))
@@ -165,11 +186,24 @@
     }
   })
 
-  onMounted(() => {
-    init()
-  })
+  // As a `.client.vue` component, the real <canvas> can attach a tick after this
+  // component's onMounted fires, leaving canvasRef.value null. Drive init() off the
+  // template ref so it runs the moment the canvas element actually binds.
+  watch(
+    canvasRef,
+    (canvas) => {
+      if (canvas && !initStarted) {
+        initStarted = true
+        init()
+      }
+    },
+    { immediate: true, flush: 'post' }
+  )
 
   onUnmounted(() => {
+    // Mark disposed first so an in-flight async init() aborts instead of
+    // starting the animation loop after teardown.
+    disposed = true
     cancelAnimationFrame(animationId)
     planeMesh?.geometry.dispose()
     renderer?.dispose()

package/layers/shader/app/components/Shader/Debug.vue

@@ -1,17 +1,7 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  const props = withDefaults(
-    defineProps<{
-      show?: boolean
-    }>(),
-    {
-      show: true,
-    }
-  )
+  const { show = true } = defineProps<{
+    show?: boolean
+  }>()
 
   const config = useAppConfig()
   const shaderConfig = (config.shader || {}) as {
@@ -21,7 +11,7 @@
   const { $shader } = useNuxtApp() as { $shader?: { useWebGPU: boolean } }
 
   const showDebug = computed(() => {
-    if (!props.show) return false
+    if (!show) return false
     return import.meta.dev && shaderConfig.debugPanel !== false
   })
 

package/layers/shader/app/components/Shader/Host.client.vue

@@ -1,11 +1,4 @@
-<!-- eslint-disable no-restricted-imports -->
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- 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 - TSL types
   import type { Component } from 'vue'
   import { tweenUniform } from '#layers/shader/app/utils/tsl/tween'
   import { DoubleSide } from 'three'
@@ -52,6 +45,10 @@
   const currentPreset = shallowRef<Component | null>(props.preset)
   const nextPreset = shallowRef<Component | null>(null)
 
+  function setCurrentPreset(preset: Component | null) {
+    currentPreset.value = preset
+  }
+
   // Material created once, updated via colorNode
   const material = new MeshBasicNodeMaterial()
   material.side = DoubleSide
@@ -87,8 +84,9 @@
       if (!newPreset || newPreset === oldPreset) return
 
       if (!currentPreset.value) {
-        // First preset — no transition
-        currentPreset.value = newPreset
+        // First preset — no transition (setter call sidesteps the null-narrowing
+        // TS applies to `currentPreset.value` inside this branch)
+        setCurrentPreset(newPreset)
         return
       }
 

package/layers/shader/app/components/Shader/Material.client.vue

@@ -1,33 +1,21 @@
-<!-- eslint-disable vue/no-unused-properties -->
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- 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 - TSL types
-  import { DoubleSide } from 'three'
+  import { BackSide, DoubleSide, FrontSide } from 'three'
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
-  const props = withDefaults(
-    defineProps<{
-      transparent?: boolean
-      side?: 'front' | 'back' | 'double'
-    }>(),
-    {
-      transparent: false,
-      side: 'double',
-    }
-  )
+  const { transparent = false, side = 'double' } = defineProps<{
+    transparent?: boolean
+    side?: 'front' | 'back' | 'double'
+  }>()
 
   // Create the shader graph context for child nodes
   const graph = useShaderGraph()
 
   // Create material ONCE in setup -- never recreated
   const material = new MeshBasicNodeMaterial()
-  material.side = DoubleSide
+  const sideMap = { front: FrontSide, back: BackSide, double: DoubleSide } as const
+  material.side = sideMap[side]
 
-  if (props.transparent) {
+  if (transparent) {
     material.transparent = true
   }
 

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

@@ -1,10 +1,4 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- 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 - TSL types are complex
   import { DoubleSide } from 'three'
   import { float, Fn, positionLocal, uv, vec3, vec4 } from 'three/tsl'
   import { MeshBasicNodeMaterial } from 'three/webgpu'

package/layers/shader/app/components/Shader/Runtime.client.vue

@@ -1,8 +1,3 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
   const props = withDefaults(
     defineProps<{