kmcom-nuxt-layers 1.6.17 → 1.6.20

package/layers/content/app/components/Blog/Article.vue

@@ -1,25 +1,29 @@
 <script setup lang="ts">
+import type { BlogCollectionItem } from '@nuxt/content'
+
 const { slug } = defineProps<{
   slug: string
 }>()
+
+const asBlog = (item: unknown) => item as BlogCollectionItem
 </script>
 
 <template>
   <NuxtContentDetail collection="blog" :slug not-found-message="Blog post not found">
     <template #headline="{ item }">
       <div class="flex items-center gap-3 text-sm text-muted">
-        <time v-if="item.date">{{ new Date(item.date).toLocaleDateString() }}</time>
-        <UBadge v-if="item.badge" color="primary" variant="subtle">
-          {{ item.badge }}
+        <time v-if="asBlog(item).date">{{ new Date(asBlog(item).date).toLocaleDateString() }}</time>
+        <UBadge v-if="asBlog(item).badge" color="primary" variant="subtle">
+          {{ asBlog(item).badge }}
         </UBadge>
       </div>
     </template>
 
     <template #after-content="{ item }">
-      <template v-if="item.tags?.length">
+      <template v-if="asBlog(item).tags?.length">
         <USeparator class="my-8" />
         <div class="flex flex-wrap gap-2">
-          <UBadge v-for="tag in item.tags" :key="tag" color="neutral" variant="subtle">
+          <UBadge v-for="tag in asBlog(item).tags" :key="tag" color="neutral" variant="subtle">
             {{ tag }}
           </UBadge>
         </div>

package/layers/content/app/components/Blog/Card.vue

@@ -17,24 +17,27 @@ const {
   authors?: { name: string; avatar?: string; url?: string }[]
   to?: string
 }>()
+
+const postProps = computed(() => ({
+  ...(description !== undefined && { description }),
+  ...(date !== undefined && { date }),
+  ...(image !== undefined && { image }),
+  ...(badge !== undefined && { badge }),
+  ...(to !== undefined && { to }),
+}))
 </script>
 
 <template>
   <UBlogPost
     :title
-    :description
-    :date
-    :image
-    :badge
+    v-bind="postProps"
     :authors="
       authors.map((a) => ({
         name: a.name,
-        avatar: a.avatar ? { src: a.avatar } : undefined,
-        to: a.url,
-        target: a.url ? '_blank' : undefined,
+        ...(a.avatar && { avatar: { src: a.avatar } }),
+        ...(a.url && { to: a.url, target: '_blank' as const }),
       }))
     "
-    :to
     variant="outline"
   />
 </template>

package/layers/content/app/components/Blog/List.vue

@@ -19,20 +19,21 @@ const { data: posts, status } = await useBlogPosts(options)
         v-for="post in posts"
         :key="post.id"
         :title="post.title"
-        :description="post.description"
         :date="post.date"
-        :image="post.image"
-        :badge="post.badge"
-        :authors="
-          post.authors?.map((a) => ({
-            name: a.name,
-            avatar: a.avatar ? { src: a.avatar } : undefined,
-            to: a.url,
-            target: a.url ? '_blank' : undefined,
-          }))
-        "
         :to="post.path"
         variant="outline"
+        v-bind="{
+          ...(post.description !== undefined && { description: post.description }),
+          ...(post.image !== undefined && { image: post.image }),
+          ...(post.badge !== undefined && { badge: post.badge }),
+          ...(post.authors && {
+            authors: post.authors.map((a) => ({
+              name: a.name,
+              ...(a.avatar && { avatar: { src: a.avatar } }),
+              ...(a.url && { to: a.url, target: '_blank' as const }),
+            })),
+          }),
+        }"
       />
     </UBlogPosts>
   </NuxtContentList>

package/layers/content/app/components/Gallery/Card.vue

@@ -15,10 +15,15 @@ const {
   tags?: string[]
   to?: string
 }>()
+
+const cardProps = computed(() => ({
+  ...(description !== undefined && { description }),
+  ...(to !== undefined && { to }),
+}))
 </script>
 
 <template>
-  <UPageCard :title :description :to variant="outline">
+  <UPageCard :title v-bind="cardProps" variant="outline">
     <img
       v-if="coverImage"
       :src="coverImage.src"

package/layers/content/app/components/Gallery/Detail.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { GalleryCollectionItem } from '@nuxt/content'
+
 const { slug } = defineProps<{
   slug: string
 }>()
@@ -7,6 +9,8 @@ const lightboxOpen = ref(false)
 const lightboxIndex = ref(0)
 const lightboxImages = ref<{ src: string; alt: string; width?: number; height?: number }[]>([])
 
+const asGallery = (item: unknown) => item as GalleryCollectionItem
+
 function openLightbox(
   images: { src: string; alt: string; width?: number; height?: number }[],
   index: number
@@ -21,21 +25,21 @@ function openLightbox(
   <NuxtContentDetail collection="gallery" :slug not-found-message="Gallery not found">
     <template #headline="{ item }">
       <div class="flex flex-wrap items-center gap-2">
-        <span v-if="item.images?.length" class="text-sm text-muted">
-          {{ item.images.length }} image{{ item.images.length === 1 ? '' : 's' }}
+        <span v-if="asGallery(item).images?.length" class="text-sm text-muted">
+          {{ asGallery(item).images!.length }} image{{ asGallery(item).images!.length === 1 ? '' : 's' }}
         </span>
-        <UBadge v-for="tag in item.tags" :key="tag" color="neutral" variant="subtle" size="xs">
+        <UBadge v-for="tag in asGallery(item).tags" :key="tag" color="neutral" variant="subtle" size="xs">
           {{ tag }}
         </UBadge>
       </div>
     </template>
 
     <template #after-content="{ item }">
-      <template v-if="item.images?.length">
+      <template v-if="asGallery(item).images?.length">
         <USeparator class="my-8" />
         <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
           <div
-            v-for="(img, idx) in item.images"
+            v-for="(img, idx) in asGallery(item).images"
             :key="img.src"
             class="overflow-hidden rounded-lg group relative"
           >
@@ -55,7 +59,7 @@ function openLightbox(
             </NuxtLink>
             <button
               class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 cursor-pointer"
-              @click.stop="openLightbox(item.images, idx)"
+              @click.stop="openLightbox(asGallery(item).images!, idx)"
             >
               <UIcon name="i-lucide-expand" class="size-4" />
             </button>

package/layers/content/app/components/Gallery/ImageDetail.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import type { GalleryCollectionItem } from '@nuxt/content'
+
 const { slug, index } = defineProps<{
   slug: string
   index: number
 }>()
 
-const { data: item } = await useCollectionItem('gallery', slug)
+const { data: rawItem } = await useCollectionItem('gallery', slug)
+const item = computed(() => rawItem.value as GalleryCollectionItem | null)
 
 const image = computed(() => item.value?.images?.[index])
 const totalImages = computed(() => item.value?.images?.length ?? 0)
@@ -19,8 +22,11 @@ useSeoMeta({
 </script>
 
 <template>
-  <div v-if="item && image">
-    <UPageHeader :title="image.title || image.alt" :description="image.caption">
+  <div v-if="item && item.images && image">
+    <UPageHeader
+      :title="image.title || image.alt"
+      v-bind="image.caption ? { description: image.caption } : {}"
+    >
       <template #headline>
         <UBreadcrumb
           :items="[

package/layers/content/app/components/NuxtContent/Detail.vue

@@ -15,10 +15,14 @@ const {
 const { data: item, status } = await useCollectionItem(collection, slug)
 const { data: surround } = await useCollectionSurround(collection, slug)
 
+const itemImage = computed(
+  () => (item.value as { image?: string } | null)?.image
+)
+
 useSeoMeta({
   title: item.value?.title,
   description: item.value?.description,
-  ogImage: item.value?.image,
+  ogImage: itemImage,
 })
 </script>
 
@@ -26,7 +30,7 @@ useSeoMeta({
   <div>
     <USkeleton v-if="status === 'pending'" class="h-96 w-full" />
     <UPage v-else-if="item">
-      <UPageHeader :title="item.title" :description="item.description">
+      <UPageHeader :title="item.title" v-bind="item.description ? { description: item.description } : {}">
         <template v-if="$slots.headline" #headline>
           <slot name="headline" :item="item" />
         </template>
@@ -45,7 +49,7 @@ useSeoMeta({
       </UPageBody>
 
       <template v-if="!hideToc" #right>
-        <NuxtContentToc :links="item.body?.toc?.links" />
+        <NuxtContentToc v-bind="item.body?.toc?.links ? { links: item.body.toc.links } : {}" />
       </template>
     </UPage>
     <div v-else class="text-muted text-center py-12">{{ notFoundMessage }}</div>

package/layers/content/app/components/NuxtContent/Toc.vue

@@ -1,7 +1,9 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
+import type { TocLink } from '@nuxt/content'
+
 const { links, title = 'Table of Contents' } = defineProps<{
-  links?: { id: string; text: string; children?: { id: string; text: string }[] }[]
+  links?: TocLink[]
   title?: string
 }>()
 </script>

package/layers/content/app/components/Portfolio/Card.vue

@@ -20,7 +20,11 @@ const {
 </script>
 
 <template>
-  <UPageCard :title :description :to variant="outline">
+  <UPageCard
+    :title
+    variant="outline"
+    v-bind="{ ...(description !== undefined && { description }), ...(to !== undefined && { to }) }"
+  >
     <img v-if="image" :src="image" :alt="title" class="w-full h-48 object-cover rounded" />
     <template #footer>
       <div class="flex flex-wrap gap-1.5">

package/layers/content/app/components/Portfolio/Detail.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import type { PortfolioCollectionItem } from '@nuxt/content'
+
 const { slug } = defineProps<{
   slug: string
 }>()
+
+const asPortfolio = (item: unknown) => item as PortfolioCollectionItem
 </script>
 
 <template>
@@ -13,13 +17,19 @@ const { slug } = defineProps<{
   >
     <template #headline="{ item }">
       <div class="flex flex-wrap items-center gap-2">
-        <UBadge v-if="item.client" color="primary" variant="subtle">
-          {{ item.client }}
+        <UBadge v-if="asPortfolio(item).client" color="primary" variant="subtle">
+          {{ asPortfolio(item).client }}
         </UBadge>
-        <UBadge v-if="item.year" color="neutral" variant="subtle">
-          {{ item.year }}
+        <UBadge v-if="asPortfolio(item).year" color="neutral" variant="subtle">
+          {{ asPortfolio(item).year }}
         </UBadge>
-        <UBadge v-for="tag in item.tags" :key="tag" color="neutral" variant="subtle" size="xs">
+        <UBadge
+          v-for="tag in asPortfolio(item).tags"
+          :key="tag"
+          color="neutral"
+          variant="subtle"
+          size="xs"
+        >
           {{ tag }}
         </UBadge>
       </div>
@@ -27,8 +37,8 @@ const { slug } = defineProps<{
 
     <template #links="{ item }">
       <UButton
-        v-if="item.url"
-        :to="item.url"
+        v-if="asPortfolio(item).url"
+        :to="asPortfolio(item).url"
         target="_blank"
         icon="i-lucide-external-link"
         variant="outline"
@@ -38,15 +48,26 @@ const { slug } = defineProps<{
     </template>
 
     <template #before-content="{ item }">
-      <img v-if="item.image" :src="item.image" :alt="item.title" class="w-full rounded-lg mb-8" />
+      <img
+        v-if="asPortfolio(item).image"
+        :src="asPortfolio(item).image"
+        :alt="item.title"
+        class="w-full rounded-lg mb-8"
+      />
     </template>
 
     <template #after-content="{ item }">
-      <template v-if="item.colors?.length || item.typography?.length">
+      <template v-if="asPortfolio(item).colors?.length || asPortfolio(item).typography?.length">
         <USeparator class="my-8" />
         <div class="space-y-8">
-          <PortfolioColorPalette v-if="item.colors?.length" :colors="item.colors" />
-          <PortfolioTypography v-if="item.typography?.length" :typography="item.typography" />
+          <PortfolioColorPalette
+            v-if="asPortfolio(item).colors?.length"
+            :colors="asPortfolio(item).colors!"
+          />
+          <PortfolioTypography
+            v-if="asPortfolio(item).typography?.length"
+            :typography="asPortfolio(item).typography!"
+          />
         </div>
       </template>
     </template>

package/layers/content/app/components/Portfolio/List.vue

@@ -19,9 +19,11 @@ const { data: items, status } = await usePortfolioItems(options)
         v-for="item in items"
         :key="item.id"
         :title="item.title"
-        :description="item.description"
-        :to="item.path"
         variant="outline"
+        v-bind="{
+          ...(item.description !== undefined && { description: item.description }),
+          to: item.path,
+        }"
       >
         <img
           v-if="item.image"

package/layers/content/app/composables/useCollectionItem.ts

@@ -1,5 +1,7 @@
+import type { Collections } from '@nuxt/content'
+
 export function useCollectionItem(collection: string, slug: string) {
   return useContentData(`${collection}-${slug}`, () =>
-    queryCollection(collection).path(`/${collection}/${slug}`).first()
+    queryCollection(collection as keyof Collections).path(`/${collection}/${slug}`).first()
   )
 }

package/layers/content/app/composables/useCollectionSurround.ts

@@ -1,9 +1,7 @@
-export function useCollectionSurround(
-  collection: string,
-  slug: string,
-  fields: string[] = ['description']
-) {
+import type { PageCollections } from '@nuxt/content'
+
+export function useCollectionSurround(collection: string, slug: string) {
   return useContentData(`${collection}-${slug}-surround`, () =>
-    queryCollectionItemSurroundings(collection, `/${collection}/${slug}`, { fields })
+    queryCollectionItemSurroundings(collection as keyof PageCollections, `/${collection}/${slug}`)
   )
 }

package/layers/content/app/types/content.ts

@@ -22,7 +22,7 @@ export interface PortfolioColor {
 
 export interface PortfolioFont {
   name: string
-  weights: string[]
+  weights?: string[]
   usage?: string
 }
 

package/layers/content/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:content": "CONTENT_STANDALONE=true nuxi dev",
     "dev:prepare": "nuxt prepare .playground",

package/layers/core/app/app.vue

@@ -3,5 +3,6 @@
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+    <UOverlayProvider />
   </UApp>
 </template>

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

@@ -78,15 +78,14 @@ export function useCache() {
 
     try {
       const cacheNames = await caches.keys()
-      ;(await Promise.all(cacheNames.map((name) => caches.delete(name)))(
-        process.env.NODE_ENV === 'development'
-      ))
-        ? console.log('[useCache] All caches cleared')
-        : ''
+      await Promise.all(cacheNames.map((name) => caches.delete(name)))
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[useCache] All caches cleared')
+      }
     } catch (error) {
-      process.env.NODE_ENV === 'development'
-        ? console.error('[useCache] Failed to clear cache:', error)
-        : ''
+      if (process.env.NODE_ENV === 'development') {
+        console.error('[useCache] Failed to clear cache:', error)
+      }
     }
   }
 

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

@@ -77,18 +77,6 @@ function clampElement(el: HTMLElement) {
   clampedCount.value++
 }
 
-function restoreElement(el: HTMLElement) {
-  const saved = clampedElements.get(el)
-  if (!saved) return
-
-  el.style.transition = saved.transition
-  el.style.maxWidth = saved.maxWidth
-  el.style.boxSizing = saved.boxSizing
-  el.style.overflowX = saved.overflowX
-
-  clampedElements.delete(el)
-  clampedSet.delete(el)
-}
 
 function guard() {
   if (!isEnabled.value || !opts) return

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

@@ -130,13 +130,14 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
 
     // Test environment access (works on both server and client)
-    const env = useEnv()
+    const env = useEnv() as unknown as Record<string, unknown>
 
     if (isDev) {
+      const publicConfig = env.public as Record<string, unknown> | undefined
       // eslint-disable-next-line no-console
       console.log('[Core Layer] Environment config loaded:', {
-        hasPublicConfig: !!env.public,
-        publicKeys: Object.keys(env.public || {}),
+        hasPublicConfig: !!publicConfig,
+        publicKeys: Object.keys(publicConfig ?? {}),
       })
     }
   } catch (error) {

package/layers/core/app/plugins/loading.client.ts

@@ -29,8 +29,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   // console.log('[Loading Plugin] Config:', coreLayer?.loading)
 
-  if ((config.layers as Record<string, boolean> | undefined)?.core === false) return
-
   // Check if loading is enabled
   if (coreLayer?.loading?.enabled === false) {
     // console.log('[Loading Plugin] Disabled')

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

@@ -24,8 +24,6 @@ export default defineNuxtPlugin(() => {
   const config = useAppConfig()
   const coreLayer = config.coreLayer as CoreLayerConfig | undefined
 
-  if ((config.layers as Record<string, boolean> | undefined)?.core === false) return
-
   if (coreLayer?.scrollGuard?.enabled === false) {
     if (import.meta.dev) {
       // eslint-disable-next-line no-console

package/layers/core/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",

package/layers/core/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../apps/playground/tsconfig.json",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "ignoreDeprecations": "6.0"
   }
 }

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

@@ -17,11 +17,7 @@ const schema = z.object({
 
 type FormState = z.infer<typeof schema>
 
-const state = reactive<Partial<FormState>>({
-  name: undefined,
-  email: undefined,
-  message: undefined,
-})
+const state = reactive({ name: '', email: '', message: '' })
 
 const toast = useToast()
 const isLoading = ref(false)

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

@@ -41,6 +41,36 @@ const resolvedIcon = computed(() => icon ?? config.value.icon)
 const isTextarea = computed(() => config.value.component === 'UTextarea')
 const isNumber = computed(() => config.value.component === 'UInputNumber')
 
+const formFieldProps = computed(() => ({
+  name,
+  required,
+  size,
+  ...(label !== undefined && { label }),
+  ...(className !== undefined && { class: className }),
+}))
+
+const baseInputProps = computed(() => ({
+  size,
+  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+}))
+
+const numberInputProps = computed(() => ({
+  size,
+  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+  ...(currencyOptions.value !== undefined && { formatOptions: currencyOptions.value }),
+}))
+
+const textInputProps = computed(() => ({
+  type: config.value.inputType,
+  size,
+  ...(config.value.inputMode !== undefined && { inputmode: config.value.inputMode }),
+  ...(config.value.autocomplete !== undefined && { autocomplete: config.value.autocomplete }),
+  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+}))
+
 const currencyOptions = computed((): Intl.NumberFormatOptions | undefined => {
   if (config.value.format === 'currency') {
     return {
@@ -53,33 +83,15 @@ const currencyOptions = computed((): Intl.NumberFormatOptions | undefined => {
 </script>
 
 <template>
-  <UFormField :name :label :required :size :class="className">
-    <UTextarea
-      v-if="isTextarea"
-      v-model="model as string"
-      :placeholder="resolvedPlaceholder"
-      :size
-      autoresize
-    />
+  <UFormField v-bind="formFieldProps">
+    <UTextarea v-if="isTextarea" v-model="model as string" autoresize v-bind="baseInputProps" />
 
     <UInputNumber
       v-else-if="isNumber"
       v-model="model as number"
-      :placeholder="resolvedPlaceholder"
-      :leading-icon="resolvedIcon"
-      :size
-      :format-options="currencyOptions"
+      v-bind="numberInputProps"
     />
 
-    <UInput
-      v-else
-      v-model="model as string"
-      :type="config.inputType"
-      :inputmode="config.inputMode"
-      :autocomplete="config.autocomplete"
-      :placeholder="resolvedPlaceholder"
-      :leading-icon="resolvedIcon"
-      :size
-    />
+    <UInput v-else v-model="model as string" v-bind="textInputProps" />
   </UFormField>
 </template>

package/layers/forms/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",

package/layers/layout/app/components/Layout/Page/Container.vue

@@ -78,7 +78,13 @@ provide('pageTitle', title)
     <!-- Optional visible header -->
     <LayoutSection v-if="showHeader">
       <LayoutGridItem :preset="headerPreset">
-        <LayoutPageHeader :title :description :back />
+        <LayoutPageHeader
+          :title
+          v-bind="{
+            ...(description !== undefined && { description }),
+            ...(back !== undefined && { back }),
+          }"
+        />
       </LayoutGridItem>
     </LayoutSection>
 

package/layers/layout/app/components/Layout/Page/index.vue

@@ -60,7 +60,10 @@ provide('pageTitle', title)
   <!-- Optional visible page header — rendered as a grid section -->
   <LayoutSection v-if="showHeader">
     <LayoutGridItem preset="centered">
-      <LayoutPageHeader :title :description />
+      <LayoutPageHeader
+        :title
+        v-bind="description !== undefined ? { description } : {}"
+      />
     </LayoutGridItem>
   </LayoutSection>
 

package/layers/layout/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",

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

@@ -142,12 +142,16 @@ function handleMouseLeave() {
 <template>
   <div
     ref="containerRef"
-    class="motion-marquee"
+    class="motion-marquee width-full overflow-hidden"
     :class="{ 'is-paused': isPaused }"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
-    <div ref="contentRef" class="motion-marquee__content" :style="{ gap }">
+    <div
+      ref="contentRef"
+      class="motion-marquee__content flex will-change-transform w-max"
+      :style="{ gap }"
+    >
       <slot />
       <!-- Duplicate for seamless loop -->
       <slot />
@@ -155,17 +159,9 @@ function handleMouseLeave() {
   </div>
 </template>
 
-<style scoped>
-.motion-marquee {
-  width: 100%;
-  overflow: hidden;
-}
-
-/* stylelint-disable-next-line selector-class-pattern */
-.motion-marquee__content {
-  display: flex;
-  will-change: transform;
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  width: max-content;
-}
-</style>
+<!-- <style scoped>
+/* .motion-marquee { width: 100%; overflow: hidden; } */ /* stylelint-disable-next-line
+selector-class-pattern */ /* .motion-marquee__content { */ /* display: flex; */ /* will-change:
+transform; */ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ /* width:
+max-content; */ /* } */
+</style> -->

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

@@ -36,7 +36,7 @@ const props = withDefaults(
   }
 )
 
-const { gsap, ScrollTrigger } = useGsap()
+const { gsap } = useGsap()
 
 const containerRef = ref<HTMLElement | null>(null)
 const contentRef = ref<HTMLElement | null>(null)

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

@@ -50,7 +50,7 @@ onMounted(() => {
 <template>
   <div class="motion-staggered">
     <slot
-      v-for="(item, index) in slots.default?.()"
+      v-for="(_, index) in slots.default?.()"
       :key="index"
       :ref="(el: HTMLElement | null) => setItemRef(el, index)"
       :class="{ animated: animatedItems[index] }"

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

@@ -43,20 +43,7 @@ onMounted(() => {
   }, 50)
 })
 
-// Methods
-const enter = (el: Element) => {
-  // Handle enter transition
-  ;(el as HTMLElement).style.opacity = '0'
-  setTimeout(() => {
-    ;(el as HTMLElement).style.opacity = '1'
-  }, 10)
-}
 
-const leave = (el: Element, done: () => void) => {
-  // Handle leave transition
-  ;(el as HTMLElement).style.opacity = '0'
-  setTimeout(done, props.duration)
-}
 </script>
 
 <template>

package/layers/motion/app/composables/useSmoothScroll.ts

@@ -81,7 +81,7 @@ export function useSmoothScroll() {
         duration: options?.duration ?? 1.2,
         immediate: options?.immediate ?? false,
         lock: options?.lock ?? false,
-        onComplete: options?.onComplete,
+        ...(options?.onComplete !== undefined && { onComplete: options.onComplete }),
       })
     } else {
       // Native fallback

package/layers/motion/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",

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

@@ -1,3 +1,5 @@
+import { useFeatures } from '../composables/useFeatures'
+
 export default defineNuxtRouteMiddleware((to) => {
   const { config, isStrictMode, isLayerDefaultDeny } = useRoutingConfig()
   const { resolve } = useFeatures()

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

@@ -1,4 +1,5 @@
 import type { FeatureValue } from '../types/routing'
+import { useFeatures } from '../composables/useFeatures'
 
 export default defineNuxtPlugin(async () => {
   const { config } = useRoutingConfig()

package/layers/routing/nuxt.config.ts

@@ -1,4 +1,8 @@
-import type { NuxtPage } from '@nuxt/schema'
+interface RoutePage {
+  file?: string
+  meta?: Record<string, unknown>
+  children?: RoutePage[]
+}
 
 export default defineNuxtConfig({
   $meta: { name: 'routing' },
@@ -10,9 +14,9 @@ export default defineNuxtConfig({
   compatibilityDate: '2026-01-30',
 
   hooks: {
-    'pages:extend'(pages) {
+    'pages:extend'(pages: unknown[]) {
       const cwd = process.cwd()
-      const tag = (list: NuxtPage[]) => {
+      const tag = (list: RoutePage[]) => {
         for (const page of list) {
           if (page.file && !page.file.startsWith(cwd)) {
             page.meta ??= {}
@@ -21,7 +25,7 @@ export default defineNuxtConfig({
           if (page.children) tag(page.children)
         }
       }
-      tag(pages)
+      tag(pages as unknown as RoutePage[])
     },
   },
 })

package/layers/routing/package.json

@@ -2,5 +2,8 @@
   "name": "@layers/routing",
   "version": "0.1.0",
   "type": "module",
-  "main": "./nuxt.config.ts"
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
+  }
 }

package/layers/shader/app/composables/useShader.ts

@@ -143,6 +143,6 @@ export function useBasicShader(
 export function useStandardShader(config?: NodeMaterialConfig) {
   return useShader({
     type: 'standard',
-    config,
+    ...(config !== undefined && { config }),
   })
 }

package/layers/shader/app/utils/tsl/noise.ts

@@ -4,11 +4,6 @@ import type { FBMOptions, TSLNode } from '../../types'
 /**
  * Hash function for noise generation
  */
-const hash21 = Fn(([p]: [TSLNode]) => {
-  const p3 = fract(p.mul(vec2(443.8975, 397.2973)))
-  const shifted = p3.add(dot(p3, p3.add(19.19)))
-  return fract(shifted.x.mul(shifted.y))
-})
 
 const hash22 = Fn(([p]: [TSLNode]) => {
   const p3 = fract(p.mul(vec2(443.8975, 397.2973)))

package/layers/shader/nuxt.config.ts

@@ -76,7 +76,7 @@ export default {}
   return {
     name: 'three-webgpu-ssr-stub',
     enforce: 'pre',
-    transform(code, id, options) {
+    transform(_code, id, options) {
       // Only intercept in SSR context
       if (!options?.ssr) return null
       // In three r182+, three/webgpu → three.webgpu.js, three/tsl → three.tsl.js

package/layers/shader/package.json

@@ -3,6 +3,9 @@
   "version": "0.0.1",
   "type": "module",
   "main": "./nuxt.config.ts",
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
+  },
   "dependencies": {
     "@tresjs/cientos": "^5.2.5",
     "@tresjs/core": "^5.3.3",

package/layers/theme/app/plugins/theme.client.ts

@@ -1,7 +1,4 @@
 export default defineNuxtPlugin(() => {
-  const config = useAppConfig()
-  if ((config.layers as Record<string, boolean> | undefined)?.theme === false) return
-
   // Initialize shared composables — applies data-theme-colour, data-theme-contrast,
   // data-theme-motion, and data-theme-transparency on <html> on first load.
   useTheme()

package/layers/theme/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",

package/layers/ui/app/app.config.ts

@@ -1,4 +1,9 @@
 export default {
+  site: {
+    title: '',
+    subtitle: '',
+    description: '',
+  },
   mastNav: {
     links: [],
     scrollBehaviour: 'router',

package/layers/ui/app/components/Accent/Scene.vue

@@ -29,7 +29,20 @@ const resolvedBlobs = computed((): BlobConfig[] => {
 <template>
   <component :is="tag" class="relative overflow-clip isolate">
     <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
-      <AccentBlob v-for="(blob, i) in resolvedBlobs" :key="i" v-bind="blob" />
+      <AccentBlob
+      v-for="(blob, i) in resolvedBlobs"
+      :key="i"
+      :x="blob.x"
+      :y="blob.y"
+      v-bind="{
+        ...(blob.size !== undefined && { size: blob.size }),
+        ...(blob.blur !== undefined && { blur: blob.blur }),
+        ...(blob.opacity !== undefined && { opacity: blob.opacity }),
+        ...(blob.color !== undefined && { color: blob.color }),
+        ...(blob.shade !== undefined && { shade: blob.shade }),
+        ...(blob.customColor !== undefined && { customColor: blob.customColor }),
+      }"
+    />
     </div>
     <div class="relative z-10">
       <slot />

package/layers/ui/app/components/Progress/Bar.vue

@@ -18,8 +18,18 @@ const {
 }>()
 
 const modelValue = computed(() => (progress != null ? progress * 100 : undefined))
+
+const progressProps = computed(() => ({
+  ...(modelValue.value !== undefined && { modelValue: modelValue.value }),
+  ...(color !== undefined && { color }),
+  ...(size !== undefined && { size }),
+  ...(orientation !== undefined && { orientation }),
+  ...(status !== undefined && { status }),
+  ...(animation !== undefined && { animation }),
+  ...(inverted !== undefined && { inverted }),
+}))
 </script>
 
 <template>
-  <UProgress :model-value="modelValue" :color :size :orientation :status :animation :inverted />
+  <UProgress v-bind="progressProps" />
 </template>

package/layers/ui/app/components/Typography/CodeBlock.vue

@@ -13,7 +13,6 @@ const props = withDefaults(
     class?: string
   }>(),
   {
-    language: undefined,
     class: '',
     color: 'default',
   }
@@ -24,11 +23,13 @@ const colorClass = useColor(props.color, 'text')
 <template>
   <Typography
     tag="pre"
-    v-bind="$attrs"
-    :size="props.size"
+    v-bind="{
+      ...$attrs,
+      ...(props.size !== undefined && { size: props.size }),
+      ...(props.language !== undefined && { 'data-language': props.language }),
+    }"
     class="overflow-x-auto"
     :class="[props.class]"
-    :data-language="props.language"
   >
     <Typography
       tag="code"

package/layers/ui/app/components/Typography/Headline.vue

@@ -57,7 +57,16 @@ const sizeClass = computed(() => {
   return sizes[props.level]
 })
 
-const { classes } = useTypography(props)
+const { classes } = useTypography({
+  weight: props.weight,
+  width: props.width,
+  slant: props.slant,
+  leading: props.leading,
+  tracking: props.tracking,
+  align: props.align,
+  transform: props.transform,
+  ...(props.size !== undefined && { size: props.size }),
+})
 const colorClass = useColor(props.color, 'text')
 </script>
 
@@ -71,9 +80,8 @@ const colorClass = useColor(props.color, 'text')
     :tracking="props.tracking"
     :align="props.align"
     :transform="props.transform"
-    :size="props.size"
     :class="[sizeClass, classes, colorClass, props.class]"
-    v-bind="$attrs"
+    v-bind="{ ...(props.size !== undefined && { size: props.size }), ...$attrs }"
   >
     <slot />
   </Typography>

package/layers/ui/app/components/Typography/QuoteBlock.vue

@@ -10,7 +10,11 @@ const colorClass = useColor(props.color, 'text')
 </script>
 
 <template>
-  <Typography tag="blockquote" :size="props.size" :class="colorClass" v-bind="$attrs">
+  <Typography
+    tag="blockquote"
+    :class="colorClass"
+    v-bind="{ ...(props.size !== undefined && { size: props.size }), ...$attrs }"
+  >
     <slot />
   </Typography>
 </template>

package/layers/ui/app/components/Typography/index.vue

@@ -32,7 +32,7 @@ const props = withDefaults(
   {
     tag: 'p',
     weight: 'font-normal',
-    width: 'normal',
+    width: 'font-stretch-normal',
     slant: 'normal',
     leading: 'leading-normal',
     tracking: 'tracking-normal',

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

@@ -1,13 +1,13 @@
 import { splitSpaces } from '../utils/regex'
 
 export function useSite() {
-  const config = useAppConfig().site
+  const config = useAppConfig().site ?? {}
 
   return {
-    title: config.title as string,
-    titleWords: splitSpaces(config.title as string) as string[],
-    subtitle: config.subtitle as string,
-    subtitleWords: splitSpaces(config.subtitle as string) as string[],
-    description: config.description as string,
+    title: (config.title ?? '') as string,
+    titleWords: splitSpaces((config.title ?? '') as string) as string[],
+    subtitle: (config.subtitle ?? '') as string,
+    subtitleWords: splitSpaces((config.subtitle ?? '') as string) as string[],
+    description: (config.description ?? '') as string,
   }
 }

package/layers/ui/app/types/accent.ts

@@ -9,7 +9,7 @@ export interface BlobConfig {
   opacity?: number
   color?: AccentBlobColor
   shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
-  customColor?: string
+  customColor?: string | undefined
 }
 
 export interface AccentSceneConfig {

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

@@ -1,5 +1,10 @@
 declare module '@nuxt/schema' {
   interface AppConfigInput {
+    site?: {
+      title?: string
+      subtitle?: string
+      description?: string
+    }
     mastNav?: {
       links?: Array<{
         id: string

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

@@ -24,11 +24,12 @@ export function createModal<P extends Record<string, unknown>>(component: Compon
     if (import.meta.server) return { open: () => {}, close: () => {}, patch: () => {} }
 
     const overlay = useOverlay()
-    const modal = overlay.create<P>(component)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const modal = overlay.create(component as any)
     return {
-      open: (props?: Partial<P>) => modal.open(props),
+      open: (props?: Partial<P>) => modal.open(props as never),
       close: () => modal.close(),
-      patch: (props: Partial<P>) => modal.patch(props),
+      patch: (props: Partial<P>) => modal.patch(props as never),
     }
   })
 }

package/layers/ui/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:ui": "UI_STANDALONE=true nuxi dev",
     "dev:prepare": "nuxt prepare .playground",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.6.17",
+  "version": "1.6.20",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",
@@ -41,7 +41,7 @@
     "tailwindcss": "^4.2.4",
     "three": "^0.183.2",
     "v-gsap-nuxt": ">=1.0.0",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "peerDependenciesMeta": {
     "@nuxtjs/device": {
@@ -107,8 +107,8 @@
     "@perplex-digital/stylelint-config": "^17.4.0",
     "@pinia/nuxt": "^0.11.3",
     "@types/node": "^25.6.0",
-    "@typescript-eslint/eslint-plugin": "^8.59.1",
-    "@typescript-eslint/parser": "^8.59.1",
+    "@typescript-eslint/eslint-plugin": "^8.59.2",
+    "@typescript-eslint/parser": "^8.59.2",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vueuse/core": "^14.3.0",
     "@vueuse/nuxt": "^14.3.0",
@@ -124,7 +124,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-unicorn": "^64.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "eslint-plugin-vue": "^10.9.0",
+    "eslint-plugin-vue": "^10.9.1",
     "npm-check-updates": "^21.0.3",
     "nuxt": "latest",
     "pinia": "^3.0.4",
@@ -144,14 +144,14 @@
     "stylelint-no-unsupported-browser-features": "^8.1.1",
     "stylelint-prettier": "^5.0.3",
     "tailwindcss": "^4.2.4",
-    "turbo": "^2.9.8",
+    "turbo": "^2.9.9",
     "typescript": "^6.0.3",
     "vite-plugin-checker": "^0.13.0",
     "vitest": "^4.1.5",
     "vue": "latest",
     "vue-tsc": "^3.2.8",
-    "zod": "^4.3.6",
-    "zod-to-json-schema": "^3.25.1"
+    "zod": "^4.4.3",
+    "zod-to-json-schema": "^3.25.2"
   },
   "browserslist": [
     "last 2 Chrome major versions",