kmcom-nuxt-layers 2.7.5 → 3.0.0

package/layers/core/app/error.vue

@@ -1,69 +1,40 @@
-<template>
-  <div>
-    <p>error</p>
-  </div>
-</template>
-
-<!-- <script setup lang="ts">
-import type { NuxtError } from '#app'
-
-const props = defineProps({
-  error: Object as () => NuxtError,
-})
+<script setup lang="ts">
+  import type { NuxtError } from '#app'
 
-// Determine if this is a 404 or other error
-const is404 = computed(() => props.error?.statusCode === 404)
+  const { error } = defineProps<{ error: NuxtError }>()
 
-// Error details
-const statusCode = computed(() => props.error?.statusCode || 500)
-const message = computed(() => {
-  if (is404.value) {
-    return 'This page could not be found.'
-  }
-  return props.error?.message || 'An unexpected error occurred.'
-})
-
-// Error icon
-const icon = computed(() => {
-  if (is404.value) return 'i-lucide-file-question'
-  return 'i-lucide-alert-triangle'
-})
-
-// Error title
-const title = computed(() => {
-  if (is404.value) return 'Page Not Found'
-  return 'Something Went Wrong'
-})
+  const is404 = computed(() => error?.statusCode === 404)
+  const statusCode = computed(() => error?.statusCode || 500)
+  const title = computed(() => (is404.value ? 'Page Not Found' : 'Something Went Wrong'))
+  const message = computed(() =>
+    is404.value
+      ? 'This page could not be found.'
+      : error?.message || 'An unexpected error occurred.'
+  )
+  const icon = computed(() => (is404.value ? 'i-lucide-file-question' : 'i-lucide-alert-triangle'))
 
-// Clear error and redirect home
-const handleError = () => clearError({ redirect: '/' })
+  const isDev = import.meta.dev
 
-// Reload page
-const reloadPage = () => {
-  if (import.meta.client) {
-    window.location.reload()
+  const handleError = () => clearError({ redirect: '/' })
+  const reloadPage = () => {
+    if (import.meta.client) window.location.reload()
   }
-}
 
-// SEO
-useSeoMeta({
-  title: `${statusCode.value} - ${title.value}`,
-  robots: 'noindex, nofollow',
-})
-</script> -->
+  useSeoMeta({
+    title: `${statusCode.value} - ${title.value}`,
+    robots: 'noindex, nofollow',
+  })
+</script>
 
-<!-- <template>
+<template>
   <div class="flex min-h-screen items-center justify-center p-4 md:p-8">
     <UContainer>
       <div class="mx-auto max-w-2xl">
         <UEmpty :icon :title size="xl">
           <template #description>
             <div class="space-y-2">
-              <p class="text-[var(--ui-text-muted)]">{{ message }}</p>
-              <code
-                v-if="error?.statusMessage"
-                class="block rounded bg-[var(--ui-bg-elevated)] px-2 py-1 text-sm"
-              >
+              <p class="text-muted">{{ message }}</p>
+              <code v-if="error?.statusMessage" class="block rounded bg-elevated px-2 py-1 text-sm">
                 {{ error.statusMessage }}
               </code>
             </div>
@@ -88,10 +59,9 @@ useSeoMeta({
               />
             </div>
           </template>
-        </UEmpty> -->
+        </UEmpty>
 
-<!-- Stack trace for development -->
-<!-- <UCard v-if="error?.stack && import.meta.dev" class="mt-8">
+        <UCard v-if="error?.stack && isDev" class="mt-8">
           <template #header>
             <h3 class="text-sm font-semibold">Error Details (Development Only)</h3>
           </template>
@@ -100,4 +70,4 @@ useSeoMeta({
       </div>
     </UContainer>
   </div>
-</template> -->
+</template>

package/layers/core/app/pages/[...slug].vue

@@ -1,33 +1,5 @@
 <script setup lang="ts">
-  // Type definition for notFound config
-  interface NotFoundConfig {
-    icon?: string
-    title?: string
-    description?: string
-    showPath?: boolean
-    showHomeButton?: boolean
-    homeButtonLabel?: string
-    homeButtonTo?: string
-    showBackButton?: boolean
-    backButtonLabel?: string
-    actions?: Array<{
-      label: string
-      to?: string
-      icon?: string
-      color?: 'primary' | 'neutral' | 'error' | 'success'
-      variant?: 'solid' | 'outline' | 'ghost' | 'soft'
-      click?: () => void
-    }>
-    suggestions?: {
-      enabled?: boolean
-      title?: string
-      links?: Array<{
-        label: string
-        to: string
-        icon?: string
-      }>
-    }
-  }
+  import type { NotFoundConfig } from '#layers/core/types/notFound'
 
   // App configuration
   const appConfig = useAppConfig()

package/layers/core/app/plugins/loading.client.ts

@@ -29,27 +29,21 @@ export default defineNuxtPlugin({
     const config = useAppConfig()
     const coreLayer = config.coreLayer as CoreLayerConfig | undefined
 
-    // console.log('[Loading Plugin] Config:', coreLayer?.loading)
-
     // Check if loading is enabled
     if (coreLayer?.loading?.enabled === false) {
-      // console.log('[Loading Plugin] Disabled')
       return // Disabled, skip initialization
     }
 
     const { startLoading, stopLoading } = useLoading()
 
-    // console.log('[Loading Plugin] Starting loading...')
     // Start loading immediately on plugin load
     startLoading()
 
     // Stop loading when app is fully mounted
     nuxtApp.hook('app:mounted', () => {
-      // console.log('[Loading Plugin] App mounted, will stop in 500ms')
       // Add a small delay to ensure LoadingScreen component has mounted
       // and is visible before we stop loading
       setTimeout(() => {
-        // console.log('[Loading Plugin] Stopping loading now')
         stopLoading()
       }, 500) // 500ms delay to ensure component is visible
     })

package/layers/core/app/types/element.ts

@@ -0,0 +1,25 @@
+import type { Component } from 'vue'
+
+import type { ElementGridProps } from '../composables/useElementGrid'
+import type { ElementInteractionProps } from '../composables/useElementInteraction'
+import type { ElementLayoutProps } from '../composables/useElementLayout'
+import type { ElementSizingProps } from '../composables/useElementSizing'
+import type { ElementSurfaceProps } from '../composables/useElementSurface'
+// Relative, not the '#layers/core' alias: the SFC compiler's macro type
+// resolution (defineProps<ElementProps>() in Element.vue) walks tsconfig
+// "paths" directly and doesn't see Nuxt's generated layer aliases outside
+// a running Nuxt instance — a plain relative import resolves everywhere.
+import type { LayoutAttrsInput } from '../composables/useLayoutAttrs'
+
+export type ElementProps = ElementLayoutProps &
+  ElementGridProps &
+  LayoutAttrsInput &
+  ElementSizingProps &
+  ElementSurfaceProps &
+  ElementInteractionProps & {
+    as?: string | Component
+    // Escape hatch for prop names that collide with Element's own (e.g. `color`
+    // is Element's raw-CSS text colour, but also UBadge's semantic colour prop).
+    // Non-colliding component props still reach `as` for free via attrs fallthrough.
+    componentProps?: Record<string, unknown>
+  }

package/layers/core/app/types/index.ts

@@ -7,5 +7,4 @@
 export type * from './detection'
 export type * from './runtime-config'
 export type * from './loading'
-export type * from './scroll-guard'
 export type * from './site'

package/layers/core/app/types/notFound.ts

@@ -0,0 +1,24 @@
+export type NotFoundConfig = {
+  icon?: string
+  title?: string
+  description?: string
+  showPath?: boolean
+  showHomeButton?: boolean
+  homeButtonLabel?: string
+  homeButtonTo?: string
+  showBackButton?: boolean
+  backButtonLabel?: string
+  actions?: Array<{
+    label: string
+    to?: string
+    icon?: string
+    color?: 'primary' | 'neutral' | 'error' | 'success'
+    variant?: 'solid' | 'outline' | 'ghost' | 'soft'
+    click?: () => void
+  }>
+  suggestions?: {
+    enabled?: boolean
+    title?: string
+    links?: Array<{ label: string; to: string; icon?: string }>
+  }
+}

package/layers/core/app/types/responsive.ts

@@ -0,0 +1,15 @@
+/**
+ * Canonical `ResponsiveValue<T>` for layers/core and layers/ui.
+ *
+ * Object shape only — no array shorthand. Distinct from
+ * `layers/layout/app/types/layouts.ts`'s own `ResponsiveValue`, which stays
+ * as-is (used by GridConfig/GridPresetsItem, not migrated this pass). Do not
+ * wildcard-re-export both into one namespace.
+ */
+export type ResponsiveValue<T> = {
+  default: T
+  sm?: T
+  md?: T
+  lg?: T
+  xl?: T
+}

package/layers/core/app/types/responsive.type-test.ts

@@ -0,0 +1,22 @@
+// fallow-ignore-file unused-file
+/**
+ * Compile-time-only checks for `ResponsiveValue<T>` (spec §13, §23). Nothing
+ * here runs — `pnpm typecheck` is what verifies these `@ts-expect-error`
+ * directives still land on a real error. No vitest runner picks this file up.
+ */
+import type { ResponsiveValue } from './responsive'
+import type { Spacing } from './tokens'
+
+const valid: ResponsiveValue<Spacing> = { default: 'md', lg: 'lg' }
+const staticOnly: ResponsiveValue<Spacing> = { default: 'sm' }
+
+// @ts-expect-error — array shorthand is rejected; object shape only.
+const arrayShorthand: ResponsiveValue<Spacing> = ['sm', 'md']
+
+// @ts-expect-error — an invalid token string is rejected.
+const invalidToken: ResponsiveValue<Spacing> = { default: 'huge' }
+
+// @ts-expect-error — `default` is required, not optional.
+const missingDefault: ResponsiveValue<Spacing> = { lg: 'md' }
+
+export { arrayShorthand, invalidToken, missingDefault, staticOnly, valid }

package/layers/core/app/types/runtime-config.ts

@@ -5,26 +5,10 @@
  * Extends Nuxt's RuntimeConfig with core layer specifics
  */
 
-export type CoreLayerRuntimeConfig = {
-  // Server-side only (private)
-  secretKey?: string
-  apiSecretKey?: string
-  databaseUrl?: string
-
-  // Public (exposed to client)
-  public: {
-    apiUrl?: string
-    appName?: string
-    appVersion?: string
-    environment?: 'development' | 'staging' | 'production'
-    siteUrl?: string
-  }
-}
-
 /**
  * Augment Nuxt's RuntimeConfig
  */
-declare module 'nuxt/schema' {
+declare module '@nuxt/schema' {
   interface RuntimeConfig {
     secretKey?: string
     apiSecretKey?: string

package/layers/core/app/types/tokens.ts

@@ -0,0 +1,29 @@
+/**
+ * Design-system tokens — hand-written unions for this pass, kept in sync
+ * with layers/core/app/assets/css/tokens/*.css by convention. Derived from a
+ * config object only in Phase 2 (see nuxt-declarative-layout-system-spec.md §21).
+ */
+export type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+
+/**
+ * Matches the existing GridContainerSize values (layers/layout/app/types/layouts.ts).
+ * Consumed by AppContainer.vue's <script setup>.
+ */
+export type ContainerSize = 'content' | 'wide' | 'fluid' | 'full'
+
+/**
+ * Canonical breakpoint pixel values — mirrors breakpoints.css's `--breakpoint-*`
+ * vars (rem). JS/TS consumers that need a number (matchMedia, resize
+ * listeners) read this instead of hand-duplicating Tailwind's defaults.
+ * Consumed cross-package (layers/layout, layers/visual) via the
+ * `#layers/core/types` alias.
+ */
+export const BREAKPOINT_PX = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+} as const
+
+// fallow-ignore-next-line unused-type
+export type Breakpoint = keyof typeof BREAKPOINT_PX

package/layers/core/app/utils/index.ts

@@ -4,5 +4,7 @@
  * Central export for all utility functions
  */
 
-export * from './helpers'
-export * from './regex'
+export * from './browserInfo'
+export * from './featureClasses'
+export * from './scrollGuardClamp'
+export * from './styleToTailwindClasses'

package/layers/core/app/utils/scrollGuardClamp.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+
+import { isOverflowing, shouldExclude } from './scrollGuardClamp'
+
+describe('isOverflowing', () => {
+  it('is true when scrollWidth exceeds the viewport width', () => {
+    expect(isOverflowing(1200, 1024)).toBe(true)
+  })
+
+  it('is false when scrollWidth is within the viewport width', () => {
+    expect(isOverflowing(800, 1024)).toBe(false)
+  })
+
+  it('is false when scrollWidth equals the viewport width', () => {
+    expect(isOverflowing(1024, 1024)).toBe(false)
+  })
+})
+
+describe('shouldExclude', () => {
+  it('is true when any selector matches', () => {
+    const matches = (sel: string) => sel === '.carousel'
+    expect(shouldExclude(matches, ['.overflow-intent', '.carousel'])).toBe(true)
+  })
+
+  it('is false when no selector matches', () => {
+    const matches = () => false
+    expect(shouldExclude(matches, ['.carousel', '.overflow-intent'])).toBe(false)
+  })
+
+  it('swallows an invalid selector and treats it as non-matching', () => {
+    const matches = () => {
+      throw new DOMException('invalid selector')
+    }
+    expect(shouldExclude(matches, ['::not-a-real-selector'])).toBe(false)
+  })
+})

package/layers/core/app/utils/scrollGuardClamp.ts

@@ -0,0 +1,22 @@
+/**
+ * Pure decision logic pinned down from the removed `useScrollGuard` composable
+ * before deletion (see `2026-08-30-layer-taxonomy-tier-0-1-design.md`). Kept as
+ * a characterization test subject only — nothing imports this in production.
+ */
+
+export function shouldExclude(
+  matches: (selector: string) => boolean,
+  excludeSelectors: string[]
+): boolean {
+  return excludeSelectors.some((sel) => {
+    try {
+      return matches(sel)
+    } catch {
+      return false
+    }
+  })
+}
+
+export function isOverflowing(scrollWidth: number, viewportWidth: number): boolean {
+  return scrollWidth > viewportWidth
+}

package/layers/core/app/utils/styleToTailwindClasses.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { styleToTailwindClasses } from './styleToTailwindClasses'
+
+describe('styleToTailwindClasses', () => {
+  it('converts a camelCase property into a kebab-case arbitrary-property class', () => {
+    expect(styleToTailwindClasses({ background: 'red' })).toEqual(['[background:red]'])
+    expect(styleToTailwindClasses({ gridTemplateColumns: 'repeat(12, 1fr)' })).toEqual([
+      '[grid-template-columns:repeat(12,_1fr)]',
+    ])
+  })
+
+  it('escapes spaces in the value with underscores', () => {
+    expect(styleToTailwindClasses({ boxShadow: '0 1px 2px rgba(0,0,0,.1)' })).toEqual([
+      '[box-shadow:0_1px_2px_rgba(0,0,0,.1)]',
+    ])
+  })
+
+  it('skips undefined, null, and empty-string values', () => {
+    expect(
+      styleToTailwindClasses({ width: undefined, height: null as unknown as undefined, color: '' })
+    ).toEqual([])
+  })
+
+  it('preserves declaration order across multiple properties', () => {
+    expect(styleToTailwindClasses({ display: 'flex', width: '80px' })).toEqual([
+      '[display:flex]',
+      '[width:80px]',
+    ])
+  })
+})

package/layers/core/app/utils/styleToTailwindClasses.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'vue'
+
+/**
+ * Converts a merged CSSProperties object into Tailwind v4 arbitrary-property
+ * classes (`[property:value]`), one per declaration. Lets ElementTw reuse the
+ * same style composables as Element instead of a second class-generation path.
+ */
+export function styleToTailwindClasses(style: Partial<CSSProperties>): string[] {
+  return Object.entries(style)
+    .filter(([, value]) => value !== undefined && value !== null && value !== '')
+    .map(([property, value]) => {
+      const kebabProperty = property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+      const escapedValue = String(value).replace(/\s+/g, '_')
+      return `[${kebabProperty}:${escapedValue}]`
+    })
+}

package/layers/core/nuxt.config.ts

@@ -5,8 +5,11 @@ export default defineNuxtConfig({
   },
 
   alias: {
-    '#layers/core': import.meta.dirname,
+    // More specific key first — Vite/vite-node's alias matcher is first-match-wins
+    // (declaration order), not longest-prefix. '#layers/core' would otherwise
+    // intercept '#layers/core/types/*' lookups before this entry is reached.
     '#layers/core/types': `${import.meta.dirname}/app/types`,
+    '#layers/core': import.meta.dirname,
     '#types': `${import.meta.dirname}/../../types`,
   },
 
@@ -17,8 +20,9 @@ export default defineNuxtConfig({
     // '@nuxt/image'
     '@vueuse/nuxt',
     '@nuxtjs/device',
-    // PWA module - only in production
-    ...(process.env.NODE_ENV === 'production' ? ['@vite-pwa/nuxt'] : []),
+    // PWA module — disabled pending a decision on the PWA approach; useCache/usePWAInfo
+    // stay in place, dormant, ready to re-enable.
+    // ...(process.env.NODE_ENV === 'production' ? ['@vite-pwa/nuxt'] : []),
   ],
 
   css: ['#layers/core/app/assets/css/core.css'],
@@ -38,7 +42,7 @@ export default defineNuxtConfig({
   },
 
   future: {
-    compatibilityVersion: 4,
+    compatibilityVersion: 5,
   },
 
   compatibilityDate: '2026-01-24',
@@ -76,11 +80,11 @@ export default defineNuxtConfig({
     },
   },
 
-  // PWA configuration (only applied when module is loaded in production)
-  pwa: {
-    workbox: {
-      globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff,woff2}'],
-      globIgnores: ['**/node_modules/**/*', 'sw.js', 'workbox-*.js'],
-    },
-  },
+  // PWA configuration — dormant while @vite-pwa/nuxt is disabled above.
+  // pwa: {
+  //   workbox: {
+  //     globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff,woff2}'],
+  //     globIgnores: ['**/node_modules/**/*', 'sw.js', 'workbox-*.js'],
+  //   },
+  // },
 })

package/layers/core/package.json

@@ -23,6 +23,7 @@
     "@iconify/vue": "catalog:"
   },
   "devDependencies": {
-    "@vite-pwa/nuxt": "catalog:"
+    "@vite-pwa/nuxt": "catalog:",
+    "@vue/test-utils": "catalog:"
   }
 }

package/layers/{auth → data/auth}/nuxt.config.ts

@@ -3,7 +3,7 @@ export default defineNuxtConfig({
     name: 'auth',
   },
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   modules: ['nuxt-auth-utils'],
 

package/layers/{auth → data/auth}/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,auth pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "lint": "eslint ."
   },
   "dependencies": {

package/layers/{baseline → data/auth}/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../apps/playground/tsconfig.json",
+  "extends": "../../../apps/playground/tsconfig.json",
   "compilerOptions": {
     "strict": true
   },

package/layers/{database → data/database}/nuxt.config.ts

@@ -3,7 +3,7 @@ export default defineNuxtConfig({
     name: 'database',
   },
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   alias: {
     '#layers/database': import.meta.dirname,

package/layers/{database → data/database}/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,database pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "lint": "eslint ."
   },
   "dependencies": {

package/layers/{database → data/database}/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../apps/playground/tsconfig.json",
+  "extends": "../../../apps/playground/tsconfig.json",
   "compilerOptions": {
     "strict": true
   },

package/layers/{forms/app/types/app-config.d.ts → data/forms/app/app.config.ts}

@@ -1,3 +1,7 @@
+export default defineAppConfig({
+  formsLayer: {},
+})
+
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     formsLayer?: {

package/layers/{forms → data/forms}/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,mailer,forms pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "lint": "eslint ."
   },
   "dependencies": {

package/layers/{forms → data/forms}/server/api/forms/status.get.ts

@@ -1,9 +1,11 @@
 import { useMailerConfig } from '#layers/mailer/server/utils/config'
 
 export default defineEventHandler(() => {
-  const { resendApiKey } = useMailerConfig()
+  const { resendApiKey, emailFrom, emailTo } = useMailerConfig()
 
   return {
     configured: Boolean(resendApiKey),
+    emailFrom,
+    emailTo,
   }
 })

package/layers/{animations → data/forms}/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../apps/playground/tsconfig.json",
+  "extends": "../../../apps/playground/tsconfig.json",
   "compilerOptions": {
     "strict": true
   },

package/layers/{mailer → data/mailer}/nuxt.config.ts

@@ -3,7 +3,7 @@ export default defineNuxtConfig({
     name: 'mailer',
   },
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   alias: {
     '#layers/mailer': import.meta.dirname,
@@ -24,3 +24,13 @@ export default defineNuxtConfig({
     strict: true,
   },
 })
+
+declare module '@nuxt/schema' {
+  interface RuntimeConfig {
+    mailerLayer?: {
+      resendApiKey: string
+      emailFrom: string
+      emailTo: string
+    }
+  }
+}

package/layers/{mailer → data/mailer}/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,mailer pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "lint": "eslint ."
   },
   "dependencies": {

package/layers/{auth → data/mailer}/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../apps/playground/tsconfig.json",
+  "extends": "../../../apps/playground/tsconfig.json",
   "compilerOptions": {
     "strict": true
   },