kmcom-nuxt-layers 2.2.0 → 2.2.1

package/layers/layout/app/composables/useGridConfig.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type {
   GridConfig,
   GridLayers,

package/layers/layout/app/types/app-config.d.ts

@@ -1,11 +1,14 @@
-/* eslint-disable @typescript-eslint/consistent-type-imports */
+import type { GridConfig } from './layouts'
+
 declare module '@nuxt/schema' {
-  type AppConfigInput = {
+  interface AppConfigInput {
     layoutLayer?: {
       name?: string
       ui?: {
-        grid?: import('./layouts').GridConfig
+        grid?: GridConfig
       }
     }
   }
 }
+
+export {}

package/layers/navigation/app/app.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 export default defineAppConfig({
   site: {
     title: '',
@@ -18,7 +17,7 @@ export default defineAppConfig({
 })
 
 declare module '@nuxt/schema' {
-  type AppConfigInput = {
+  interface AppConfigInput {
     site?: {
       title?: string
       subtitle?: string

package/layers/navigation/app/components/Links/Group.vue

@@ -1,8 +1,4 @@
-<!-- eslint-disable vue/require-name-property -->
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script lang="ts">
-  // @ts-nocheck
-  // eslint-disable-next-line no-restricted-imports
   import { cloneVNode, defineComponent, Fragment, h, ref, type VNode } from 'vue'
 
   export default defineComponent({

package/layers/navigation/app/components/Links/Named.vue

@@ -1,6 +1,4 @@
-<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-  // @ts-nocheck
   import type { UiColors } from '#layers/typography/types/colors'
 
   const {
@@ -20,8 +18,6 @@
 </script>
 
 <template>
-  <!-- eslint-disable-next-line vue/no-duplicate-attr-inheritance -->
-  <!-- eslint-disable vue/no-duplicate-attr-inheritance -->
   <ULink
     :to="{ name: name, params: params, query: query }"
     :variant

package/layers/navigation/app/composables/mastNav.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-syntax */
 import MastNavModal from '../components/Mast/NavModal.vue'
 
 function _useMastNav() {

package/layers/navigation/app/composables/toast.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 type ToastOptions = {
   description?: string
   duration?: number

package/layers/navigation/app/composables/useSite.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import { splitSpaces } from '../utils/regex'
 
 export function useSite() {

package/layers/navigation/app/utils/createModal.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { Component } from 'vue'
 
 export type ModalController<P extends Record<string, unknown>> = {

package/layers/page-transitions/app/app.config.ts

@@ -6,7 +6,7 @@ export default defineAppConfig({
 })
 
 declare module '@nuxt/schema' {
-  type AppConfigInput = {
+  interface AppConfigInput {
     pageTransitions?: {
       default?: string
       duration?: number

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

@@ -1,5 +1,6 @@
-/* eslint-disable no-restricted-syntax */
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin({
+  name: 'page-transitions:page-transitions',
+  setup(nuxtApp) {
   const appConfig = useAppConfig()
 
   const defaultTransition = appConfig.pageTransitions?.default ?? 'fade'
@@ -11,4 +12,5 @@ export default defineNuxtPlugin((nuxtApp) => {
       duration,
     }
   })
+  },
 })

package/layers/routing/app/composables/useRoutingConfig.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import { defu } from 'defu'
 
 import { ROUTING_PRESETS, type FeatureValue, type RoutingLayerConfig } from '../types/routing'

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

@@ -1,8 +1,9 @@
-/* eslint-disable no-restricted-syntax */
 import { useFeatureFlags } from '../composables/useFeatureFlags'
 import type { FeatureValue } from '../types/routing'
 
-export default defineNuxtPlugin(async () => {
+export default defineNuxtPlugin({
+  name: 'routing:feature-flags',
+  async setup() {
   const { config } = useRoutingConfig()
   if (!config.runtimeFlags) return
 
@@ -13,4 +14,5 @@ export default defineNuxtPlugin(async () => {
   } catch (e) {
     if (config.debug) console.warn('[routing] Failed to fetch feature flags', e)
   }
+  },
 })

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

@@ -1,5 +1,6 @@
-/* eslint-disable no-restricted-syntax */
-export default defineNuxtPlugin(() => {
+export default defineNuxtPlugin({
+  name: 'routing:scroll-routing',
+  setup() {
   const { config } = useRoutingConfig()
   if (!config.scrollRouting.enabled) return
 
@@ -19,4 +20,5 @@ export default defineNuxtPlugin(() => {
   onNuxtReady(() => {
     document.querySelectorAll('[data-section]').forEach((el) => observer.observe(el))
   })
+  },
 })

package/layers/routing/app/types/app-config.d.ts

@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/consistent-type-imports */
 declare module '@nuxt/schema' {
-  type AppConfigInput = {
+  interface AppConfigInput {
     routingLayer?: Partial<import('./routing').RoutingLayerConfig>
   }
 }

package/layers/routing/nuxt.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 type RoutePage = {
   file?: string
   meta?: Record<string, unknown>

package/layers/scripts/app/app.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
 export default defineAppConfig({
   scriptsLayer: {
     consent: {
@@ -21,7 +20,7 @@ export default defineAppConfig({
 })
 
 declare module '@nuxt/schema' {
-  type AppConfigInput = {
+  interface AppConfigInput {
     scriptsLayer?: {
       consent?: {
         required?: boolean

package/layers/scripts/app/composables/useAnalytics.ts

@@ -16,10 +16,10 @@ export function useAnalytics(): AnalyticsProxy {
 
   if (!provider || !id) return noop()
 
-  // Load immediately unless consent is required and not yet granted
-  const trigger = computed(() =>
-    consentRequired.value && !hasConsent.value ? 'manual' : 'onNuxtReady'
-  )
+  // Load on Nuxt ready unless consent is required and not yet granted
+  const trigger = consentRequired.value
+    ? useScriptTriggerConsent({ consent: hasConsent })
+    : 'onNuxtReady'
 
   if (provider === 'ga4') {
     const ga = useScriptGoogleAnalytics({ id, scriptOptions: { trigger } })
@@ -32,7 +32,7 @@ export function useAnalytics(): AnalyticsProxy {
   if (provider === 'plausible') {
     const pl = useScriptPlausibleAnalytics({ domain: id, scriptOptions: { trigger } })
     return {
-      track: (event) => pl.proxy.trackEvent(event),
+      track: (event, params) => pl.proxy.plausible(event, { props: params ?? {} }),
       load: () => pl.load(),
     }
   }
@@ -40,7 +40,7 @@ export function useAnalytics(): AnalyticsProxy {
   if (provider === 'fathom') {
     const fa = useScriptFathomAnalytics({ site: id, scriptOptions: { trigger } })
     return {
-      track: (event) => fa.proxy.trackEvent(event),
+      track: (event) => fa.proxy.trackEvent(event, { _value: 0 }),
       load: () => fa.load(),
     }
   }

package/layers/scripts/app/composables/useGtm.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 export function useGtm() {
   const { scriptsLayer } = useAppConfig()
   const { hasConsent, consentRequired } = useScriptsConsent()
@@ -8,9 +7,10 @@ export function useGtm() {
     return { push: (_data: Record<string, unknown>) => {}, load: () => {} }
   }
 
-  const trigger = computed(() =>
-    consentRequired.value && !hasConsent.value ? 'manual' : 'onNuxtReady'
-  )
+  // Load on Nuxt ready unless consent is required and not yet granted
+  const trigger = consentRequired.value
+    ? useScriptTriggerConsent({ consent: hasConsent })
+    : 'onNuxtReady'
 
   const gtm = useScriptGoogleTagManager({ id: gtmConfig.id, scriptOptions: { trigger } })
 

package/layers/scripts/app/composables/useScriptLoader.ts

@@ -8,6 +8,17 @@ type ScriptLoaderOptions = {
   integrity?: string
 }
 
+function idleTrigger(): Promise<void> {
+  return new Promise((resolve) => {
+    if (!import.meta.client) return
+    if ('requestIdleCallback' in window) {
+      requestIdleCallback(() => resolve())
+      return
+    }
+    setTimeout(resolve, 1)
+  })
+}
+
 export function useScriptLoader(options: ScriptLoaderOptions) {
   const { src, key, strategy = 'onNuxtReady', crossorigin, integrity } = options
 
@@ -19,7 +30,7 @@ export function useScriptLoader(options: ScriptLoaderOptions) {
       integrity,
     },
     {
-      trigger: strategy,
+      trigger: strategy === 'idle' ? idleTrigger() : strategy,
     }
   )
 

package/layers/scroll/app/components/Motion/HorizontalScroll.vue

@@ -43,7 +43,10 @@
       ease: 'none',
     })
 
-    cleanup = () => tween.kill()
+    cleanup = () => {
+      tween.scrollTrigger?.kill()
+      tween.kill()
+    }
   })
 
   onUnmounted(() => {

package/layers/scroll/app/components/Motion/Parallax.vue

@@ -1,41 +1,37 @@
-<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
-  const props = withDefaults(
-    defineProps<{
-      /**
-       * Parallax speed (-1 to 1, negative = slower than scroll)
-       */
-      speed?: number
-      /**
-       * Direction of parallax movement
-       */
-      direction?: 'vertical' | 'horizontal'
-      /**
-       * Enable rotation during parallax
-       */
-      rotate?: number
-      /**
-       * Enable scale during parallax
-       */
-      scale?: number
-      /**
-       * Scrub smoothness (0.1 = very smooth, 1 = instant)
-       */
-      scrub?: number
-      /**
-       * Tag to render as
-       */
-      as?: string
-    }>(),
-    {
-      speed: 0.5,
-      direction: 'vertical',
-      rotate: 0,
-      scale: 0,
-      scrub: 0.5,
-      as: 'div',
-    }
-  )
+  const {
+    speed = 0.5,
+    direction = 'vertical',
+    rotate = 0,
+    scale = 0,
+    scrub = 0.5,
+    as = 'div',
+  } = defineProps<{
+    /**
+     * Parallax speed (-1 to 1, negative = slower than scroll)
+     */
+    speed?: number
+    /**
+     * Direction of parallax movement
+     */
+    direction?: 'vertical' | 'horizontal'
+    /**
+     * Enable rotation during parallax
+     */
+    rotate?: number
+    /**
+     * Enable scale during parallax
+     */
+    scale?: number
+    /**
+     * Scrub smoothness (0.1 = very smooth, 1 = instant)
+     */
+    scrub?: number
+    /**
+     * Tag to render as
+     */
+    as?: string
+  }>()
 
   const { gsap } = useGsap()
 
@@ -45,23 +41,23 @@
   onMounted(() => {
     if (!containerRef.value || !contentRef.value) return
 
-    const yAmount = props.direction === 'vertical' ? props.speed * -200 : 0
-    const xAmount = props.direction === 'horizontal' ? props.speed * 200 : 0
+    const yAmount = direction === 'vertical' ? speed * -200 : 0
+    const xAmount = direction === 'horizontal' ? speed * 200 : 0
 
     const animationProps: gsap.TweenVars = {
       scrollTrigger: {
         trigger: containerRef.value,
         start: 'top bottom',
         end: 'bottom top',
-        scrub: props.scrub,
+        scrub: scrub,
       },
       ease: 'none',
     }
 
     if (yAmount !== 0) animationProps.y = yAmount
     if (xAmount !== 0) animationProps.x = xAmount
-    if (props.rotate !== 0) animationProps.rotation = props.rotate
-    if (props.scale !== 0) animationProps.scale = 1 + props.scale
+    if (rotate !== 0) animationProps.rotation = rotate
+    if (scale !== 0) animationProps.scale = 1 + scale
 
     gsap.to(contentRef.value, animationProps)
   })

package/layers/scroll/app/components/Motion/PinnedSection.vue

@@ -58,7 +58,10 @@
         ],
         ease: 'none',
       })
-      cleanups.push(() => tween.kill())
+      cleanups.push(() => {
+        tween.scrollTrigger?.kill()
+        tween.kill()
+      })
     })
   })
 

package/layers/scroll/app/components/Motion/ScrollLink.vue

@@ -1,30 +1,27 @@
-<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
-  const props = withDefaults(
-    defineProps<{
-      /**
-       * Target to scroll to (selector, element, or pixel position)
-       */
-      to: string | number
-      /**
-       * Scroll duration in seconds
-       */
-      duration?: number
-      /**
-       * Offset from target (negative = above target)
-       */
-      offset?: number
-      /**
-       * Tag to render as
-       */
-      as?: string
-    }>(),
-    {
-      duration: 1.5,
-      offset: 0,
-      as: 'button',
-    }
-  )
+  const {
+    to,
+    duration = 1.5,
+    offset = 0,
+    as = 'button',
+  } = defineProps<{
+    /**
+     * Target to scroll to (selector, element, or pixel position)
+     */
+    to: string | number
+    /**
+     * Scroll duration in seconds
+     */
+    duration?: number
+    /**
+     * Offset from target (negative = above target)
+     */
+    offset?: number
+    /**
+     * Tag to render as
+     */
+    as?: string
+  }>()
 
   const emit = defineEmits<{
     scrollStart: []
@@ -35,9 +32,9 @@
 
   function handleClick() {
     emit('scrollStart')
-    scrollTo(props.to, {
-      duration: props.duration,
-      offset: props.offset,
+    scrollTo(to, {
+      duration: duration,
+      offset: offset,
       onComplete: () => emit('scrollComplete'),
     })
   }

package/layers/scroll/app/components/Motion/ScrollProgress.vue

@@ -1,50 +1,44 @@
-<!-- eslint-disable vue/no-boolean-default -->
-<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
   defineOptions({ inheritAttrs: false })
 
-  const props = withDefaults(
-    defineProps<{
-      /**
-       * Display type: linear bar or circular
-       */
-      type?: 'linear' | 'circular'
-      /**
-       * Size for circular progress (px)
-       */
-      size?: number
-      /**
-       * Stroke width for circular progress
-       */
-      strokeWidth?: number
-      /**
-       * Show percentage text
-       */
-      showPercentage?: boolean
-      /**
-       * Gradient colors (start, middle, end)
-       */
-      colors?: [string, string, string]
-      /**
-       * Background color
-       */
-      bgColor?: string
-      /**
-       * Height for linear progress bar (px)
-       */
-      height?: number
-    }>(),
-    {
-      type: 'linear',
-      size: 120,
-      strokeWidth: 8,
-      showPercentage: true,
-      colors: () => ['var(--color-primary-500)', 'rgb(168, 85, 247)', 'rgb(236, 72, 153)'],
-      bgColor: 'rgb(31, 41, 55)',
-      height: 4,
-    }
-  )
+  const {
+    type = 'linear',
+    size = 120,
+    strokeWidth = 8,
+    showPercentage = true,
+    colors = ['var(--color-primary-500)', 'rgb(168, 85, 247)', 'rgb(236, 72, 153)'],
+    bgColor = 'rgb(31, 41, 55)',
+    height = 4,
+  } = defineProps<{
+    /**
+     * Display type: linear bar or circular
+     */
+    type?: 'linear' | 'circular'
+    /**
+     * Size for circular progress (px)
+     */
+    size?: number
+    /**
+     * Stroke width for circular progress
+     */
+    strokeWidth?: number
+    /**
+     * Show percentage text
+     */
+    showPercentage?: boolean
+    /**
+     * Gradient colors (start, middle, end)
+     */
+    colors?: [string, string, string]
+    /**
+     * Background color
+     */
+    bgColor?: string
+    /**
+     * Height for linear progress bar (px)
+     */
+    height?: number
+  }>()
 
   const { progress } = useSmoothScroll()
 

package/layers/scroll/app/components/Motion/ScrollScene.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-boolean-default -->
 <script setup lang="ts">
   import { SCROLL_SCENE_KEY, type ScrollSceneContext } from '../../composables/useScrollSteps'
 

package/layers/scroll/app/components/Motion/ScrollStats.vue

@@ -1,26 +1,22 @@
-<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
-  const props = withDefaults(
-    defineProps<{
-      /**
-       * Which stats to show
-       */
-      show?: ('velocity' | 'progress' | 'direction' | 'scrollY')[]
-      /**
-       * Position on screen
-       */
-      position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-      /**
-       * Use compact layout
-       */
-      compact?: boolean
-    }>(),
-    {
-      show: () => ['velocity', 'progress', 'direction'],
-      position: 'bottom-right',
-      compact: false,
-    }
-  )
+  const {
+    show = ['velocity', 'progress', 'direction'],
+    position = 'bottom-right',
+    compact = false,
+  } = defineProps<{
+    /**
+     * Which stats to show
+     */
+    show?: ('velocity' | 'progress' | 'direction' | 'scrollY')[]
+    /**
+     * Position on screen
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+    /**
+     * Use compact layout
+     */
+    compact?: boolean
+  }>()
 
   const { velocity, progress, direction, scrollY } = useSmoothScroll()
 
@@ -28,7 +24,7 @@
 
   const positionClasses = computed(() => {
     const classes = ['fixed', 'z-50']
-    switch (props.position) {
+    switch (position) {
       case 'top-left':
         classes.push('top-4', 'left-4')
         break