kmcom-nuxt-layers 2.2.0 → 2.2.1

package/layers/scroll/app/composables/useSmoothScroll.ts

@@ -1,7 +1,3 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable complexity */
-/* eslint-disable eqeqeq */
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { Ref } from 'vue'
 import type LocomotiveScroll from 'locomotive-scroll'
 
@@ -31,7 +27,7 @@ export function useSmoothScroll() {
   )
 
   const isEnabled = computed(() => (appConfig.scroll?.smoothScroll ?? true) !== false)
-  const isReady = computed(() => locomotiveScroll.value != null)
+  const isReady = computed(() => locomotiveScroll.value !== null)
 
   const scrollState = computed(
     () =>
@@ -75,9 +71,9 @@ export function useSmoothScroll() {
         lock: options?.lock ?? false,
         ...(options?.onComplete !== undefined && { onComplete: options.onComplete }),
       })
-    } else {
-      nativeScrollTo(target, options)
+      return
     }
+    nativeScrollTo(target, options)
   }
 
   function scrollToTop(options?: { duration?: number; immediate?: boolean }) {
@@ -107,28 +103,29 @@ export function useSmoothScroll() {
   }
 }
 
-function nativeScrollTo(target: string | number | HTMLElement, options?: ScrollToOptions) {
-  let targetPosition: number
-
-  if (typeof target === 'number') {
-    targetPosition = target
-  } else if (typeof target === 'string') {
-    const element = document.querySelector(target)
-    if (!element) return
-    targetPosition = element.getBoundingClientRect().top + window.scrollY
-  } else {
-    targetPosition = target.getBoundingClientRect().top + window.scrollY
+function resolveScrollTarget(target: string | number | HTMLElement): number | null {
+  if (typeof target === 'number') return target
+  if (typeof target === 'string') {
+    const el = document.querySelector(target)
+    if (!el) return null
+    return el.getBoundingClientRect().top + window.scrollY
   }
+  return target.getBoundingClientRect().top + window.scrollY
+}
+
+function nativeScrollTo(target: string | number | HTMLElement, options?: ScrollToOptions) {
+  const base = resolveScrollTarget(target)
+  if (base === null) return
 
-  targetPosition += options?.offset ?? 0
+  const targetPosition = base + (options?.offset ?? 0)
 
   if (options?.immediate) {
     window.scrollTo(0, targetPosition)
     options?.onComplete?.()
-  } else {
-    window.scrollTo({ top: targetPosition, behavior: 'smooth' })
-    if (options?.onComplete) {
-      setTimeout(options.onComplete, options?.duration ?? 500)
-    }
+    return
+  }
+  window.scrollTo({ top: targetPosition, behavior: 'smooth' })
+  if (options?.onComplete) {
+    setTimeout(options.onComplete, options?.duration ?? 500)
   }
 }

package/layers/scroll/app/plugins/locomotive-scroll.client.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-syntax */
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 import LocomotiveScroll from 'locomotive-scroll'
 
@@ -10,7 +9,9 @@ export type ScrollState = {
   progress: number
 }
 
-export default defineNuxtPlugin(() => {
+export default defineNuxtPlugin({
+  name: 'scroll:locomotive-scroll',
+  setup() {
   const scrollState = reactive<ScrollState>({
     scroll: 0,
     limit: 0,
@@ -53,6 +54,7 @@ export default defineNuxtPlugin(() => {
 
   if (smoothScroll === true) {
     nuxtApp.hook('app:mounted', () => nextTick(init))
+    nuxtApp.hook('page:finish', () => nextTick(() => ScrollTrigger.refresh()))
   } else if (Array.isArray(smoothScroll)) {
     addRouteMiddleware((to, from) => {
       if (smoothScroll.includes(to.path)) {
@@ -72,4 +74,5 @@ export default defineNuxtPlugin(() => {
       scrollState,
     },
   }
+  },
 })

package/layers/seo/app/app.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 export default defineAppConfig({
   seoLayer: {
     ogImage: {

package/layers/seo/app/composables/useSeoConfig.ts

@@ -1,4 +1,3 @@
-/* eslint-disable complexity */
 export function useSeoConfig() {
   const site = useSiteConfig()
   const { seoLayer } = useAppConfig()

package/layers/shader/app/components/Effect/PostProcessing.vue

@@ -1,19 +1,9 @@
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable vue/define-props-destructuring -->
-<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import { EffectComposer } from '@tresjs/post-processing'
 
-  const props = withDefaults(
-    defineProps<{
-      enabled?: boolean
-    }>(),
-    {
-      enabled: true,
-    }
-  )
+  const { enabled = true } = defineProps<{
+    enabled?: boolean
+  }>()
 </script>
 
 <template>

package/layers/shader/app/components/Material/AmbientAurora.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 - TSL types are complex
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -21,73 +17,71 @@
 
   import { fbm2D, simplexNoise2D } from '../../shaders/common/noise'
   import { cosinePalette } from '../../shaders/common/palette'
-
-  const props = withDefaults(
-    defineProps<{
-      speed?: number
-      intensity?: number
-      color1?: string
-      color2?: string
-      color3?: string
-      mouseX?: number
-      mouseY?: number
-      mouseInteraction?: boolean
-      mouseStrength?: number
-    }>(),
-    {
-      speed: 1.0,
-      intensity: 1.0,
-      color1: '#0a0a20',
-      color2: '#00ff87',
-      color3: '#60efff',
-      mouseX: 0.5,
-      mouseY: 0.5,
-      mouseInteraction: true,
-      mouseStrength: 0.5,
-    }
-  )
+  import type { TSLNode } from '../../shaders/types'
+
+  const {
+    speed = 1.0,
+    intensity = 1.0,
+    color1 = '#0a0a20',
+    color2 = '#00ff87',
+    color3 = '#60efff',
+    mouseX = 0.5,
+    mouseY = 0.5,
+    mouseInteraction = true,
+    mouseStrength = 0.5,
+  } = defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>()
 
   // Create reactive uniforms
-  const speedUniform = uniform(props.speed)
-  const intensityUniform = uniform(props.intensity)
-  const mouseXUniform = uniform(props.mouseX)
-  const mouseYUniform = uniform(props.mouseY)
-  const mouseStrengthUniform = uniform(props.mouseStrength)
-  const color1Uniform = uniform(new Color(props.color1))
-  const color2Uniform = uniform(new Color(props.color2))
-  const color3Uniform = uniform(new Color(props.color3))
+  const speedUniform = uniform(speed)
+  const intensityUniform = uniform(intensity)
+  const mouseXUniform = uniform(mouseX)
+  const mouseYUniform = uniform(mouseY)
+  const mouseStrengthUniform = uniform(mouseStrength)
+  const color1Uniform: TSLNode = uniform(new Color(color1))
+  const color2Uniform: TSLNode = uniform(new Color(color2))
+  const color3Uniform: TSLNode = uniform(new Color(color3))
 
   // Watch prop changes
   watch(
-    () => props.speed,
+    () => speed,
     (val) => (speedUniform.value = val)
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (val) => (intensityUniform.value = val)
   )
   watch(
-    () => props.mouseX,
+    () => mouseX,
     (val) => (mouseXUniform.value = val)
   )
   watch(
-    () => props.mouseY,
+    () => mouseY,
     (val) => (mouseYUniform.value = val)
   )
   watch(
-    () => props.mouseStrength,
+    () => mouseStrength,
     (val) => (mouseStrengthUniform.value = val)
   )
   watch(
-    () => props.color1,
+    () => color1,
     (val) => (color1Uniform.value = new Color(val))
   )
   watch(
-    () => props.color2,
+    () => color2,
     (val) => (color2Uniform.value = new Color(val))
   )
   watch(
-    () => props.color3,
+    () => color3,
     (val) => (color3Uniform.value = new Color(val))
   )
 
@@ -99,8 +93,8 @@
 
     // Mouse offset
     const mouseOffset = vec2(
-      sub(mouseXUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0),
-      sub(mouseYUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+      sub(mouseXUniform, 0.5).mul(mouseInteraction ? mouseStrengthUniform : 0),
+      sub(mouseYUniform, 0.5).mul(mouseInteraction ? mouseStrengthUniform : 0)
     )
 
     // UV coordinates

package/layers/shader/app/components/Material/AmbientFlow.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 - TSL types are complex
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -21,80 +17,78 @@
 
   import { fbm2D, ridgedFbm2d, warpedFbmCoords } from '../../shaders/common/noise'
   import { cosinePalette } from '../../shaders/common/palette'
-
-  const props = withDefaults(
-    defineProps<{
-      speed?: number
-      intensity?: number
-      color1?: string
-      color2?: string
-      color3?: string
-      color4?: string
-      mouseX?: number
-      mouseY?: number
-      mouseInteraction?: boolean
-      mouseStrength?: number
-    }>(),
-    {
-      speed: 1.0,
-      intensity: 1.0,
-      color1: '#134e5e',
-      color2: '#71b280',
-      color3: '#e8d5b7',
-      color4: '#fc5c7d',
-      mouseX: 0.5,
-      mouseY: 0.5,
-      mouseInteraction: true,
-      mouseStrength: 0.5,
-    }
-  )
+  import type { TSLNode } from '../../shaders/types'
+
+  const {
+    speed = 1.0,
+    intensity = 1.0,
+    color1 = '#134e5e',
+    color2 = '#71b280',
+    color3 = '#e8d5b7',
+    color4 = '#fc5c7d',
+    mouseX = 0.5,
+    mouseY = 0.5,
+    mouseInteraction = true,
+    mouseStrength = 0.5,
+  } = defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>()
 
   // Create reactive uniforms
-  const speedUniform = uniform(props.speed)
-  const intensityUniform = uniform(props.intensity)
-  const mouseXUniform = uniform(props.mouseX)
-  const mouseYUniform = uniform(props.mouseY)
-  const mouseStrengthUniform = uniform(props.mouseStrength)
-  const color1Uniform = uniform(new Color(props.color1))
-  const color2Uniform = uniform(new Color(props.color2))
-  const color3Uniform = uniform(new Color(props.color3))
-  const color4Uniform = uniform(new Color(props.color4))
+  const speedUniform = uniform(speed)
+  const intensityUniform = uniform(intensity)
+  const mouseXUniform = uniform(mouseX)
+  const mouseYUniform = uniform(mouseY)
+  const mouseStrengthUniform = uniform(mouseStrength)
+  const color1Uniform: TSLNode = uniform(new Color(color1))
+  const color2Uniform: TSLNode = uniform(new Color(color2))
+  const color3Uniform: TSLNode = uniform(new Color(color3))
+  const color4Uniform: TSLNode = uniform(new Color(color4))
 
   // Watch prop changes
   watch(
-    () => props.speed,
+    () => speed,
     (val) => (speedUniform.value = val)
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (val) => (intensityUniform.value = val)
   )
   watch(
-    () => props.mouseX,
+    () => mouseX,
     (val) => (mouseXUniform.value = val)
   )
   watch(
-    () => props.mouseY,
+    () => mouseY,
     (val) => (mouseYUniform.value = val)
   )
   watch(
-    () => props.mouseStrength,
+    () => mouseStrength,
     (val) => (mouseStrengthUniform.value = val)
   )
   watch(
-    () => props.color1,
+    () => color1,
     (val) => (color1Uniform.value = new Color(val))
   )
   watch(
-    () => props.color2,
+    () => color2,
     (val) => (color2Uniform.value = new Color(val))
   )
   watch(
-    () => props.color3,
+    () => color3,
     (val) => (color3Uniform.value = new Color(val))
   )
   watch(
-    () => props.color4,
+    () => color4,
     (val) => (color4Uniform.value = new Color(val))
   )
 
@@ -110,19 +104,16 @@
     // Mouse offset
     const mouseOffset = vec2(
       sub(mouseXUniform, 0.5)
-        .mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+        .mul(mouseInteraction ? mouseStrengthUniform : 0)
         .mul(0.5),
       sub(mouseYUniform, 0.5)
-        .mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+        .mul(mouseInteraction ? mouseStrengthUniform : 0)
         .mul(0.5)
     )
 
     // Domain warping - create flowing organic patterns
-    const warpedUV = warpedFbmCoords(uvCoord, time, {
-      warpStrength: 0.4,
-      warpScale: 2.0,
-      octaves: 3,
-    })
+    // warpedFbmCoords has no warp-strength options — defaults match the previous render output
+    const warpedUV = warpedFbmCoords(uvCoord, time)
 
     // Add mouse influence to warped coordinates
     const finalUV = add(warpedUV, mouseOffset)

package/layers/shader/app/components/Material/AmbientGradientMesh.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 - TSL types are complex
   import { Color, DoubleSide } from 'three'
   import {
     add,
@@ -22,80 +18,78 @@
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
   import { fbm2D, simplexNoise2D } from '../../shaders/common/noise'
-
-  const props = withDefaults(
-    defineProps<{
-      speed?: number
-      intensity?: number
-      color1?: string
-      color2?: string
-      color3?: string
-      color4?: string
-      mouseX?: number
-      mouseY?: number
-      mouseInteraction?: boolean
-      mouseStrength?: number
-    }>(),
-    {
-      speed: 1.0,
-      intensity: 1.0,
-      color1: '#667eea',
-      color2: '#764ba2',
-      color3: '#f093fb',
-      color4: '#f5576c',
-      mouseX: 0.5,
-      mouseY: 0.5,
-      mouseInteraction: true,
-      mouseStrength: 0.3,
-    }
-  )
+  import type { TSLNode } from '../../shaders/types'
+
+  const {
+    speed = 1.0,
+    intensity = 1.0,
+    color1 = '#667eea',
+    color2 = '#764ba2',
+    color3 = '#f093fb',
+    color4 = '#f5576c',
+    mouseX = 0.5,
+    mouseY = 0.5,
+    mouseInteraction = true,
+    mouseStrength = 0.3,
+  } = defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>()
 
   // Create reactive uniforms
-  const speedUniform = uniform(props.speed)
-  const intensityUniform = uniform(props.intensity)
-  const mouseXUniform = uniform(props.mouseX)
-  const mouseYUniform = uniform(props.mouseY)
-  const mouseStrengthUniform = uniform(props.mouseStrength)
-  const color1Uniform = uniform(new Color(props.color1))
-  const color2Uniform = uniform(new Color(props.color2))
-  const color3Uniform = uniform(new Color(props.color3))
-  const color4Uniform = uniform(new Color(props.color4))
+  const speedUniform = uniform(speed)
+  const intensityUniform = uniform(intensity)
+  const mouseXUniform = uniform(mouseX)
+  const mouseYUniform = uniform(mouseY)
+  const mouseStrengthUniform = uniform(mouseStrength)
+  const color1Uniform: TSLNode = uniform(new Color(color1))
+  const color2Uniform: TSLNode = uniform(new Color(color2))
+  const color3Uniform: TSLNode = uniform(new Color(color3))
+  const color4Uniform: TSLNode = uniform(new Color(color4))
 
   // Watch prop changes
   watch(
-    () => props.speed,
+    () => speed,
     (val) => (speedUniform.value = val)
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (val) => (intensityUniform.value = val)
   )
   watch(
-    () => props.mouseX,
+    () => mouseX,
     (val) => (mouseXUniform.value = val)
   )
   watch(
-    () => props.mouseY,
+    () => mouseY,
     (val) => (mouseYUniform.value = val)
   )
   watch(
-    () => props.mouseStrength,
+    () => mouseStrength,
     (val) => (mouseStrengthUniform.value = val)
   )
   watch(
-    () => props.color1,
+    () => color1,
     (val) => (color1Uniform.value = new Color(val))
   )
   watch(
-    () => props.color2,
+    () => color2,
     (val) => (color2Uniform.value = new Color(val))
   )
   watch(
-    () => props.color3,
+    () => color3,
     (val) => (color3Uniform.value = new Color(val))
   )
   watch(
-    () => props.color4,
+    () => color4,
     (val) => (color4Uniform.value = new Color(val))
   )
 
@@ -110,8 +104,8 @@
 
     // Mouse offset
     const mouseOffset = vec2(
-      sub(mouseXUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0),
-      sub(mouseYUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+      sub(mouseXUniform, 0.5).mul(mouseInteraction ? mouseStrengthUniform : 0),
+      sub(mouseYUniform, 0.5).mul(mouseInteraction ? mouseStrengthUniform : 0)
     )
     const adjustedUV = add(uvCoord, mul(mouseOffset, 0.1))