kmcom-nuxt-layers 1.3.0 → 1.4.0

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

@@ -9,7 +9,11 @@ const { data: posts, status } = await useBlogPosts(options)
 </script>
 
 <template>
-  <NuxtContentList :status="status" :has-items="!!posts?.length" empty-message="No blog posts found">
+  <NuxtContentList
+    :status="status"
+    :has-items="!!posts?.length"
+    empty-message="No blog posts found"
+  >
     <UBlogPosts orientation="vertical">
       <UBlogPost
         v-for="post in posts"

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

@@ -20,30 +20,23 @@ const {
     <!-- Full-viewport ambient glow teleported to body to escape stacking contexts -->
     <ClientOnly>
       <Teleport to="body">
-        <div
-          class="fixed inset-0 z-0 pointer-events-none overflow-hidden"
-          aria-hidden="true"
-        >
+        <div class="fixed inset-0 z-0 pointer-events-none overflow-hidden" aria-hidden="true">
           <img
             :src="src"
             alt=""
             class="absolute inset-0 w-full h-full object-cover blur-[100px] opacity-30 saturate-150 scale-125"
           />
           <!-- Gradient fade so it blends into the page bg -->
-          <div class="absolute inset-0 bg-linear-to-b from-transparent via-transparent to-default" />
+          <div
+            class="absolute inset-0 bg-linear-to-b from-transparent via-transparent to-default"
+          />
         </div>
       </Teleport>
     </ClientOnly>
 
     <!-- Main image in normal flow -->
     <figure class="my-6">
-      <img
-        :src="src"
-        :alt="alt"
-        :width="width"
-        :height="height"
-        class="w-full rounded-lg"
-      />
+      <img :src="src" :alt="alt" :width="width" :height="height" class="w-full rounded-lg" />
       <figcaption v-if="caption" class="mt-3 text-center text-sm text-muted italic">
         {{ caption }}
       </figcaption>

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

@@ -7,7 +7,10 @@ const lightboxOpen = ref(false)
 const lightboxIndex = ref(0)
 const lightboxImages = ref<{ src: string; alt: string; width?: number; height?: number }[]>([])
 
-function openLightbox(images: { src: string; alt: string; width?: number; height?: number }[], index: number) {
+function openLightbox(
+  images: { src: string; alt: string; width?: number; height?: number }[],
+  index: number
+) {
   lightboxImages.value = images
   lightboxIndex.value = index
   lightboxOpen.value = true
@@ -36,16 +39,15 @@ function openLightbox(images: { src: string; alt: string; width?: number; height
             :key="img.src"
             class="overflow-hidden rounded-lg group relative"
           >
-            <NuxtLink
-              :to="`/gallery/${slug}/${idx}`"
-              class="block relative overflow-hidden"
-            >
+            <NuxtLink :to="`/gallery/${slug}/${idx}`" class="block relative overflow-hidden">
               <img
                 :src="img.src"
                 :alt="img.alt"
                 class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105"
               />
-              <div class="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+              <div
+                class="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"
+              >
                 <span class="text-white font-semibold text-sm text-center px-3">
                   {{ img.title || img.alt }}
                 </span>

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

@@ -9,7 +9,11 @@ const { data: items, status } = await useGalleryItems(options)
 </script>
 
 <template>
-  <NuxtContentList :status="status" :has-items="!!items?.length" empty-message="No gallery items found">
+  <NuxtContentList
+    :status="status"
+    :has-items="!!items?.length"
+    empty-message="No gallery items found"
+  >
     <UPageGrid>
       <NuxtLink
         v-for="item in items"
@@ -24,7 +28,9 @@ const { data: items, status } = await useGalleryItems(options)
             :alt="item.images[0].alt"
             class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105"
           />
-          <div class="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+          <div
+            class="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"
+          >
             <span class="text-white font-semibold text-center px-3">
               {{ item.title }}
             </span>
@@ -32,7 +38,9 @@ const { data: items, status } = await useGalleryItems(options)
         </div>
         <div class="p-3 space-y-1.5">
           <p class="font-medium text-highlighted">{{ item.title }}</p>
-          <p v-if="item.description" class="text-sm text-muted line-clamp-2">{{ item.description }}</p>
+          <p v-if="item.description" class="text-sm text-muted line-clamp-2">
+            {{ item.description }}
+          </p>
           <div class="flex flex-wrap items-center gap-2">
             <span v-if="item.images?.length" class="text-xs text-muted">
               {{ item.images.length }} image{{ item.images.length === 1 ? '' : 's' }}

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

@@ -19,10 +19,7 @@ function contrastColor(hex: string): string {
   <div v-if="colors.length" class="space-y-6">
     <h3 class="text-2xl font-semibold tracking-tight text-highlighted">Palette</h3>
     <LinksGroup class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
-      <div
-        v-for="color in colors"
-        :key="color.value"
-      >
+      <div v-for="color in colors" :key="color.value">
         <div
           class="aspect-2/3 flex flex-col justify-between p-4 rounded-lg border border-default/20 shadow-lg cursor-default"
           :style="{ backgroundColor: color.value, color: contrastColor(color.value) }"

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

@@ -5,7 +5,12 @@ const { slug } = defineProps<{
 </script>
 
 <template>
-  <NuxtContentDetail collection="portfolio" :slug not-found-message="Portfolio item not found" hide-toc>
+  <NuxtContentDetail
+    collection="portfolio"
+    :slug
+    not-found-message="Portfolio item not found"
+    hide-toc
+  >
     <template #headline="{ item }">
       <div class="flex flex-wrap items-center gap-2">
         <UBadge v-if="item.client" color="primary" variant="subtle">

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

@@ -9,7 +9,11 @@ const { data: items, status } = await usePortfolioItems(options)
 </script>
 
 <template>
-  <NuxtContentList :status="status" :has-items="!!items?.length" empty-message="No portfolio items found">
+  <NuxtContentList
+    :status="status"
+    :has-items="!!items?.length"
+    empty-message="No portfolio items found"
+  >
     <UPageGrid>
       <UPageCard
         v-for="item in items"

package/layers/content/app/components/content/Figure.vue

@@ -17,13 +17,7 @@ const {
 
 <template>
   <figure class="my-6">
-    <img
-      :src="src"
-      :alt="alt"
-      :width="width"
-      :height="height"
-      class="w-full rounded-lg"
-    />
+    <img :src="src" :alt="alt" :width="width" :height="height" class="w-full rounded-lg" />
     <figcaption v-if="caption" class="mt-2 text-center text-sm text-muted italic">
       {{ caption }}
     </figcaption>

package/layers/content/package.json

@@ -12,13 +12,13 @@
     "preview": "nuxt preview .playground"
   },
   "devDependencies": {
-    "@nuxt/content": "^3.11.0",
-    "nuxt-studio": "^1.2.0",
-    "zod": "^3.25.76",
-    "zod-to-json-schema": "^3.25.1"
+    "@nuxt/content": "^3.12.0",
+    "nuxt-studio": "^1.2.0"
   },
   "dependencies": {
-    "better-sqlite3": "^12.6.2"
+    "better-sqlite3": "^12.6.2",
+    "zod": "^4.3.6",
+    "zod-to-json-schema": "^3.25.1"
   },
   "peerDependencies": {
     "nuxt-studio": "^1.2.0"

package/layers/core/app/assets/css/main.css

@@ -1,3 +1,8 @@
+/* Define dark variant before Tailwind generates utilities so the selector
+   is established in a single pass, preventing a Tailwind v4 CSS regeneration
+   and the resulting HMR layout shift on first load. */
+@custom-variant dark (&:where([data-theme-mode="dark"], [data-theme-mode="dark"] *));
+
 @import 'tailwindcss';
 @import '@nuxt/ui';
 

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

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

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

@@ -75,7 +75,7 @@ export function useErrorLog() {
     }
 
     // Console logging (development only by default)
-    if (config.value.logToConsole && import.meta.dev) {
+    if (config.value.logToConsole && import.meta.dev && process.env.NODE_ENV === 'development') {
       // eslint-disable-next-line no-console
       console.group('🔴 Error Logged')
       // eslint-disable-next-line no-console
@@ -100,7 +100,9 @@ export function useErrorLog() {
 
     if (!externalUrl) {
       // eslint-disable-next-line no-console
-      console.warn('Error logging enabled but no externalUrl configured')
+      process.env.NODE_ENV === 'development'
+        ? console.warn('Error logging enabled but no externalUrl configured')
+        : ''
       return
     }
 
@@ -124,7 +126,9 @@ export function useErrorLog() {
       // Don't let logging errors crash the app
       if (import.meta.dev) {
         // eslint-disable-next-line no-console
-        console.error('Failed to send error to external service:', loggingError)
+        process.env.NODE_ENV === 'development'
+          ? console.error('Failed to send error to external service:', loggingError)
+          : ''
       }
     }
   }
@@ -135,7 +139,7 @@ export function useErrorLog() {
   const logWarning = (message: string, context?: ErrorContext) => {
     if (config.value.logToConsole && import.meta.dev) {
       // eslint-disable-next-line no-console
-      console.warn('⚠️  Warning:', message, context)
+      process.env.NODE_ENV === 'development' ? console.warn('⚠️  Warning:', message, context) : ''
     }
   }
 
@@ -145,7 +149,7 @@ export function useErrorLog() {
   const logInfo = (message: string, data?: unknown) => {
     if (config.value.logToConsole && import.meta.dev) {
       // eslint-disable-next-line no-console
-      console.log('ℹ️  Info:', message, data)
+      process.env.NODE_ENV === 'development' ? console.log('ℹ️  Info:', message, data) : ''
     }
   }
 

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

@@ -1,7 +1,7 @@
 // composables/useScrollGuard.ts
 
-import { debounce } from '#layers/core/app/utils/helpers'
 import type { ScrollGuardConfig } from '#layers/core/app/types/scroll-guard'
+import { debounce } from '#layers/core/app/utils/helpers'
 
 /**
  * Original inline styles stored per element so we can restore them on disable
@@ -198,7 +198,9 @@ export function useScrollGuard() {
 
     // Resolve config: explicit arg → app.config → defaults
     const appConfig = useAppConfig()
-    const configFromApp = (appConfig.coreLayer as { scrollGuard?: Partial<ScrollGuardConfig> } | undefined)?.scrollGuard
+    const configFromApp = (
+      appConfig.coreLayer as { scrollGuard?: Partial<ScrollGuardConfig> } | undefined
+    )?.scrollGuard
 
     opts = {
       enabled: true,

package/layers/core/app/plugins/feature-detection.client.ts

@@ -15,7 +15,7 @@ export default defineNuxtPlugin(() => {
   // Initialize feature detection
   const features = useFeatures()
 
-  if (import.meta.dev) {
+  if (import.meta.dev && process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line no-console
     console.log('[Feature Detection] Initialized:', {
       grid: features.grid.value,

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

@@ -11,7 +11,8 @@
  */
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useAppConfig()
-  const isDev = import.meta.dev
+  // const isDev = import.meta.dev
+  const isDev = process.env.NODE_ENV === 'development' ? true : false
 
   // ============================================================
   // 1. Log initialization (dev only)

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

@@ -41,7 +41,10 @@ export default defineNuxtPlugin(() => {
     console.log('[Scroll Guard] Initialized', {
       strict: coreLayer?.scrollGuard?.strict ?? true,
       debug: coreLayer?.scrollGuard?.debug ?? false,
-      excludeSelectors: coreLayer?.scrollGuard?.excludeSelectors ?? ['.carousel', '.overflow-intent'],
+      excludeSelectors: coreLayer?.scrollGuard?.excludeSelectors ?? [
+        '.carousel',
+        '.overflow-intent',
+      ],
     })
 
     // Log clamped count after initial scan settles

package/layers/core/app.config.ts

@@ -182,12 +182,3 @@ declare module '@nuxt/schema' {
     }
   }
 }
-
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    coreLayer?: {
-      /** Project name */
-      name?: string
-    }
-  }
-}

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

@@ -24,14 +24,23 @@ const state = reactive<Partial<FormState>>({
 })
 
 const toast = useToast()
+const isLoading = ref(false)
 
 async function onSubmit(event: FormSubmitEvent<FormState>) {
-  toast.add({
-    title: 'Success',
-    description: 'The form has been submitted.',
-    color: 'success',
-  })
-  emit('submit', event.data)
+  isLoading.value = true
+  try {
+    await $fetch('/api/contact', { method: 'POST', body: event.data })
+    toast.add({ title: 'Message sent!', description: 'Thanks for reaching out.', color: 'success' })
+    emit('submit', event.data)
+  } catch {
+    toast.add({
+      title: 'Something went wrong',
+      description: 'Please try again later.',
+      color: 'error',
+    })
+  } finally {
+    isLoading.value = false
+  }
 }
 
 async function onError() {
@@ -73,6 +82,6 @@ async function onError() {
       class="w-full"
     />
 
-    <UButton type="submit" size="xl"> Submit </UButton>
+    <UButton type="submit" size="xl" :loading="isLoading" :disabled="isLoading"> Submit </UButton>
   </UForm>
 </template>

package/layers/forms/nuxt.config.ts

@@ -10,8 +10,26 @@ export default defineNuxtConfig({
 
   compatibilityDate: '2026-01-24',
 
+  runtimeConfig: {
+    formsLayer: {
+      resendApiKey: '', // env: NUXT_FORMS_LAYER_RESEND_API_KEY
+      emailFrom: 'contact@example.com', // env: NUXT_FORMS_LAYER_EMAIL_FROM
+      emailTo: '', // env: NUXT_FORMS_LAYER_EMAIL_TO
+    },
+  },
+
   typescript: {
     typeCheck: true,
     strict: true,
   },
 })
+
+declare module '@nuxt/schema' {
+  interface RuntimeConfig {
+    formsLayer?: {
+      resendApiKey: string
+      emailFrom: string
+      emailTo: string
+    }
+  }
+}

package/layers/forms/package.json

@@ -11,6 +11,8 @@
     "preview": "nuxt preview .playground"
   },
   "dependencies": {
+    "hookable": "^5.5.3",
+    "resend": "^4.0.0",
     "zod": "^3.24.2"
   }
 }

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

@@ -40,10 +40,7 @@ const sizeClass: Record<GridContainerSize, string> = {
 </script>
 
 <template>
-  <component
-    :is="tag"
-    :class="sizeClass[size]"
-  >
+  <component :is="tag" :class="sizeClass[size]">
     <slot />
   </component>
 </template>

package/layers/layout/app/components/Layout/Grid/Debug.vue

@@ -75,4 +75,3 @@ defineExpose({ toggle })
     </div>
   </Teleport>
 </template>
-

package/layers/layout/app/components/Layout/Grid/Item.vue

@@ -101,7 +101,7 @@ const getDefaultValue = <T,>(value: T | ResponsiveValue<T> | undefined, defaultV
 
 const getResponsiveValue = <T,>(
   value: T | ResponsiveValue<T> | undefined,
-  breakpoint: 'md' | 'lg',
+  breakpoint: 'md' | 'lg'
 ): T | undefined => {
   if (value === undefined) return undefined
   if (typeof value === 'object' && value !== null && 'default' in value) {
@@ -114,7 +114,10 @@ const style = computed(() => {
   const styles: Record<string, string> = {}
 
   const colStartVal = getDefaultValue(colStart.value, undefined)
-  const colSpanVal = getDefaultValue(colSpan.value as ColSpanValue | ResponsiveValue<number> | undefined, 'full' as ColSpanValue)
+  const colSpanVal = getDefaultValue(
+    colSpan.value as ColSpanValue | ResponsiveValue<number> | undefined,
+    'full' as ColSpanValue
+  )
   const rowStartVal = getDefaultValue(rowStart.value, undefined)
   const rowSpanVal = getDefaultValue(rowSpan.value, 1)
 
@@ -208,22 +211,25 @@ const classes = computed(() => {
 </template>
 
 <style>
+/* stylelint-disable custom-property-pattern */
 .gi-placed {
-  grid-column: var(--_cs, auto) / span var(--_ce, 1);
   grid-row: var(--_rs, auto) / span var(--_re, 1);
+  grid-column: var(--_cs, auto) / span var(--_ce, 1);
 }
 
 @media (width >= 48rem) {
   .gi-placed {
-    grid-column: var(--_md-cs, var(--_cs, auto)) / span var(--_md-ce, var(--_ce, 1));
     grid-row: var(--_md-rs, var(--_rs, auto)) / span var(--_md-re, var(--_re, 1));
+    grid-column: var(--_md-cs, var(--_cs, auto)) / span var(--_md-ce, var(--_ce, 1));
   }
 }
 
 @media (width >= 80rem) {
   .gi-placed {
-    grid-column: var(--_lg-cs, var(--_md-cs, var(--_cs, auto))) / span var(--_lg-ce, var(--_md-ce, var(--_ce, 1)));
-    grid-row: var(--_lg-rs, var(--_md-rs, var(--_rs, auto))) / span var(--_lg-re, var(--_md-re, var(--_re, 1)));
+    grid-row: var(--_lg-rs, var(--_md-rs, var(--_rs, auto))) / span
+      var(--_lg-re, var(--_md-re, var(--_re, 1)));
+    grid-column: var(--_lg-cs, var(--_md-cs, var(--_cs, auto))) / span
+      var(--_lg-ce, var(--_md-ce, var(--_ce, 1)));
   }
 }
 </style>

package/layers/layout/app/components/Layout/Main.vue

@@ -27,10 +27,7 @@ const { mode } = useGridConfig()
 </script>
 
 <template>
-  <component
-    :is="tag"
-    :class="mode !== 'disabled' ? 'mastmain' : undefined"
-  >
+  <component :is="tag" :class="mode !== 'disabled' ? 'mastmain' : undefined">
     <slot />
   </component>
 </template>

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

@@ -44,6 +44,7 @@ interface Props {
   showHeader?: boolean
   headerPreset?: string
   layout?: 'grid' | 'upage'
+  back?: string
 }
 
 const {
@@ -52,6 +53,7 @@ const {
   showHeader = true,
   headerPreset = 'centered',
   layout = 'grid',
+  back,
 } = defineProps<Props>()
 
 // Set page metadata for SEO and browser tab
@@ -76,7 +78,7 @@ provide('pageTitle', title)
     <!-- Optional visible header -->
     <LayoutSection v-if="showHeader">
       <LayoutGridItem :preset="headerPreset">
-        <LayoutPageHeader :title :description />
+        <LayoutPageHeader :title :description :back />
       </LayoutGridItem>
     </LayoutSection>
 

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

@@ -18,16 +18,27 @@
 interface Props {
   title: string
   description?: string
+  back?: string
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <div class="prose-rhythm text-center">
-    <h1 class="text-5xl font-bold">{{ title }}</h1>
-    <p v-if="description" class="text-xl text-gray-600 dark:text-gray-400">
-      {{ description }}
-    </p>
+  <div :class="back ? 'flex items-center gap-4 py-6' : 'py-10 text-center'">
+    <!-- Sub-page: back button + title -->
+    <template v-if="back">
+      <UButton :to="back" variant="ghost" icon="i-lucide-arrow-left" />
+      <div>
+        <h1 class="text-3xl font-bold text-highlighted">{{ title }}</h1>
+        <p v-if="description" class="text-muted">{{ description }}</p>
+      </div>
+    </template>
+
+    <!-- Centered page header (homepage, section intros) -->
+    <template v-else>
+      <h1 class="text-4xl font-bold text-highlighted">{{ title }}</h1>
+      <p v-if="description" class="mt-3 text-lg text-muted">{{ description }}</p>
+    </template>
   </div>
 </template>

package/layers/layout/app/components/Layout/Section/Grid.vue

@@ -29,10 +29,7 @@ const { minItemWidth = '200px', fullHeight = false } = defineProps<Props>()
 <template>
   <LayoutSection :full-height>
     <LayoutGridItem>
-      <div
-        class="ram-grid"
-        :style="{ '--min-item-width': minItemWidth }"
-      >
+      <div class="ram-grid" :style="{ '--min-item-width': minItemWidth }">
         <slot />
       </div>
     </LayoutGridItem>

package/layers/layout/app/components/Layout/Section/Sidebar.vue

@@ -27,7 +27,12 @@ interface Props {
   fullHeight?: boolean
 }
 
-const { sidebarMin = '150px', sidebarMax = '25%', reverse = false, fullHeight = false } = defineProps<Props>()
+const {
+  sidebarMin = '150px',
+  sidebarMax = '25%',
+  reverse = false,
+  fullHeight = false,
+} = defineProps<Props>()
 </script>
 
 <template>

package/layers/layout/app/components/Layout/Section/Stack.vue

@@ -48,8 +48,8 @@ const { fullHeight = true } = defineProps<Props>()
 .stack-inner {
   display: grid;
   grid-template-rows: auto 1fr auto;
-  height: 100%;
   width: 100%;
+  height: 100%;
 }
 
 .stack-header,

package/layers/layout/app/components/Layout/Section/Title.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * PageHeader - Standard page header component
+ *
+ * Displays a centered page title and optional description with consistent spacing.
+ * Used by PageContainer for visible page headers.
+ *
+ * @prop {string} title - Page title (displays as h1)
+ * @prop {string} description - Optional page description
+ *
+ * @example
+ * <LayoutSectionTitle
+ *   title="About Us"
+ *   description="Learn about our company and mission"
+ * />
+ */
+
+interface Props {
+  title: string
+  description?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <LayoutGridItem class="prose-rhythm text-center" align="start" justify="center">
+    <h1 class="text-5xl font-bold">{{ title }}</h1>
+    <p v-if="description" class="text-xl text-gray-600 dark:text-gray-400">
+      {{ description }}
+    </p>
+  </LayoutGridItem>
+</template>

package/layers/layout/app/composables/useGridConfig.ts

@@ -1,4 +1,9 @@
-import type { GridConfig, GridLayers, GridMode, GridPresetsItem } from '#layers/layout/app/types/layouts'
+import type {
+  GridConfig,
+  GridLayers,
+  GridMode,
+  GridPresetsItem,
+} from '#layers/layout/app/types/layouts'
 
 interface LayoutLayerConfig {
   layoutLayer?: {