kmcom-nuxt-layers 1.7.8 → 2.1.6

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

@@ -1,30 +1,32 @@
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-/**
- * LayoutSectionStack — Pancake Stack layout
- *
- * Full-section wrapper using `auto 1fr auto` row template. Header and footer
- * take natural height; the default slot fills the remaining space.
- *
- * @prop {boolean} fullHeight - Force 100svh on the section (default: true)
- *
- * @slot header - Top-pinned content (auto height)
- * @slot default - Main content area (fills remaining space)
- * @slot footer - Bottom-pinned content (auto height)
- *
- * @example
- * <LayoutSectionStack>
- *   <template #header><nav>...</nav></template>
- *   <main>Content</main>
- *   <template #footer><footer>...</footer></template>
- * </LayoutSectionStack>
- */
+  // @ts-nocheck
+  /**
+   * LayoutSectionStack — Pancake Stack layout
+   *
+   * Full-section wrapper using `auto 1fr auto` row template. Header and footer
+   * take natural height; the default slot fills the remaining space.
+   *
+   * @prop {boolean} fullHeight - Force 100svh on the section (default: true)
+   *
+   * @slot header - Top-pinned content (auto height)
+   * @slot default - Main content area (fills remaining space)
+   * @slot footer - Bottom-pinned content (auto height)
+   *
+   * @example
+   * <LayoutSectionStack>
+   *   <template #header><nav>...</nav></template>
+   *   <main>Content</main>
+   *   <template #footer><footer>...</footer></template>
+   * </LayoutSectionStack>
+   */
 
-interface Props {
-  fullHeight?: boolean
-}
+  interface Props {
+    fullHeight?: boolean
+  }
 
-const { fullHeight = true } = defineProps<Props>()
+  const { fullHeight = true } = defineProps<Props>()
 </script>
 
 <template>
@@ -46,19 +48,19 @@ const { fullHeight = true } = defineProps<Props>()
 </template>
 
 <style scoped>
-.stack-inner {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  width: 100%;
-  height: 100%;
-}
+  .stack-inner {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    width: 100%;
+    height: 100%;
+  }
 
-.stack-header,
-.stack-footer {
-  /* auto — natural height */
-}
+  .stack-header,
+  .stack-footer {
+    /* auto — natural height */
+  }
 
-.stack-main {
-  /* 1fr — grows to fill remaining space */
-}
+  .stack-main {
+    /* 1fr — grows to fill remaining space */
+  }
 </style>

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

@@ -1,26 +1,27 @@
+<!-- eslint-disable vue/define-props-destructuring -->
 <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"
- * />
- */
+  /**
+   * 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
-}
+  interface Props {
+    title: string
+    description?: string
+  }
 
-defineProps<Props>()
+  defineProps<Props>()
 </script>
 
 <template>

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

@@ -11,7 +11,7 @@
  * const { style } = useGridPlacement({ colStart: 2, colSpan: 10 })
  */
 
-interface GridPlacement {
+type GridPlacement = {
   colStart?: number
   colSpan?: number
   rowStart?: number

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type {
   GridConfig,
   GridLayers,
@@ -5,7 +6,7 @@ import type {
   GridPresetsItem,
 } from '#layers/layout/app/types/layouts'
 
-interface LayoutLayerConfig {
+type LayoutLayerConfig = {
   layoutLayer?: {
     name?: string
     ui?: {

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

@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
 declare module '@nuxt/schema' {
-  interface AppConfigInput {
+  type AppConfigInput = {
     layoutLayer?: {
       name?: string
       ui?: {

package/layers/layout/app/types/layouts.ts

@@ -1,4 +1,4 @@
-export interface ResponsiveValue<T> {
+export type ResponsiveValue<T> = {
   default: T
   sm?: T
   md?: T
@@ -6,7 +6,7 @@ export interface ResponsiveValue<T> {
   xl?: T
 }
 
-export interface GridLayers {
+export type GridLayers = {
   /** Component/content at rest — z-index 0 */
   back: number
   /** Standard interactive content — z-index 10 */
@@ -31,7 +31,7 @@ export type GridContainerSize = 'content' | 'wide' | 'fluid' | 'full'
 export type GridDensity = 'compact' | 'normal' | 'relaxed' // relaxed = 0.5rem --rhythm base
 export type GridMode = 'swiss' | 'fluid' | 'disabled'
 
-export interface GridPresetsItem {
+export type GridPresetsItem = {
   colStart?: number | ResponsiveValue<number>
   colSpan: number | 'full' | ResponsiveValue<number>
   rowStart?: number | ResponsiveValue<number>
@@ -50,7 +50,7 @@ export interface GridPresetsItem {
 
 export type GridPresets = Record<string, GridPresetsItem>
 
-export interface GridConfig {
+export type GridConfig = {
   /**
    * Layout mode.
    * - `'swiss'`    — Swiss Grid System (default)

package/layers/layout/nuxt.config.ts

@@ -4,8 +4,11 @@ export default defineNuxtConfig({
     name: 'layout',
   },
 
+  extends: ['../core'],
+
   alias: {
     '#layers/layout': import.meta.dirname,
+    '#layers/layout/types': `${import.meta.dirname}/app/types`,
   },
 
   css: ['#layers/layout/app/assets/css/layout.css'],
@@ -13,7 +16,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2026-01-20',
 
   typescript: {
-    typeCheck: true,
+    typeCheck: false,
     strict: true,
   },
 })

package/layers/mailer/nuxt.config.ts

@@ -0,0 +1,26 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'mailer',
+  },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/mailer': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  runtimeConfig: {
+    mailerLayer: {
+      resendApiKey: '', // env: NUXT_MAILER_LAYER_RESEND_API_KEY
+      emailFrom: 'contact@example.com', // env: NUXT_MAILER_LAYER_EMAIL_FROM
+      emailTo: '', // env: NUXT_MAILER_LAYER_EMAIL_TO
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/mailer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "kmcom-layer-mailer",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,mailer pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
+  },
+  "dependencies": {
+    "hookable": "catalog:",
+    "resend": "catalog:"
+  }
+}

package/layers/mailer/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-// Motion Components Index
-// This file serves as the entry point for all motion components
+  // Motion Components Index
+  // This file serves as the entry point for all motion components
 </script>
 
 <template>
@@ -10,7 +10,7 @@
 </template>
 
 <style scoped>
-.motion-components {
-  /* Container for motion components */
-}
+  .motion-components {
+    /* Container for motion components */
+  }
 </style>

package/layers/motion/nuxt.config.ts

@@ -1,36 +1,20 @@
-// Motion Layer - GSAP + Locomotive Scroll
+// Motion orchestrator — composes scroll, animations, transitions, and page-transitions
 export default defineNuxtConfig({
   $meta: {
     name: 'motion',
   },
 
+  extends: ['../scroll', '../animations', '../transitions', '../page-transitions'],
+
   alias: {
     '#layers/motion': import.meta.dirname,
+    '#layers/motion/types': `${import.meta.dirname}/app/types`,
   },
 
-  modules: ['v-gsap-nuxt'],
-
-  vgsap: {
-    composable: true,
-  },
-
-  css: ['#layers/motion/app/assets/css/motion.css'],
-
-  compatibilityDate: '2026-01-30',
+  compatibilityDate: '2026-06-06',
 
   typescript: {
-    typeCheck: true,
+    typeCheck: false,
     strict: true,
   },
-
-  // Ensure GSAP is transpiled for SSR compatibility
-  build: {
-    transpile: ['gsap'],
-  },
-
-  vite: {
-    optimizeDeps: {
-      include: ['locomotive-scroll'],
-    },
-  },
 })

package/layers/motion/package.json

@@ -9,10 +9,5 @@
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",
     "preview": "nuxt preview .playground"
-  },
-  "dependencies": {
-    "gsap": "^3.15.0",
-    "locomotive-scroll": "^5.0.1",
-    "v-gsap-nuxt": "latest"
   }
 }

package/layers/navigation/app/app.config.ts

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+export default defineAppConfig({
+  site: {
+    title: '',
+    subtitle: '',
+    description: '',
+  },
+  mastNav: {
+    links: [] as Array<{
+      id: string
+      label: string
+      to:
+        | string
+        | { name: string; params?: Record<string, unknown>; query?: Record<string, unknown> }
+    }>,
+    scrollBehaviour: 'router' as 'smooth-scroll' | 'router',
+  },
+})
+
+declare module '@nuxt/schema' {
+  type AppConfigInput = {
+    site?: {
+      title?: string
+      subtitle?: string
+      description?: string
+    }
+    mastNav?: {
+      links?: Array<{
+        id: string
+        label: string
+        to:
+          | string
+          | { name: string; params?: Record<string, unknown>; query?: Record<string, unknown> }
+      }>
+      scrollBehaviour?: 'smooth-scroll' | 'router'
+    }
+  }
+}

package/layers/navigation/app/assets/css/navigation.css

@@ -0,0 +1,3 @@
+.site-word {
+  display: block;
+}

package/layers/navigation/app/components/Links/Group.vue

@@ -0,0 +1,49 @@
+<!-- eslint-disable vue/require-name-property -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
+<script lang="ts">
+  // @ts-nocheck
+  // eslint-disable-next-line no-restricted-imports
+  import { cloneVNode, defineComponent, Fragment, h, ref, type VNode } from 'vue'
+
+  export default defineComponent({
+    inheritAttrs: false,
+    props: {
+      tag: { type: String, default: 'div' },
+      dimOpacity: { type: Number, default: 0.3 },
+      duration: { type: Number, default: 200 },
+    },
+    setup(props, { slots, attrs }) {
+      const hoveredIndex = ref<number | null>(null)
+
+      return () => {
+        const children = (slots.default?.() ?? [])
+          .flatMap((node) => (node.type === Fragment ? (node.children as VNode[]) : [node]))
+          .filter((node) => typeof node.type === 'string' || typeof node.type === 'object')
+
+        const styledChildren = children.map((vnode, index) =>
+          cloneVNode(vnode, {
+            onMouseenter: () => {
+              hoveredIndex.value = index
+            },
+            style: {
+              opacity:
+                hoveredIndex.value !== null && hoveredIndex.value !== index ? props.dimOpacity : 1,
+              transition: `opacity ${props.duration}ms ease-out`,
+            },
+          })
+        )
+
+        return h(
+          props.tag,
+          {
+            ...attrs,
+            onMouseleave: () => {
+              hoveredIndex.value = null
+            },
+          },
+          styledChildren
+        )
+      }
+    },
+  })
+</script>

package/layers/navigation/app/components/Links/Named.vue

@@ -0,0 +1,33 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
+<script setup lang="ts">
+  // @ts-nocheck
+  import type { UiColors } from '#layers/typography/types/colors'
+
+  const {
+    name,
+    params = undefined,
+    query = undefined,
+    variant = undefined,
+    color = undefined,
+  } = defineProps<{
+    name: string
+    params?: Record<string, string>
+    query?: Record<string, string>
+    variant?: string
+    color?: UiColors
+  }>()
+  const colorClass = useColor(color, 'text')
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-duplicate-attr-inheritance -->
+  <!-- eslint-disable vue/no-duplicate-attr-inheritance -->
+  <ULink
+    :to="{ name: name, params: params, query: query }"
+    :variant
+    :class="colorClass"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ULink>
+</template>

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

@@ -0,0 +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 © {{ year }}</p>
+      </div>
+    </template>
+  </UFooter>
+</template>

package/layers/{ui → navigation}/app/components/Mast/Header.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-const appConfig = useAppConfig()
-const title = appConfig.site?.title ?? 'Site Title'
+  const appConfig = useAppConfig()
+  const title = appConfig.site?.title ?? 'Site Title'
 </script>
 
 <template>

package/layers/{ui → navigation}/app/components/Mast/Nav.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-const { open } = useMastNav()
-const z = useGridConfig().useZIndex('dropdown')
+  const { open } = useMastNav()
+  const z = useGridConfig().useZIndex('dropdown')
 </script>
 
 <template>

package/layers/navigation/app/components/Mast/NavModal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+  import type { MastNavLink } from '../../types/nav'
+
+  const { open } = defineProps<{ open?: boolean }>()
+  const emit = defineEmits<{
+    'update:open': [value: boolean]
+    close: []
+  }>()
+
+  const { links, scrollBehaviour } = useAppConfig().mastNav as {
+    links: MastNavLink[]
+    scrollBehaviour: string
+  }
+  const activeSection = useState<string>('activeSection', () => '')
+  const route = useRoute()
+  const { close: closeNav } = useMastNav()
+
+  function dismiss() {
+    emit('update:open', false)
+    emit('close')
+    closeNav()
+  }
+
+  function handleNav(link: MastNavLink) {
+    if (scrollBehaviour === 'smooth-scroll' && route.name === 'index') {
+      try {
+        useSmoothScroll().scrollTo(`#${link.id}`)
+      } catch {}
+    } else {
+      navigateTo(link.to)
+    }
+    dismiss()
+  }
+</script>
+
+<template>
+  <Transition name="nav-modal">
+    <div
+      v-if="open"
+      class="bg-default text-default fixed inset-0 flex flex-col items-center justify-center"
+      :style="{ zIndex: useGridConfig().useZIndex('modal') }"
+    >
+      <button
+        class="absolute right-[5vw] top-[3vh] cursor-pointer border-0 bg-transparent p-2"
+        aria-label="Close navigation"
+        @click="dismiss"
+      >
+        <UIcon name="lucide:x" class="size-7" />
+      </button>
+
+      <LinksGroup tag="nav" class="flex flex-col items-center gap-2">
+        <button
+          v-for="link in links"
+          :key="link.id"
+          class="cursor-pointer border-0 bg-transparent px-4 py-3 text-3xl uppercase tracking-widest transition-all"
+          :class="activeSection === link.id ? 'font-normal' : 'font-light'"
+          @click="() => handleNav(link)"
+        >
+          {{ link.label }}
+        </button>
+      </LinksGroup>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+  .nav-modal-enter-active,
+  .nav-modal-leave-active {
+    transition: opacity 300ms ease;
+  }
+
+  .nav-modal-enter-from,
+  .nav-modal-leave-to {
+    opacity: 0;
+  }
+</style>

package/layers/{ui → navigation}/app/composables/mastNav.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 import MastNavModal from '../components/Mast/NavModal.vue'
 
 function _useMastNav() {
@@ -7,15 +8,17 @@ function _useMastNav() {
   const modal = overlay.create(MastNavModal)
 
   function open() {
-    try { useSmoothScroll().lockScrolling() }
-    catch {}
+    try {
+      useSmoothScroll().lockScrolling()
+    } catch {}
     modal.open()
   }
 
   function close() {
     modal.close()
-    try { useSmoothScroll().unlockScrolling() }
-    catch {}
+    try {
+      useSmoothScroll().unlockScrolling()
+    } catch {}
   }
 
   return { open, close }

package/layers/{ui → navigation}/app/composables/toast.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 type ToastOptions = {
   description?: string
   duration?: number

package/layers/{ui → navigation}/app/composables/useSite.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import { splitSpaces } from '../utils/regex'
 
 export function useSite() {

package/layers/navigation/app/types/nav.ts

@@ -0,0 +1,11 @@
+export type MastNavLink = {
+  id: string
+  label: string
+  to:
+    | string
+    | {
+        name: string
+        params?: Record<string, string | number>
+        query?: Record<string, string | number>
+      }
+}

package/layers/{ui → navigation}/app/utils/createModal.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import type { Component } from 'vue'
 
-export interface ModalController<P extends Record<string, unknown>> {
+export type ModalController<P extends Record<string, unknown>> = {
   open: (props?: Partial<P>) => void
   close: () => void
   patch: (props: Partial<P>) => void