kmcom-nuxt-layers 1.6.39 → 1.6.43

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * Error logging composable for tracking and reporting errors
  *
@@ -49,16 +48,12 @@ export function useErrorLog() {
   const appConfig = useAppConfig()
   const route = useRoute()
 
-  // Get error log configuration from app.config
-  const config = computed(() => {
-    const coreLayer = appConfig.coreLayer as { errors?: ErrorLogConfig } | undefined
-    return {
-      logToConsole: coreLayer?.errors?.logToConsole ?? true,
-      logToExternal: coreLayer?.errors?.logToExternal ?? false,
-      externalUrl: coreLayer?.errors?.externalUrl,
-      externalToken: coreLayer?.errors?.externalToken,
-    }
-  })
+  const config = computed(() => ({
+    logToConsole: appConfig.coreLayer?.errors?.logToConsole ?? true,
+    logToExternal: appConfig.coreLayer?.errors?.logToExternal ?? false,
+    externalUrl: appConfig.coreLayer?.errors?.externalUrl,
+    externalToken: appConfig.coreLayer?.errors?.externalToken,
+  }))
 
   /**
    * Log an error with optional context

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

@@ -1,16 +1,6 @@
 // composables/useLoading.ts
 
-interface LoadingState {
-  isLoading: Ref<boolean>
-  progress: Ref<number>
-}
-
-// Shared state across all calls (singleton pattern)
-const state: LoadingState = {
-  isLoading: ref(true), // Start as true for initial app load
-  progress: ref(0),
-}
-
+// Timer IDs are non-reactive and intentionally module-scope (singleton)
 let progressInterval: ReturnType<typeof setInterval> | null = null
 let progressTimeout: ReturnType<typeof setTimeout> | null = null
 
@@ -27,65 +17,47 @@ let progressTimeout: ReturnType<typeof setTimeout> | null = null
  * @returns Loading state and control methods
  */
 export function useLoading() {
-  /**
-   * Start loading with simulated progress
-   * Progress will automatically increment from 0 to ~90
-   */
+  const appConfig = useAppConfig()
+  const isLoading = useState('core:loading', () => appConfig.coreLayer?.loading?.enabled !== false)
+  const progress = useState('core:loading:progress', () => 0)
+
   function startLoading(): void {
-    state.isLoading.value = true
-    state.progress.value = 0
+    isLoading.value = true
+    progress.value = 0
 
-    // Clear any existing intervals
     if (progressInterval) clearInterval(progressInterval)
     if (progressTimeout) clearTimeout(progressTimeout)
 
-    // Simulate progress: increment randomly to 90%, then wait
     progressInterval = setInterval(() => {
-      if (state.progress.value < 90) {
-        // Random increment between 3-8%
+      if (progress.value < 90) {
         const increment = Math.random() * 5 + 3
-        state.progress.value = Math.min(state.progress.value + increment, 90)
+        progress.value = Math.min(progress.value + increment, 90)
       } else {
-        // Stop at 90, wait for manual completion
         if (progressInterval) {
           clearInterval(progressInterval)
           progressInterval = null
         }
       }
-    }, 150) // Update every 150ms
+    }, 150)
   }
 
-  /**
-   * Stop loading and jump to 100%
-   */
   function stopLoading(): void {
-    // Clear any running intervals
     if (progressInterval) {
       clearInterval(progressInterval)
       progressInterval = null
     }
 
-    // Jump to 100%
-    state.progress.value = 100
+    progress.value = 100
 
-    // Mark as not loading after a brief delay (allows 100% to be visible)
     progressTimeout = setTimeout(() => {
-      state.isLoading.value = false
+      isLoading.value = false
     }, 100)
   }
 
-  /**
-   * Manually update progress (0-100)
-   * @param value - Progress percentage (0-100)
-   */
   function updateProgress(value: number): void {
-    state.progress.value = Math.min(Math.max(value, 0), 100)
+    progress.value = Math.min(Math.max(value, 0), 100)
   }
 
-  /**
-   * Execute async function with loading state
-   * @param fn - Async function to execute
-   */
   async function withLoading(fn: () => Promise<void>): Promise<void> {
     startLoading()
     try {
@@ -96,11 +68,8 @@ export function useLoading() {
   }
 
   return {
-    // State (reactive refs)
-    isLoading: readonly(state.isLoading),
-    progress: readonly(state.progress),
-
-    // Actions
+    isLoading: readonly(isLoading),
+    progress: readonly(progress),
     startLoading,
     stopLoading,
     updateProgress,

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

@@ -14,12 +14,9 @@ interface SavedStyles {
 }
 
 // ---------------------------------------------------------------------------
-// Singleton state (shared across all calls)
+// Singleton DOM tracking state (non-reactive, intentionally module-scope)
 // ---------------------------------------------------------------------------
 
-const isEnabled = ref(false)
-const clampedCount = ref(0)
-
 const clampedElements = new WeakMap<HTMLElement, SavedStyles>()
 /** Live set so we can iterate and restore on disable */
 const clampedSet = new Set<HTMLElement>()
@@ -36,155 +33,147 @@ let savedBodyTransition = ''
 let opts: ScrollGuardConfig | null = null
 
 // ---------------------------------------------------------------------------
-// Internal helpers
+// Composable
 // ---------------------------------------------------------------------------
 
-function shouldExclude(el: HTMLElement): boolean {
-  if (!opts) return true
-  return opts.excludeSelectors.some((sel) => {
-    try {
-      return el.matches(sel)
-    } catch {
-      return false
-    }
-  })
-}
-
-function clampElement(el: HTMLElement) {
-  if (!opts || clampedElements.has(el) || shouldExclude(el)) return
-  if (el.scrollWidth <= window.innerWidth) return
-
-  // Save original styles
-  clampedElements.set(el, {
-    transition: el.style.transition,
-    maxWidth: el.style.maxWidth,
-    boxSizing: el.style.boxSizing,
-    overflowX: el.style.overflowX,
-  })
-  clampedSet.add(el)
-
-  el.style.transition = `max-width ${opts.transitionDuration}ms ease`
-  el.style.maxWidth = '100%'
-  el.style.boxSizing = 'border-box'
-
-  if (opts.debug) {
-    el.style.outline = '2px dashed red'
-    setTimeout(() => {
-      el.style.outline = ''
-    }, 1000)
+/**
+ * Horizontal scroll guard composable
+ *
+ * Prevents unintended horizontal overflow by clamping overflowing elements
+ * and hiding horizontal scroll on html/body. Fully togglable at runtime.
+ *
+ * @example
+ * ```ts
+ * const { isEnabled, clampedCount, enable, disable, toggle, scan } = useScrollGuard()
+ *
+ * // Disable temporarily for a modal with intentional overflow
+ * disable()
+ * // Re-enable when done
+ * enable()
+ * ```
+ */
+export function useScrollGuard() {
+  const isEnabled = useState('core:scroll-guard:enabled', () => false)
+  const clampedCount = useState('core:scroll-guard:clamped', () => 0)
+
+  function shouldExclude(el: HTMLElement): boolean {
+    if (!opts) return true
+    return opts.excludeSelectors.some((sel) => {
+      try {
+        return el.matches(sel)
+      } catch {
+        return false
+      }
+    })
   }
 
-  clampedCount.value++
-}
+  function clampElement(el: HTMLElement) {
+    if (!opts || clampedElements.has(el) || shouldExclude(el)) return
+    if (el.scrollWidth <= window.innerWidth) return
+
+    clampedElements.set(el, {
+      transition: el.style.transition,
+      maxWidth: el.style.maxWidth,
+      boxSizing: el.style.boxSizing,
+      overflowX: el.style.overflowX,
+    })
+    clampedSet.add(el)
+
+    el.style.transition = `max-width ${opts.transitionDuration}ms ease`
+    el.style.maxWidth = '100%'
+    el.style.boxSizing = 'border-box'
+
+    if (opts.debug) {
+      el.style.outline = '2px dashed red'
+      setTimeout(() => {
+        el.style.outline = ''
+      }, 1000)
+    }
 
+    clampedCount.value++
+  }
 
-function guard() {
-  if (!isEnabled.value || !opts) return
+  function guard() {
+    if (!isEnabled.value || !opts) return
 
-  const html = document.documentElement
-  const body = document.body
+    const html = document.documentElement
+    const body = document.body
 
-  html.style.overflowX = 'clip'
-  body.style.overflowX = 'clip'
-  body.style.maxWidth = '100vw'
+    html.style.overflowX = 'clip'
+    body.style.overflowX = 'clip'
+    body.style.maxWidth = '100vw'
 
-  if (!opts.strict) return
+    if (!opts.strict) return
 
-  const elements = document.body.querySelectorAll<HTMLElement>('*')
-  for (const el of elements) {
-    if (el.offsetParent !== null) {
-      clampElement(el)
+    const elements = document.body.querySelectorAll<HTMLElement>('*')
+    for (const el of elements) {
+      if (el.offsetParent !== null) {
+        clampElement(el)
+      }
     }
   }
-}
 
-function startObservers() {
-  if (!opts) return
-
-  // MutationObserver for dynamically added content
-  observer = new MutationObserver((mutations) => {
-    if (!isEnabled.value || !opts?.strict) return
-    for (const m of mutations) {
-      for (const node of m.addedNodes) {
-        if (node instanceof HTMLElement) {
-          clampElement(node)
-          for (const child of node.querySelectorAll<HTMLElement>('*')) {
-            clampElement(child)
+  function startObservers() {
+    if (!opts) return
+
+    observer = new MutationObserver((mutations) => {
+      if (!isEnabled.value || !opts?.strict) return
+      for (const m of mutations) {
+        for (const node of m.addedNodes) {
+          if (node instanceof HTMLElement) {
+            clampElement(node)
+            for (const child of node.querySelectorAll<HTMLElement>('*')) {
+              clampElement(child)
+            }
           }
         }
       }
-    }
-  })
-  observer.observe(document.body, { childList: true, subtree: true })
-
-  // Debounced resize handler
-  debouncedGuard = debounce(guard, opts.resizeDebounce)
-  resizeHandler = debouncedGuard
-  window.addEventListener('resize', resizeHandler)
-}
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
 
-function stopObservers() {
-  if (observer) {
-    observer.disconnect()
-    observer = null
-  }
-  if (resizeHandler) {
-    window.removeEventListener('resize', resizeHandler)
-    resizeHandler = null
-    debouncedGuard = null
+    debouncedGuard = debounce(guard, opts.resizeDebounce)
+    resizeHandler = debouncedGuard
+    window.addEventListener('resize', resizeHandler)
   }
-}
 
-function restoreAll() {
-  // Restore all clamped elements
-  for (const el of clampedSet) {
-    const saved = clampedElements.get(el)
-    if (saved) {
-      el.style.transition = saved.transition
-      el.style.maxWidth = saved.maxWidth
-      el.style.boxSizing = saved.boxSizing
-      el.style.overflowX = saved.overflowX
-      clampedElements.delete(el)
+  function stopObservers() {
+    if (observer) {
+      observer.disconnect()
+      observer = null
+    }
+    if (resizeHandler) {
+      window.removeEventListener('resize', resizeHandler)
+      resizeHandler = null
+      debouncedGuard = null
     }
   }
-  clampedSet.clear()
-  clampedCount.value = 0
-
-  // Restore html/body styles
-  const html = document.documentElement
-  const body = document.body
-  html.style.overflowX = savedHtmlOverflowX
-  body.style.overflowX = savedBodyOverflowX
-  body.style.maxWidth = savedBodyMaxWidth
-  body.style.transition = savedBodyTransition
-}
 
-// ---------------------------------------------------------------------------
-// Composable
-// ---------------------------------------------------------------------------
+  function restoreAll() {
+    for (const el of clampedSet) {
+      const saved = clampedElements.get(el)
+      if (saved) {
+        el.style.transition = saved.transition
+        el.style.maxWidth = saved.maxWidth
+        el.style.boxSizing = saved.boxSizing
+        el.style.overflowX = saved.overflowX
+        clampedElements.delete(el)
+      }
+    }
+    clampedSet.clear()
+    clampedCount.value = 0
+
+    const html = document.documentElement
+    const body = document.body
+    html.style.overflowX = savedHtmlOverflowX
+    body.style.overflowX = savedBodyOverflowX
+    body.style.maxWidth = savedBodyMaxWidth
+    body.style.transition = savedBodyTransition
+  }
 
-/**
- * Horizontal scroll guard composable
- *
- * Prevents unintended horizontal overflow by clamping overflowing elements
- * and hiding horizontal scroll on html/body. Fully togglable at runtime.
- *
- * @example
- * ```ts
- * const { isEnabled, clampedCount, enable, disable, toggle, scan } = useScrollGuard()
- *
- * // Disable temporarily for a modal with intentional overflow
- * disable()
- * // Re-enable when done
- * enable()
- * ```
- */
-export function useScrollGuard() {
   function enable(config?: Partial<ScrollGuardConfig>) {
     if (!import.meta.client) return
     if (isEnabled.value) return
 
-    // Resolve config: explicit arg → app.config → defaults
     const appConfig = useAppConfig()
     const configFromApp = (
       appConfig.coreLayer as { scrollGuard?: Partial<ScrollGuardConfig> } | undefined
@@ -201,7 +190,6 @@ export function useScrollGuard() {
       ...config,
     }
 
-    // Save original html/body styles before we touch them
     const html = document.documentElement
     const body = document.body
     savedHtmlOverflowX = html.style.overflowX
@@ -210,8 +198,6 @@ export function useScrollGuard() {
     savedBodyTransition = body.style.transition
 
     isEnabled.value = true
-
-    // Initial scan
     guard()
     startObservers()
   }

package/layers/forms/app/components/Form/Field.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-import { fieldConfigs } from '../../config/fields'
-import type { FieldSize, FieldType } from '../../types/fields'
+import { fieldConfigs, type FieldType } from '../../config/fields'
+import type { FieldSize } from '../../types/fields'
 
 const {
   type = 'text',

package/layers/forms/app/composables/useFormSchema.ts

@@ -1,7 +1,5 @@
-// @ts-nocheck
 import { z, type ZodObject, type ZodRawShape, type ZodTypeAny } from 'zod'
-import { fieldConfigs } from '../config/fields'
-import type { FieldType } from '../types/fields'
+import { fieldConfigs, type FieldType } from '../config/fields'
 
 /**
  * Creates a Zod schema from a field type map

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

@@ -1,12 +1,12 @@
-// @ts-nocheck
 import { z } from 'zod'
-import type { FieldConfig, FieldType } from '../types/fields'
+import type { FieldConfig } from '../types/fields'
 
 /**
- * Field configuration registry
- * Defines default behavior, validation, and UI props for each field type
+ * Field configuration registry — single source of truth for all field types.
+ * FieldType is derived from the keys of this object, so adding a new field
+ * here is sufficient; the type stays in sync automatically.
  */
-export const fieldConfigs: Record<FieldType, FieldConfig> = {
+const _fieldConfigs = {
   text: {
     inputType: 'text',
     inputMode: 'text',
@@ -102,4 +102,10 @@ export const fieldConfigs: Record<FieldType, FieldConfig> = {
     component: 'UInputNumber',
     format: 'currency',
   },
-} as const
+} satisfies Record<string, FieldConfig>
+
+// FieldType is derived from the keys — adding an entry above is all that's needed
+export type FieldType = keyof typeof _fieldConfigs
+
+// Cast to widened FieldConfig so callers get safe property access (icon?, placeholder?, etc.)
+export const fieldConfigs = _fieldConfigs as Record<FieldType, FieldConfig>

package/layers/forms/app/types/fields.ts

@@ -1,22 +1,4 @@
-// @ts-nocheck
-import type { ZodSchema } from 'zod'
-
-/**
- * Supported field types for the FormField component
- */
-export type FieldType =
-  | 'text'
-  | 'email'
-  | 'phone'
-  | 'password'
-  | 'url'
-  | 'textarea'
-  | 'name'
-  | 'number'
-  | 'date'
-  | 'time'
-  | 'search'
-  | 'currency'
+import type { ZodTypeAny } from 'zod'
 
 /**
  * HTML input modes for mobile keyboard optimization
@@ -48,7 +30,7 @@ export interface FieldConfig {
   /** Placeholder text */
   placeholder?: string
   /** Zod validation schema */
-  validation: ZodSchema
+  validation: ZodTypeAny
   /** Nuxt UI component to use for rendering */
   component?: FieldComponent
   /** Special formatting to apply */

package/layers/forms/nuxt.config.ts

@@ -23,13 +23,3 @@ export default defineNuxtConfig({
     strict: true,
   },
 })
-
-declare module '@nuxt/schema' {
-  interface RuntimeConfig {
-    formsLayer?: {
-      resendApiKey: string
-      emailFrom: string
-      emailTo: string
-    }
-  }
-}

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const {
+  to,
+  from = 0,
+  duration = 2,
+  ease = 'power2.out',
+  format = undefined,
+  once = true,
+  prefix = '',
+  suffix = '',
+  as = 'span',
+} = defineProps<{
+  to: number
+  from?: number
+  duration?: number
+  ease?: string
+  format?: (n: number) => string
+  once?: boolean
+  prefix?: string
+  suffix?: string
+  as?: string
+}>()
+
+const el = ref<HTMLElement | null>(null)
+const { displayValue, isComplete } = useCountUp(el, {
+  to,
+  from,
+  duration,
+  ease,
+  once,
+  ...(format !== undefined ? { format } : {}),
+})
+</script>
+
+<template>
+  <component :is="as" ref="el" :class="{ 'is-complete': isComplete }">
+    {{ prefix }}{{ displayValue }}{{ suffix }}
+  </component>
+</template>

package/layers/motion/app/components/Motion/Cursor.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+  type CursorType = 'dot' | 'ring' | 'dot-ring' | 'glow'
+
+  const {
+    type = 'dot-ring',
+    visible = true,
+    dotSize = 8,
+    ringSize = 36,
+    glowSize = 80,
+    smoothing = 0.15,
+    dotSmoothing = 0.35,
+    ringSmoothing = 0.1,
+    glowSmoothing = 0.08,
+    color = 'var(--ui-color-primary-500)',
+    hideCursor = true,
+  } = defineProps<{
+    type?: CursorType
+    visible?: boolean
+    dotSize?: number
+    ringSize?: number
+    glowSize?: number
+    smoothing?: number
+    dotSmoothing?: number
+    ringSmoothing?: number
+    glowSmoothing?: number
+    color?: string
+    hideCursor?: boolean
+  }>()
+
+  // Primary follower: dot in 'dot'/'dot-ring', ring in 'ring', blob in 'glow'
+  const primarySmoothing = computed(() => {
+    if (type === 'glow') return glowSmoothing ?? smoothing
+    if (type === 'ring') return ringSmoothing ?? smoothing
+    return dotSmoothing ?? smoothing
+  })
+
+  // Secondary follower: lagging ring in 'dot-ring' only
+  const secondarySmoothing = computed(() => ringSmoothing ?? smoothing * 0.4)
+
+  const primary = useCursorFollower({ smoothing: primarySmoothing })
+  const secondary = useCursorFollower({ smoothing: secondarySmoothing })
+
+  onMounted(() => {
+    if (hideCursor) document.documentElement.style.cursor = 'none'
+  })
+
+  onUnmounted(() => {
+    document.documentElement.style.cursor = ''
+  })
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="motion-cursor pointer-events-none fixed inset-0 z-9999 transition-opacity duration-300"
+      :style="{ opacity: visible ? 1 : 0 }"
+      aria-hidden="true"
+    >
+      <!-- dot — 'dot' and 'dot-ring' modes -->
+      <div
+        v-if="type === 'dot' || type === 'dot-ring'"
+        class="absolute top-0 left-0 rounded-full will-change-transform"
+        :style="{
+          width: `${dotSize}px`,
+          height: `${dotSize}px`,
+          backgroundColor: color,
+          transform: `translate(${primary.x.value - dotSize / 2}px, ${primary.y.value - dotSize / 2}px)`,
+        }"
+      />
+
+      <!-- ring — primary in 'ring' mode, secondary (lagging) in 'dot-ring' -->
+      <div
+        v-if="type === 'ring' || type === 'dot-ring'"
+        class="absolute top-0 left-0 rounded-full border-2 will-change-transform"
+        :style="{
+          width: `${ringSize}px`,
+          height: `${ringSize}px`,
+          borderColor: color,
+          transform:
+            type === 'dot-ring'
+              ? `translate(${secondary.x.value - ringSize / 2}px, ${secondary.y.value - ringSize / 2}px)`
+              : `translate(${primary.x.value - ringSize / 2}px, ${primary.y.value - ringSize / 2}px)`,
+        }"
+      />
+
+      <!-- glow — large blurred blob -->
+      <div
+        v-if="type === 'glow'"
+        class="absolute top-0 left-0 rounded-full will-change-transform"
+        :style="{
+          width: `${glowSize}px`,
+          height: `${glowSize}px`,
+          backgroundColor: color,
+          opacity: 0.3,
+          filter: 'blur(20px)',
+          transform: `translate(${primary.x.value - glowSize / 2}px, ${primary.y.value - glowSize / 2}px)`,
+        }"
+      />
+    </div>
+  </Teleport>
+</template>