kmcom-nuxt-layers 1.6.18 → 1.6.21

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/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,13 +1,44 @@
-export default {
+type MastNavLink = {
+  id: string
+  label: string
+  to:
+    | string
+    | {
+        name: string
+        params?: Record<string, string | number>
+        query?: Record<string, string | number>
+      }
+}
+
+export default defineAppConfig({
+  site: {
+    title: '',
+    subtitle: '',
+    description: '',
+  },
   mastNav: {
-    links: [],
+    links: [] as MastNavLink[],
     scrollBehaviour: 'router',
   },
   uiLayer: {
     gradients: {
-      brand: { shape: 'linear', direction: 'to-br', from: { color: 'primary', shade: 500 }, to: { color: 'secondary', shade: 600 } },
-      subtle: { shape: 'linear', direction: 'to-b', from: { color: 'primary', shade: 100, opacity: 50 }, to: { color: 'transparent' } },
-      hero: { shape: 'radial', from: { color: 'primary', shade: 400, opacity: 40 }, to: { color: 'transparent' } },
+      brand: {
+        shape: 'linear',
+        direction: 'to-br',
+        from: { color: 'primary', shade: 500 },
+        to: { color: 'secondary', shade: 600 },
+      },
+      subtle: {
+        shape: 'linear',
+        direction: 'to-b',
+        from: { color: 'primary', shade: 100, opacity: 50 },
+        to: { color: 'transparent' },
+      },
+      hero: {
+        shape: 'radial',
+        from: { color: 'primary', shade: 400, opacity: 40 },
+        to: { color: 'transparent' },
+      },
     },
     accentScenes: {
       hero: {
@@ -35,4 +66,4 @@ export default {
       },
     },
   },
-}
+})

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/Mast/NavModal.vue

@@ -5,7 +5,8 @@ const emit = defineEmits<{
   'close': []
 }>()
 
-const { links, scrollBehaviour } = useAppConfig().mastNav
+type NavLink = { id: string; label: string; to: string | { name: string; params?: Record<string, string | number>; query?: Record<string, string | number> } }
+const { links, scrollBehaviour } = useAppConfig().mastNav as { links: NavLink[]; scrollBehaviour: string }
 const activeSection = useState<string>('activeSection', () => '')
 const route = useRoute()
 const { close: closeNav } = useMastNav()
@@ -16,7 +17,7 @@ function dismiss() {
   closeNav()
 }
 
-function handleNav(link: { id: string; to: string | { name: string; params?: Record<string, unknown>; query?: Record<string, unknown> } }) {
+function handleNav(link: NavLink) {
   if (scrollBehaviour === 'smooth-scroll' && route.name === 'index') {
     try { useSmoothScroll().scrollTo(`#${link.id}`) }
     catch {}

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: color as 'primary' | 'neutral' }),
+  ...(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/TextStroke.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { usePreferredContrast } from '@vueuse/core'
-
 const id = useId()
 const contrast = usePreferredContrast()
 

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/gradient.ts

@@ -60,7 +60,7 @@ export function useGradient(
 
     let resolved: GradientConfig
     if (typeof raw === 'string') {
-      const preset = (appConfig.uiLayer as Record<string, unknown> | undefined)?.gradients as
+      const preset = (appConfig.uiLayer as Record<string, unknown> | undefined)?.['gradients'] as
         | Record<string, GradientConfig>
         | undefined
       resolved = preset?.[raw] ?? DEFAULT_CONFIG

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

@@ -1,4 +1,3 @@
-import { createSharedComposable } from '@vueuse/core'
 import MastNavModal from '../components/Mast/NavModal.vue'
 
 function _useMastNav() {

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

@@ -8,15 +8,15 @@ export function useAppToast() {
 
   return {
     success: (title: string, opts?: ToastOptions) =>
-      toast.add({ title, icon: 'lucide:check-circle', color: 'success', ...opts }),
+      toast.add({ title, icon: 'lucide:check-circle', color: 'success' as 'primary', ...opts }),
 
     error: (title: string, opts?: ToastOptions) =>
-      toast.add({ title, icon: 'lucide:x-circle', color: 'error', ...opts }),
+      toast.add({ title, icon: 'lucide:x-circle', color: 'error' as 'primary', ...opts }),
 
     info: (title: string, opts?: ToastOptions) =>
-      toast.add({ title, icon: 'lucide:info', color: 'info', ...opts }),
+      toast.add({ title, icon: 'lucide:info', color: 'info' as 'primary', ...opts }),
 
     warning: (title: string, opts?: ToastOptions) =>
-      toast.add({ title, icon: 'lucide:triangle-alert', color: 'warning', ...opts }),
+      toast.add({ title, icon: 'lucide:triangle-alert', color: 'warning' as 'primary', ...opts }),
   }
 }

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

@@ -1,4 +1,3 @@
-import { createSharedComposable } from '@vueuse/core'
 import type { Component } from 'vue'
 
 /**
@@ -24,11 +23,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.18",
+  "version": "1.6.21",
   "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",