kmcom-nuxt-layers 1.7.9 → 2.2.0

package/layers/{motion → scroll}/app/composables/useSmoothScroll.ts

@@ -1,7 +1,11 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable complexity */
+/* eslint-disable eqeqeq */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { Ref } from 'vue'
 import type LocomotiveScroll from 'locomotive-scroll'
 
-interface ScrollToOptions {
+type ScrollToOptions = {
   offset?: number
   duration?: number
   immediate?: boolean
@@ -17,26 +21,18 @@ interface ScrollToOptions {
  *
  * // Scroll to element
  * scrollTo('#section', { offset: -100, duration: 2 })
- *
- * // React to scroll velocity
- * watch(velocity, (v) => console.log('Velocity:', v))
  */
 export function useSmoothScroll() {
   const nuxtApp = useNuxtApp()
   const appConfig = useAppConfig()
 
-  // Get the Locomotive Scroll instance from the reactive ref provided by the plugin
   const locomotiveScroll = computed<LocomotiveScroll | undefined>(
     () => (nuxtApp.$locomotiveScroll as Ref<LocomotiveScroll | null>)?.value ?? undefined
   )
 
-  // true if smooth scroll is configured to run (globally or per-route)
-  const isEnabled = computed(() => (appConfig.motion?.smoothScroll ?? true) !== false)
-
-  // true once the LocomotiveScroll instance is actually initialised on this route
+  const isEnabled = computed(() => (appConfig.scroll?.smoothScroll ?? true) !== false)
   const isReady = computed(() => locomotiveScroll.value != null)
 
-  // Reactive scroll state from the plugin
   const scrollState = computed(
     () =>
       nuxtApp.$scrollState as
@@ -50,15 +46,11 @@ export function useSmoothScroll() {
         | undefined
   )
 
-  // Derived reactive values
   const scrollY = computed(() => scrollState.value?.scroll ?? 0)
   const velocity = computed(() => scrollState.value?.velocity ?? 0)
   const direction = computed(() => scrollState.value?.direction ?? 0)
   const progress = computed(() => scrollState.value?.progress ?? 0)
 
-  /**
-   * Lock scrolling (disable scroll)
-   */
   function lockScrolling() {
     if (import.meta.client && locomotiveScroll.value) {
       document.documentElement.style.overflow = 'hidden'
@@ -66,18 +58,12 @@ export function useSmoothScroll() {
     }
   }
 
-  /**
-   * Unlock scrolling (enable scroll)
-   */
   function unlockScrolling() {
     if (!import.meta.client) return
     document.documentElement.style.overflow = ''
     locomotiveScroll.value?.start()
   }
 
-  /**
-   * Scroll to a target (element, selector, or position)
-   */
   function scrollTo(target: string | number | HTMLElement, options?: ScrollToOptions) {
     if (!import.meta.client) return
 
@@ -90,14 +76,10 @@ export function useSmoothScroll() {
         ...(options?.onComplete !== undefined && { onComplete: options.onComplete }),
       })
     } else {
-      // Native fallback
       nativeScrollTo(target, options)
     }
   }
 
-  /**
-   * Scroll to top of page
-   */
   function scrollToTop(options?: { duration?: number; immediate?: boolean }) {
     scrollTo(0, {
       duration: options?.duration ?? 2,
@@ -105,28 +87,18 @@ export function useSmoothScroll() {
     })
   }
 
-  /**
-   * Snap to top immediately (no animation)
-   */
   function snapToTop() {
     scrollTo(0, { immediate: true })
   }
 
   return {
-    // Locomotive Scroll instance
     locomotiveScroll,
-
-    // Scroll availability
     isEnabled,
     isReady,
-
-    // Reactive scroll state
     scrollY,
     velocity,
     direction,
     progress,
-
-    // Methods
     scrollTo,
     scrollToTop,
     snapToTop,
@@ -135,9 +107,6 @@ export function useSmoothScroll() {
   }
 }
 
-/**
- * Native browser scroll fallback
- */
 function nativeScrollTo(target: string | number | HTMLElement, options?: ScrollToOptions) {
   let targetPosition: number
 

package/layers/{motion → scroll}/app/plugins/locomotive-scroll.client.ts

@@ -1,7 +1,8 @@
+/* eslint-disable no-restricted-syntax */
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 import LocomotiveScroll from 'locomotive-scroll'
 
-export interface ScrollState {
+export type ScrollState = {
   scroll: number
   limit: number
   velocity: number
@@ -46,7 +47,7 @@ export default defineNuxtPlugin(() => {
 
   const router = useRouter()
   const appConfig = useAppConfig()
-  const smoothScroll: boolean | string[] = appConfig.motion?.smoothScroll ?? true
+  const smoothScroll: boolean | string[] = appConfig.scroll?.smoothScroll ?? true
 
   const nuxtApp = useNuxtApp()
 

package/layers/scroll/nuxt.config.ts

@@ -0,0 +1,33 @@
+export default defineNuxtConfig({
+  $meta: { name: 'scroll' },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/scroll': import.meta.dirname,
+    '#layers/scroll/types': `${import.meta.dirname}/app/types`,
+  },
+
+  modules: ['v-gsap-nuxt'],
+
+  vgsap: {
+    composable: true,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+
+  build: {
+    transpile: ['gsap'],
+  },
+
+  vite: {
+    optimizeDeps: {
+      include: ['locomotive-scroll'],
+    },
+  },
+})

package/layers/scroll/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "kmcom-layer-scroll",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "dependencies": {
+    "gsap": "catalog:",
+    "locomotive-scroll": "catalog:",
+    "v-gsap-nuxt": "catalog:"
+  }
+}

package/layers/scroll/tsconfig.json

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

package/layers/seo/app/app.config.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+export default defineAppConfig({
+  seoLayer: {
+    ogImage: {
+      component: 'OgImageNuxtSeo',
+      props: {} as Record<string, unknown>,
+    },
+    twitterCard: 'summary_large_image' as 'summary_large_image' | 'summary' | 'player' | 'app',
+    schemaOrg: {
+      enabled: true,
+      identity: null as string | null,
+    },
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    seoLayer?: {
+      ogImage?: {
+        component?: string
+        props?: Record<string, unknown>
+      }
+      twitterCard?: 'summary_large_image' | 'summary' | 'player' | 'app'
+      schemaOrg?: {
+        enabled?: boolean
+        identity?: string | null
+      }
+    }
+  }
+}

package/layers/seo/app/composables/useSeoConfig.ts

@@ -0,0 +1,14 @@
+/* eslint-disable complexity */
+export function useSeoConfig() {
+  const site = useSiteConfig()
+  const { seoLayer } = useAppConfig()
+
+  return {
+    site,
+    ogImageComponent: seoLayer?.ogImage?.component ?? 'OgImageBasic',
+    ogImageProps: seoLayer?.ogImage?.props ?? {},
+    twitterCard: seoLayer?.twitterCard ?? 'summary_large_image',
+    schemaOrgEnabled: seoLayer?.schemaOrg?.enabled ?? true,
+    identity: seoLayer?.schemaOrg?.identity ?? null,
+  }
+}

package/layers/seo/nuxt.config.ts

@@ -0,0 +1,34 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  $meta: {
+    name: 'seo',
+  },
+
+  extends: ['../core'],
+
+  modules: ['@nuxtjs/seo'],
+
+  // Site config — consumed by all @nuxtjs/seo sub-modules (robots, sitemap, og-image, schema-org).
+  // Override per-project via NUXT_SITE_URL, NUXT_SITE_NAME, NUXT_SITE_DESCRIPTION env vars.
+  site: {
+    url: '',
+    name: '',
+    description: '',
+    defaultLocale: 'en',
+    // Only index in production; set NUXT_SITE_ENV=production to enable
+    indexable: process.env.NUXT_SITE_ENV === 'production',
+    trailingSlash: false,
+  },
+
+  alias: {
+    '#layers/seo': import.meta.dirname,
+    '#layers/seo/types': `${import.meta.dirname}/app/types`,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/seo/package.json

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

package/layers/seo/tsconfig.json

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

package/layers/shader/app/components/Effect/Bloom.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-// @tresjs/post-processing v3 exports components differently
-// Import from the package root and use the correct component name
+  // @tresjs/post-processing v3 exports components differently
+  // Import from the package root and use the correct component name
 </script>
 
 <template>

package/layers/shader/app/components/Effect/ChromaticAberration.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-// @tresjs/post-processing v3 exports components differently
-// These will need to be used directly from the package in templates
+  // @tresjs/post-processing v3 exports components differently
+  // These will need to be used directly from the package in templates
 </script>
 
 <template>

package/layers/shader/app/components/Effect/PostProcessing.vue

@@ -1,15 +1,19 @@
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { EffectComposer } from '@tresjs/post-processing'
+  // @ts-nocheck
+  import { EffectComposer } from '@tresjs/post-processing'
 
-const props = withDefaults(
-  defineProps<{
-    enabled?: boolean
-  }>(),
-  {
-    enabled: true,
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      enabled?: boolean
+    }>(),
+    {
+      enabled: true,
+    }
+  )
 </script>
 
 <template>