kmcom-nuxt-layers 2.6.2 → 2.7.0

package/layers/starter/app/components/StarterHome.vue

@@ -1,221 +1,247 @@
 <script setup lang="ts">
-useSeoMeta({
-  title: 'kmcom-nuxt-layers Starter',
-  description:
-    'A production-ready Nuxt starter powered by kmcom-nuxt-layers. Composable, modular, and ready to ship.',
-})
+  useSeoMeta({
+    title: 'kmcom-nuxt-layers Starter',
+    description:
+      'A production-ready Nuxt starter powered by kmcom-nuxt-layers. Composable, modular, and ready to ship.',
+  })
 
-const { gsap, ScrollTrigger } = useGsap()
-gsap.registerPlugin(ScrollTrigger)
+  const { gsap, ScrollTrigger } = useGsap()
+  gsap.registerPlugin(ScrollTrigger)
 
-const heroRef = ref<HTMLElement | null>(null)
-const sectionsRef = ref<HTMLElement | null>(null)
+  const heroRef = useTemplateRef<HTMLElement>('heroRef')
+  const sectionsRef = useTemplateRef<HTMLElement>('sectionsRef')
 
-let ctx: ReturnType<typeof gsap.context> | null = null
+  let ctx: ReturnType<typeof gsap.context> | null = null
 
-onMounted(() => {
-  ctx = gsap.context(() => {
-    if (heroRef.value) {
-      gsap.from(Array.from(heroRef.value.children), {
-        y: 24,
-        opacity: 0,
-        duration: 0.7,
-        stagger: 0.1,
-        ease: 'power3.out',
-      })
-    }
+  onMounted(() => {
+    ctx = gsap.context(() => {
+      if (heroRef.value) {
+        gsap.from(Array.from(heroRef.value.children), {
+          y: 24,
+          opacity: 0,
+          duration: 0.7,
+          stagger: 0.1,
+          ease: 'power3.out',
+        })
+      }
 
-    if (sectionsRef.value) {
-      gsap.from(sectionsRef.value.querySelectorAll('.layer-card'), {
-        scrollTrigger: {
-          trigger: sectionsRef.value,
-          start: 'top 85%',
-          toggleActions: 'play none none none',
-        },
-        y: 32,
-        opacity: 0,
-        scale: 0.97,
-        duration: 0.5,
-        stagger: { amount: 0.5 },
-        ease: 'power3.out',
-      })
-    }
+      if (sectionsRef.value) {
+        gsap.from(sectionsRef.value.querySelectorAll('.layer-card'), {
+          scrollTrigger: {
+            trigger: sectionsRef.value,
+            start: 'top 85%',
+            toggleActions: 'play none none none',
+          },
+          y: 32,
+          opacity: 0,
+          scale: 0.97,
+          duration: 0.5,
+          stagger: { amount: 0.5 },
+          ease: 'power3.out',
+        })
+      }
+    })
   })
-})
 
-onUnmounted(() => {
-  ctx?.revert()
-  ctx = null
-})
+  onUnmounted(() => {
+    ctx?.revert()
+    ctx = null
+  })
 
-const appConfig = useAppConfig()
-const activeLayers = appConfig.layers ?? {}
+  const appConfig = useAppConfig()
+  const activeLayers = appConfig.layers ?? {}
 
-type LayerDef = {
-  name: string
-  key: string
-  description: string
-  icon: string
-  features: string[]
-  borderColor: string
-  bgColor: string
-  iconBg: string
-  iconColor: string
-}
+  type LayerDef = {
+    name: string
+    key: string
+    description: string
+    icon: string
+    features: string[]
+    borderColor: string
+    bgColor: string
+    iconBg: string
+    iconColor: string
+  }
 
-const coreLayers: LayerDef[] = [
-  {
-    name: 'Core',
-    key: 'core',
-    description: 'Foundation utilities, error handling, device detection, PWA support',
-    icon: 'i-lucide-box',
-    features: ['Browser Detection', 'Screen Info', 'Network Status', 'Loading States', 'PWA'],
-    borderColor: 'border-blue-500/30',
-    bgColor: 'bg-blue-500/5',
-    iconBg: 'bg-blue-500/10',
-    iconColor: 'text-blue-500',
-  },
-  {
-    name: 'UI',
-    key: 'ui',
-    description: 'Typography, navigation, visual primitives and the design system',
-    icon: 'i-lucide-palette',
-    features: ['Typography', 'Color Tokens', 'Navigation', 'Visual Primitives', 'Toast', 'Modal'],
-    borderColor: 'border-pink-500/30',
-    bgColor: 'bg-pink-500/5',
-    iconBg: 'bg-pink-500/10',
-    iconColor: 'text-pink-500',
-  },
-  {
-    name: 'Layout',
-    key: 'layout',
-    description: 'Swiss Grid system, sections, and page containers',
-    icon: 'i-lucide-layout',
-    features: ['18-Col Grid', 'Hero Section', 'Split Section', 'Gallery Section', 'Grid Debug'],
-    borderColor: 'border-amber-500/30',
-    bgColor: 'bg-amber-500/5',
-    iconBg: 'bg-amber-500/10',
-    iconColor: 'text-amber-500',
-  },
-  {
-    name: 'Motion',
-    key: 'motion',
-    description: 'GSAP, Lenis smooth scroll, page transitions and animation effects',
-    icon: 'i-lucide-sparkles',
-    features: ['GSAP', 'ScrollTrigger', 'Lenis', 'Marquee', 'Magnetic', 'Tilt', 'Cursor'],
-    borderColor: 'border-emerald-500/30',
-    bgColor: 'bg-emerald-500/5',
-    iconBg: 'bg-emerald-500/10',
-    iconColor: 'text-emerald-500',
-  },
-  {
-    name: 'Forms',
-    key: 'forms',
-    description: 'Config-driven form fields with Zod validation and type inference',
-    icon: 'i-lucide-file-input',
-    features: ['Dynamic Fields', 'Zod Validation', 'Type Inference', 'Auto Icons', 'Contact Form'],
-    borderColor: 'border-cyan-500/30',
-    bgColor: 'bg-cyan-500/5',
-    iconBg: 'bg-cyan-500/10',
-    iconColor: 'text-cyan-500',
-  },
-  {
-    name: 'Theme',
-    key: 'theme',
-    description: 'Dark mode, accent color palettes and design token system',
-    icon: 'i-lucide-swatch-book',
-    features: ['Dark Mode', 'Accent Colors', 'Color Tokens', 'Color Mode'],
-    borderColor: 'border-neutral-400/30',
-    bgColor: 'bg-neutral-400/5',
-    iconBg: 'bg-neutral-400/10',
-    iconColor: 'text-neutral-400',
-  },
-  {
-    name: 'Content',
-    key: 'content',
-    description: 'Markdown CMS with typed collections via @nuxt/content',
-    icon: 'i-lucide-file-text',
-    features: ['Markdown', 'Collections', 'Frontmatter', 'Content API', 'Zod Schemas'],
-    borderColor: 'border-rose-500/30',
-    bgColor: 'bg-rose-500/5',
-    iconBg: 'bg-rose-500/10',
-    iconColor: 'text-rose-500',
-  },
-  {
-    name: 'Scripts',
-    key: 'scripts',
-    description: 'Third-party script management with performance-safe loading',
-    icon: 'i-lucide-code',
-    features: ['Lazy Loading', 'Analytics', 'Consent-Aware', 'Performance-Safe'],
-    borderColor: 'border-indigo-500/30',
-    bgColor: 'bg-indigo-500/5',
-    iconBg: 'bg-indigo-500/10',
-    iconColor: 'text-indigo-500',
-  },
-  {
-    name: 'Routing',
-    key: 'routing',
-    description: 'Advanced routing utilities, typed middleware and navigation helpers',
-    icon: 'i-lucide-route',
-    features: ['Typed Routes', 'Middleware', 'Route Guards', 'Navigation Utils'],
-    borderColor: 'border-teal-500/30',
-    bgColor: 'bg-teal-500/5',
-    iconBg: 'bg-teal-500/10',
-    iconColor: 'text-teal-500',
-  },
-  {
-    name: 'SEO',
-    key: 'seo',
-    description: 'Meta tags, Open Graph, JSON-LD, sitemap and robots.txt via @nuxtjs/seo',
-    icon: 'i-lucide-search',
-    features: ['Meta Tags', 'Open Graph', 'JSON-LD', 'Sitemap', 'Robots.txt', 'Schema.org'],
-    borderColor: 'border-sky-500/30',
-    bgColor: 'bg-sky-500/5',
-    iconBg: 'bg-sky-500/10',
-    iconColor: 'text-sky-500',
-  },
-  {
-    name: 'Feeds',
-    key: 'feeds',
-    description: 'RSS and feed aggregation with display components',
-    icon: 'i-lucide-rss',
-    features: ['RSS Feeds', 'Feed Display', 'Feed Parser'],
-    borderColor: 'border-orange-500/30',
-    bgColor: 'bg-orange-500/5',
-    iconBg: 'bg-orange-500/10',
-    iconColor: 'text-orange-500',
-  },
-]
+  const coreLayers: LayerDef[] = [
+    {
+      name: 'Core',
+      key: 'core',
+      description: 'Foundation utilities, error handling, device detection, PWA support',
+      icon: 'i-lucide-box',
+      features: ['Browser Detection', 'Screen Info', 'Network Status', 'Loading States', 'PWA'],
+      borderColor: 'border-blue-500/30',
+      bgColor: 'bg-blue-500/5',
+      iconBg: 'bg-blue-500/10',
+      iconColor: 'text-blue-500',
+    },
+    {
+      name: 'UI',
+      key: 'ui',
+      description: 'Typography, navigation, visual primitives and the design system',
+      icon: 'i-lucide-palette',
+      features: ['Typography', 'Color Tokens', 'Navigation', 'Visual Primitives', 'Toast', 'Modal'],
+      borderColor: 'border-pink-500/30',
+      bgColor: 'bg-pink-500/5',
+      iconBg: 'bg-pink-500/10',
+      iconColor: 'text-pink-500',
+    },
+    {
+      name: 'Layout',
+      key: 'layout',
+      description: 'Swiss Grid system, sections, and page containers',
+      icon: 'i-lucide-layout',
+      features: ['18-Col Grid', 'Hero Section', 'Split Section', 'Gallery Section', 'Grid Debug'],
+      borderColor: 'border-amber-500/30',
+      bgColor: 'bg-amber-500/5',
+      iconBg: 'bg-amber-500/10',
+      iconColor: 'text-amber-500',
+    },
+    {
+      name: 'Motion',
+      key: 'motion',
+      description: 'GSAP, Lenis smooth scroll, page transitions and animation effects',
+      icon: 'i-lucide-sparkles',
+      features: ['GSAP', 'ScrollTrigger', 'Lenis', 'Marquee', 'Magnetic', 'Tilt', 'Cursor'],
+      borderColor: 'border-emerald-500/30',
+      bgColor: 'bg-emerald-500/5',
+      iconBg: 'bg-emerald-500/10',
+      iconColor: 'text-emerald-500',
+    },
+    {
+      name: 'Forms',
+      key: 'forms',
+      description: 'Config-driven form fields with Zod validation and type inference',
+      icon: 'i-lucide-file-input',
+      features: [
+        'Dynamic Fields',
+        'Zod Validation',
+        'Type Inference',
+        'Auto Icons',
+        'Contact Form',
+      ],
+      borderColor: 'border-cyan-500/30',
+      bgColor: 'bg-cyan-500/5',
+      iconBg: 'bg-cyan-500/10',
+      iconColor: 'text-cyan-500',
+    },
+    {
+      name: 'Theme',
+      key: 'theme',
+      description: 'Dark mode, accent color palettes and design token system',
+      icon: 'i-lucide-swatch-book',
+      features: ['Dark Mode', 'Accent Colors', 'Color Tokens', 'Color Mode'],
+      borderColor: 'border-neutral-400/30',
+      bgColor: 'bg-neutral-400/5',
+      iconBg: 'bg-neutral-400/10',
+      iconColor: 'text-neutral-400',
+    },
+    {
+      name: 'Content',
+      key: 'content',
+      description: 'Markdown CMS with typed collections via @nuxt/content',
+      icon: 'i-lucide-file-text',
+      features: ['Markdown', 'Collections', 'Frontmatter', 'Content API', 'Zod Schemas'],
+      borderColor: 'border-rose-500/30',
+      bgColor: 'bg-rose-500/5',
+      iconBg: 'bg-rose-500/10',
+      iconColor: 'text-rose-500',
+    },
+    {
+      name: 'Scripts',
+      key: 'scripts',
+      description: 'Third-party script management with performance-safe loading',
+      icon: 'i-lucide-code',
+      features: ['Lazy Loading', 'Analytics', 'Consent-Aware', 'Performance-Safe'],
+      borderColor: 'border-indigo-500/30',
+      bgColor: 'bg-indigo-500/5',
+      iconBg: 'bg-indigo-500/10',
+      iconColor: 'text-indigo-500',
+    },
+    {
+      name: 'Routing',
+      key: 'routing',
+      description: 'Advanced routing utilities, typed middleware and navigation helpers',
+      icon: 'i-lucide-route',
+      features: ['Typed Routes', 'Middleware', 'Route Guards', 'Navigation Utils'],
+      borderColor: 'border-teal-500/30',
+      bgColor: 'bg-teal-500/5',
+      iconBg: 'bg-teal-500/10',
+      iconColor: 'text-teal-500',
+    },
+    {
+      name: 'SEO',
+      key: 'seo',
+      description: 'Meta tags, Open Graph, JSON-LD, sitemap and robots.txt via @nuxtjs/seo',
+      icon: 'i-lucide-search',
+      features: ['Meta Tags', 'Open Graph', 'JSON-LD', 'Sitemap', 'Robots.txt', 'Schema.org'],
+      borderColor: 'border-sky-500/30',
+      bgColor: 'bg-sky-500/5',
+      iconBg: 'bg-sky-500/10',
+      iconColor: 'text-sky-500',
+    },
+    {
+      name: 'Feeds',
+      key: 'feeds',
+      description: 'RSS and feed aggregation with display components',
+      icon: 'i-lucide-rss',
+      features: ['RSS Feeds', 'Feed Display', 'Feed Parser'],
+      borderColor: 'border-orange-500/30',
+      bgColor: 'bg-orange-500/5',
+      iconBg: 'bg-orange-500/10',
+      iconColor: 'text-orange-500',
+    },
+  ]
 
-const addonLayers: LayerDef[] = [
-  {
-    name: 'Canvas',
-    key: 'canvas',
-    description: 'WebGL/WebGPU canvas foundation required by the shader layer',
-    icon: 'i-lucide-monitor',
-    features: ['WebGL', 'WebGPU', 'Canvas Composables', '3D Foundation'],
-    borderColor: 'border-purple-500/30',
-    bgColor: 'bg-purple-500/5',
-    iconBg: 'bg-purple-500/10',
-    iconColor: 'text-purple-500',
-  },
-  {
-    name: 'Shader',
-    key: 'shader',
-    description: 'Three.js + TresJS shader system with TSL, noise and post-processing',
-    icon: 'i-lucide-shapes',
-    features: ['TSL Shaders', 'Noise', 'Gradients', 'Fresnel', 'Post-Processing', 'WebGPU'],
-    borderColor: 'border-violet-500/30',
-    bgColor: 'bg-violet-500/5',
-    iconBg: 'bg-violet-500/10',
-    iconColor: 'text-violet-500',
-  },
-]
+  const addonLayers: LayerDef[] = [
+    {
+      name: 'Canvas',
+      key: 'canvas',
+      description: 'WebGL/WebGPU canvas foundation required by the shader layer',
+      icon: 'i-lucide-monitor',
+      features: ['WebGL', 'WebGPU', 'Canvas Composables', '3D Foundation'],
+      borderColor: 'border-purple-500/30',
+      bgColor: 'bg-purple-500/5',
+      iconBg: 'bg-purple-500/10',
+      iconColor: 'text-purple-500',
+    },
+    {
+      name: 'Shader',
+      key: 'shader',
+      description: 'Three.js + TresJS shader system with TSL, noise and post-processing',
+      icon: 'i-lucide-shapes',
+      features: ['TSL Shaders', 'Noise', 'Gradients', 'Fresnel', 'Post-Processing', 'WebGPU'],
+      borderColor: 'border-violet-500/30',
+      bgColor: 'bg-violet-500/5',
+      iconBg: 'bg-violet-500/10',
+      iconColor: 'text-violet-500',
+    },
+  ]
 
-const marqueeItems = [
-  'Core', '◆', 'UI', '◆', 'Layout', '◆', 'Motion', '◆', 'Forms', '◆',
-  'Theme', '◆', 'Content', '◆', 'SEO', '◆', 'Scripts', '◆', 'Routing', '◆', 'Feeds', '◆',
-]
+  const marqueeItems = [
+    'Core',
+    '◆',
+    'UI',
+    '◆',
+    'Layout',
+    '◆',
+    'Motion',
+    '◆',
+    'Forms',
+    '◆',
+    'Theme',
+    '◆',
+    'Content',
+    '◆',
+    'SEO',
+    '◆',
+    'Scripts',
+    '◆',
+    'Routing',
+    '◆',
+    'Feeds',
+    '◆',
+  ]
 </script>
 
 <template>
@@ -269,14 +295,14 @@ const marqueeItems = [
           v-for="item in marqueeItems"
           :key="item"
           class="text-muted whitespace-nowrap text-xs font-semibold uppercase tracking-widest"
-        >{{ item }}</span>
+          >{{ item }}</span
+        >
       </MotionMarquee>
     </div>
 
     <div ref="sectionsRef">
       <UContainer class="px-8 pb-8 pt-10">
         <div class="space-y-12">
-
           <!-- Core Layers -->
           <section>
             <div class="mb-6">
@@ -408,7 +434,6 @@ const marqueeItems = [
               View Source
             </UButton>
           </div>
-
         </div>
       </UContainer>
     </div>

package/layers/theme/app/assets/css/theme.css

@@ -36,7 +36,7 @@
 
 [data-theme-transparency='reduced'] :where([class*='backdrop-blur']) {
   backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
 }
 
 [data-theme-transparency='reduced'] :where([class*='bg-default/'], [class*='bg-elevated/']) {

package/layers/theme/server/utils/accent-css.test.ts

@@ -4,8 +4,23 @@ import { describe, expect, it } from 'vitest'
 import { buildAccentCSS } from './accent-css'
 
 const ACCENTS = [
-  'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
-  'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose',
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
 ] as const
 
 const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const

package/layers/theme/server/utils/fouc-config.test.ts

@@ -30,7 +30,9 @@ describe('buildThemeInitScript', () => {
     expect(script).toContain("var ct=localStorage.getItem('theme-contrast');")
     expect(script).toContain("var ctv=ct?JSON.parse(ct):'system';")
     expect(script).toContain("if(ctv==='on'){h.setAttribute('data-theme-contrast','high')}")
-    expect(script).toContain("else if(ctv==='off'){h.setAttribute('data-theme-contrast','standard')}")
+    expect(script).toContain(
+      "else if(ctv==='off'){h.setAttribute('data-theme-contrast','standard')}"
+    )
     expect(script).toContain(
       "else{h.setAttribute('data-theme-contrast',(window.matchMedia&&window.matchMedia('(prefers-contrast:more)').matches)?'high':'standard')}"
     )
@@ -48,7 +50,9 @@ describe('buildThemeInitScript', () => {
   it('emits a JSON-parsed tri-state block for theme-transparency', () => {
     expect(script).toContain("var t=localStorage.getItem('theme-transparency');")
     expect(script).toContain("if(tv==='on'){h.setAttribute('data-theme-transparency','reduced')}")
-    expect(script).toContain("else if(tv==='off'){h.setAttribute('data-theme-transparency','full')}")
+    expect(script).toContain(
+      "else if(tv==='off'){h.setAttribute('data-theme-transparency','full')}"
+    )
     expect(script).toContain(
       "window.matchMedia('(prefers-reduced-transparency:reduce)').matches)?'reduced':'full'"
     )
@@ -65,7 +69,7 @@ describe('buildThemeInitScript', () => {
   })
 
   it('does not JSON.parse the theme-mode value (jsonParsed: false)', () => {
-    expect(script).not.toContain("JSON.parse(dm)")
+    expect(script).not.toContain('JSON.parse(dm)')
   })
 
   it('produces valid, evaluable JavaScript', () => {

package/layers/theme/server/utils/fouc-config.ts

@@ -20,40 +20,52 @@ const THEME_PREFERENCES: TriStatePreference[] = [
     storageKey: 'theme-contrast',
     attribute: 'data-theme-contrast',
     jsonParsed: true,
-    conditionA: 'on', valueA: 'high',
-    conditionB: 'off', valueB: 'standard',
+    conditionA: 'on',
+    valueA: 'high',
+    conditionB: 'off',
+    valueB: 'standard',
     mediaQuery: '(prefers-contrast:more)',
-    mediaTrue: 'high', mediaFalse: 'standard',
+    mediaTrue: 'high',
+    mediaFalse: 'standard',
   },
   {
     varName: 'm',
     storageKey: 'theme-motion',
     attribute: 'data-theme-motion',
     jsonParsed: true,
-    conditionA: 'on', valueA: 'reduced',
-    conditionB: 'off', valueB: 'full',
+    conditionA: 'on',
+    valueA: 'reduced',
+    conditionB: 'off',
+    valueB: 'full',
     mediaQuery: '(prefers-reduced-motion:reduce)',
-    mediaTrue: 'reduced', mediaFalse: 'full',
+    mediaTrue: 'reduced',
+    mediaFalse: 'full',
   },
   {
     varName: 't',
     storageKey: 'theme-transparency',
     attribute: 'data-theme-transparency',
     jsonParsed: true,
-    conditionA: 'on', valueA: 'reduced',
-    conditionB: 'off', valueB: 'full',
+    conditionA: 'on',
+    valueA: 'reduced',
+    conditionB: 'off',
+    valueB: 'full',
     mediaQuery: '(prefers-reduced-transparency:reduce)',
-    mediaTrue: 'reduced', mediaFalse: 'full',
+    mediaTrue: 'reduced',
+    mediaFalse: 'full',
   },
   {
     varName: 'dm',
     storageKey: 'theme-mode',
     attribute: 'data-theme-mode',
     jsonParsed: false,
-    conditionA: 'dark', valueA: 'dark',
-    conditionB: 'light', valueB: 'light',
+    conditionA: 'dark',
+    valueA: 'dark',
+    conditionB: 'light',
+    valueB: 'light',
     mediaQuery: '(prefers-color-scheme:dark)',
-    mediaTrue: 'dark', mediaFalse: 'light',
+    mediaTrue: 'dark',
+    mediaFalse: 'light',
   },
 ]
 

package/layers/transitions/app/assets/css/transitions.css

@@ -49,6 +49,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -58,6 +59,7 @@
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
@@ -68,6 +70,7 @@
     transform: translateY(20px);
     opacity: 0;
   }
+
   to {
     transform: translateY(0);
     opacity: 1;
@@ -79,6 +82,7 @@
     transform: translateY(-20px);
     opacity: 0;
   }
+
   to {
     transform: translateY(0);
     opacity: 1;
@@ -90,6 +94,7 @@
     transform: translateX(-20px);
     opacity: 0;
   }
+
   to {
     transform: translateX(0);
     opacity: 1;
@@ -101,6 +106,7 @@
     transform: translateX(20px);
     opacity: 0;
   }
+
   to {
     transform: translateX(0);
     opacity: 1;