kmcom-nuxt-layers 1.7.9 → 2.2.0

package/layers/navigation/nuxt.config.ts

@@ -0,0 +1,19 @@
+export default defineNuxtConfig({
+  $meta: { name: 'navigation' },
+
+  extends: ['../core', '../scroll', '../layout', '../typography'],
+
+  alias: {
+    '#layers/navigation': import.meta.dirname,
+    '#layers/navigation/types': `${import.meta.dirname}/app/types`,
+  },
+
+  css: ['#layers/navigation/app/assets/css/navigation.css'],
+
+  compatibilityDate: '2026-06-06',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/navigation/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "kmcom-layer-navigation",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts"
+}

package/layers/navigation/tsconfig.json

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

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

@@ -0,0 +1,15 @@
+export default defineAppConfig({
+  pageTransitions: {
+    default: 'fade',
+    duration: 300,
+  },
+})
+
+declare module '@nuxt/schema' {
+  type AppConfigInput = {
+    pageTransitions?: {
+      default?: string
+      duration?: number
+    }
+  }
+}

package/layers/page-transitions/app/composables/usePageTransition.ts

@@ -0,0 +1,32 @@
+/**
+ * Set the page transition for the current page programmatically.
+ * Call inside a page component's setup() to override the default transition.
+ *
+ * @example
+ * usePageTransition('slide')
+ */
+export function usePageTransition(name?: string) {
+  const appConfig = useAppConfig()
+  const route = useRoute()
+
+  const currentTransition = useState('page-transition:current', () => ({
+    name: appConfig.pageTransitions?.default ?? 'fade',
+    duration: appConfig.pageTransitions?.duration ?? 300,
+  }))
+
+  if (name) {
+    currentTransition.value.name = name
+  }
+
+  const transitionName = computed(() => currentTransition.value.name)
+  const duration = computed(() => currentTransition.value.duration)
+
+  function setTransition(transitionName: string, transitionDuration?: number) {
+    currentTransition.value.name = transitionName
+    if (transitionDuration !== undefined) {
+      currentTransition.value.duration = transitionDuration
+    }
+  }
+
+  return { transitionName, duration, setTransition, route }
+}

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

@@ -0,0 +1,14 @@
+/* eslint-disable no-restricted-syntax */
+export default defineNuxtPlugin((nuxtApp) => {
+  const appConfig = useAppConfig()
+
+  const defaultTransition = appConfig.pageTransitions?.default ?? 'fade'
+  const duration = appConfig.pageTransitions?.duration ?? 300
+
+  nuxtApp.hook('page:start', () => {
+    useState('page-transition:current').value = {
+      name: defaultTransition,
+      duration,
+    }
+  })
+})

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

@@ -0,0 +1,17 @@
+export default defineNuxtConfig({
+  $meta: { name: 'page-transitions' },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/page-transitions': import.meta.dirname,
+    '#layers/page-transitions/types': `${import.meta.dirname}/app/types`,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/page-transitions/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "kmcom-layer-page-transitions",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts"
+}

package/layers/page-transitions/tsconfig.json

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

package/layers/routing/app/composables/{useFeatures.ts → useFeatureFlags.ts}

@@ -1,6 +1,6 @@
 import type { FeatureValue } from '../types/routing'
 
-export function useFeatures() {
+export function useFeatureFlags() {
   const { config } = useRoutingConfig()
   const runtimeFlags = useState<Record<string, FeatureValue>>('routing:flags', () => ({}))
 

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

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import { defu } from 'defu'
-import { ROUTING_PRESETS } from '../types/routing'
-import type { RoutingLayerConfig, FeatureValue } from '../types/routing'
+
+import { ROUTING_PRESETS, type FeatureValue, type RoutingLayerConfig } from '../types/routing'
 
 export function useRoutingConfig() {
   const appConfig = useAppConfig()
@@ -12,9 +13,7 @@ export function useRoutingConfig() {
     config,
     isStrictMode: () => config.strictDefaultDeny,
     isLayerDefaultDeny: () => config.layerDefaultDeny,
-    getFeatureVariant: (name: string): FeatureValue =>
-      config.features[name] ?? 'disabled',
-    isFeatureEnabled: (name: string) =>
-      config.features[name] === 'enabled',
+    getFeatureVariant: (name: string): FeatureValue => config.features[name] ?? 'disabled',
+    isFeatureEnabled: (name: string) => config.features[name] === 'enabled',
   }
 }

package/layers/routing/app/middleware/01.maintenance.global.ts

@@ -1,6 +1,6 @@
 export default defineNuxtRouteMiddleware((to) => {
   const { isEnabled, allowRoutes } = useMaintenance()
   if (!isEnabled.value) return
-  if (allowRoutes.value.some(r => to.path.startsWith(r))) return
+  if (allowRoutes.value.some((r) => to.path.startsWith(r))) return
   return navigateTo(allowRoutes.value[0])
 })

package/layers/routing/app/middleware/02.governance.global.ts

@@ -1,9 +1,9 @@
-import { useFeatures } from '../composables/useFeatures'
+import { useFeatureFlags } from '../composables/useFeatureFlags'
 import { resolveRoute } from '../utils/resolveRoute'
 
 export default defineNuxtRouteMiddleware((to) => {
   const { config } = useRoutingConfig()
-  const { resolve } = useFeatures()
+  const { resolve } = useFeatureFlags()
 
   if (config.debug) console.log('[routing] governance check', to.path, to.meta)
 

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

@@ -1,16 +1,16 @@
+/* eslint-disable no-restricted-syntax */
+import { useFeatureFlags } from '../composables/useFeatureFlags'
 import type { FeatureValue } from '../types/routing'
-import { useFeatures } from '../composables/useFeatures'
 
 export default defineNuxtPlugin(async () => {
   const { config } = useRoutingConfig()
   if (!config.runtimeFlags) return
 
-  const { runtimeFlags } = useFeatures()
+  const { runtimeFlags } = useFeatureFlags()
   try {
     const data = await $fetch<Record<string, FeatureValue>>('/api/feature-flags')
     runtimeFlags.value = data
-  }
-  catch (e) {
+  } catch (e) {
     if (config.debug) console.warn('[routing] Failed to fetch feature flags', e)
   }
 })

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 export default defineNuxtPlugin(() => {
   const { config } = useRoutingConfig()
   if (!config.scrollRouting.enabled) return
@@ -5,17 +6,17 @@ export default defineNuxtPlugin(() => {
   const router = useRouter()
   const observer = new IntersectionObserver(
     (entries) => {
-      const visible = entries.find(e => e.isIntersecting)
+      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 },
+    { threshold: 0.5 }
   )
 
   onNuxtReady(() => {
-    document.querySelectorAll('[data-section]').forEach(el => observer.observe(el))
+    document.querySelectorAll('[data-section]').forEach((el) => observer.observe(el))
   })
 })

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

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

package/layers/routing/app/types/route-meta.d.ts

@@ -1,5 +1,5 @@
 declare module 'vue-router' {
-  interface RouteMeta {
+  type RouteMeta = {
     feature?: string
     __fromLayer?: boolean
   }

package/layers/routing/app/types/routing.ts

@@ -6,7 +6,7 @@ export type RouteResolution =
   | { outcome: 'deny' }
   | { outcome: 'redirect'; to: string }
 
-export interface RoutingLayerConfig {
+export type RoutingLayerConfig = {
   preset: RoutingPreset
   strictDefaultDeny: boolean
   layerDefaultDeny: boolean
@@ -18,7 +18,10 @@ export interface RoutingLayerConfig {
   features: Record<string, FeatureValue>
 }
 
-export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'preset' | 'features'>> = {
+export const ROUTING_PRESETS: Record<
+  RoutingPreset,
+  Omit<RoutingLayerConfig, 'preset' | 'features'>
+> = {
   simple: {
     strictDefaultDeny: false,
     layerDefaultDeny: false,

package/layers/routing/app/utils/resolveRoute.ts

@@ -1,6 +1,6 @@
 import type { FeatureValue, RouteResolution, RoutingLayerConfig } from '../types/routing'
 
-interface RouteMeta {
+type RouteMeta = {
   feature?: string
   __fromLayer?: boolean
 }
@@ -8,7 +8,7 @@ interface RouteMeta {
 export function resolveRoute(
   meta: RouteMeta,
   config: RoutingLayerConfig,
-  resolveFeature: (name: string) => FeatureValue,
+  resolveFeature: (name: string) => FeatureValue
 ): RouteResolution {
   if (config.strictDefaultDeny && !meta.feature) {
     return { outcome: 'deny' }

package/layers/routing/nuxt.config.ts

@@ -1,4 +1,5 @@
-interface RoutePage {
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+type RoutePage = {
   file?: string
   meta?: Record<string, unknown>
   children?: RoutePage[]
@@ -7,14 +8,17 @@ interface RoutePage {
 export default defineNuxtConfig({
   $meta: { name: 'routing' },
 
+  extends: ['../core'],
+
   alias: {
     '#layers/routing': import.meta.dirname,
+    '#layers/routing/types': `${import.meta.dirname}/app/types`,
   },
 
   compatibilityDate: '2026-01-30',
 
   typescript: {
-    typeCheck: true,
+    typeCheck: false,
     strict: true,
   },
 

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

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+export default defineAppConfig({
+  scriptsLayer: {
+    consent: {
+      required: false,
+      storageKey: 'scripts-consent',
+    },
+    analytics: {
+      provider: null as 'ga4' | 'plausible' | 'fathom' | null,
+      id: '',
+    },
+    gtm: {
+      enabled: false,
+      id: '',
+    },
+    performance: {
+      prefetchLinks: true,
+      preconnect: [] as string[],
+    },
+  },
+})
+
+declare module '@nuxt/schema' {
+  type AppConfigInput = {
+    scriptsLayer?: {
+      consent?: {
+        required?: boolean
+        storageKey?: string
+      }
+      analytics?: {
+        provider?: 'ga4' | 'plausible' | 'fathom' | null
+        id?: string
+      }
+      gtm?: {
+        enabled?: boolean
+        id?: string
+      }
+      performance?: {
+        prefetchLinks?: boolean
+        preconnect?: string[]
+      }
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+type AnalyticsProxy = {
+  track: (event: string, params?: Record<string, unknown>) => void
+  load: () => void
+}
+
+function noop(): AnalyticsProxy {
+  return { track: () => {}, load: () => {} }
+}
+
+export function useAnalytics(): AnalyticsProxy {
+  const { scriptsLayer } = useAppConfig()
+  const { hasConsent, consentRequired } = useScriptsConsent()
+
+  const provider = scriptsLayer?.analytics?.provider
+  const id = scriptsLayer?.analytics?.id
+
+  if (!provider || !id) return noop()
+
+  // Load immediately unless consent is required and not yet granted
+  const trigger = computed(() =>
+    consentRequired.value && !hasConsent.value ? 'manual' : 'onNuxtReady'
+  )
+
+  if (provider === 'ga4') {
+    const ga = useScriptGoogleAnalytics({ id, scriptOptions: { trigger } })
+    return {
+      track: (event, params) => ga.proxy.gtag('event', event, params ?? {}),
+      load: () => ga.load(),
+    }
+  }
+
+  if (provider === 'plausible') {
+    const pl = useScriptPlausibleAnalytics({ domain: id, scriptOptions: { trigger } })
+    return {
+      track: (event) => pl.proxy.trackEvent(event),
+      load: () => pl.load(),
+    }
+  }
+
+  if (provider === 'fathom') {
+    const fa = useScriptFathomAnalytics({ site: id, scriptOptions: { trigger } })
+    return {
+      track: (event) => fa.proxy.trackEvent(event),
+      load: () => fa.load(),
+    }
+  }
+
+  return noop()
+}

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

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export function useGtm() {
+  const { scriptsLayer } = useAppConfig()
+  const { hasConsent, consentRequired } = useScriptsConsent()
+
+  const gtmConfig = scriptsLayer?.gtm
+  if (!gtmConfig?.enabled || !gtmConfig?.id) {
+    return { push: (_data: Record<string, unknown>) => {}, load: () => {} }
+  }
+
+  const trigger = computed(() =>
+    consentRequired.value && !hasConsent.value ? 'manual' : 'onNuxtReady'
+  )
+
+  const gtm = useScriptGoogleTagManager({ id: gtmConfig.id, scriptOptions: { trigger } })
+
+  return {
+    push: (data: Record<string, unknown>) => gtm.proxy.dataLayer.push(data),
+    load: () => gtm.load(),
+  }
+}

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

@@ -0,0 +1,31 @@
+type LoadStrategy = 'onNuxtReady' | 'idle' | 'manual'
+
+type ScriptLoaderOptions = {
+  src: string
+  key?: string
+  strategy?: LoadStrategy
+  crossorigin?: 'anonymous' | 'use-credentials'
+  integrity?: string
+}
+
+export function useScriptLoader(options: ScriptLoaderOptions) {
+  const { src, key, strategy = 'onNuxtReady', crossorigin, integrity } = options
+
+  const script = useScript(
+    {
+      src,
+      key: key ?? src,
+      crossorigin,
+      integrity,
+    },
+    {
+      trigger: strategy,
+    }
+  )
+
+  return {
+    load: () => script.load(),
+    status: script.status,
+    proxy: script.proxy,
+  }
+}

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

@@ -0,0 +1,23 @@
+export function useScriptsConsent() {
+  const { scriptsLayer } = useAppConfig()
+  const storageKey = scriptsLayer?.consent?.storageKey ?? 'scripts-consent'
+
+  const hasConsent = useState<boolean>(`scripts:consent`, () => {
+    if (!import.meta.client) return !scriptsLayer?.consent?.required
+    return localStorage.getItem(storageKey) === 'true'
+  })
+
+  function grantConsent() {
+    hasConsent.value = true
+    if (import.meta.client) localStorage.setItem(storageKey, 'true')
+  }
+
+  function revokeConsent() {
+    hasConsent.value = false
+    if (import.meta.client) localStorage.removeItem(storageKey)
+  }
+
+  const consentRequired = computed(() => scriptsLayer?.consent?.required ?? false)
+
+  return { hasConsent, consentRequired, grantConsent, revokeConsent }
+}

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

@@ -0,0 +1,14 @@
+export function useYoutubeEmbed(videoId: string) {
+  const yt = useScriptYouTubePlayer({})
+
+  const thumbnailUrl = computed(() => `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`)
+
+  const embedUrl = computed(() => `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`)
+
+  return {
+    proxy: yt.proxy,
+    thumbnailUrl,
+    embedUrl,
+    load: () => yt.load(),
+  }
+}

package/layers/scripts/nuxt.config.ts

@@ -0,0 +1,22 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  $meta: {
+    name: 'scripts',
+  },
+
+  extends: ['../core'],
+
+  modules: ['@nuxt/scripts'],
+
+  alias: {
+    '#layers/scripts': import.meta.dirname,
+    '#layers/scripts/types': `${import.meta.dirname}/app/types`,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/scripts/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "kmcom-layer-scripts",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,scripts pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
+  },
+  "dependencies": {
+    "@nuxt/scripts": "catalog:"
+  }
+}

package/layers/scripts/tsconfig.json

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

package/layers/{motion/app/types/app-config.d.ts → scroll/app/app.config.ts}

@@ -1,6 +1,21 @@
+export default defineAppConfig({
+  scroll: {
+    smoothScroll: true as boolean | string[],
+    gsapScrollTrigger: true,
+    lenis: {
+      duration: 1.2,
+      orientation: 'vertical' as 'vertical' | 'horizontal',
+      gestureOrientation: 'vertical' as 'vertical' | 'horizontal',
+      smoothWheel: true,
+      smoothTouch: false,
+      touchMultiplier: 2,
+    },
+  },
+})
+
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    motion?: {
+    scroll?: {
       smoothScroll?: boolean | string[]
       gsapScrollTrigger?: boolean
       lenis?: {

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+  const { scrub = 1 } = defineProps<{
+    /**
+     * Scrub smoothness (1 = default, higher = smoother/slower)
+     */
+    scrub?: number
+  }>()
+
+  const emit = defineEmits<{
+    panelChange: [index: number]
+  }>()
+
+  const { gsap } = useGsap()
+
+  const sectionRef = useTemplateRef<HTMLElement>('sectionRef')
+  const trackRef = useTemplateRef<HTMLElement>('trackRef')
+
+  let cleanup: (() => void) | null = null
+
+  onMounted(() => {
+    if (!sectionRef.value || !trackRef.value) return
+
+    const track = trackRef.value
+    const trackWidth = track.scrollWidth - window.innerWidth
+
+    const tween = gsap.to(track, {
+      scrollTrigger: {
+        trigger: sectionRef.value,
+        start: 'top top',
+        end: `+=${trackWidth}`,
+        pin: true,
+        scrub,
+        anticipatePin: 1,
+        onUpdate: (self) => {
+          const panels = track.querySelectorAll(':scope > *')
+          if (panels.length > 0) {
+            const index = Math.round(self.progress * (panels.length - 1))
+            emit('panelChange', index)
+          }
+        },
+      },
+      x: -trackWidth,
+      ease: 'none',
+    })
+
+    cleanup = () => tween.kill()
+  })
+
+  onUnmounted(() => {
+    cleanup?.()
+    cleanup = null
+  })
+</script>
+
+<template>
+  <section ref="sectionRef" class="motion-horizontal-scroll h-screen overflow-hidden">
+    <div ref="trackRef" class="h-full flex items-center will-change-transform">
+      <slot />
+    </div>
+  </section>
+</template>