kmcom-nuxt-layers 1.7.3 → 1.7.5

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

@@ -12,7 +12,7 @@ const asBlog = (item: unknown) => item as BlogCollectionItem
   <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="asBlog(item).date">{{ new Date(asBlog(item).date).toLocaleDateString() }}</time>
+        <time v-if="asBlog(item).date">{{ new Date(asBlog(item).date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}</time>
         <UBadge v-if="asBlog(item).badge" color="primary" variant="subtle">
           {{ asBlog(item).badge }}
         </UBadge>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { contentLayer } = useAppConfig()
+if (contentLayer?.sections?.gallery === false) {
+  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+}
+
+const { slug, index } = defineProps<{
+  slug: string
+  index: number
+}>()
+</script>
+
+<template>
+  <LayoutSection>
+    <LayoutGridItem>
+      <GalleryImageDetail :slug :index />
+    </LayoutGridItem>
+  </LayoutSection>
+</template>

package/layers/content/app/{pages/gallery/index.vue → components/Gallery/Page.vue}

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-  const { contentLayer } = useAppConfig()
-  if (contentLayer?.sections?.gallery === false) {
-    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-  }
+const { contentLayer } = useAppConfig()
+if (contentLayer?.sections?.gallery === false) {
+  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+}
 
-  useSeoMeta({
-    title: 'Gallery',
-    description: 'Photo collections and visual work',
-  })
+useSeoMeta({
+  title: 'Gallery',
+  description: 'Photo collections and visual work',
+})
 </script>
 
 <template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const { contentLayer } = useAppConfig()
+if (contentLayer?.sections?.gallery === false) {
+  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+}
+
+const { slug } = defineProps<{
+  slug: string
+}>()
+</script>
+
+<template>
+  <LayoutSection>
+    <LayoutGridItem>
+      <GalleryDetail :slug />
+    </LayoutGridItem>
+  </LayoutSection>
+</template>

package/layers/core/app/{pages/diagnostics.vue → components/DiagnosticsPage.vue}

@@ -27,14 +27,13 @@ useSeoMeta({
 <template>
   <div class="min-h-screen p-8">
     <UContainer>
+      <ClientOnly>
       <div class="space-y-8">
-        <!-- Header -->
         <div class="text-center">
           <h1 class="text-4xl font-bold mb-2">Core Layer Diagnostics</h1>
           <p class="text-gray-500 dark:text-gray-400">Feature detection and system information</p>
         </div>
 
-        <!-- CSS Features -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">CSS Features</h2>
@@ -73,7 +72,6 @@ useSeoMeta({
           </div>
         </UCard>
 
-        <!-- Image Formats -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">Image Formats</h2>
@@ -92,7 +90,6 @@ useSeoMeta({
           </div>
         </UCard>
 
-        <!-- JavaScript APIs -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">JavaScript APIs</h2>
@@ -121,7 +118,6 @@ useSeoMeta({
           </div>
         </UCard>
 
-        <!-- Device Info -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">Device Information</h2>
@@ -136,7 +132,6 @@ useSeoMeta({
           </div>
         </UCard>
 
-        <!-- Network Info -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">Network Information</h2>
@@ -177,7 +172,6 @@ useSeoMeta({
           </div>
         </UCard>
 
-        <!-- Rendering Info -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">Rendering Information</h2>
@@ -200,7 +194,6 @@ useSeoMeta({
           </div>
         </UCard>
 
-        <!-- PWA Info -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">PWA Information</h2>
@@ -223,6 +216,11 @@ useSeoMeta({
           </div>
         </UCard>
       </div>
+
+        <template #fallback>
+          <div class="text-center text-muted py-16">Loading diagnostics…</div>
+        </template>
+      </ClientOnly>
     </UContainer>
   </div>
 </template>

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     /**
@@ -48,7 +50,7 @@ const percentage = computed(() => Math.round(progress.value * 100))
 
 <template>
   <!-- Linear Progress -->
-  <div v-if="type === 'linear'" class="motion-scroll-progress-linear">
+  <div v-if="type === 'linear'" class="motion-scroll-progress-linear" v-bind="$attrs">
     <div
       class="w-full rounded-full overflow-hidden"
       :style="{ height: `${height}px`, backgroundColor: bgColor }"
@@ -69,6 +71,7 @@ const percentage = computed(() => Math.round(progress.value * 100))
   <!-- Circular Progress -->
   <ProgressCircular
     v-else
+    v-bind="$attrs"
     :progress="progress"
     :size
     :stroke-width="strokeWidth"

package/layers/shader/app/components/Shader/Pipeline.client.vue

@@ -2,7 +2,7 @@
 // @ts-nocheck - TSL types are complex
 import { DoubleSide } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { float, positionLocal, uv, vec3, vec4 } from 'three/tsl'
+import { float, Fn, positionLocal, uv, vec3, vec4 } from 'three/tsl'
 
 const { transparent = false } = defineProps<{
   transparent?: boolean
@@ -28,18 +28,16 @@ watch(
     const vertex = pipeline.stagesFor('vertex')
     const ray = pipeline.stagesFor('ray')
 
-    // UV chain — generators read pipeline.uvNode.value in their stage fn closures
-    pipeline.uvNode.value = uvStages.reduce((node, { fn }) => fn(node), uv())
-
-    // Ray chain — sky/tunnel generators read pipeline.rayNode.value in their closures
-    pipeline.rayNode.value = ray.reduce((node, { fn }) => fn(node), screenRayNode)
-
-    // Fragment chain
-    material.colorNode = fragment.reduce((node, { fn }) => fn(node), vec4(0, 0, 0, 1))
+    // Wrap each chain in Fn() so TSL .toVar()/.assign() ops (used by noise functions
+    // like simplexNoise3d) have a valid stack context. Without this, TSL throws
+    // "No stack defined for assign operation".
+    pipeline.uvNode.value = Fn(() => uvStages.reduce((node, { fn }) => fn(node), uv()))()
+    pipeline.rayNode.value = Fn(() => ray.reduce((node, { fn }) => fn(node), screenRayNode))()
+    material.colorNode = Fn(() => fragment.reduce((node, { fn }) => fn(node), vec4(0, 0, 0, 1)))()
     material.needsUpdate = true
 
     if (vertex.length > 0) {
-      material.positionNode = vertex.reduce((node, { fn }) => fn(node), positionLocal)
+      material.positionNode = Fn(() => vertex.reduce((node, { fn }) => fn(node), positionLocal))()
       material.needsUpdate = true
     }
   },

package/layers/theme/app/composables/useAccentColor.ts

@@ -1,17 +1,23 @@
-import { createSharedComposable, useLocalStorage } from '@vueuse/core'
+import { createSharedComposable } from '@vueuse/core'
 import type { AccentColor } from '#layers/theme/app/types/theme'
 
 export const useAccentColor = createSharedComposable(() => {
   const appConfig = useAppConfig()
-
   const defaultAccent = (appConfig.themeLayer?.defaultAccent ?? 'blue') as AccentColor
-  const accent = useLocalStorage<AccentColor>('theme-colour', defaultAccent)
+
+  // useState ensures server value is serialized into the Nuxt payload and reused
+  // during hydration, avoiding a mismatch with localStorage (client-only).
+  // theme.client.ts reads localStorage after hydration and calls setAccent.
+  const accent = useState<AccentColor>('theme-accent', () => defaultAccent)
 
   const pageAccent = ref<AccentColor | null>(null)
   const activeAccent = computed<AccentColor>(() => pageAccent.value ?? accent.value)
 
   function setAccent(color: AccentColor) {
     accent.value = color
+    if (import.meta.client) {
+      localStorage.setItem('theme-colour', color)
+    }
   }
 
   function setPageAccent(color: AccentColor | null) {

package/layers/theme/app/composables/useThemeContrast.ts

@@ -1,8 +1,8 @@
-import { createSharedComposable, useLocalStorage, usePreferredContrast } from '@vueuse/core'
+import { createSharedComposable, usePreferredContrast } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
 export const useThemeContrast = createSharedComposable(() => {
-  const contrastOverride = useLocalStorage<PreferenceOverride>('theme-contrast', 'system')
+  const contrastOverride = useState<PreferenceOverride>('theme-contrast', () => 'system')
   const systemContrast = usePreferredContrast()
 
   const effectiveHighContrast = computed(() => {
@@ -13,6 +13,9 @@ export const useThemeContrast = createSharedComposable(() => {
 
   function setContrastOverride(value: PreferenceOverride) {
     contrastOverride.value = value
+    if (import.meta.client) {
+      localStorage.setItem('theme-contrast', value)
+    }
   }
 
   return {

package/layers/theme/app/composables/useThemeMotion.ts

@@ -1,8 +1,8 @@
-import { createSharedComposable, useLocalStorage, usePreferredReducedMotion } from '@vueuse/core'
+import { createSharedComposable, usePreferredReducedMotion } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
 export const useThemeMotion = createSharedComposable(() => {
-  const motionOverride = useLocalStorage<PreferenceOverride>('theme-motion', 'system')
+  const motionOverride = useState<PreferenceOverride>('theme-motion', () => 'system')
   const systemMotion = usePreferredReducedMotion()
 
   const effectiveReducedMotion = computed(() => {
@@ -13,6 +13,9 @@ export const useThemeMotion = createSharedComposable(() => {
 
   function setMotionOverride(value: PreferenceOverride) {
     motionOverride.value = value
+    if (import.meta.client) {
+      localStorage.setItem('theme-motion', value)
+    }
   }
 
   return {

package/layers/theme/app/composables/useThemeTransparency.ts

@@ -1,12 +1,11 @@
 import {
   createSharedComposable,
-  useLocalStorage,
   usePreferredReducedTransparency,
 } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
 export const useThemeTransparency = createSharedComposable(() => {
-  const transparencyOverride = useLocalStorage<PreferenceOverride>('theme-transparency', 'system')
+  const transparencyOverride = useState<PreferenceOverride>('theme-transparency', () => 'system')
   const systemTransparency = usePreferredReducedTransparency()
 
   const effectiveReducedTransparency = computed(() => {
@@ -17,6 +16,9 @@ export const useThemeTransparency = createSharedComposable(() => {
 
   function setTransparencyOverride(value: PreferenceOverride) {
     transparencyOverride.value = value
+    if (import.meta.client) {
+      localStorage.setItem('theme-transparency', value)
+    }
   }
 
   return {

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

@@ -1,8 +1,25 @@
+import type { AccentColor, PreferenceOverride } from '#layers/theme/app/types/theme'
+
 export default defineNuxtPlugin(() => {
-  const { activeAccent } = useAccentColor()
-  const { effectiveHighContrast } = useThemeContrast()
-  const { effectiveReducedMotion } = useThemeMotion()
-  const { effectiveReducedTransparency } = useThemeTransparency()
+  const { setAccent, activeAccent } = useAccentColor()
+  const { setContrastOverride, effectiveHighContrast } = useThemeContrast()
+  const { setMotionOverride, effectiveReducedMotion } = useThemeMotion()
+  const { setTransparencyOverride, effectiveReducedTransparency } = useThemeTransparency()
+
+  // Restore persisted preferences. useState defaults were serialized from the
+  // server, so hydration matches. We update to the stored values here, after
+  // hydration completes, to avoid any mismatch.
+  const storedAccent = localStorage.getItem('theme-colour')
+  if (storedAccent) setAccent(storedAccent as AccentColor)
+
+  const storedContrast = localStorage.getItem('theme-contrast')
+  if (storedContrast) setContrastOverride(storedContrast as PreferenceOverride)
+
+  const storedMotion = localStorage.getItem('theme-motion')
+  if (storedMotion) setMotionOverride(storedMotion as PreferenceOverride)
+
+  const storedTransparency = localStorage.getItem('theme-transparency')
+  if (storedTransparency) setTransparencyOverride(storedTransparency as PreferenceOverride)
 
   watch(activeAccent, (color) => {
     document.documentElement.setAttribute('data-theme-colour', color)

package/layers/ui/app/components/Mast/Footer.vue

@@ -1,9 +1,13 @@
+<script setup lang="ts">
+const year = useState('footer-year', () => new Date().getFullYear())
+</script>
+
 <template>
   <UFooter>
     <template #bottom>
       <div class="pt-10">
         <p class="text-center text-sm text-neutral-300">
-          Copyright © {{ new Date().getFullYear() }}
+          Copyright © {{ year }}
         </p>
       </div>
     </template>

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

@@ -20,7 +20,7 @@ const radius = computed(() => (size - strokeWidth) / 2)
 const circumference = computed(() => 2 * Math.PI * radius.value)
 const strokeDasharray = computed(() => `${progress * circumference.value} ${circumference.value}`)
 
-const gradientId = `progress-circular-gradient-${Math.random().toString(36).slice(2, 9)}`
+const gradientId = `progress-circular-gradient-${useId()}`
 </script>
 
 <template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -140,7 +140,7 @@
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-unicorn": "^64.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "eslint-plugin-vue": "^10.9.1",
+    "eslint-plugin-vue": "^10.9.2",
     "netlify-cli": "^26.1.0",
     "npm-check-updates": "^22.2.1",
     "nuxt": "^4.4.7",

package/layers/content/app/pages/gallery/[slug]/[imageId].vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-  const { contentLayer } = useAppConfig()
-  if (contentLayer?.sections?.gallery === false) {
-    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-  }
-
-  const route = useRoute()
-  const slug = route.params.slug as string
-  const index = Number(route.params.imageId)
-</script>
-
-<template>
-  <LayoutSection>
-    <LayoutGridItem>
-      <GalleryImageDetail :slug="slug" :index="index" />
-    </LayoutGridItem>
-  </LayoutSection>
-</template>

package/layers/content/app/pages/gallery/[slug]/index.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-  const { contentLayer } = useAppConfig()
-  if (contentLayer?.sections?.gallery === false) {
-    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-  }
-
-  const route = useRoute()
-  const slug = route.params.slug as string
-</script>
-
-<template>
-  <LayoutSection>
-    <LayoutGridItem>
-      <GalleryDetail :slug="slug" />
-    </LayoutGridItem>
-  </LayoutSection>
-</template>

package/layers/ui/app/pages/index.vue

@@ -1,236 +0,0 @@
-<script setup lang="ts">
-const umainRef = ref()
-</script>
-
-<template>
-  <MastMain :umain="umainRef">
-    <UContainer class="py-12 space-y-12">
-      <!-- Header Section -->
-      <div class="space-y-4">
-        <SiteTitle site-title="UI Layer" tag="h1" title-variant="default" />
-        <Typography
-          tag="p"
-          weight="font-normal"
-          leading="leading-relaxed"
-          color="muted"
-          class="text-lg"
-        >
-          A unified, typed design system for Nuxt applications. This layer provides typography,
-          colors, media handling, and reusable UI primitives.
-        </Typography>
-      </div>
-
-      <!-- Typography Section -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted">
-          Typography Components
-        </TypographyHeadline>
-
-        <div class="space-y-4">
-          <div class="space-y-2">
-            <TypographyHeadline :level="1"> Headline Level 1 </TypographyHeadline>
-            <TypographyHeadline :level="2"> Headline Level 2 </TypographyHeadline>
-            <TypographyHeadline :level="3"> Headline Level 3 </TypographyHeadline>
-            <TypographyHeadline :level="4"> Headline Level 4 </TypographyHeadline>
-          </div>
-
-          <Typography tag="p" leading="leading-relaxed">
-            The Typography component provides full control over font weight, width, slant, leading,
-            tracking, alignment, and text transformation through typed props.
-          </Typography>
-
-          <TypographyCodeBlock language="typescript" color="muted">
-            &lt;Typography weight="font-bold" leading="leading-tight" tracking="tracking-tight" &gt;
-            Fully typed typography &lt;/Typography&gt;</TypographyCodeBlock
-          >
-        </div>
-      </section>
-
-      <!-- Color System Section -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted"> Color System </TypographyHeadline>
-
-        <div class="space-y-4">
-          <div>
-            <Typography tag="h3" weight="font-semibold" class="mb-2"> Semantic Colors </Typography>
-            <div class="flex flex-wrap gap-2">
-              <Typography
-                color="dimmed"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Dimmed
-              </Typography>
-              <Typography
-                color="muted"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Muted
-              </Typography>
-              <Typography
-                color="toned"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Toned
-              </Typography>
-              <Typography
-                color="highlighted"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Highlighted
-              </Typography>
-            </div>
-          </div>
-
-          <div>
-            <Typography tag="h3" weight="font-semibold" class="mb-2"> Status Colors </Typography>
-            <div class="flex flex-wrap gap-2">
-              <Typography color="info" class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded">
-                Info
-              </Typography>
-              <Typography
-                color="success"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Success
-              </Typography>
-              <Typography
-                color="warning"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Warning
-              </Typography>
-              <Typography
-                color="error"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Error
-              </Typography>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Components Section -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted">
-          Available Components
-        </TypographyHeadline>
-
-        <div class="grid md:grid-cols-2 gap-6">
-          <UCard>
-            <template #header>
-              <TypographyHeadline :level="3"> Typography </TypographyHeadline>
-            </template>
-            <div class="space-y-2">
-              <Typography tag="p" color="muted" leading="leading-relaxed">
-                Base component with full control over font properties
-              </Typography>
-              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
-                <li>Typography (base)</li>
-                <li>Headline (h1-h6)</li>
-                <li>CodeBlock</li>
-                <li>QuoteBlock</li>
-              </ul>
-            </div>
-          </UCard>
-
-          <UCard>
-            <template #header>
-              <TypographyHeadline :level="3"> Links </TypographyHeadline>
-            </template>
-            <div class="space-y-2">
-              <Typography tag="p" color="muted" leading="leading-relaxed">
-                Type-safe navigation with named routes
-              </Typography>
-              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
-                <li>Named route enforcement</li>
-                <li>Color support</li>
-                <li>ULink wrapper</li>
-              </ul>
-            </div>
-          </UCard>
-
-          <UCard>
-            <template #header>
-              <TypographyHeadline :level="3"> Media </TypographyHeadline>
-            </template>
-            <div class="space-y-2">
-              <Typography tag="p" color="muted" leading="leading-relaxed">
-                Responsive image handling with optimization
-              </Typography>
-              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
-                <li>Picture component</li>
-                <li>Multiple formats (avif, webp)</li>
-                <li>Responsive sizing</li>
-                <li>Lazy loading</li>
-              </ul>
-            </div>
-          </UCard>
-
-          <UCard>
-            <template #header>
-              <TypographyHeadline :level="3"> Branding </TypographyHeadline>
-            </template>
-            <div class="space-y-2">
-              <Typography tag="p" color="muted" leading="leading-relaxed">
-                Site branding and structure components
-              </Typography>
-              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
-                <li>Masthead/Main wrapper</li>
-                <li>Site Title with variants</li>
-                <li>Semantic HTML structure</li>
-              </ul>
-            </div>
-          </UCard>
-        </div>
-      </section>
-
-      <!-- Quote Example -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted"> Quote Block </TypographyHeadline>
-
-        <TypographyQuoteBlock color="muted" class="border-l-4 border-primary pl-4 italic">
-          A unified, typed design system that provides consistency across projects while maintaining
-          flexibility for customization.
-        </TypographyQuoteBlock>
-      </section>
-
-      <!-- Features List -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted"> Key Features </TypographyHeadline>
-
-        <div class="grid md:grid-cols-3 gap-4">
-          <div class="space-y-2">
-            <Typography weight="font-semibold" color="primary"> Fully Typed </Typography>
-            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
-              Complete TypeScript coverage with semantic types for typography, colors, and
-              breakpoints
-            </Typography>
-          </div>
-
-          <div class="space-y-2">
-            <Typography weight="font-semibold" color="primary"> Composable First </Typography>
-            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
-              Built on Vue composables (useTypography, useColor, usePicture) for maximum reusability
-            </Typography>
-          </div>
-
-          <div class="space-y-2">
-            <Typography weight="font-semibold" color="primary"> Responsive Ready </Typography>
-            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
-              Comprehensive breakpoint system supporting Tailwind, device, phone, and tablet
-              breakpoints
-            </Typography>
-          </div>
-        </div>
-      </section>
-
-      <!-- Footer -->
-      <footer class="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-        <Typography tag="p" color="dimmed" align="center" class="text-sm">
-          UI Layer - A reusable design system for Nuxt
-        </Typography>
-      </footer>
-    </UContainer>
-  </MastMain>
-</template>