kmcom-nuxt-layers 1.7.9 → 2.2.0

package/layers/core/app/components/LoadingScreen.vue

@@ -1,63 +1,63 @@
 <script setup lang="ts">
-interface LoadingConfig {
-  enabled?: boolean
-  minDuration?: number
-  maxDuration?: number
-  background?: string
-  textColor?: string
-  zIndex?: number
-}
-
-const { isLoading, progress } = useLoading()
-const config = useAppConfig()
-
-// Debug logs
-// console.log('[LoadingScreen] Component created!')
-// console.log('[LoadingScreen] Initial - isLoading:', isLoading.value, 'progress:', progress.value)
-
-// Type-safe access to loading config
-const loadingConfig = computed(() => {
-  const coreLayer = config.coreLayer as { loading?: LoadingConfig }
-  return coreLayer?.loading || {}
-})
-
-const minDuration = computed(() => loadingConfig.value?.minDuration || 500)
-const background = computed(() => loadingConfig.value?.background || '#0a0a0a')
-const textColor = computed(() => loadingConfig.value?.textColor || '#ffffff')
-const zIndex = computed(() => loadingConfig.value?.zIndex || 10000)
-
-// Rounded progress for display
-const displayProgress = computed(() => Math.round(progress.value))
-
-// Control visibility
-const visible = ref(true)
-const hasFinished = ref(false)
-
-// Watch for loading completion
-watch(
-  [isLoading, progress],
-  ([loading, prog]) => {
-    // console.log(
-    //   '[LoadingScreen] Watch fired - isLoading:',
-    //   loading,
-    //   'progress:',
-    //   prog,
-    //   'visible:',
-    //   visible.value
-    // )
-
-    if (!loading && prog >= 100 && !hasFinished.value) {
-      hasFinished.value = true
-      // console.log('[LoadingScreen] Loading finished! Will hide after', minDuration.value, 'ms')
-
-      setTimeout(() => {
-        // console.log('[LoadingScreen] Hiding now')
-        visible.value = false
-      }, minDuration.value)
-    }
-  },
-  { immediate: true }
-)
+  interface LoadingConfig {
+    enabled?: boolean
+    minDuration?: number
+    maxDuration?: number
+    background?: string
+    textColor?: string
+    zIndex?: number
+  }
+
+  const { isLoading, progress } = useLoading()
+  const config = useAppConfig()
+
+  // Debug logs
+  // console.log('[LoadingScreen] Component created!')
+  // console.log('[LoadingScreen] Initial - isLoading:', isLoading.value, 'progress:', progress.value)
+
+  // Type-safe access to loading config
+  const loadingConfig = computed(() => {
+    const coreLayer = config.coreLayer as { loading?: LoadingConfig }
+    return coreLayer?.loading || {}
+  })
+
+  const minDuration = computed(() => loadingConfig.value?.minDuration || 500)
+  const background = computed(() => loadingConfig.value?.background || '#0a0a0a')
+  const textColor = computed(() => loadingConfig.value?.textColor || '#ffffff')
+  const zIndex = computed(() => loadingConfig.value?.zIndex || 10000)
+
+  // Rounded progress for display
+  const displayProgress = computed(() => Math.round(progress.value))
+
+  // Control visibility
+  const visible = ref(true)
+  const hasFinished = ref(false)
+
+  // Watch for loading completion
+  watch(
+    [isLoading, progress],
+    ([loading, prog]) => {
+      // console.log(
+      //   '[LoadingScreen] Watch fired - isLoading:',
+      //   loading,
+      //   'progress:',
+      //   prog,
+      //   'visible:',
+      //   visible.value
+      // )
+
+      if (!loading && prog >= 100 && !hasFinished.value) {
+        hasFinished.value = true
+        // console.log('[LoadingScreen] Loading finished! Will hide after', minDuration.value, 'ms')
+
+        setTimeout(() => {
+          // console.log('[LoadingScreen] Hiding now')
+          visible.value = false
+        }, minDuration.value)
+      }
+    },
+    { immediate: true }
+  )
 </script>
 
 <template>
@@ -80,58 +80,59 @@ watch(
 </template>
 
 <style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-#loading-screen {
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
-}
-
-.loading-container {
-  display: grid;
-  container-type: size;
-  width: 100%;
-  height: 100vh;
-}
-
-.loading-progress {
-  place-self: center;
-  font-weight: 900;
-  font-stretch: ultra-expanded;
-  font-size: clamp(3rem, 35cqw + 1rem, 18rem);
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
-  text-align: center;
-  /* stylelint-disable-next-line function-disallowed-list */
-  text-shadow: 0 0 20px rgb(0 0 0 / 0.3);
-}
-
-@media (width >= 768px) {
+  /* stylelint-disable selector-max-id */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  #loading-screen {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+  }
+
+  .loading-container {
+    display: grid;
+    container-type: size;
+    width: 100%;
+    height: 100vh;
+  }
+
   .loading-progress {
-    place-self: end start;
-    padding: 2rem;
+    place-self: center;
+    font-weight: 900;
+    font-stretch: ultra-expanded;
+    font-size: clamp(3rem, 35cqw + 1rem, 18rem);
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
+    text-align: center;
+    /* stylelint-disable-next-line function-disallowed-list */
+    text-shadow: 0 0 20px rgb(0 0 0 / 0.3);
+  }
+
+  @media (width >= 768px) {
+    .loading-progress {
+      place-self: end start;
+      padding: 2rem;
+    }
   }
-}
 </style>

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

@@ -1,6 +1,7 @@
+/* eslint-disable complexity */
 // composables/useBrowser.ts
 
-interface BrowserInfo {
+type BrowserInfo = {
   name: string
   version: string
   engine: string

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

@@ -1,5 +1,7 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
-/* eslint-disable no-console */
+
 // composables/useCache.ts
 import { useOnline } from '@vueuse/core'
 
@@ -34,7 +36,7 @@ export function useCache() {
     try {
       const cache = await caches.open('workbox-precache-v2')
       const response = await cache.match(url)
-      return !!response
+      return Boolean(response)
     } catch (error) {
       console.warn('[useCache] Failed to check cache:', error)
       return false

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

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 /**
  * Error logging composable for tracking and reporting errors
  *
@@ -20,7 +22,7 @@
  * ```
  */
 
-export interface ErrorContext {
+export type ErrorContext = {
   /** Component name where error occurred */
   component?: string
   /** Additional context information */
@@ -33,7 +35,7 @@ export interface ErrorContext {
   [key: string]: unknown
 }
 
-export interface ErrorLogConfig {
+export type ErrorLogConfig = {
   /** Enable console logging in development */
   logToConsole?: boolean
   /** Enable external error service logging */
@@ -72,13 +74,12 @@ export function useErrorLog() {
 
     // Console logging (development only by default)
     if (config.value.logToConsole && import.meta.dev && process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
       console.group('🔴 Error Logged')
-      // eslint-disable-next-line no-console
+
       console.error('Error:', errorObj)
-      // eslint-disable-next-line no-console
+
       console.log('Context:', fullContext)
-      // eslint-disable-next-line no-console
+
       console.groupEnd()
     }
 
@@ -95,7 +96,6 @@ export function useErrorLog() {
     const { externalUrl, externalToken } = config.value
 
     if (!externalUrl) {
-      // eslint-disable-next-line no-console
       process.env.NODE_ENV === 'development'
         ? console.warn('Error logging enabled but no externalUrl configured')
         : ''
@@ -121,7 +121,6 @@ export function useErrorLog() {
     } catch (loggingError) {
       // Don't let logging errors crash the app
       if (import.meta.dev) {
-        // eslint-disable-next-line no-console
         process.env.NODE_ENV === 'development'
           ? console.error('Failed to send error to external service:', loggingError)
           : ''
@@ -134,7 +133,6 @@ export function useErrorLog() {
    */
   const logWarning = (message: string, context?: ErrorContext) => {
     if (config.value.logToConsole && import.meta.dev) {
-      // eslint-disable-next-line no-console
       process.env.NODE_ENV === 'development' ? console.warn('⚠️  Warning:', message, context) : ''
     }
   }
@@ -144,7 +142,6 @@ export function useErrorLog() {
    */
   const logInfo = (message: string, data?: unknown) => {
     if (config.value.logToConsole && import.meta.dev) {
-      // eslint-disable-next-line no-console
       process.env.NODE_ENV === 'development' ? console.log('ℹ️  Info:', message, data) : ''
     }
   }

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

@@ -1,12 +1,14 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 // composables/useFeatures.ts
+import type { FeatureDetection } from '#layers/core/app/types/detection'
 import {
   usePreferredContrast,
   usePreferredDark,
   usePreferredReducedMotion,
   useSessionStorage,
 } from '@vueuse/core'
-import type { FeatureDetection } from '#layers/core/app/types/detection'
 
 /**
  * Check if CSS feature is supported
@@ -97,7 +99,7 @@ function detectFeatures(): FeatureDetection {
     intersectionObserver: checkAPI('IntersectionObserver'),
     resizeObserver: checkAPI('ResizeObserver'),
     serviceWorker: 'serviceWorker' in navigator,
-    webGL: !!(
+    webGL: Boolean(
       document.createElement('canvas').getContext('webgl') ||
       document.createElement('canvas').getContext('experimental-webgl')
     ),

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 // composables/useLoading.ts
 
 // Timer IDs are non-reactive and intentionally module-scope (singleton)

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 // composables/useNetworkInfo.ts
 import { useNetwork } from '@vueuse/core'

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 /**
  * PWA composable for managing Progressive Web App functionality
  *
@@ -95,10 +96,10 @@ export function usePWAInfo() {
 /**
  * Type definition for beforeinstallprompt event
  */
-interface BeforeInstallPromptEvent extends Event {
-  prompt(): Promise<void>
+type BeforeInstallPromptEvent = {
+  prompt: () => Promise<void>
   userChoice: Promise<{
     outcome: 'accepted' | 'dismissed'
     platform: string
   }>
-}
+} & Event

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 // composables/useRendering.ts
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 // composables/useScreen.ts
 import { breakpointsTailwind, useBreakpoints, useScreenOrientation } from '@vueuse/core'

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 // composables/useScrollGuard.ts
 
 import type { ScrollGuardConfig } from '#layers/core/app/types/scroll-guard'
@@ -6,7 +7,7 @@ import { debounce } from '#layers/core/app/utils/helpers'
 /**
  * Original inline styles stored per element so we can restore them on disable
  */
-interface SavedStyles {
+type SavedStyles = {
   transition: string
   maxWidth: string
   boxSizing: string

package/layers/core/app/pages/[...slug].vue

@@ -1,111 +1,111 @@
 <script setup lang="ts">
-// Type definition for notFound config
-interface NotFoundConfig {
-  icon?: string
-  title?: string
-  description?: string
-  showPath?: boolean
-  showHomeButton?: boolean
-  homeButtonLabel?: string
-  homeButtonTo?: string
-  showBackButton?: boolean
-  backButtonLabel?: string
-  actions?: Array<{
-    label: string
-    to?: string
+  // Type definition for notFound config
+  interface NotFoundConfig {
     icon?: string
-    color?: 'primary' | 'neutral' | 'error' | 'success'
-    variant?: 'solid' | 'outline' | 'ghost' | 'soft'
-    click?: () => void
-  }>
-  suggestions?: {
-    enabled?: boolean
     title?: string
-    links?: Array<{
+    description?: string
+    showPath?: boolean
+    showHomeButton?: boolean
+    homeButtonLabel?: string
+    homeButtonTo?: string
+    showBackButton?: boolean
+    backButtonLabel?: string
+    actions?: Array<{
       label: string
-      to: string
+      to?: string
       icon?: string
+      color?: 'primary' | 'neutral' | 'error' | 'success'
+      variant?: 'solid' | 'outline' | 'ghost' | 'soft'
+      click?: () => void
     }>
-  }
-}
-
-// App configuration
-const appConfig = useAppConfig()
-const config = computed(() => {
-  const coreLayer = appConfig.coreLayer as { notFound?: NotFoundConfig } | undefined
-  return (coreLayer?.notFound ?? {}) as NotFoundConfig
-})
-
-// Route information
-const route = useRoute()
-const router = useRouter()
-const attemptedPath = computed(() => route.path)
-
-// Visual configuration with defaults
-const icon = computed(() => config.value.icon || 'i-lucide-file-question')
-const title = computed(() => config.value.title || 'Page Not Found')
-const description = computed(
-  () => config.value.description || "The page you're looking for doesn't exist or has been moved."
-)
-
-// Action buttons
-const homeButton = computed(() => ({
-  enabled: config.value.showHomeButton !== false,
-  label: config.value.homeButtonLabel || 'Go Home',
-  to: config.value.homeButtonTo || '/',
-  icon: 'i-lucide-home',
-}))
-
-const backButton = computed(() => ({
-  enabled: config.value.showBackButton !== false,
-  label: config.value.backButtonLabel || 'Go Back',
-  icon: 'i-lucide-arrow-left',
-}))
-
-// Combine all actions (built-in + custom from config)
-const allActions = computed(() => {
-  const actions = []
-
-  if (homeButton.value.enabled) {
-    actions.push({
-      label: homeButton.value.label,
-      to: homeButton.value.to,
-      icon: homeButton.value.icon,
-      color: 'primary',
-      variant: 'solid',
-    })
+    suggestions?: {
+      enabled?: boolean
+      title?: string
+      links?: Array<{
+        label: string
+        to: string
+        icon?: string
+      }>
+    }
   }
 
-  if (backButton.value.enabled) {
-    actions.push({
-      label: backButton.value.label,
-      icon: backButton.value.icon,
-      color: 'neutral',
-      variant: 'outline',
-      click: () => router.back(),
-    })
+  // App configuration
+  const appConfig = useAppConfig()
+  const config = computed(() => {
+    const coreLayer = appConfig.coreLayer as { notFound?: NotFoundConfig } | undefined
+    return (coreLayer?.notFound ?? {}) as NotFoundConfig
+  })
+
+  // Route information
+  const route = useRoute()
+  const router = useRouter()
+  const attemptedPath = computed(() => route.path)
+
+  // Visual configuration with defaults
+  const icon = computed(() => config.value.icon || 'i-lucide-file-question')
+  const title = computed(() => config.value.title || 'Page Not Found')
+  const description = computed(
+    () => config.value.description || "The page you're looking for doesn't exist or has been moved."
+  )
+
+  // Action buttons
+  const homeButton = computed(() => ({
+    enabled: config.value.showHomeButton !== false,
+    label: config.value.homeButtonLabel || 'Go Home',
+    to: config.value.homeButtonTo || '/',
+    icon: 'i-lucide-home',
+  }))
+
+  const backButton = computed(() => ({
+    enabled: config.value.showBackButton !== false,
+    label: config.value.backButtonLabel || 'Go Back',
+    icon: 'i-lucide-arrow-left',
+  }))
+
+  // Combine all actions (built-in + custom from config)
+  const allActions = computed(() => {
+    const actions = []
+
+    if (homeButton.value.enabled) {
+      actions.push({
+        label: homeButton.value.label,
+        to: homeButton.value.to,
+        icon: homeButton.value.icon,
+        color: 'primary',
+        variant: 'solid',
+      })
+    }
+
+    if (backButton.value.enabled) {
+      actions.push({
+        label: backButton.value.label,
+        icon: backButton.value.icon,
+        color: 'neutral',
+        variant: 'outline',
+        click: () => router.back(),
+      })
+    }
+
+    return [...actions, ...(config.value.actions || [])]
+  })
+
+  // Suggestions configuration
+  const suggestions = computed(() => config.value.suggestions || {})
+  const showSuggestions = computed(
+    () => suggestions.value.enabled && (suggestions.value.links?.length ?? 0) > 0
+  )
+
+  // SEO & Status Code
+  useSeoMeta({
+    title: '404 - Page Not Found',
+    description: 'The page you are looking for could not be found.',
+    robots: 'noindex, nofollow',
+  })
+
+  // Set 404 status code
+  if (import.meta.server) {
+    setResponseStatus(404)
   }
-
-  return [...actions, ...(config.value.actions || [])]
-})
-
-// Suggestions configuration
-const suggestions = computed(() => config.value.suggestions || {})
-const showSuggestions = computed(
-  () => suggestions.value.enabled && (suggestions.value.links?.length ?? 0) > 0
-)
-
-// SEO & Status Code
-useSeoMeta({
-  title: '404 - Page Not Found',
-  description: 'The page you are looking for could not be found.',
-  robots: 'noindex, nofollow',
-})
-
-// Set 404 status code
-if (import.meta.server) {
-  setResponseStatus(404)
-}
 </script>
 
 <template>

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 export default defineNuxtPlugin((nuxtApp) => {
   const { logError } = useErrorLog()
 
@@ -40,7 +41,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   // Handle page errors
   nuxtApp.hook('app:error:cleared', () => {
     if (import.meta.dev) {
-      // eslint-disable-next-line no-console
       console.log('✅ Error cleared')
     }
   })

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

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 // plugins/feature-detection.client.ts
 
@@ -17,7 +19,6 @@ export default defineNuxtPlugin(() => {
   const features = useFeatures()
 
   if (import.meta.dev && process.env.NODE_ENV === 'development') {
-    // eslint-disable-next-line no-console
     console.log('[Feature Detection] Initialized:', {
       grid: features.grid.value,
       subgrid: features.subgrid.value,