kmcom-nuxt-layers 2.7.5 → 4.0.0

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

@@ -1,192 +0,0 @@
-/**
- * Core Layer Initialization Plugin
- *
- * Handles:
- * - App lifecycle logging (development only)
- * - Environment validation
- * - Module verification
- * - Initial app state setup
- *
- * This runs before other plugins and ensures the app is ready.
- */
-
-function logCoreDeviceState(isDev: boolean) {
-  const device = useDevice()
-  if (isDev && device) {
-    console.log('[Core Layer] Device detection:', {
-      mobile: device.isMobile,
-      desktop: device.isDesktop,
-      tablet: device.isTablet,
-    })
-  }
-}
-
-function logCoreOnlineState(isDev: boolean) {
-  const isOnline = useOnline()
-  if (isDev) {
-    console.log('[Core Layer] VueUse loaded, online status:', isOnline.value)
-  }
-}
-
-function logCoreBrowserState(isDev: boolean) {
-  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,
-    })
-  }
-}
-
-function logCoreScreenState(isDev: boolean) {
-  const { breakpoint, isRetina, orientation } = useScreen()
-
-  if (isDev) {
-    console.log('[Core Layer] Screen detection:', {
-      breakpoint: breakpoint.value,
-      retina: isRetina.value,
-      orientation: orientation.value,
-    })
-  }
-}
-
-function logCoreNetworkState(isDev: boolean) {
-  const { connectionQuality, effectiveType, saveData } = useNetworkInfo()
-
-  if (isDev) {
-    console.log('[Core Layer] Network detection:', {
-      quality: connectionQuality.value,
-      type: effectiveType.value,
-      dataSaver: saveData.value,
-    })
-  }
-}
-
-function logCoreFeatureState(isDev: boolean) {
-  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,
-    })
-  }
-}
-
-function logCoreCacheState(isDev: boolean) {
-  const { offlineReady, isOnline: cacheOnline } = useCache()
-
-  if (isDev) {
-    console.log('[Core Layer] Cache status:', {
-      online: cacheOnline.value,
-      offlineReady: offlineReady.value,
-    })
-  }
-}
-
-function logCoreClientDiagnostics(isDev: boolean) {
-  if (!import.meta.client) return
-
-  logCoreBrowserState(isDev)
-  logCoreScreenState(isDev)
-  logCoreNetworkState(isDev)
-  logCoreFeatureState(isDev)
-  logCoreCacheState(isDev)
-}
-
-function logCoreRenderingState(isDev: boolean) {
-  const { mode, isServer, isClient, isHydrated } = useRendering()
-
-  if (isDev) {
-    console.log('[Core Layer] Rendering mode:', {
-      mode: mode.value,
-      server: isServer.value,
-      client: isClient.value,
-      hydrated: isHydrated.value,
-    })
-  }
-}
-
-function logCoreEnvironmentState(isDev: boolean) {
-  const env = useEnv() as unknown as Record<string, unknown>
-
-  if (isDev) {
-    const publicConfig = env.public as Record<string, unknown> | undefined
-
-    console.log('[Core Layer] Environment config loaded:', {
-      hasPublicConfig: Boolean(publicConfig),
-      publicKeys: Object.keys(publicConfig ?? {}),
-    })
-  }
-}
-
-function verifyCoreLayerModules(isDev: boolean) {
-  try {
-    logCoreDeviceState(isDev)
-    logCoreOnlineState(isDev)
-    logCoreClientDiagnostics(isDev)
-    logCoreRenderingState(isDev)
-    logCoreEnvironmentState(isDev)
-  } catch (error) {
-    console.error('[Core Layer] Module verification failed:', error)
-  }
-}
-
-type HookableNuxtApp = Pick<ReturnType<typeof useNuxtApp>, 'hook'>
-
-function registerCoreLayerHooks(nuxtApp: HookableNuxtApp, isDev: boolean) {
-  if (!isDev) return
-
-  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')
-  })
-}
-
-export default defineNuxtPlugin({
-  name: 'core:init',
-  setup(nuxtApp) {
-    const config = useAppConfig()
-    const isDev = process.env.NODE_ENV === 'development'
-
-    if (isDev) {
-      console.log('🚀 [Core Layer] Initializing...')
-
-      console.log('[Core Layer] Config:', config.coreLayer)
-    }
-
-    verifyCoreLayerModules(isDev)
-
-    registerCoreLayerHooks(nuxtApp, isDev)
-
-    return {
-      provide: {
-        coreLayer: {
-          version: '1.0.0',
-          initialized: true,
-        },
-      },
-    }
-  },
-})

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

@@ -1,56 +0,0 @@
-// plugins/scroll-guard.client.ts
-
-import type { ScrollGuardConfig } from '#layers/core/app/types/scroll-guard'
-
-type CoreLayerConfig = {
-  scrollGuard?: Partial<ScrollGuardConfig>
-}
-
-/**
- * Horizontal Scroll Guard Plugin (Client-only)
- *
- * Prevents unintended horizontal scrolling by clamping overflowing elements
- * and hiding horizontal overflow on html/body.
- *
- * Configuration via app.config.ts:
- * - Set `coreLayer.scrollGuard.enabled: false` to disable
- * - Set `coreLayer.scrollGuard.debug: true` to highlight offenders
- *
- * Runtime control via composable:
- * - `useScrollGuard().disable()` to turn off
- * - `useScrollGuard().enable()` to turn back on
- */
-export default defineNuxtPlugin({
-  name: 'core:scroll-guard',
-  setup() {
-    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 (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/core/app/types/app-config.d.ts

@@ -1,63 +0,0 @@
-import type { SiteConfig } from './site'
-
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    /** Shared site metadata — consumed by feeds, SEO, and any layer needing canonical site info. */
-    site?: SiteConfig
-    coreLayer?: {
-      /** Project name */
-      name?: string
-
-      /** 404 Not Found page configuration */
-      notFound?: {
-        icon?: string
-        title?: string
-        description?: string
-        showPath?: boolean
-        showHomeButton?: boolean
-        homeButtonLabel?: string
-        homeButtonTo?: string
-        showBackButton?: boolean
-        backButtonLabel?: string
-        actions?: Array<{
-          label: string
-          to?: string
-          icon?: string
-          color?: 'primary' | 'neutral' | 'error' | 'success'
-          variant?: 'solid' | 'outline' | 'ghost' | 'soft'
-          click?: () => void
-        }>
-        suggestions?: {
-          enabled?: boolean
-          title?: string
-          links?: Array<{ label: string; to: string; icon?: string }>
-        }
-      }
-
-      loading?: {
-        enabled?: boolean
-        minDuration?: number
-        maxDuration?: number
-        background?: string
-        textColor?: string
-        zIndex?: number
-      }
-
-      errors?: {
-        logToConsole?: boolean
-        logToExternal?: boolean
-        externalUrl?: string
-        externalToken?: string
-      }
-
-      scrollGuard?: {
-        enabled?: boolean
-        excludeSelectors?: string[]
-        strict?: boolean
-        transitionDuration?: number
-        resizeDebounce?: number
-        debug?: boolean
-      }
-    }
-  }
-}

package/layers/core/app/types/scroll-guard.ts

@@ -1,25 +0,0 @@
-/**
- * Horizontal Scroll Guard types
- */
-
-export type ScrollGuardConfig = {
-  /** Master toggle — set to false to disable completely */
-  enabled: boolean
-  /** CSS selectors for elements allowed to overflow intentionally */
-  excludeSelectors: string[]
-  /** Enable automatic clamping of overflowing elements */
-  strict: boolean
-  /** Duration (ms) for element width clamp animations */
-  transitionDuration: number
-  /** Debounce delay (ms) for resize re-scans */
-  resizeDebounce: number
-  /** Temporarily highlight overflowing elements with a red outline */
-  debug: boolean
-}
-
-export type ScrollGuardState = {
-  /** Whether the guard is currently active */
-  isEnabled: boolean
-  /** Number of elements currently clamped */
-  clampedCount: number
-}

package/layers/core/app/utils/helpers.test.ts

@@ -1,55 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { clamp, groupBy, omit, pick, removeEmpty, safeJsonParse } from './helpers'
-
-describe('core helpers', () => {
-  it('parses JSON with a fallback', () => {
-    expect(safeJsonParse('{"enabled":true}', { enabled: false })).toEqual({ enabled: true })
-    expect(safeJsonParse('not-json', { enabled: false })).toEqual({ enabled: false })
-  })
-
-  it('removes nullish values without stripping other falsy values', () => {
-    expect(
-      removeEmpty({
-        title: 'Nuxt Layers',
-        count: 0,
-        empty: '',
-        missing: undefined,
-        none: null,
-      })
-    ).toEqual({
-      title: 'Nuxt Layers',
-      count: 0,
-      empty: '',
-    })
-  })
-
-  it('groups, picks, omits, and clamps values', () => {
-    const rows = [
-      { kind: 'blog', id: 1 },
-      { kind: 'docs', id: 2 },
-      { kind: 'blog', id: 3 },
-    ]
-
-    expect(groupBy(rows, 'kind')).toEqual({
-      blog: [
-        { kind: 'blog', id: 1 },
-        { kind: 'blog', id: 3 },
-      ],
-      docs: [{ kind: 'docs', id: 2 }],
-    })
-    expect(
-      pick({ title: 'Nuxt', description: 'Layers', slug: 'nuxt-layers' }, ['title', 'slug'])
-    ).toEqual({
-      title: 'Nuxt',
-      slug: 'nuxt-layers',
-    })
-    expect(
-      omit({ title: 'Nuxt', description: 'Layers', slug: 'nuxt-layers' }, ['description'])
-    ).toEqual({
-      title: 'Nuxt',
-      slug: 'nuxt-layers',
-    })
-    expect(clamp(12, 0, 10)).toBe(10)
-  })
-})

package/layers/core/app/utils/helpers.ts

@@ -1,248 +0,0 @@
-/**
- * Core utility helpers
- *
- * General-purpose utility functions used across the core layer
- */
-
-/**
- * Safely parse JSON with fallback
- */
-export function safeJsonParse<T>(json: string, fallback: T): T {
-  try {
-    return JSON.parse(json)
-  } catch {
-    return fallback
-  }
-}
-
-/**
- * Debounce function execution
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function debounce<T extends (...args: any[]) => any>(
-  fn: T,
-  delay: number
-): (...args: Parameters<T>) => void {
-  let timeoutId: ReturnType<typeof setTimeout>
-
-  return function (...args: Parameters<T>) {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => fn(...args), delay)
-  }
-}
-
-/**
- * Throttle function execution
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function throttle<T extends (...args: any[]) => any>(
-  fn: T,
-  limit: number
-): (...args: Parameters<T>) => void {
-  let inThrottle: boolean
-
-  return function (...args: Parameters<T>) {
-    if (!inThrottle) {
-      fn(...args)
-      inThrottle = true
-      setTimeout(() => (inThrottle = false), limit)
-    }
-  }
-}
-
-/**
- * Sleep/delay utility
- */
-export function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
-/**
- * Retry a function with exponential backoff
- */
-export async function retry<T>(
-  fn: () => Promise<T>,
-  options: {
-    maxAttempts?: number
-    delay?: number
-    backoff?: number
-  } = {}
-): Promise<T> {
-  const { maxAttempts = 3, delay = 1000, backoff = 2 } = options
-
-  let lastError: Error = new Error('All retry attempts failed')
-
-  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-    try {
-      return await fn()
-    } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error))
-
-      if (attempt < maxAttempts) {
-        const waitTime = delay * Math.pow(backoff, attempt - 1)
-        await sleep(waitTime)
-      }
-    }
-  }
-
-  throw lastError
-}
-
-/**
- * Clamp a number between min and max
- */
-export function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max)
-}
-
-/**
- * Generate a random ID
- */
-export function generateId(prefix?: string): string {
-  const id = Math.random().toString(36).substring(2, 11)
-  return prefix ? `${prefix}-${id}` : id
-}
-
-/**
- * Format bytes to human-readable string
- */
-export function formatBytes(bytes: number, decimals = 2): string {
-  if (bytes === 0) return '0 Bytes'
-
-  const k = 1024
-  const dm = decimals < 0 ? 0 : decimals
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
-}
-
-/**
- * Deep clone an object (simple implementation)
- * For complex objects, consider using structuredClone or a library
- */
-export function deepClone<T>(obj: T): T {
-  if (obj === null || typeof obj !== 'object') return obj
-
-  if (obj instanceof Date) return new Date(obj.getTime()) as unknown as T
-  if (obj instanceof Array) return obj.map((item) => deepClone(item)) as unknown as T
-  if (obj instanceof Object) {
-    const clonedObj = {} as T
-    for (const key in obj) {
-      if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        clonedObj[key] = deepClone(obj[key])
-      }
-    }
-    return clonedObj
-  }
-
-  return obj
-}
-
-/**
- * Check if code is running in browser
- */
-export function isBrowser(): boolean {
-  return typeof window !== 'undefined'
-}
-
-/**
- * Check if code is running on server
- */
-export function isServer(): boolean {
-  return !isBrowser()
-}
-
-/**
- * Get query parameter from URL
- */
-export function getQueryParam(name: string, url?: string): string | null {
-  if (!isBrowser() && !url) return null
-
-  const urlStr = url || window.location.href
-  const urlObj = new URL(urlStr)
-  return urlObj.searchParams.get(name)
-}
-
-/**
- * Capitalize first letter of string
- */
-export function capitalize(str: string): string {
-  if (!str) return ''
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-/**
- * Truncate string with ellipsis
- */
-export function truncate(str: string, length: number, suffix = '...'): string {
-  if (str.length <= length) return str
-  return str.substring(0, length - suffix.length) + suffix
-}
-
-/**
- * Remove undefined/null values from object
- */
-export function removeEmpty<T extends Record<string, unknown>>(obj: T): Partial<T> {
-  const result: Partial<T> = {}
-
-  for (const key in obj) {
-    if (obj[key] !== undefined && obj[key] !== null) {
-      result[key] = obj[key]
-    }
-  }
-
-  return result
-}
-
-/**
- * Group array items by key
- */
-export function groupBy<T>(array: T[], key: keyof T): Record<string, T[]> {
-  return array.reduce(
-    (result, item) => {
-      const groupKey = String(item[key])
-      if (!result[groupKey]) {
-        result[groupKey] = []
-      }
-      result[groupKey].push(item)
-      return result
-    },
-    {} as Record<string, T[]>
-  )
-}
-
-/**
- * Pick specific keys from object
- */
-export function pick<T extends Record<string, unknown>, K extends keyof T>(
-  obj: T,
-  keys: K[]
-): Pick<T, K> {
-  const result = {} as Pick<T, K>
-
-  keys.forEach((key) => {
-    if (key in obj) {
-      result[key] = obj[key]
-    }
-  })
-
-  return result
-}
-
-/**
- * Omit specific keys from object
- */
-export function omit<T extends Record<string, unknown>, K extends keyof T>(
-  obj: T,
-  keys: K[]
-): Omit<T, K> {
-  const result = { ...obj }
-
-  keys.forEach((key) => {
-    delete result[key]
-  })
-
-  return result
-}

package/layers/core/app/utils/regex.test.ts

@@ -1,31 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { splitSpaces } from './regex'
-
-describe('splitSpaces', () => {
-  it('splits a sentence on single whitespace characters', () => {
-    expect(splitSpaces('Nuxt Layers rocks')).toEqual(['Nuxt', 'Layers', 'rocks'])
-  })
-
-  it('splits on the first whitespace match only per gap (non-global regex)', () => {
-    // The source regex has no /g flag, so String#split still splits on every
-    // occurrence (split applies the pattern repeatedly regardless of /g).
-    expect(splitSpaces('a  b')).toEqual(['a', '', 'b'])
-  })
-
-  it('returns a single-element array for text with no spaces', () => {
-    expect(splitSpaces('single')).toEqual(['single'])
-  })
-
-  it('returns two empty strings for a single space', () => {
-    expect(splitSpaces(' ')).toEqual(['', ''])
-  })
-
-  it('returns an array with one empty string for an empty string', () => {
-    expect(splitSpaces('')).toEqual([''])
-  })
-
-  it('splits on tabs and newlines as whitespace', () => {
-    expect(splitSpaces('a\tb\nc')).toEqual(['a', 'b', 'c'])
-  })
-})

package/layers/feeds/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../apps/playground/tsconfig.json",
-  "compilerOptions": {
-    "strict": true
-  },
-  "exclude": ["node_modules"]
-}

package/layers/forms/app/app.config.ts

@@ -1,3 +0,0 @@
-export default {
-  formsLayer: {},
-}

package/layers/forms/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../apps/playground/tsconfig.json",
-  "compilerOptions": {
-    "strict": true
-  },
-  "exclude": ["node_modules"]
-}