kmcom-nuxt-layers 2.2.4 → 2.2.6

package/layers/animations/app/components/Motion/CountUp.vue

@@ -21,7 +21,8 @@
     as?: string
   }>()
 
-  const el = ref<HTMLElement | null>(null)
+  // const el = ref<HTMLElement | null>(null)
+  const el = useTemplateRef<HTMLElement | null>(null)
   const { displayValue, isComplete } = useCountUp(el, {
     to,
     from,

package/layers/animations/app/components/Motion/Magnetic.vue

@@ -11,7 +11,8 @@
     stiffness?: number
   }>()
 
-  const el = ref<HTMLElement | null>(null)
+  // const el = ref<HTMLElement | null>(null)
+  const el = useTemplateRef<HTMLElement | null>(null)
   const { isActive } = useMagneticElement(el, { strength, radius, damping, stiffness })
 </script>
 

package/layers/animations/app/components/Motion/Marquee.vue

@@ -52,8 +52,12 @@
   const { gsap } = useGsap()
   const { velocity: scrollVelocity, direction: scrollDirection } = useSmoothScroll()
 
-  const containerRef = ref<HTMLElement | null>(null)
-  const contentRef = ref<HTMLElement | null>(null)
+  // const containerRef = ref<HTMLElement | null>(null)
+  const containerRef = useTemplateRef<HTMLElement | null>(null)
+
+  // const contentRef = ref<HTMLElement | null>(null)
+  const contentRef = useTemplateRef<HTMLElement | null>(null)
+
   const tweenRef = ref<gsap.core.Tween | null>(null)
 
   const isPaused = ref(false)

package/layers/animations/app/components/Motion/MarqueeText.vue

@@ -35,7 +35,9 @@
   const { gsap, ScrollTrigger } = useGsap()
   const { velocityFactor } = useMarqueeVelocity({ damping, stiffness, velocityMapping })
 
-  const containerRef = ref<HTMLElement[]>([])
+  // const containerRef = ref<HTMLElement[]>([])
+  const containerRef = useTemplateRef<HTMLElement[]>([])
+
   const copyRefs = ref<HTMLSpanElement[]>([])
 
   const { copyWidths, calculatedCopies } = useMarqueeCopies(
@@ -130,7 +132,7 @@
       :style="parallaxStyle"
     >
       <div
-        :class="`${scrollerClassName} font-styles-logo flex py-2 text-center font-sans text-4xl font-medium tracking-[-0.02em] whitespace-nowrap text-neutral drop-shadow md:text-[5rem] md:leading-[5rem]`"
+        :class="`${scrollerClassName} font-styles-logo flex py-2 text-center font-sans text-4xl font-medium tracking-[-0.02em] whitespace-nowrap text-neutral drop-shadow md:text-[5rem] md:leading-20`"
         :style="{ transform: `translateX(${scrollTransforms[index] ?? '0px'})`, ...scrollerStyle }"
       >
         <span

package/layers/animations/app/components/Motion/Tilt.vue

@@ -11,7 +11,8 @@
     stiffness?: number
   }>()
 
-  const el = ref<HTMLElement | null>(null)
+  // const el = ref<HTMLElement | null>(null)
+  const el = useTemplateRef<HTMLElement | null>(null)
   useTiltEffect(el, { maxTilt, perspective, damping, stiffness })
 </script>
 

package/layers/animations/app/composables/useMagneticElement.ts

@@ -5,7 +5,7 @@ export function useMagneticElement(
     radius?: number
     damping?: number
     stiffness?: number
-  } = {},
+  } = {}
 ) {
   const { gsap } = useGsap()
   const { elementX, elementY, elementWidth, elementHeight } = useMouseInElement(elementRef)

package/layers/animations/app/composables/useMarqueeCopies.ts

@@ -3,7 +3,7 @@ import type { MaybeRef } from 'vue'
 export function useMarqueeCopies(
   containerRefs: Ref<HTMLElement[]>,
   copyRefs: Ref<HTMLSpanElement[]>,
-  rowCount: MaybeRef<number>,
+  rowCount: MaybeRef<number>
 ) {
   const copyWidths = ref<number[]>([])
   const calculatedCopies = ref<number[]>([])

package/layers/animations/app/composables/useTiltEffect.ts

@@ -5,7 +5,7 @@ export function useTiltEffect(
     perspective?: number
     damping?: number
     stiffness?: number
-  } = {},
+  } = {}
 ) {
   const { gsap } = useGsap()
   const { elementX, elementY, elementWidth, elementHeight, isOutside } =

package/layers/content/app/components/Gallery/Lightbox.vue

@@ -57,7 +57,11 @@
           color="neutral"
           variant="ghost"
           class="absolute top-4 right-4 text-white"
-          @click="() => { open = false }"
+          @click="
+            () => {
+              open = false
+            }
+          "
         />
 
         <!-- Prev -->

package/layers/content/app/composables/useBlogPosts.ts

@@ -4,8 +4,8 @@ export function useBlogPosts(options: BlogQueryOptions = {}) {
   const { excludeDrafts = true, tags, limit } = options
 
   return useContentData('blog-posts', async () => {
-    let posts = (await queryCollection('blog').all()).sort(
-      (a, b) => (b.date ?? '').localeCompare(a.date ?? '')
+    let posts = (await queryCollection('blog').all()).sort((a, b) =>
+      (b.date ?? '').localeCompare(a.date ?? '')
     )
 
     if (excludeDrafts) {

package/layers/content/app/composables/useCollectionItem.ts

@@ -2,8 +2,6 @@ import type { Collections } from '@nuxt/content'
 
 export function useCollectionItem(collection: keyof Collections, slug: string) {
   return useContentData(`${collection}-${slug}`, () =>
-    queryCollection(collection)
-      .path(`/${collection}/${slug}`)
-      .first()
+    queryCollection(collection).path(`/${collection}/${slug}`).first()
   )
 }

package/layers/content/app/composables/useGalleryItems.ts

@@ -4,8 +4,8 @@ export function useGalleryItems(options: GalleryQueryOptions = {}) {
   const { tags, limit } = options
 
   return useContentData('gallery-items', async () => {
-    let items = (await queryCollection('gallery').all()).sort(
-      (a, b) => (b.date ?? '').localeCompare(a.date ?? '')
+    let items = (await queryCollection('gallery').all()).sort((a, b) =>
+      (b.date ?? '').localeCompare(a.date ?? '')
     )
 
     if (tags?.length) {

package/layers/core/app/composables/useCache.ts

@@ -1,4 +1,3 @@
-
 // composables/useCache.ts
 import { useOnline } from '@vueuse/core'
 

package/layers/core/app/plugins/error-handler.ts

@@ -1,49 +1,49 @@
 export default defineNuxtPlugin({
   name: 'core:error-handler',
   setup(nuxtApp) {
-  const { logError } = useErrorLog()
+    const { logError } = useErrorLog()
 
-  // Global Vue error handler
-  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
-    // Get component name for context
-    const componentName =
-      instance?.$options?.name || instance?.$options?.__name || 'Unknown Component'
+    // Global Vue error handler
+    nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
+      // Get component name for context
+      const componentName =
+        instance?.$options?.name || instance?.$options?.__name || 'Unknown Component'
 
-    // Log error with context
-    logError(error, {
-      component: componentName,
-      info: String(info),
-      type: 'vue-error',
-    })
-  }
+      // Log error with context
+      logError(error, {
+        component: componentName,
+        info: String(info),
+        type: 'vue-error',
+      })
+    }
 
-  // Nuxt-specific error hook (catches errors during SSR, routing, etc.)
-  nuxtApp.hook('vue:error', (error, instance, info) => {
-    // Get component name for context
-    const componentName =
-      instance?.$options?.name || instance?.$options?.__name || 'Unknown Component'
+    // Nuxt-specific error hook (catches errors during SSR, routing, etc.)
+    nuxtApp.hook('vue:error', (error, instance, info) => {
+      // Get component name for context
+      const componentName =
+        instance?.$options?.name || instance?.$options?.__name || 'Unknown Component'
 
-    // Log error with context
-    logError(error, {
-      component: componentName,
-      info: String(info),
-      type: 'nuxt-error',
+      // Log error with context
+      logError(error, {
+        component: componentName,
+        info: String(info),
+        type: 'nuxt-error',
+      })
     })
-  })
 
-  // Handle app initialization errors
-  nuxtApp.hook('app:error', (error) => {
-    logError(error, {
-      type: 'app-error',
-      info: 'Application initialization error',
+    // Handle app initialization errors
+    nuxtApp.hook('app:error', (error) => {
+      logError(error, {
+        type: 'app-error',
+        info: 'Application initialization error',
+      })
     })
-  })
 
-  // Handle page errors
-  nuxtApp.hook('app:error:cleared', () => {
-    if (import.meta.dev) {
-      console.log('✅ Error cleared')
-    }
-  })
+    // Handle page errors
+    nuxtApp.hook('app:error:cleared', () => {
+      if (import.meta.dev) {
+        console.log('✅ Error cleared')
+      }
+    })
   },
 })

package/layers/core/app/plugins/feature-detection.client.ts

@@ -14,21 +14,21 @@
 export default defineNuxtPlugin({
   name: 'core:feature-detection',
   setup() {
-  // Initialize feature detection
-  const features = useFeatures()
+    // Initialize feature detection
+    const features = useFeatures()
 
-  if (import.meta.dev && process.env.NODE_ENV === 'development') {
-    console.log('[Feature Detection] Initialized:', {
-      grid: features.grid.value,
-      subgrid: features.subgrid.value,
-      containerQueries: features.containerQueries.value,
-      has: features.has.value,
-      webGL: features.webGL.value,
-      darkMode: features.darkMode.value,
-      reducedMotion: features.reducedMotion.value,
-      webp: features.webp.value,
-      avif: features.avif.value,
-    })
-  }
+    if (import.meta.dev && process.env.NODE_ENV === 'development') {
+      console.log('[Feature Detection] Initialized:', {
+        grid: features.grid.value,
+        subgrid: features.subgrid.value,
+        containerQueries: features.containerQueries.value,
+        has: features.has.value,
+        webGL: features.webGL.value,
+        darkMode: features.darkMode.value,
+        reducedMotion: features.reducedMotion.value,
+        webp: features.webp.value,
+        avif: features.avif.value,
+      })
+    }
   },
 })

package/layers/core/app/plugins/init.ts

@@ -12,167 +12,159 @@
 export default defineNuxtPlugin({
   name: 'core:init',
   setup(nuxtApp) {
-  const config = useAppConfig()
-  // const isDev = import.meta.dev
-  const isDev = process.env.NODE_ENV === 'development'
-
-  // ============================================================
-  // 1. Log initialization (dev only)
-  // ============================================================
-  if (isDev) {
-    console.log('🚀 [Core Layer] Initializing...')
-
-    console.log('[Core Layer] Config:', config.coreLayer)
-  }
-
-  // ============================================================
-  // 2. Verify modules and composables are loaded
-  // ============================================================
-  try {
-    // Test @nuxtjs/device module (SSR-safe: returns undefined before device plugin runs)
-    const device = useDevice()
-
-    if (isDev && device) {
-      console.log('[Core Layer] Device detection:', {
-        mobile: device.isMobile,
-        desktop: device.isDesktop,
-        tablet: device.isTablet,
-      })
-    }
-
-    // Test @vueuse/nuxt module
-    const isOnline = useOnline()
+    const config = useAppConfig()
+    // const isDev = import.meta.dev
+    const isDev = process.env.NODE_ENV === 'development'
 
+    // 1. Log initialization (dev only)
     if (isDev) {
-      console.log('[Core Layer] VueUse loaded, online status:', isOnline.value)
+      console.log('🚀 [Core Layer] Initializing...')
+
+      console.log('[Core Layer] Config:', config.coreLayer)
     }
 
-    // Client-only detection (requires browser APIs)
-    if (import.meta.client) {
-      // Test browser detection composable
-      const { name, version, engine, os } = useBrowser()
+    // 2. Verify modules and composables are loaded
+    try {
+      // Test @nuxtjs/device module (SSR-safe: returns undefined before device plugin runs)
+      const device = useDevice()
 
-      if (isDev) {
-        console.log('[Core Layer] Browser detection:', {
-          name: name.value,
-          version: version.value,
-          engine: engine.value,
-          os: os.value,
+      if (isDev && device) {
+        console.log('[Core Layer] Device detection:', {
+          mobile: device.isMobile,
+          desktop: device.isDesktop,
+          tablet: device.isTablet,
         })
       }
 
-      // Test screen/breakpoint composable
-      const { breakpoint, isRetina, orientation } = useScreen()
+      // Test @vueuse/nuxt module
+      const isOnline = useOnline()
 
       if (isDev) {
-        console.log('[Core Layer] Screen detection:', {
-          breakpoint: breakpoint.value,
-          retina: isRetina.value,
-          orientation: orientation.value,
-        })
+        console.log('[Core Layer] VueUse loaded, online status:', isOnline.value)
       }
 
-      // Test network info composable
-      const { connectionQuality, effectiveType, saveData } = useNetworkInfo()
-
-      if (isDev) {
-        console.log('[Core Layer] Network detection:', {
-          quality: connectionQuality.value,
-          type: effectiveType.value,
-          dataSaver: saveData.value,
-        })
+      // Client-only detection (requires browser APIs)
+      if (import.meta.client) {
+        // Test browser detection composable
+        const { name, version, engine, os } = useBrowser()
+
+        if (isDev) {
+          console.log('[Core Layer] Browser detection:', {
+            name: name.value,
+            version: version.value,
+            engine: engine.value,
+            os: os.value,
+          })
+        }
+
+        // Test screen/breakpoint composable
+        const { breakpoint, isRetina, orientation } = useScreen()
+
+        if (isDev) {
+          console.log('[Core Layer] Screen detection:', {
+            breakpoint: breakpoint.value,
+            retina: isRetina.value,
+            orientation: orientation.value,
+          })
+        }
+
+        // Test network info composable
+        const { connectionQuality, effectiveType, saveData } = useNetworkInfo()
+
+        if (isDev) {
+          console.log('[Core Layer] Network detection:', {
+            quality: connectionQuality.value,
+            type: effectiveType.value,
+            dataSaver: saveData.value,
+          })
+        }
+
+        // Test feature detection composable
+        const { grid, subgrid, containerQueries, webGL, darkMode } = useFeatures()
+
+        if (isDev) {
+          console.log('[Core Layer] Feature detection:', {
+            grid: grid.value,
+            subgrid: subgrid.value,
+            containerQueries: containerQueries.value,
+            webGL: webGL.value,
+            darkMode: darkMode.value,
+          })
+        }
+
+        // Test cache management composable
+        const { offlineReady, isOnline: cacheOnline } = useCache()
+
+        if (isDev) {
+          console.log('[Core Layer] Cache status:', {
+            online: cacheOnline.value,
+            offlineReady: offlineReady.value,
+          })
+        }
+
+        // PWA composable is only available in production
+        // Use usePWAInfo() from core layer for PWA status
       }
 
-      // Test feature detection composable
-      const { grid, subgrid, containerQueries, webGL, darkMode } = useFeatures()
+      // Test rendering mode detection (works on both server and client)
+      const { mode, isServer, isClient, isHydrated } = useRendering()
 
       if (isDev) {
-        console.log('[Core Layer] Feature detection:', {
-          grid: grid.value,
-          subgrid: subgrid.value,
-          containerQueries: containerQueries.value,
-          webGL: webGL.value,
-          darkMode: darkMode.value,
+        console.log('[Core Layer] Rendering mode:', {
+          mode: mode.value,
+          server: isServer.value,
+          client: isClient.value,
+          hydrated: isHydrated.value,
         })
       }
 
-      // Test cache management composable
-      const { offlineReady, isOnline: cacheOnline } = useCache()
+      // Test environment access (works on both server and client)
+      const env = useEnv() as unknown as Record<string, unknown>
 
       if (isDev) {
-        console.log('[Core Layer] Cache status:', {
-          online: cacheOnline.value,
-          offlineReady: offlineReady.value,
+        const publicConfig = env.public as Record<string, unknown> | undefined
+
+        console.log('[Core Layer] Environment config loaded:', {
+          hasPublicConfig: Boolean(publicConfig),
+          publicKeys: Object.keys(publicConfig ?? {}),
         })
       }
-
-      // PWA composable is only available in production
-      // Use usePWAInfo() from core layer for PWA status
+    } catch (error) {
+      console.error('[Core Layer] Module verification failed:', error)
     }
 
-    // Test rendering mode detection (works on both server and client)
-    const { mode, isServer, isClient, isHydrated } = useRendering()
-
+    // 3. App lifecycle hooks (dev logging)
     if (isDev) {
-      console.log('[Core Layer] Rendering mode:', {
-        mode: mode.value,
-        server: isServer.value,
-        client: isClient.value,
-        hydrated: isHydrated.value,
+      nuxtApp.hook('app:created', () => {
+        console.log('✅ [Core Layer] App created')
       })
-    }
 
-    // Test environment access (works on both server and client)
-    const env = useEnv() as unknown as Record<string, unknown>
+      nuxtApp.hook('app:beforeMount', () => {
+        console.log('⏳ [Core Layer] App mounting...')
+      })
 
-    if (isDev) {
-      const publicConfig = env.public as Record<string, unknown> | undefined
+      nuxtApp.hook('app:mounted', () => {
+        console.log('✅ [Core Layer] App mounted')
+      })
+
+      nuxtApp.hook('page:start', () => {
+        console.log('📄 [Core Layer] Page navigation started')
+      })
 
-      console.log('[Core Layer] Environment config loaded:', {
-        hasPublicConfig: Boolean(publicConfig),
-        publicKeys: Object.keys(publicConfig ?? {}),
+      nuxtApp.hook('page:finish', () => {
+        console.log('✅ [Core Layer] Page navigation finished')
       })
     }
-  } catch (error) {
-    console.error('[Core Layer] Module verification failed:', error)
-  }
-
-  // ============================================================
-  // 3. App lifecycle hooks (dev logging)
-  // ============================================================
-  if (isDev) {
-    nuxtApp.hook('app:created', () => {
-      console.log('✅ [Core Layer] App created')
-    })
-
-    nuxtApp.hook('app:beforeMount', () => {
-      console.log('⏳ [Core Layer] App mounting...')
-    })
-
-    nuxtApp.hook('app:mounted', () => {
-      console.log('✅ [Core Layer] App mounted')
-    })
-
-    nuxtApp.hook('page:start', () => {
-      console.log('📄 [Core Layer] Page navigation started')
-    })
-
-    nuxtApp.hook('page:finish', () => {
-      console.log('✅ [Core Layer] Page navigation finished')
-    })
-  }
-
-  // ============================================================
-  // 4. Provide global helpers (optional)
-  // ============================================================
-  // Make core utilities available throughout the app
-  return {
-    provide: {
-      coreLayer: {
-        version: '1.0.0',
-        initialized: true,
+
+    // 4. Provide global helpers (optional)
+    // Make core utilities available throughout the app
+    return {
+      provide: {
+        coreLayer: {
+          version: '1.0.0',
+          initialized: true,
+        },
       },
-    },
-  }
+    }
   },
 })

package/layers/core/app/plugins/loading.client.ts

@@ -26,32 +26,32 @@ type CoreLayerConfig = {
 export default defineNuxtPlugin({
   name: 'core:loading',
   setup(nuxtApp) {
-  const config = useAppConfig()
-  const coreLayer = config.coreLayer as CoreLayerConfig | undefined
-
-  // console.log('[Loading Plugin] Config:', coreLayer?.loading)
-
-  // Check if loading is enabled
-  if (coreLayer?.loading?.enabled === false) {
-    // console.log('[Loading Plugin] Disabled')
-    return // Disabled, skip initialization
-  }
-
-  const { startLoading, stopLoading } = useLoading()
-
-  // console.log('[Loading Plugin] Starting loading...')
-  // Start loading immediately on plugin load
-  startLoading()
-
-  // Stop loading when app is fully mounted
-  nuxtApp.hook('app:mounted', () => {
-    // console.log('[Loading Plugin] App mounted, will stop in 500ms')
-    // Add a small delay to ensure LoadingScreen component has mounted
-    // and is visible before we stop loading
-    setTimeout(() => {
-      // console.log('[Loading Plugin] Stopping loading now')
-      stopLoading()
-    }, 500) // 500ms delay to ensure component is visible
-  })
+    const config = useAppConfig()
+    const coreLayer = config.coreLayer as CoreLayerConfig | undefined
+
+    // console.log('[Loading Plugin] Config:', coreLayer?.loading)
+
+    // Check if loading is enabled
+    if (coreLayer?.loading?.enabled === false) {
+      // console.log('[Loading Plugin] Disabled')
+      return // Disabled, skip initialization
+    }
+
+    const { startLoading, stopLoading } = useLoading()
+
+    // console.log('[Loading Plugin] Starting loading...')
+    // Start loading immediately on plugin load
+    startLoading()
+
+    // Stop loading when app is fully mounted
+    nuxtApp.hook('app:mounted', () => {
+      // console.log('[Loading Plugin] App mounted, will stop in 500ms')
+      // Add a small delay to ensure LoadingScreen component has mounted
+      // and is visible before we stop loading
+      setTimeout(() => {
+        // console.log('[Loading Plugin] Stopping loading now')
+        stopLoading()
+      }, 500) // 500ms delay to ensure component is visible
+    })
   },
 })

package/layers/core/app/plugins/scroll-guard.client.ts

@@ -23,34 +23,34 @@ type CoreLayerConfig = {
 export default defineNuxtPlugin({
   name: 'core:scroll-guard',
   setup() {
-  const config = useAppConfig()
-  const coreLayer = config.coreLayer as CoreLayerConfig | undefined
+    const config = useAppConfig()
+    const coreLayer = config.coreLayer as CoreLayerConfig | undefined
+
+    if (coreLayer?.scrollGuard?.enabled === false) {
+      if (import.meta.dev) {
+        console.log('[Scroll Guard] Disabled via config')
+      }
+      return
+    }
+
+    const { enable, clampedCount } = useScrollGuard()
+
+    enable()
 
-  if (coreLayer?.scrollGuard?.enabled === false) {
     if (import.meta.dev) {
-      console.log('[Scroll Guard] Disabled via config')
+      console.log('[Scroll Guard] Initialized', {
+        strict: coreLayer?.scrollGuard?.strict ?? true,
+        debug: coreLayer?.scrollGuard?.debug ?? false,
+        excludeSelectors: coreLayer?.scrollGuard?.excludeSelectors ?? [
+          '.carousel',
+          '.overflow-intent',
+        ],
+      })
+
+      // Log clamped count after initial scan settles
+      requestAnimationFrame(() => {
+        console.log(`[Scroll Guard] Clamped ${clampedCount.value} element(s)`)
+      })
     }
-    return
-  }
-
-  const { enable, clampedCount } = useScrollGuard()
-
-  enable()
-
-  if (import.meta.dev) {
-    console.log('[Scroll Guard] Initialized', {
-      strict: coreLayer?.scrollGuard?.strict ?? true,
-      debug: coreLayer?.scrollGuard?.debug ?? false,
-      excludeSelectors: coreLayer?.scrollGuard?.excludeSelectors ?? [
-        '.carousel',
-        '.overflow-intent',
-      ],
-    })
-
-    // Log clamped count after initial scan settles
-    requestAnimationFrame(() => {
-      console.log(`[Scroll Guard] Clamped ${clampedCount.value} element(s)`)
-    })
-  }
   },
 })

package/layers/feeds/app/plugins/feed-head.ts

@@ -1,74 +1,74 @@
 export default defineNuxtPlugin({
   name: 'feeds:feed-head',
   setup() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const appConfig = useAppConfig() as any
-  const site = appConfig.site ?? {}
-  const feedConfig = appConfig.feedsLayer?.feed ?? {}
-  const collections: string[] = feedConfig.collections ?? ['blog']
-  const defaultCollection: string = feedConfig.defaultCollection ?? 'blog'
-  const siteTitle: string = site.title ?? ''
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const appConfig = useAppConfig() as any
+    const site = appConfig.site ?? {}
+    const feedConfig = appConfig.feedsLayer?.feed ?? {}
+    const collections: string[] = feedConfig.collections ?? ['blog']
+    const defaultCollection: string = feedConfig.defaultCollection ?? 'blog'
+    const siteTitle: string = site.title ?? ''
 
-  const route = useRoute()
+    const route = useRoute()
 
-  useHead(() => {
-    // Derive which collection (if any) the current page belongs to
-    const segment = route.path.split('/').filter(Boolean)[0] ?? ''
-    const currentCollection = collections.includes(segment) ? segment : null
+    useHead(() => {
+      // Derive which collection (if any) the current page belongs to
+      const segment = route.path.split('/').filter(Boolean)[0] ?? ''
+      const currentCollection = collections.includes(segment) ? segment : null
 
-    // Always present: main site feeds via the shorthand routes
-    const mainLinks = [
-      {
-        rel: 'alternate',
-        type: 'application/rss+xml',
-        title: `${siteTitle || 'Site'} (RSS)`,
-        href: '/feed/rss',
-      },
-      {
-        rel: 'alternate',
-        type: 'application/atom+xml',
-        title: `${siteTitle || 'Site'} (Atom)`,
-        href: '/feed/atom',
-      },
-      {
-        rel: 'alternate',
-        type: 'application/feed+json',
-        title: `${siteTitle || 'Site'} (JSON Feed)`,
-        href: '/feed/json',
-      },
-    ]
+      // Always present: main site feeds via the shorthand routes
+      const mainLinks = [
+        {
+          rel: 'alternate',
+          type: 'application/rss+xml',
+          title: `${siteTitle || 'Site'} (RSS)`,
+          href: '/feed/rss',
+        },
+        {
+          rel: 'alternate',
+          type: 'application/atom+xml',
+          title: `${siteTitle || 'Site'} (Atom)`,
+          href: '/feed/atom',
+        },
+        {
+          rel: 'alternate',
+          type: 'application/feed+json',
+          title: `${siteTitle || 'Site'} (JSON Feed)`,
+          href: '/feed/json',
+        },
+      ]
 
-    // Collection-specific feeds — only when on a non-default collection's pages.
-    // The default collection is already covered by the main shorthand links above.
-    const label =
-      currentCollection && currentCollection !== defaultCollection
-        ? currentCollection.charAt(0).toUpperCase() + currentCollection.slice(1)
-        : null
+      // Collection-specific feeds — only when on a non-default collection's pages.
+      // The default collection is already covered by the main shorthand links above.
+      const label =
+        currentCollection && currentCollection !== defaultCollection
+          ? currentCollection.charAt(0).toUpperCase() + currentCollection.slice(1)
+          : null
 
-    const collectionLinks = label
-      ? [
-          {
-            rel: 'alternate',
-            type: 'application/rss+xml',
-            title: `${label} (RSS)`,
-            href: `/feed/${currentCollection}/rss`,
-          },
-          {
-            rel: 'alternate',
-            type: 'application/atom+xml',
-            title: `${label} (Atom)`,
-            href: `/feed/${currentCollection}/atom`,
-          },
-          {
-            rel: 'alternate',
-            type: 'application/feed+json',
-            title: `${label} (JSON Feed)`,
-            href: `/feed/${currentCollection}/json`,
-          },
-        ]
-      : []
+      const collectionLinks = label
+        ? [
+            {
+              rel: 'alternate',
+              type: 'application/rss+xml',
+              title: `${label} (RSS)`,
+              href: `/feed/${currentCollection}/rss`,
+            },
+            {
+              rel: 'alternate',
+              type: 'application/atom+xml',
+              title: `${label} (Atom)`,
+              href: `/feed/${currentCollection}/atom`,
+            },
+            {
+              rel: 'alternate',
+              type: 'application/feed+json',
+              title: `${label} (JSON Feed)`,
+              href: `/feed/${currentCollection}/json`,
+            },
+          ]
+        : []
 
-    return { link: [...mainLinks, ...collectionLinks] }
-  })
+      return { link: [...mainLinks, ...collectionLinks] }
+    })
   },
 })

package/layers/forms/server/api/contact.post.ts

@@ -1,6 +1,6 @@
-import { z } from 'zod'
 import { sendContactEmail } from '#layers/mailer/server/utils/email'
 import { mailerLayerHooks } from '#layers/mailer/server/utils/hooks'
+import { z } from 'zod'
 
 const contactSchema = z.object({
   name: z.string().min(3, 'Name must be at least 3 characters'),

package/layers/page-transitions/app/plugins/page-transitions.client.ts

@@ -1,16 +1,16 @@
 export default defineNuxtPlugin({
   name: 'page-transitions:page-transitions',
   setup(nuxtApp) {
-  const appConfig = useAppConfig()
+    const appConfig = useAppConfig()
 
-  const defaultTransition = appConfig.pageTransitions?.default ?? 'fade'
-  const duration = appConfig.pageTransitions?.duration ?? 300
+    const defaultTransition = appConfig.pageTransitions?.default ?? 'fade'
+    const duration = appConfig.pageTransitions?.duration ?? 300
 
-  nuxtApp.hook('page:start', () => {
-    useState('page-transition:current').value = {
-      name: defaultTransition,
-      duration,
-    }
-  })
+    nuxtApp.hook('page:start', () => {
+      useState('page-transition:current').value = {
+        name: defaultTransition,
+        duration,
+      }
+    })
   },
 })

package/layers/routing/app/plugins/feature-flags.client.ts

@@ -4,15 +4,15 @@ import type { FeatureValue } from '../types/routing'
 export default defineNuxtPlugin({
   name: 'routing:feature-flags',
   async setup() {
-  const { config } = useRoutingConfig()
-  if (!config.runtimeFlags) return
+    const { config } = useRoutingConfig()
+    if (!config.runtimeFlags) return
 
-  const { runtimeFlags } = useFeatureFlags()
-  try {
-    const data = await $fetch<Record<string, FeatureValue>>('/api/feature-flags')
-    runtimeFlags.value = data
-  } catch (e) {
-    if (config.debug) console.warn('[routing] Failed to fetch feature flags', e)
-  }
+    const { runtimeFlags } = useFeatureFlags()
+    try {
+      const data = await $fetch<Record<string, FeatureValue>>('/api/feature-flags')
+      runtimeFlags.value = data
+    } catch (e) {
+      if (config.debug) console.warn('[routing] Failed to fetch feature flags', e)
+    }
   },
 })

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

@@ -1,24 +1,25 @@
 export default defineNuxtPlugin({
   name: 'routing:scroll-routing',
   setup() {
-  const { config } = useRoutingConfig()
-  if (!config.scrollRouting.enabled) return
+    const { config } = useRoutingConfig()
+    if (!config.scrollRouting.enabled) return
 
-  const router = useRouter()
-  const observer = new IntersectionObserver(
-    (entries) => {
-      const visible = entries.find((e) => e.isIntersecting)
-      if (!visible) return
-      const id = visible.target.getAttribute('data-section')
-      if (!id) return
-      const method = config.scrollRouting.mode === 'push' ? 'push' : 'replace'
-      router[method]({ hash: `#${id}` })
-    },
-    { threshold: 0.5 }
-  )
+    const router = useRouter()
+    // fallow-ignore-next-line code-duplication
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.find((e) => e.isIntersecting)
+        if (!visible) return
+        const id = visible.target.getAttribute('data-section')
+        if (!id) return
+        const method = config.scrollRouting.mode === 'push' ? 'push' : 'replace'
+        router[method]({ hash: `#${id}` })
+      },
+      { threshold: 0.5 }
+    )
 
-  onNuxtReady(() => {
-    document.querySelectorAll('[data-section]').forEach((el) => observer.observe(el))
-  })
+    onNuxtReady(() => {
+      document.querySelectorAll('[data-section]').forEach((el) => observer.observe(el))
+    })
   },
 })

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

@@ -12,67 +12,67 @@ export type ScrollState = {
 export default defineNuxtPlugin({
   name: 'scroll:locomotive-scroll',
   setup() {
-  const scrollState = reactive<ScrollState>({
-    scroll: 0,
-    limit: 0,
-    velocity: 0,
-    direction: 0,
-    progress: 0,
-  })
+    const scrollState = reactive<ScrollState>({
+      scroll: 0,
+      limit: 0,
+      velocity: 0,
+      direction: 0,
+      progress: 0,
+    })
 
-  const instance = shallowRef<LocomotiveScroll | null>(null)
+    const instance = shallowRef<LocomotiveScroll | null>(null)
 
-  function init() {
-    if (instance.value) return
-    instance.value = new LocomotiveScroll({
-      lenisOptions: {
-        lerp: 0.1,
-        smoothWheel: true,
-        wheelMultiplier: 1,
-      },
-      scrollCallback: ({ scroll, limit, velocity, direction, progress }) => {
-        scrollState.scroll = scroll
-        scrollState.limit = limit
-        scrollState.velocity = velocity
-        scrollState.direction = direction
-        scrollState.progress = progress
-        ScrollTrigger.update()
-      },
-    })
-  }
+    function init() {
+      if (instance.value) return
+      instance.value = new LocomotiveScroll({
+        lenisOptions: {
+          lerp: 0.1,
+          smoothWheel: true,
+          wheelMultiplier: 1,
+        },
+        scrollCallback: ({ scroll, limit, velocity, direction, progress }) => {
+          scrollState.scroll = scroll
+          scrollState.limit = limit
+          scrollState.velocity = velocity
+          scrollState.direction = direction
+          scrollState.progress = progress
+          ScrollTrigger.update()
+        },
+      })
+    }
 
-  function destroy() {
-    instance.value?.destroy()
-    instance.value = null
-  }
+    function destroy() {
+      instance.value?.destroy()
+      instance.value = null
+    }
 
-  const router = useRouter()
-  const appConfig = useAppConfig()
-  const smoothScroll: boolean | string[] = appConfig.scroll?.smoothScroll ?? true
+    const router = useRouter()
+    const appConfig = useAppConfig()
+    const smoothScroll: boolean | string[] = appConfig.scroll?.smoothScroll ?? true
 
-  const nuxtApp = useNuxtApp()
+    const nuxtApp = useNuxtApp()
 
-  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)) {
-        nextTick(init)
-      } else if (from?.path && smoothScroll.includes(from.path)) {
-        destroy()
-      }
-    })
-    if (smoothScroll.includes(router.currentRoute.value.path)) {
+    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)) {
+          nextTick(init)
+        } else if (from?.path && smoothScroll.includes(from.path)) {
+          destroy()
+        }
+      })
+      if (smoothScroll.includes(router.currentRoute.value.path)) {
+        nuxtApp.hook('app:mounted', () => nextTick(init))
+      }
     }
-  }
 
-  return {
-    provide: {
-      locomotiveScroll: instance,
-      scrollState,
-    },
-  }
+    return {
+      provide: {
+        locomotiveScroll: instance,
+        scrollState,
+      },
+    }
   },
 })

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

@@ -3,30 +3,30 @@ import { checkWebGPUSupport } from '#layers/canvas/app/composables/useRendererCa
 export default defineNuxtPlugin({
   name: 'shader:shader',
   async setup() {
-  const config = useAppConfig()
-  const shaderConfig = (config.shader || {}) as {
-    preferWebGPU?: boolean
-  }
+    const config = useAppConfig()
+    const shaderConfig = (config.shader || {}) as {
+      preferWebGPU?: boolean
+    }
 
-  // Check WebGPU support
-  const hasWebGPU = await checkWebGPUSupport()
-  const useWebGPU = shaderConfig.preferWebGPU && hasWebGPU
+    // Check WebGPU support
+    const hasWebGPU = await checkWebGPUSupport()
+    const useWebGPU = shaderConfig.preferWebGPU && hasWebGPU
 
-  // Log renderer info in development
-  if (import.meta.dev) {
-    console.log('[Shader Layer] Initialized')
-    console.log(`[Shader Layer] WebGPU supported: ${hasWebGPU}`)
-    console.log(`[Shader Layer] Using: ${useWebGPU ? 'WebGPU' : 'WebGL'}`)
-  }
+    // Log renderer info in development
+    if (import.meta.dev) {
+      console.log('[Shader Layer] Initialized')
+      console.log(`[Shader Layer] WebGPU supported: ${hasWebGPU}`)
+      console.log(`[Shader Layer] Using: ${useWebGPU ? 'WebGPU' : 'WebGL'}`)
+    }
 
-  return {
-    provide: {
-      shader: {
-        hasWebGPU,
-        useWebGPU,
-        config: shaderConfig,
+    return {
+      provide: {
+        shader: {
+          hasWebGPU,
+          useWebGPU,
+          config: shaderConfig,
+        },
       },
-    },
-  }
+    }
   },
 })

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

@@ -3,56 +3,59 @@ import type { AccentColor, PreferenceOverride } from '#layers/theme/app/types/th
 export default defineNuxtPlugin({
   name: 'theme:theme',
   setup() {
-  const { setAccent, activeAccent } = useAccentColor()
-  const { setContrastOverride, effectiveHighContrast } = useThemeContrast()
-  const { setMotionOverride, effectiveReducedMotion } = useThemeMotion()
-  const { setTransparencyOverride, effectiveReducedTransparency } = useThemeTransparency()
-
-  // Restore persisted preferences. useState defaults were serialized from the
-  // server, so hydration matches. We update to the stored values here, after
-  // hydration completes, to avoid any mismatch.
-  const storedAccent = localStorage.getItem('theme-colour')
-  if (storedAccent) setAccent(storedAccent as AccentColor)
-
-  const storedContrast = localStorage.getItem('theme-contrast')
-  if (storedContrast) setContrastOverride(storedContrast as PreferenceOverride)
-
-  const storedMotion = localStorage.getItem('theme-motion')
-  if (storedMotion) setMotionOverride(storedMotion as PreferenceOverride)
-
-  const storedTransparency = localStorage.getItem('theme-transparency')
-  if (storedTransparency) setTransparencyOverride(storedTransparency as PreferenceOverride)
-
-  watch(
-    activeAccent,
-    (color) => {
-      document.documentElement.setAttribute('data-theme-colour', color)
-    },
-    { immediate: true }
-  )
-
-  watch(
-    effectiveHighContrast,
-    (high) => {
-      document.documentElement.setAttribute('data-theme-contrast', high ? 'high' : 'standard')
-    },
-    { immediate: true }
-  )
-
-  watch(
-    effectiveReducedMotion,
-    (reduced) => {
-      document.documentElement.setAttribute('data-theme-motion', reduced ? 'reduced' : 'full')
-    },
-    { immediate: true }
-  )
-
-  watch(
-    effectiveReducedTransparency,
-    (reduced) => {
-      document.documentElement.setAttribute('data-theme-transparency', reduced ? 'reduced' : 'full')
-    },
-    { immediate: true }
-  )
+    const { setAccent, activeAccent } = useAccentColor()
+    const { setContrastOverride, effectiveHighContrast } = useThemeContrast()
+    const { setMotionOverride, effectiveReducedMotion } = useThemeMotion()
+    const { setTransparencyOverride, effectiveReducedTransparency } = useThemeTransparency()
+
+    // Restore persisted preferences. useState defaults were serialized from the
+    // server, so hydration matches. We update to the stored values here, after
+    // hydration completes, to avoid any mismatch.
+    const storedAccent = localStorage.getItem('theme-colour')
+    if (storedAccent) setAccent(storedAccent as AccentColor)
+
+    const storedContrast = localStorage.getItem('theme-contrast')
+    if (storedContrast) setContrastOverride(storedContrast as PreferenceOverride)
+
+    const storedMotion = localStorage.getItem('theme-motion')
+    if (storedMotion) setMotionOverride(storedMotion as PreferenceOverride)
+
+    const storedTransparency = localStorage.getItem('theme-transparency')
+    if (storedTransparency) setTransparencyOverride(storedTransparency as PreferenceOverride)
+
+    watch(
+      activeAccent,
+      (color) => {
+        document.documentElement.setAttribute('data-theme-colour', color)
+      },
+      { immediate: true }
+    )
+
+    watch(
+      effectiveHighContrast,
+      (high) => {
+        document.documentElement.setAttribute('data-theme-contrast', high ? 'high' : 'standard')
+      },
+      { immediate: true }
+    )
+
+    watch(
+      effectiveReducedMotion,
+      (reduced) => {
+        document.documentElement.setAttribute('data-theme-motion', reduced ? 'reduced' : 'full')
+      },
+      { immediate: true }
+    )
+
+    watch(
+      effectiveReducedTransparency,
+      (reduced) => {
+        document.documentElement.setAttribute(
+          'data-theme-transparency',
+          reduced ? 'reduced' : 'full'
+        )
+      },
+      { immediate: true }
+    )
   },
 })

package/layers/visual/app/components/Media/Picture.vue

@@ -40,7 +40,7 @@
     :loading
     :fetchpriority
     :decoding
-    :provider
+    :provider="(provider as any)"
     :preset
     :densities
     :class="wrapperClass"

package/layers/visual/app/composables/gradient.ts

@@ -62,9 +62,8 @@ export function useGradient(
     const presets = (appConfig.uiLayer as Record<string, unknown> | undefined)?.['gradients'] as
       | Record<string, GradientConfig>
       | undefined
-    let resolved: GradientConfig = typeof raw === 'string'
-      ? (presets?.[raw] ?? DEFAULT_CONFIG)
-      : raw
+    let resolved: GradientConfig =
+      typeof raw === 'string' ? (presets?.[raw] ?? DEFAULT_CONFIG) : raw
 
     if (override) {
       resolved = { ...resolved, ...override }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",